WordPressショートコードとは？使い方・作り方・表示されない原因まで初心者向けに徹底解説

はじめに

WordPressでブログやホームページを運営していると、「ショートコード」という言葉を目にすることがあります。

たとえば、お問い合わせフォームを設置するときに、次のような文字列を投稿画面に貼り付けた経験はないでしょうか。

[contact-form-7 id="123" title="お問い合わせ"]

このように、角括弧で囲まれた短いコードを使って、フォームやギャラリー、ボタン、ランキング、関連記事などを表示できる仕組みが「WordPressショートコード」です。

ワードプレスのショートコードを使えば、HTMLやPHPの知識が少ない初心者でも、複雑な機能を簡単にページ内へ挿入できます。一方で、「貼り付けたのに表示されない」「コードがそのまま表示される」「テーマを変えたら使えなくなった」といったトラブルも起こりがちです。

この記事では、WordPressショートコードとは何か、基本的な使い方、よく使われる例、自作ショートコードの作り方、表示されない原因と対処法まで、初心者にもわかりやすく解説します。

1. WordPressショートコードとは？

1-1. ショートコードの基本的な意味

WordPressショートコードとは、短い文字列を投稿や固定ページに入力するだけで、あらかじめ用意された機能や表示内容を呼び出せる仕組みです。

ショートコードは、基本的に次のように角括弧で囲んで使います。

[ショートコード名]

たとえば、ギャラリーを表示する場合は次のようなショートコードを使います。

[gallery]

また、オプションを指定できるショートコードもあります。

[gallery ids="1,2,3" columns="3"]

この例では、表示する画像IDやカラム数を指定しています。見た目は短い文字列ですが、WordPress側ではこのショートコードを読み取り、実際のHTMLや機能に変換してページに表示します。

つまり、ショートコードは「複雑な処理を短いコードで呼び出すための合言葉」のようなものです。

1-2. ショートコードでできること

WordPressショートコードを使うと、さまざまな機能を簡単に表示できます。

代表的な例としては、以下のようなものがあります。

お問い合わせフォームの表示、画像ギャラリーの表示、動画や音声の埋め込み、商品ランキングの表示、関連記事一覧の表示、ボタンの挿入、会員限定コンテンツの表示、広告タグの挿入、吹き出しや装飾ボックスの表示などです。

通常、これらをHTMLやPHPで手作業で作るには専門的な知識が必要です。しかし、ショートコードを使えば、投稿本文に短いコードを貼り付けるだけで表示できます。

特にプラグインを利用している場合、多くのプラグインが専用のショートコードを発行します。たとえば、お問い合わせフォームプラグイン、予約システム、EC機能、ランキング作成プラグイン、スライダープラグインなどでは、作成したパーツをページに表示するためにショートコードがよく使われます。

1-3. HTML・ブロック・ウィジェットとの違い

ショートコードと混同されやすいものに、HTML、ブロック、ウィジェットがあります。

HTMLは、Webページの構造を作るためのマークアップ言語です。たとえば、見出し、段落、リンク、画像などを直接記述できます。

HTML
<a href="https://example.com">詳しく見る</a>

一方、ショートコードはHTMLそのものではありません。WordPressがショートコードを処理し、最終的にHTMLへ変換して表示します。

ブロックは、現在のWordPressで標準的に使われている編集単位です。段落ブロック、画像ブロック、ボタンブロック、カラムブロックなどを画面上で組み合わせてページを作成できます。

ウィジェットは、サイドバーやフッターなど、テーマ内の特定エリアにパーツを表示する仕組みです。最近のWordPressでは、ウィジェットエリアでもブロックを使って編集する形式が一般的です。

簡単に整理すると、HTMLはページを構成するためのコード、ブロックは管理画面上で視覚的に編集するパーツ、ウィジェットはサイドバーやフッターなどに配置する部品、ショートコードは特定の機能を短い文字列で呼び出す仕組みです。

1-4. ショートコードが初心者に便利な理由

ショートコードが初心者に便利な理由は、専門的なコードを書かなくても機能を追加できるからです。

たとえば、お問い合わせフォームを設置したい場合、通常であればHTML、CSS、PHP、メール送信処理などの知識が必要になります。しかし、フォーム作成プラグインを使えば、作成されたショートコードを固定ページに貼り付けるだけでフォームを表示できます。

また、同じパーツを複数ページで使い回しやすい点もメリットです。たとえば、キャンペーン用のボタンや定型の案内文をショートコード化しておけば、投稿ごとに同じHTMLを何度も書く必要がありません。

さらに、デザインや機能の管理を一か所にまとめやすくなります。ショートコードの中身を変更すれば、そのショートコードを使っている複数のページに変更を反映できる場合があります。

このように、ワードプレスのショートコードは、初心者が効率よくサイトを作るうえで非常に便利な機能です。

2. WordPressショートコードの基本的な使い方

2-1. 投稿・固定ページにショートコードを貼り付ける方法

もっとも基本的な使い方は、投稿や固定ページの本文内にショートコードを貼り付ける方法です。

たとえば、お問い合わせページにフォームを表示したい場合、プラグインが発行したショートコードをコピーし、固定ページの本文に貼り付けます。

[contact-form-7 id="123" title="お問い合わせ"]

その後、ページを公開または更新し、実際のページを確認します。正しく設定されていれば、ショートコードの文字列ではなく、お問い合わせフォームが表示されます。

注意点として、ショートコードは基本的に半角の角括弧で記述します。全角の［ ］を使ったり、余計なスペースが入ったりすると、正しく動作しない場合があります。

また、ショートコード名はプラグインやテーマによって異なります。似たような名前でも別のショートコードとして扱われるため、必ず発行元の画面や公式説明に記載されているコードをそのままコピーするのが安全です。

2-2. ブロックエディターでショートコードを使う方法

現在のWordPressで主に使われているブロックエディターでは、「ショートコード」ブロックを使ってショートコードを挿入できます。

手順は次のとおりです。

投稿または固定ページの編集画面を開きます。ブロック追加ボタンをクリックします。検索欄に「ショートコード」と入力します。「ショートコード」ブロックを選択します。表示された入力欄にショートコードを貼り付けます。プレビューまたは公開後のページで表示を確認します。

ショートコードブロックを使うと、段落ブロックに混ぜて入力するよりも、ショートコード部分を管理しやすくなります。

ただし、すべてのショートコードが編集画面上でリアルタイムにプレビューされるとは限りません。編集画面ではショートコードの文字列だけが見えていても、公開ページでは正しく表示されることがあります。そのため、最終的な確認はプレビュー画面や実際の公開ページで行いましょう。

2-3. クラシックエディターでショートコードを使う方法

クラシックエディターを使っている場合は、本文入力欄にそのままショートコードを貼り付けます。

ビジュアルエディターでもテキストエディターでも、基本的にはショートコードを入力できます。

[gallery ids="10,11,12"]

クラシックエディターでは、ショートコードの前後に不要なHTMLタグが入ることがあります。特に、コピー元によっては余計な装飾や改行が含まれる場合があるため、うまく動かないときはテキストエディター側で余計なタグが入っていないか確認しましょう。

また、ショートコードの途中で改行を入れると動作しない場合があります。基本的には、発行されたショートコードを1行のまま貼り付けるのがおすすめです。

2-4. ウィジェットやサイドバーで使う方法

ショートコードは、サイドバーやフッターなどのウィジェットエリアでも使える場合があります。

ブロック形式のウィジェット画面を使っている場合は、「ショートコード」ブロックを追加し、そこにショートコードを貼り付けます。

たとえば、サイドバーにプロフィール用のパーツやランキング、広告、フォームなどを表示したい場合に便利です。

[ranking]

ただし、使用しているテーマやプラグイン、ウィジェットの種類によっては、ショートコードが実行されず、そのまま文字列として表示されることがあります。

その場合は、ショートコードブロックを使う、対応しているウィジェットを使う、テーマ側でショートコードの実行が許可されているか確認するなどの対処が必要です。

2-5. テーマファイル内でショートコードを表示する方法

投稿本文や固定ページではなく、テーマファイル内でショートコードを表示したい場合は、PHPファイルにショートコードをそのまま書いても実行されません。

たとえば、次のように書いても、PHPファイル内ではショートコードとして処理されません。

PHP
[my_shortcode]

テーマファイル内でショートコードを実行するには、do_shortcode関数を使います。

PHP
<?php echo do_shortcode('[my_shortcode]'); ?>

たとえば、固定の場所にお問い合わせフォームを表示したい場合は、次のように記述します。

PHP
<?php echo do_shortcode('[contact-form-7 id="123" title="お問い合わせ"]'); ?>

ただし、テーマファイルを直接編集する場合は注意が必要です。記述ミスがあるとサイト全体にエラーが出る可能性があります。必ずバックアップを取り、可能であれば子テーマを使って編集しましょう。

3. よく使われるWordPressショートコードの例

3-1. ギャラリーを表示するショートコード

WordPressには、画像ギャラリーを表示するためのショートコードがあります。

代表的な例は次のとおりです。

[gallery]

特定の画像を指定して表示したい場合は、画像IDを指定します。

[gallery ids="1,2,3"]

カラム数を指定することもできます。

[gallery ids="1,2,3" columns="3"]

このショートコードを使うと、複数の画像を一覧形式で表示できます。写真ギャラリー、制作実績、商品画像、イベントレポートなどで便利です。

現在はブロックエディターのギャラリーブロックを使う方法も一般的ですが、過去の記事やクラシックエディターで作成したページでは、ギャラリーショートコードが使われていることがあります。

3-2. 動画・音声を埋め込むショートコード

WordPressでは、動画や音声を埋め込むショートコードも使えます。

動画の場合は、次のように記述します。

[video src="https://example.com/movie.mp4"]

音声の場合は、次のように記述します。

[audio src="https://example.com/audio.mp3"]

動画ファイルや音声ファイルをメディアライブラリにアップロードし、そのURLを指定することで、ページ内にプレイヤーを表示できます。

また、YouTubeなどの外部サービスを埋め込む場合は、ショートコードではなくURLをそのまま貼り付けるだけで表示されるケースもあります。これはWordPressの埋め込み機能によるものです。

ショートコードを使う方法とURLを貼る方法のどちらが適しているかは、表示したい内容や使用しているエディターによって変わります。

3-3. お問い合わせフォームのショートコード

WordPressショートコードの中でも、特によく使われるのがお問い合わせフォームのショートコードです。

たとえば、フォーム作成プラグインを使うと、作成したフォームごとに次のようなショートコードが発行されます。

[contact-form-7 id="123" title="お問い合わせ"]

このショートコードを固定ページに貼り付けるだけで、お問い合わせフォームを表示できます。

お問い合わせフォームは、多くのサイトに必要な基本機能です。しかし、フォームを一から作成するには、入力欄、確認処理、メール送信、スパム対策などの設定が必要になります。

プラグインとショートコードを使えば、管理画面でフォームを作成し、表示したいページに貼り付けるだけで設置できるため、初心者にも扱いやすい方法です。

3-4. ボタン・ランキング・関連記事のショートコード

テーマやプラグインによっては、ボタン、ランキング、関連記事、吹き出し、ボックスなどを表示するショートコードが用意されています。

たとえば、ボタンを表示するショートコードは次のような形です。

[button url="https://example.com" text="詳しく見る"]

ランキングを表示する場合は、次のようなショートコードが使われることがあります。

[ranking id="1"]

関連記事を表示するショートコードの例です。

[related_posts]

これらはWordPress本体に必ず用意されているものではなく、テーマやプラグインが独自に追加している場合がほとんどです。

そのため、テーマを変更したり、該当プラグインを停止したりすると、ショートコードが動作しなくなる可能性があります。

3-5. プラグインで追加されるショートコード

多くのWordPressプラグインは、機能をページ内に表示するためにショートコードを利用します。

たとえば、次のようなプラグインでショートコードが使われます。

お問い合わせフォームプラグイン、予約カレンダープラグイン、スライダープラグイン、商品一覧プラグイン、会員制サイト用プラグイン、ランキング作成プラグイン、広告管理プラグイン、FAQ作成プラグインなどです。

プラグインで作成したパーツを投稿や固定ページに表示したい場合、管理画面にショートコードが表示されていることがあります。そのショートコードをコピーして、表示したい場所に貼り付けます。

ただし、プラグインを削除または停止すると、そのプラグインが提供していたショートコードは使えなくなります。その結果、ページ上にショートコードの文字列だけが残ることがあります。

プラグインを整理するときは、サイト内でそのショートコードが使われていないか確認してから停止するのがおすすめです。

4. WordPressショートコードの作り方

4-1. ショートコード作成に必要な基本知識

WordPressでは、既存のショートコードを使うだけでなく、自分でショートコードを作成することもできます。

自作ショートコードを作るには、主にPHPの基本知識が必要です。特に、関数、文字列、配列、HTMLの出力、WordPressの関数について理解しておくとスムーズです。

ショートコードの作成には、WordPressのadd_shortcode関数を使います。

基本的な考え方は、次のとおりです。

まず、表示したい内容を返すPHP関数を作成します。次に、その関数をショートコード名と関連付けます。最後に、投稿や固定ページでショートコードを入力すると、その関数の内容が表示されます。

大切なのは、ショートコードの処理では基本的にechoではなくreturnを使うことです。ショートコードは、呼び出された場所に文字列を返す仕組みなので、直接出力するよりも、表示内容を返す書き方が適しています。

4-2. functions.phpにコードを追加する方法

自作ショートコードは、テーマのfunctions.phpにコードを追加して作成できます。

functions.phpは、使用中のテーマに機能を追加するためのファイルです。管理画面から編集することもできますが、記述ミスをするとサイトが表示されなくなる可能性があります。

そのため、編集前には必ずバックアップを取りましょう。可能であれば、親テーマではなく子テーマのfunctions.phpを編集するのがおすすめです。

また、頻繁に使うショートコードやテーマ変更後も使いたいショートコードは、テーマのfunctions.phpではなく、専用の小さなプラグインとして管理する方法もあります。

テーマに依存しないショートコードであれば、専用プラグイン化しておくことで、テーマを変更してもショートコードを継続して使いやすくなります。

4-3. add_shortcode関数の基本的な書き方

WordPressでショートコードを登録するには、add_shortcode関数を使います。

基本形は次のとおりです。

PHP
function 関数名() {
    return '表示したい内容';
}
add_shortcode('ショートコード名', '関数名');

たとえば、[hello]というショートコードを作りたい場合は、次のように書きます。

PHP
function my_hello_shortcode() {
    return 'こんにちは、WordPressショートコードです。';
}
add_shortcode('hello', 'my_hello_shortcode');

このコードを追加すると、投稿や固定ページで次のように入力できます。

[hello]

表示結果は次のようになります。

こんにちは、WordPressショートコードです。

ショートコード名は、他のプラグインやテーマと重複しない名前にすることが大切です。たとえば、buttonやboxのような一般的な名前は、すでに他の機能で使われている可能性があります。

自作する場合は、my_やサイト名の略称などを付けて、重複を避けると安全です。

4-4. テキストを表示する簡単なショートコード例

まずは、簡単な案内文を表示するショートコードを作ってみましょう。

PHP
function my_notice_shortcode() {
    return '<p class="notice">この記事には広告が含まれています。</p>';
}
add_shortcode('my_notice', 'my_notice_shortcode');

このコードを追加すると、投稿本文に次のショートコードを入力できます。

[my_notice]

すると、次のようなHTMLが表示されます。

HTML
<p class="notice">この記事には広告が含まれています。</p>

このように、よく使う定型文をショートコード化しておくと、複数の記事に同じ案内文を簡単に挿入できます。

あとから文言やHTMLを変更したい場合も、ショートコードの処理部分を修正すれば、同じショートコードを使っている場所に反映できます。

4-5. 引数付きショートコードの作り方

ショートコードには、引数を付けることもできます。引数を使うと、表示内容をページごとに変更できます。

たとえば、ボタンのテキストとリンク先を指定できるショートコードを作ってみます。

PHP
function my_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => '詳しく見る',
            'url'  => '#',
        ),
        $atts,
        'my_button'
    );

    return '<a class="my-button" href="' . esc_url($atts['url']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('my_button', 'my_button_shortcode');

投稿や固定ページでは、次のように使います。

[my_button text="サービスを見る" url="https://example.com/service"]

このショートコードでは、textにボタンの文字、urlにリンク先を指定しています。

shortcode_attsは、引数の初期値を設定するための関数です。たとえば、textを指定しなかった場合は「詳しく見る」が使われ、urlを指定しなかった場合は「#」が使われます。

また、リンク先にはesc_url、表示テキストにはesc_htmlを使っています。これは、セキュリティ対策として重要なエスケープ処理です。

4-6. 囲み型ショートコードの作り方

ショートコードには、開始タグと終了タグでコンテンツを囲む「囲み型ショートコード」もあります。

たとえば、次のような使い方です。

[my_box]ここに表示したい内容を書きます。[/my_box]

囲まれた内容を装飾ボックスとして表示するショートコードを作る場合は、次のように書きます。

PHP
function my_box_shortcode($atts, $content = null) {
    $content = do_shortcode($content);

    return '<div class="my-box">' . wp_kses_post($content) . '</div>';
}
add_shortcode('my_box', 'my_box_shortcode');

このショートコードを使うと、囲んだ文章をdivタグで包んで表示できます。

[my_box]これは重要なお知らせです。[/my_box]

出力例は次のようになります。

HTML
<div class="my-box">これは重要なお知らせです。</div>

囲み型ショートコードは、注意書き、補足説明、会話風の吹き出し、装飾ボックスなどを作るときに便利です。

do_shortcode($content)を使うことで、囲んだ内容の中に別のショートコードが含まれている場合にも処理できるようになります。ただし、入れ子にすると複雑になりやすいため、使いすぎには注意しましょう。

4-7. 自作ショートコードを作るときの注意点

自作ショートコードを作るときは、いくつか注意点があります。

まず、ショートコード名の重複に注意しましょう。すでにテーマやプラグインが使っている名前と同じショートコード名を登録すると、意図しない動作になる可能性があります。

次に、セキュリティ対策としてエスケープ処理を行いましょう。URLを出力するときはesc_url、テキストを出力するときはesc_html、HTMLを許可したい場合はwp_kses_postなどを使います。

また、ショートコードの処理ではechoではなくreturnを使うのが基本です。echoで直接出力すると、表示位置が崩れたり、意図しない場所に出力されたりすることがあります。

さらに、テーマのfunctions.phpに多くのショートコードを追加しすぎると、管理が難しくなります。長く使う予定のショートコードは、専用プラグインとして管理することも検討しましょう。

5. WordPressショートコードが表示されない主な原因

5-1. ショートコードの記述ミス

ワードプレスのショートコードが表示されない原因として、もっとも多いのが記述ミスです。

たとえば、次のようなミスがあります。

角括弧が全角になっている、ショートコード名を間違えている、閉じタグが不足している、余計なスペースが入っている、引用符が全角になっている、コピー時に不要なHTMLタグが混ざっているなどです。

正しい例です。

[my_button text="詳しく見る" url="https://example.com"]

誤った例です。

［my_button text=”詳しく見る” url=”https://example.com”］

見た目は似ていますが、角括弧や引用符が全角になっていると、ショートコードとして認識されないことがあります。

うまく表示されないときは、まず公式画面やプラグイン管理画面に表示されているショートコードをコピーし直してみましょう。

5-2. 対応プラグインが無効化されている

プラグインが発行したショートコードは、そのプラグインが有効になっていないと動作しません。

たとえば、お問い合わせフォームプラグインで作成したショートコードは、そのフォームプラグインが停止されていると実行されません。

この場合、ページ上に次のような文字列がそのまま表示されることがあります。

[contact-form-7 id="123" title="お問い合わせ"]

また、プラグインを削除した場合も同様です。ショートコードを処理する機能自体がなくなるため、WordPressはその文字列を通常のテキストとして扱います。

プラグインを停止したあとにサイトの表示が崩れた場合は、そのプラグインのショートコードが使われていないか確認しましょう。

5-3. テーマ変更でショートコードが使えなくなった

テーマ独自のショートコードを使っている場合、テーマを変更するとショートコードが使えなくなることがあります。

たとえば、以前のテーマに[box]や[button]、[ranking]などの独自ショートコードが用意されていた場合、新しいテーマには同じ機能がない可能性があります。

その結果、テーマ変更後にショートコードがそのまま表示されたり、デザインが崩れたりします。

特に、装飾系ショートコードやランキング系ショートコードはテーマに依存していることが多いため注意が必要です。

テーマを変更する前には、現在のサイト内でどのようなショートコードが使われているか確認しておくと安心です。

5-4. テキストウィジェットで実行されない

ウィジェットエリアにショートコードを貼り付けた場合、環境によっては実行されず、文字列のまま表示されることがあります。

現在のWordPressでは、ブロック形式のウィジェットでショートコードブロックを使えば実行しやすくなっています。しかし、テーマやプラグインの仕様、古い環境、独自ウィジェットの影響によっては、正しく処理されない場合があります。

その場合は、ショートコードブロックを使う、カスタムHTMLではなく対応ブロックを使う、テーマ側の設定を確認するなどの方法を試しましょう。

また、どうしてもウィジェット内で動作しない場合は、テーマファイルやテンプレート側でdo_shortcodeを使う方法もあります。

5-5. PHPファイル内でそのまま書いている

テーマファイルやテンプレートファイル内にショートコードをそのまま書いても、基本的には実行されません。

誤った例です。

PHP
[my_shortcode]

PHPファイル内でショートコードを実行するには、次のようにdo_shortcodeを使います。

PHP
<?php echo do_shortcode('[my_shortcode]'); ?>

この違いを知らないと、「投稿本文では表示されるのに、テーマファイルに書くと表示されない」という問題が起こります。

ヘッダー、フッター、サイドバー、テンプレートパーツなどにショートコードを表示したい場合は、PHPとして正しく記述する必要があります。

5-6. キャッシュやエディターの影響

ショートコードの設定を変更したのに表示が変わらない場合、キャッシュが原因の可能性があります。

キャッシュ系プラグイン、サーバーキャッシュ、ブラウザキャッシュ、CDNキャッシュなどが残っていると、古い表示がそのまま見えてしまうことがあります。

また、ブロックエディター上ではショートコードがプレビューされず、公開ページでだけ表示されることもあります。そのため、編集画面だけを見て「表示されていない」と判断しないようにしましょう。

ショートコードの表示を確認するときは、プレビュー画面、公開ページ、別ブラウザ、シークレットウィンドウなどで確認すると原因を切り分けやすくなります。

5-7. ショートコードの入れ子が正しく動かない

ショートコードの中に別のショートコードを入れる「入れ子」は、正しく動作しないことがあります。

たとえば、次のような使い方です。

[my_box][my_button text="詳しく見る" url="https://example.com"][/my_box]

囲み型ショートコード側でdo_shortcode($content)が使われていない場合、中に入れたショートコードが処理されず、そのまま表示されることがあります。

また、同じショートコードを入れ子にすると、正しく解釈されない場合もあります。

複雑な入れ子構造はトラブルの原因になりやすいため、できるだけシンプルに使うのがおすすめです。

6. ショートコードが表示されないときの対処法

6-1. ショートコード名と角括弧を確認する

ショートコードが表示されないときは、まずショートコード名と角括弧を確認しましょう。

確認するポイントは、半角の角括弧を使っているか、ショートコード名に誤字がないか、閉じタグが必要なショートコードで閉じタグを書いているか、余計なスペースや改行が入っていないか、引数の引用符が正しいかです。

正しい例です。

[my_box]本文[/my_box]

誤った例です。

［my_box］本文［/my_box］

特に、他のサイトや文書からコピーした場合、全角記号や余計な装飾が混ざることがあります。うまく動かないときは、一度手入力してみるのも有効です。

6-2. プラグインの有効化・設定を確認する

プラグイン由来のショートコードが表示されない場合は、該当プラグインが有効化されているか確認しましょう。

WordPress管理画面の「プラグイン」から、対象のプラグインが有効になっているか確認します。無効化されている場合は有効化します。

また、プラグインによっては、ショートコードの発行元となるフォーム、スライダー、ランキング、商品リストなどが削除されていると表示できません。

たとえば、ショートコード内でid="123"のように指定している場合、そのIDのフォームやパーツが存在しているか確認しましょう。

[example_form id="123"]

プラグイン本体が有効でも、対象データが削除されていると正しく表示されないことがあります。

6-3. テーマやfunctions.phpの記述を確認する

自作ショートコードが表示されない場合は、functions.phpの記述を確認しましょう。

確認するポイントは、add_shortcodeが正しく書かれているか、関数名に誤字がないか、PHPの構文エラーがないか、ショートコードの処理でreturnを使っているか、テーマ変更によってコードが失われていないかです。

たとえば、次のように関数名が一致していないと動作しません。

PHP
function my_test_shortcode() {
    return 'テスト表示';
}
add_shortcode('test', 'my_wrong_shortcode');

この場合、add_shortcodeで指定している関数名が実際の関数名と違うため、正しく処理できません。

正しくは次のようにします。

PHP
function my_test_shortcode() {
    return 'テスト表示';
}
add_shortcode('test', 'my_test_shortcode');

また、親テーマのfunctions.phpにコードを追加していた場合、テーマアップデートで上書きされることがあります。子テーマや専用プラグインで管理するほうが安全です。

6-4. do_shortcode関数を使って表示する

PHPファイル内でショートコードを表示したい場合は、do_shortcode関数を使います。

PHP
<?php echo do_shortcode('[my_shortcode]'); ?>

たとえば、テーマファイル内にお問い合わせフォームを表示する場合は、次のように記述します。

PHP
<?php echo do_shortcode('[contact-form-7 id="123" title="お問い合わせ"]'); ?>

ただし、ショートコードの中に引用符が含まれる場合は、PHPの文字列として正しく書く必要があります。シングルクォートとダブルクォートの使い方に注意しましょう。

また、テンプレートファイルを編集する場合は、編集前にバックアップを取ってください。PHPの記述ミスがあると、サイト全体が表示されなくなる可能性があります。

6-5. キャッシュを削除して再確認する

ショートコードの内容を修正したのに反映されない場合は、キャッシュを削除して再確認しましょう。

確認すべきキャッシュには、キャッシュ系プラグインのキャッシュ、サーバー側キャッシュ、ブラウザキャッシュ、CDNキャッシュなどがあります。

キャッシュ系プラグインを使っている場合は、管理画面からキャッシュ削除を実行します。レンタルサーバー側にキャッシュ機能がある場合は、サーバーの管理画面も確認しましょう。

また、ブラウザ側のキャッシュが残っていることもあります。シークレットウィンドウで開く、別のブラウザで確認する、スマートフォンで確認するなどの方法も有効です。

キャッシュを削除したうえで、公開ページを再読み込みして表示を確認しましょう。

6-6. エラーが出る場合はデバッグモードで確認する

自作ショートコードを追加したあとにエラーが出る場合は、PHPの記述ミスが原因の可能性があります。

WordPressでは、デバッグモードを有効にすると、エラーの原因を確認しやすくなります。wp-config.phpで次の設定を行います。

PHP
define('WP_DEBUG', true);

必要に応じて、ログファイルにエラーを記録する設定も使えます。

PHP
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

ただし、本番サイトでエラー内容を画面に表示すると、セキュリティ上好ましくない場合があります。本番環境では画面表示を避け、ログで確認するのがおすすめです。

デバッグモードでエラー箇所を確認し、関数名、括弧、セミコロン、引用符、配列の書き方などを見直しましょう。

7. WordPressショートコードを安全に使うための注意点

7-1. functions.phpを編集する前にバックアップを取る

自作ショートコードを追加するためにfunctions.phpを編集する場合は、必ず事前にバックアップを取りましょう。

functions.phpは、テーマの動作に関わる重要なファイルです。記述ミスがあると、管理画面やサイト全体が表示されなくなることがあります。

バックアップを取っておけば、エラーが発生しても元の状態に戻せます。FTPソフトやサーバーのファイルマネージャーを使って、編集前のファイルを保存しておくと安心です。

また、管理画面のテーマファイルエディターから直接編集するよりも、FTPやファイル管理機能を使って編集したほうが復旧しやすい場合があります。

7-2. 子テーマや専用プラグインで管理する

ショートコードを長期的に使う場合は、子テーマや専用プラグインで管理するのがおすすめです。

親テーマのfunctions.phpに直接コードを追加すると、テーマのアップデート時に変更内容が上書きされる可能性があります。

子テーマを使えば、親テーマを更新しても追加したコードを残しやすくなります。

さらに、テーマに依存しないショートコードであれば、専用プラグインとして管理する方法もあります。たとえば、定型文、ボタン、広告表示、共通パーツなどは、テーマよりもプラグインで管理したほうが扱いやすい場合があります。

テーマ変更後も使いたいショートコードは、専用プラグイン化を検討しましょう。

7-3. 不要なショートコードを増やしすぎない

ショートコードは便利ですが、増やしすぎると管理が大変になります。

どのショートコードがどこで使われているのか分からなくなると、プラグイン停止やテーマ変更の際にトラブルが起こりやすくなります。

また、似たようなショートコードが増えると、記事作成時にどれを使えばよいか迷ってしまいます。

ショートコードを作るときは、本当に使い回す必要があるか、ブロックで代用できないか、テーマ変更後も必要かを考えましょう。

よく使うものだけを厳選し、ショートコード名や用途をメモしておくと管理しやすくなります。

7-4. セキュリティ対策としてエスケープ処理を行う

自作ショートコードでは、セキュリティ対策としてエスケープ処理が重要です。

ユーザーが入力した値や、ショートコードの引数をそのままHTMLに出力すると、意図しないコードが実行されるリスクがあります。

URLを出力する場合はesc_urlを使います。

PHP
esc_url($atts['url'])

テキストを出力する場合はesc_htmlを使います。

PHP
esc_html($atts['text'])

許可されたHTMLだけを出力したい場合はwp_kses_postを使います。

PHP
wp_kses_post($content)

たとえば、ボタンショートコードでは次のようにエスケープします。

PHP
return '<a href="' . esc_url($atts['url']) . '">' . esc_html($atts['text']) . '</a>';

エスケープ処理は、見た目には分かりにくい部分ですが、安全なWordPressサイト運営には欠かせません。

7-5. テーマ変更時の影響を考えておく

ショートコードを使うときは、テーマ変更時の影響も考えておきましょう。

テーマ独自のショートコードを多用していると、別のテーマに変更したときにショートコードが使えなくなる可能性があります。

その結果、記事内に次のような文字列が残ることがあります。

[theme_button]
[theme_box]
[theme_ranking]

特に、記事本文の中に大量のテーマ独自ショートコードを使っている場合、あとから修正するのに手間がかかります。

長く使うコンテンツには、できるだけテーマに依存しない方法を選ぶのがおすすめです。ブロックエディターの標準ブロックや、テーマ変更後も使えるプラグインを活用すると、将来的な移行がしやすくなります。

8. ショートコードとブロックエディターの違い

8-1. ブロックエディターでショートコードは必要か

現在のWordPressでは、ブロックエディターによって多くの機能を視覚的に追加できるようになりました。

ボタン、カラム、画像、ギャラリー、埋め込み、テーブル、グループ、カバー画像などは、ショートコードを使わなくてもブロックで作成できます。

そのため、以前よりもショートコードに頼る場面は少なくなっています。

しかし、ショートコードが不要になったわけではありません。プラグインが提供するフォーム、ランキング、予約機能、商品一覧、会員限定コンテンツなどは、今でもショートコードで表示することがあります。

また、自作した共通パーツを簡単に呼び出したい場合にもショートコードは便利です。

つまり、ブロックエディターがある現在でも、ワードプレスのショートコードは用途によって十分に活用できます。

8-2. ショートコードを使うメリット

ショートコードを使うメリットは、複雑な機能を短いコードで呼び出せることです。

たとえば、お問い合わせフォームやランキング一覧のような複雑な機能でも、ショートコードを貼るだけで表示できます。

また、同じパーツを複数ページで使い回せる点も便利です。キャンペーン用ボタン、注意書き、広告枠、共通メッセージなどをショートコード化しておけば、毎回同じHTMLを書く必要がありません。

さらに、管理画面で作成したプラグインの機能をページ内に挿入しやすい点もメリットです。プラグイン側で作成したフォームやスライダーを、表示したい場所に簡単に配置できます。

ショートコードは、機能の呼び出しをシンプルにするための便利な仕組みです。

8-3. ショートコードを使うデメリット

ショートコードにはデメリットもあります。

まず、編集画面上で実際の表示が分かりにくいことがあります。ブロックであれば見た目を確認しながら編集できますが、ショートコードは文字列だけが表示される場合があります。

次に、ショートコードを提供しているプラグインやテーマに依存しやすい点です。プラグインを停止したり、テーマを変更したりすると、ショートコードが使えなくなることがあります。

また、記事内に大量のショートコードを使うと、あとから見たときに内容が分かりにくくなります。

さらに、自作ショートコードの場合は、コードの管理やセキュリティ対策も必要です。エスケープ処理を忘れたり、functions.phpに記述ミスがあったりすると、表示崩れやエラーにつながる可能性があります。

8-4. ブロックとショートコードの使い分け方

ブロックとショートコードは、目的に応じて使い分けるのがおすすめです。

文章、画像、ボタン、カラム、見出し、表、装飾など、見た目を確認しながら作りたい要素はブロックを使うと便利です。

一方、お問い合わせフォーム、予約カレンダー、ランキング、商品一覧、会員限定コンテンツ、プラグインで生成したパーツなど、特定の機能を呼び出す場合はショートコードが向いています。

また、複数ページで共通して使う定型パーツもショートコードに向いています。たとえば、キャンペーン案内や注意書きをショートコード化しておけば、あとから一括で変更しやすくなります。

基本的には、標準ブロックで対応できるものはブロックを使い、プラグイン機能や共通パーツの呼び出しにはショートコードを使うとよいでしょう。

9. WordPressショートコードに関するよくある質問

9-1. ショートコードはどこに貼り付ければいい？

ショートコードは、主に投稿、固定ページ、ショートコードブロック、ウィジェットエリアなどに貼り付けて使います。

ブロックエディターを使っている場合は、「ショートコード」ブロックに貼り付けるのがおすすめです。クラシックエディターの場合は、本文入力欄にそのまま貼り付けます。

サイドバーやフッターに表示したい場合は、ウィジェットエリアでショートコードブロックを使います。

テーマファイル内で表示したい場合は、そのまま貼り付けるのではなく、do_shortcode関数を使います。

PHP
<?php echo do_shortcode('[my_shortcode]'); ?>

9-2. ショートコードをPHPで呼び出すには？

ショートコードをPHPファイル内で呼び出すには、do_shortcode関数を使います。

PHP
<?php echo do_shortcode('[my_shortcode]'); ?>

お問い合わせフォームを呼び出す場合は、次のように書きます。

PHP
<?php echo do_shortcode('[contact-form-7 id="123" title="お問い合わせ"]'); ?>

PHPファイル内にショートコードをそのまま書いても実行されません。必ずdo_shortcodeで処理する必要があります。

ただし、テーマファイルを編集する場合は、バックアップを取ってから作業しましょう。記述ミスがあるとサイト全体に影響する可能性があります。

9-3. ショートコードを削除すると表示はどうなる？

投稿や固定ページからショートコードを削除すると、そのショートコードによって表示されていた内容も表示されなくなります。

たとえば、お問い合わせフォームのショートコードをページから削除すると、そのページにフォームは表示されません。

ただし、ショートコードを削除しても、プラグイン側で作成したフォームやデータ自体が削除されるとは限りません。ページから呼び出し部分がなくなるだけです。

一方で、プラグインやテーマ側のショートコード機能を削除した場合、記事本文にショートコードの文字列が残っていると、そのまま表示される可能性があります。

ショートコードを削除する際は、どのページで使われているか確認してから作業しましょう。

9-4. プラグインを停止するとショートコードは使えなくなる？

プラグインが提供しているショートコードは、そのプラグインを停止すると基本的に使えなくなります。

たとえば、フォームプラグイン、スライダープラグイン、ランキングプラグインなどが発行したショートコードは、該当プラグインが有効な状態で処理されます。

プラグインを停止すると、ショートコードを処理する機能が読み込まれなくなるため、ページ上にショートコードの文字列がそのまま表示されることがあります。

プラグインを停止または削除する前に、そのショートコードがサイト内で使われていないか確認しましょう。

9-5. 初心者でも自作ショートコードは作れる？

初心者でも、簡単な自作ショートコードなら作れます。

たとえば、定型文を表示するだけのショートコードであれば、比較的シンプルなコードで作成できます。

PHP
function my_simple_shortcode() {
    return 'これは自作ショートコードです。';
}
add_shortcode('my_simple', 'my_simple_shortcode');

このコードを追加すると、次のショートコードが使えます。

[my_simple]

ただし、functions.phpの編集には注意が必要です。PHPの記述ミスがあると、サイトにエラーが出る可能性があります。

最初はテスト環境で試す、バックアップを取る、子テーマを使う、簡単なコードから始めるといった方法がおすすめです。

また、URLやテキストを出力する場合は、esc_urlやesc_htmlなどのエスケープ処理も忘れないようにしましょう。

まとめ

WordPressショートコードとは、短い文字列を使って特定の機能や表示内容を呼び出せる仕組みです。

投稿や固定ページに貼り付けるだけで、お問い合わせフォーム、画像ギャラリー、動画、音声、ランキング、関連記事、ボタンなどを簡単に表示できます。

ワードプレスのショートコードは、HTMLやPHPに詳しくない初心者でも使いやすく、プラグインの機能をページ内に挿入する際にもよく利用されます。

一方で、ショートコードが表示されない場合は、記述ミス、プラグインの無効化、テーマ変更、PHPファイル内での書き方、キャッシュ、入れ子構造などが原因になっていることがあります。

特に、PHPファイル内で表示したい場合は、次のようにdo_shortcodeを使う必要があります。

PHP
<?php echo do_shortcode('[my_shortcode]'); ?>

また、自作ショートコードを作る場合は、add_shortcode関数を使います。表示内容はechoではなくreturnで返し、必要に応じてesc_html、esc_url、wp_kses_postなどでエスケープ処理を行いましょう。

ショートコードは便利な反面、テーマやプラグインに依存しやすい側面もあります。長く使う機能は子テーマや専用プラグインで管理し、不要なショートコードを増やしすぎないことが大切です。

ブロックエディターで対応できるものはブロックを使い、プラグイン機能や共通パーツの呼び出しにはショートコードを使う。そうすることで、WordPressサイトを効率よく、管理しやすい形で運営できます。