WP ショートコードが表示されない、そのまま表示されてしまった時の対処法

この記事では、WordPressのショートコードを設置したのになぜか表示されない、ショートコードがそのまま表示されてしまった！という時の対処法について解説します。

ショートコードが表示されない時に確認すること

ショートコードが表示されない時に確認することは、以下のようになります。

書式を確認する

ショートコードは [shortcode] という形式で記述しなければなりません。

[shortcode] の前後にスペースや改行が入っていないかを確認します。

またショートコードには閉じタグが必要なショートコードもあります。その場合は [/shortcode] で終わっているかをチェックします。

[tabgroup]
[tab title="タブ1"]コンテンツ1[/tab]
[tab title="タブ2"]コンテンツ2[/tab]
[/tabgroup]

ショートコードのパラメーターを確認する

ショートコードには [my_shortcode param="value"] のようにパラメーターを指定して動作を変えることができます。このパラメーターの名前や値が正しいか、引用符やカンマなどの記号が正しく入力されているかをチェックします。

[button link="#" color="blue" size="medium"]ボタン名[/button]

プラグインやテーマが有効か確認する

ショートコードはプラグインやテーマで定義されるものです。ショートコードを使うプラグイン・テーマが有効化されているかを確かめます。

私は過去に、使っているのと違うテーマのfunctions.phpにプラグインを記載していた・・・なんてことがありました。。。使用しているテーマのfunctions.phpに記載しているかを確認しましょう。。。

「WordPress Popular Posts」はブログ記事の閲覧数に基づいて、人気の高い記事を表示してくれるWordPressのプラグインです。WordPress Popular Postsで人気記事を表示する場合は以下のショートコードを追加します。

[wpp]

このショートコードだけで人気記事が表示されるようになるのですが、逆にWordPress Popular Postsが有効になっていないと、上記のショートコードがそのまま表示された状態になります。

ショートコードの競合を確認する

ショートコードは同じ名前のものが複数存在すると競合してしまうことがあります。

利用しているプラグインやテーマが同じ名前のショートコードを定義していないか、または同じショートコードを複数回呼び出していないかを確認します。

キャッシュをクリアする

ショートコードの表示されないのはキャッシュされることが原因の場合があるため、キャッシュをクリアして最新の状態に更新します。

ブラウザのキャッシュ、サーバーのキャッシュ、プラグインやテーマでキャッシュ機能がある場合はクリアして再度確認してみましょう。

ショートコードがそのまま表示されてしまう時に確認すること

前項であげたショートコードが表示されない方法と併せて、次のことも確認してみましょう。

ショートコードが定義されているかどうか

ショートコードが登録・定義されていない場合は、add_shortcode()関数でショートコードと関数を紐付ける必要があります。

add_shortcode()関数は、WordPressのプラグインやテーマでショートコードを作成するために使用される関数です。

add_shortcode( $tag, $func );

第一引数の$tagは、ショートコードの名前を指定します。例えば、

以下はadd_shortcode()関数でショートコードと関数を紐付ける例です。

// ショートコード[hello]で挨拶を表示する関数
function hello_shortcode( $atts, $content ) {
  // 属性を取得する
  $atts = shortcode_atts( array(
    'name' => 'World', // name属性のデフォルト値
  ), $atts, 'hello' );

  // HTMLを返す
  return '<p>Hello, ' . esc_html( $atts['name'] ) . '!</p>';
}

// ショートコード[hello]と関数hello_shortcode()を紐付ける
add_shortcode( 'hello', 'hello_shortcode' );

上記のショートコード [hello]が正常に表示された場合は以下のHTMLコードが表示されます。

<p>Hello World！</p>

カスタムHTMLウィジェットに記述したショートコードがそのまま表示されてしまう

ウィジェットでショートコードを使いたい時、カスタムHTML内にショートコードを記述しても、そのまま表示されてしまいます。

ウィジェットでショートコードを使うには以下のフィルターフックを有効にします。テーマのfunctions.phpに記述します。

//ウィジェットでショートコードを使えるようにする
add_filter('widget_text', 'do_shortcode');

テンプレートファイル（PHPファイル）でショートコードを使う

テーマを自作している場合など、テンプレートPHPでもショートコードを使いたいと思うことがあります。
その場合は以下のように記述します。

echo do_shortcode( '[ショートコード名]' );

do_shortcode()関数は、引数として渡されたショートコードを解析して実行する関数です。

以下のように書くと、[my_shortcode]というショートコードをテンプレートファイルで実行できます。

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

参考：WordPress Codex 関数リファレンス/do shortcode
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/do_shortcode