【WordPress】ショートコードでカスタムフィールドの値を投稿内で表示する

カスタムフィールドを自作した場合、表示するには呼び出すためのコードを書かないと、フロントエンドでは表示されません。

なので、一般的・・・かどうかは分かりませんが。

テンプレートファイル(single.phpやpage.php)をカスタム投稿用に編集してFTPアップロードする。

という流れを取ると思います。

実際、カスタムフィールドに登録する表示したい内容は、オリジナルのものである事も多いので。

デザインにこだわるなら、テンプレートファイルを作成するのが良いと思います。

ただ、そこまでではなく。

データをしてちょこっと表示したいという場合。

「ショートコード」が便利だなぁという記事です。

プラグインでもできるけど

投稿内でカスタムフィールドを使用するには、ブロックで呼び出せないとなぁと。

最初は思ってました。

なので、色々と探してみると「Advanced Custom Fields」のPro版でカスタムブロックを作成できるとか。

画像やテキストと一緒に投稿内で表示できるのは便利だなぁと思ったものの。

functions.phpで設定する必要がもちろんあり。

カスタムフィールドに入力したデータをテーブルで表示したいだけだったので、そこまでやる必要はないかなぁと。

で、色々と思い巡らせてみると。

ショートコードなら投稿内に挿入できることに行き着いたわけです。

ショートコードを追加するadd_shortcode()

それもこれも使用しているテーマ「Luxeritas」の機能のおかげなんですが。

「パターン登録」というもので、「ショートコード」を追加することができます。

そこで使われているのが、ショートコードを追加するワードプレス関数のadd_shortcode()でした。

//ざっくりとした引数の内容
add_shortcode( 'ショートコードの名前', 'コールバック関数' );

今までショートコードは提供されるがままに使ってきたので、自分の理解のためにもこれを元に書いていこうかと。

と言っても、単純にPHPコードをサクッと表示しただけの今回の目的の内容に合うものだけですが。

まず、第一引数でショートコードの名前を指定します。ショートコードを表す「[ ]」の中に入れる文字列ですね。

//例えば
add_shortcode( 'test_shortcode', 'test_callback' ); 

の場合[test_shortcode]と本文中に書くことで実行されます。

第ニ引数はこのショートコードを呼び出した時に動作する関数を指定します。

今回の目的で言えばカスタムフィールドの値を呼び出したいだけなので、

function test_callback(){
    global $post;
?>
<div>
<?php echo esc_html( get_post_meta( $post->ID, 'test_cat', true ) ); ?>
</div>
<?php
return $content;
}

と、表示されている投稿のIDを取得して表示するものに。

ショートコードの仕組みが、ショートコードが書かれた場所をコールバック関数で上書きするというものらしく、$contentにreturnするそうです。

なるほど。

Luxeritas」では、ショートコード名やパラメータを決めて、処理を書くだけで良いように機能が用意されているので。

とても便利です。ありがとうございます。

カスタムフィールドの値を簡単に挿入することができるように

おかげさまで、カスタム投稿にグワッとカスタムフィールドに値を入力して量産し、それぞれの投稿ページで表示できるようになりました。

専用のテンプレートを用意して呼び出しておいた方が結局楽なんじゃ・・・とも思われたかもしれませんが。

配置を変える可能性もあったので、ショートコードで本文中に挿入という形を取りました。

といっても、ワードプレスの「パターン登録」や「再利用ブロック」にショートコードを登録しておけば、ブロックを呼び出すだけなので使い回しは簡単です。

ファイルが増えるとごちゃごちゃしてきてしまうので、あまり元のテンプレートをいじりたくなかったというのもありますけどね。

・・・管理能力の低さの問題です・・・

参考:WordPressショートコードの作成-Web Design Leaves