WordPressのカスタムフィールド、使ってますか？
カスタムフィールドはイベントの日付や画像URLなど、投稿に独自の情報を追加できる便利な機能です。
でも、WordPressのグーテンベルクでブロック投稿する際に表示させるのはちょっと面倒…。そんな時はショートコードが超便利！
そこで今回は、ショートコードを使ってカスタムフィールドをサクッと表示する方法を紹介します！初心者でも簡単ですよ！
functions.phpのカスタマイズをします
お使いのテーマのfunctions.phpに以下のコードをコピペします。
add_shortcode('custom_field', function ($atts) {
$atts = shortcode_atts(['field' => '', 'default' => '値なし'], $atts);
$value = get_post_meta(get_the_ID(), $atts['field'], true);
return empty($value) ? $atts['default'] : esc_html($value);
});
ショートコードの使い方
グーテンベルクのエディターで「ショートコード」ブロックを追加し、以下のようにショートコードを入力します。field属性に表示したいカスタムフィールドのキーを指定します。
例: my_field_nameというカスタムフィールドを表示する場合
下記のショートコードをブロックに追加して、カスタムフィールドの箇所を変更すればOK！
[custom_field field="my_field_name"]
例: イベントの日付（カスタムフィールド＝event_date）を表示したい場合は[custom_field field="event_date"]と入力します。
投稿に「event_date」っていうカスタムフィールドがあれば、その値が表示されます。
汎用性があるので、他のカスタムフィールドを表示したい場合も形式が合えばサクッと追加できるようになって簡単です。
カスタムフィールドの形式に対応
カスタムフィールドがテキスト以外の形式（例: 画像URL、配列など）の場合、ショートコードを以下のように拡張できます。
add_shortcode('custom_field', function ($atts) {
$atts = shortcode_atts(
[
'field' => '',
'default' => '値がありません',
'type' => 'text', // フィールドの種類（text, image, urlなど）
],
$atts,
'custom_field'
);
$value = get_post_meta(get_the_ID(), $atts['field'], true);
if (empty($value)) {
return esc_html($atts['default']);
}
switch ($atts['type']) {
case 'image':
return '<img src="' . esc_url($value) . '" alt="' . esc_attr($atts['field']) . '">';
case 'url':
return '<a href="' . esc_url($value) . '">' . esc_html($value) . '</a>';
default:
return esc_html($value);
}
});
画像フィールドの場合
[custom_field field="my_image_field" type="image"]
URLフィールドの場合
[custom_field field="my_url_field" type="url"]
実装時のポイント
汎用性: 上記のショートコードは任意のカスタムフィールド名に対応し、フィールドの種類やデフォルト値も指定可能。
セキュリティ: esc_htmlやesc_urlで出力をエスケープし、XSSを防止。
使いやすさ: グーテンベルクのショートコードブロックは直感的で、非技術者でも簡単に利用可能。
拡張性: 必要に応じてtype属性を増やして、さまざまなデータ形式（日付、JSONなど）に対応可能。
注意点
カスタムフィールドの存在確認: 存在しないフィールドを指定した場合、デフォルト値が表示されるよう設計。
パフォーマンス: 複数のget_post_meta呼び出しがパフォーマンスに影響する場合、キャッシュ（例: transient）を検討。
プレビュー: ショートコードブロックはエディター内でプレビューが制限される場合がある。動的プレビューが必要なら、カスタムブロックの検討も必要かもしれません。
