こんにちは、阿久梨絵です！
WordPress のショートコードを使うと、特定の機能を簡単に呼び出せるため、
記事やページの編集がスムーズになります。
例えば、ボタン・埋め込みコンテンツ・カスタムレイアウトなどを、短いコードで簡単に追加 できるのがショートコードの魅力です！
この記事では、独自ショートコードの作成方法と活用例を詳しく解説します。
1. ショートコードとは？
ショートコード（Shortcode）は、WordPressの投稿やページ内で、特定の機能を簡単に呼び出せるコード です。
例えば、以下のようなショートコードを使うと
[button text=”クリック” link=”https://example.com”]
このコードを記事に挿入すると、ボタンが表示されます！
・定型の機能を簡単に追加できる
・コードを短縮し、管理を楽にする
・カスタム機能を自由に作成できる
2. 独自ショートコードの作成方法
WordPressでは、functions.php にコードを追加することで、独自ショートコードを作成できます。
① シンプルなショートコード
以下のコードを functions.php に追加すると、
「Hello, WordPress!」を表示するショートコードを作成できます。
function my_shortcode() {
return “<p>Hello, WordPress!</p>”;
}
add_shortcode(‘hello’, ‘my_shortcode’);
記事内で [hello] と入力すると、「Hello, WordPress!」が表示されます！
② パラメータ付きショートコード
ショートコードにパラメータを追加 すると、動的なコンテンツを生成 できます。
function custom_button_shortcode($atts) {
$atts = shortcode_atts([
‘text’ => ‘クリック’,
‘link’ => ‘#’
], $atts);
return ‘<a href=”‘ . esc_url($atts[‘link’]) . ‘” class=”custom-button”>’ . esc_html($atts[‘text’]) . ‘</a>’;
}
add_shortcode(‘button’, ‘custom_button_shortcode’);
記事内で [button text=”詳細はこちら” link=”https://example.com”] と入力すると、ボタンが表示されます！
③ 囲み型ショートコード
囲み型ショートコードを使うと、特定のテキストを装飾することが可能 です。
function highlight_shortcode($atts, $content = null) {
return ‘<span class=”highlight”>’ . esc_html($content) . ‘</span>’;
}
add_shortcode(‘highlight’, ‘highlight_shortcode’);
記事内で [highlight]重要な情報[/highlight] と入力すると、テキストが強調表示されます！
3. ショートコードの活用例
・ボタンの追加 → [button text=”購入する” link=”https://shop.com”]
・カスタムレイアウト → [highlight]この部分を強調[/highlight]
・埋め込みコンテンツ → [youtube id=”動画ID”]
・動的なデータ表示 → [user_name] でログインユーザー名を表示
ショートコードを活用すると、WordPressの編集がより便利になります！
まとめ
・ショートコードを使うと、記事やページに簡単に便利な機能を追加できる！
・functions.php にコードを追加すれば、独自ショートコードを作成可能
・パラメータ付き・囲み型ショートコードを活用すると、カスタム機能を自由に追加できる
・ボタン・埋め込みコンテンツ・カスタムレイアウトなど、幅広い用途に対応！
WordPressサイトを運営するなら、独自ショートコードの活用は必須のカスタマイズ です！
ぜひ、適切な方法でショートコードを作成し、サイトの利便性を向上させましょう。
阿久梨絵でした！
