【WordPress】add_shortcode() でオリジナルショートコードを作成する方法

WordPressのショートコードは、投稿や固定ページ、ウィジェットなどに簡単にカスタム機能を埋め込める強力な仕組みです。

この記事では、add_shortcode() 関数を使って、自分だけのオリジナルショートコードを作成する方法をわかりやすく解説します。

ショートコードとは？

ショートコードは、[ショートコード名] の形式で本文中に書くことで、特定のPHP関数の出力を簡単に表示できるタグのようなものです。

例えば [gallery] はギャラリーを表示するショートコードの一例です。

自作のショートコードを作れば、オリジナルのコンテンツや機能を投稿内に気軽に挿入できます。

add_shortcode() の基本構文

add_shortcode( $tag, $callback );

• $tag：ショートコードの名前（文字列）。投稿内で使うときのタグ名です。
• $callback：ショートコードが呼ばれたときに実行される関数名または無名関数。

簡単な例

function my_greeting_shortcode() {
    return '<p>こんにちは！これはオリジナルショートコードです。</p>';
}
add_shortcode( 'greeting', 'my_greeting_shortcode' );

これをテーマの functions.php に追加し、投稿内で [greeting] と書くと、以下のように表示されます。

「こんにちは！これはオリジナルショートコードです。」

ショートコードに引数（属性）を渡す方法

ショートコードには引数（属性）を渡して、動的に内容を変えることも可能です。

function my_greeting_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'name' => 'ゲスト',
    ), $atts, 'greeting' );

    return '<p>こんにちは、' . esc_html( $atts['name'] ) . 'さん！</p>';
}
add_shortcode( 'greeting', 'my_greeting_shortcode' );

使い方：

[greeting name="太郎"]

表示例：

こんにちは、太郎さん！

shortcode_atts() を使うことで、デフォルト値を設定しつつ属性を受け取れます。

以下は記事にそのまま追加できる形式での出力です。

囲み型ショートコードの作り方

ショートコードには、[greeting] のように単体で使うものと、以下のように囲み型（コンテンツを挟むタイプ）のものがあります。

[highlight]この文章を目立たせたい[/highlight]

このような形式では、ショートコードのコールバック関数に第2引数 $content を追加することで、囲まれた内容を取得できます。

実装例：テキストを強調表示するショートコード

function my_highlight_shortcode( $atts, $content = null ) {
    return '<span class="highlight">' . do_shortcode( $content ) . '</span>';
}
add_shortcode( 'highlight', 'my_highlight_shortcode' );

このショートコードは、挟まれたテキストを <span class="highlight"> タグで囲み、CSSで見た目をカスタマイズできます。

CSS例：

.highlight {
    background-color: yellow;
    font-weight: bold;
}

使用例：

[highlight]重要な情報はこちら[/highlight]

出力例：

<span class="highlight">重要な情報はこちら</span>

このように囲み型のショートコードを使えば、投稿内の特定のコンテンツだけを装飾したり、特別な処理を行ったりすることが可能です。

特に装飾や注意喚起など、一部の文章だけを強調したいときに便利です。

ショートコード内でHTMLを返す場合の注意点

ショートコードの返り値は、必ず文字列で返す必要があります。
echo で出力すると期待通りに動かないので注意してください。

function example_shortcode() {
    return '<div class="example">ここがショートコードの内容です。</div>';
}
add_shortcode( 'example', 'example_shortcode' );

ショートコードのネストについて

ショートコードは入れ子にできる場合がありますが、複雑なネストは動作が不安定になることもあります。

必要に応じて do_shortcode() 関数で中のショートコードを明示的に処理できます。

ダイナミックブロックの登場でショートコードの役割はどう変わった？

WordPressでは、ショートコードが長らくカスタム機能の埋め込み方法として主流でしたが、最近ではブロックエディタ（Gutenberg）の「ダイナミックブロック」が使われるようになりました。

ダイナミックブロックとは？

• ブロックエディタで使える「動的に内容が変わるブロック」です。
• PHPやJavaScriptで処理を書き、リアルタイムに投稿編集画面で内容をプレビュー可能。
• 見た目や動作のカスタマイズ性が高い。

ショートコードとの違い

ショートコードは不要？

ダイナミックブロックの普及で、多くの用途でショートコードは使われなくなりつつありますが、完全に不要になったわけではありません。

• 旧テーマやプラグインとの互換性
• 簡単なテキスト置換的な使い方
• ブロック未対応の環境での利便性
• ブロックエディターの開発ができない現場での利用

など、まだまだ使われ続けています。

まとめ

• add_shortcode() で簡単にオリジナルショートコードが作れる
• ショートコードは文字列を返す関数を登録する
• 引数を受け取る場合は shortcode_atts() でデフォルト値を設定するのが便利
• テーマの functions.php やプラグイン内で登録可能

ぜひ、自分だけの便利なショートコードを作ってWordPressをもっと自由にカスタマイズしましょう。