Amazonで商品を見る セール会場へ

WordPress│参照した記事にショートコードでカスタムフィールドの値を割り当てる方法

Smart Custom Fieldsの値をショートコードで表示します。テキストはHTMLとして実行せず、公開してよいフィールド名だけを許可します。SWELLのブログパーツから呼び出す場合も、表示対象の記事IDを明確にします。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

対象と貼付先

PHP 8.0以降を前提に、子テーマのfunctions.phpのPHP領域へ追加します。先頭の<?phpは重ねません。旧motoki_shortcode_custom_field・motoki_btn_shortcode・motoki_google_map_shortcode・twitter_shortcodeと、そのadd_shortcodeは外して置き換えてください。同名ショートコードを複数登録しません。

標準のpost_idは現在表示しているページです。記事一覧内のカードや別記事を参照する場合はpost_idを明示します。公開されていない記事とパスワード保護中の記事は表示しません。許可リストはサイトの実フィールド名に合わせ、個人情報や内部キーを加えないでください。

実装コード

<?php
function waza_scf_post_id($value) {
    $id = absint($value ?: get_queried_object_id());
    $post = get_post($id);
    return $post && is_post_publicly_viewable($post) && !post_password_required($post) ? $id : 0;
}
function waza_scf_value($field, $id) {
    // 公開するフィールドだけを列挙。秘密情報や内部キーは追加しない。
    $allowed = ['scf_text', 'scf_textarea', 'scf_image', 'scf_checkbox', 'scf_radio', 'scf_btn', 'scf_map'];
    if (!class_exists('SCF') || !$id || !in_array($field, $allowed, true)) return null;
    return SCF::get($field, $id);
}
function waza_scf_text($atts) {
    $a = shortcode_atts(['field'=>'scf_text', 'type'=>'text', 'post_id'=>'0'], $atts);
    $value = waza_scf_value($a['field'], waza_scf_post_id($a['post_id']));
    if ($value === null || $value === '' || $value === false) return '';
    switch ($a['type']) {
        case 'text': case 'radio':
            return is_scalar($value) ? esc_html((string) $value) : '';
        case 'textarea':
            return is_scalar($value) ? nl2br(esc_html((string) $value)) : '';
        case 'checkbox':
            return is_array($value) ? esc_html(implode(', ', array_filter($value, 'is_scalar'))) : '';
        case 'image':
            return is_numeric($value) ? wp_get_attachment_image(absint($value), 'large') : '';
        default: return '';
    }
}
add_shortcode('custom_field', 'waza_scf_text');
add_shortcode('scf_btn', function ($atts) {
    $a = shortcode_atts(['field_name'=>'scf_btn', 'text'=>'詳しく見る', 'post_id'=>'0'], $atts);
    $value = waza_scf_value($a['field_name'], waza_scf_post_id($a['post_id']));
    if (!is_string($value) || !preg_match('~^https?://~i', $value)) return '';
    $url = esc_url($value, ['http','https']);
    if (!$url) return '';
    return '<div class="swell-block-button is-style-btn_normal"><a class="swell-block-button__link" href="' . $url . '">' . esc_html($a['text']) . '</a></div>';
});
add_shortcode('scf_map', function ($atts) {
    $a = shortcode_atts(['post_id'=>'0'], $atts);
    $value = waza_scf_value('scf_map', waza_scf_post_id($a['post_id']));
    if (!is_string($value)) return '';
    $url = wp_parse_url($value);
    if (($url['scheme'] ?? '') !== 'https' || ($url['host'] ?? '') !== 'www.google.com' || !str_starts_with($url['path'] ?? '', '/maps/embed') || isset($url['user']) || isset($url['pass'])) return '';
    return '<iframe title="所在地の地図" src="' . esc_url($value) . '" width="600" height="450" style="max-width:100%;border:0" loading="lazy" allowfullscreen></iframe>';
});

記事に貼るショートコード

次は本文のショートコードブロックへ入れます。123は表示元にする公開記事のIDへ置き換えます。記事パーツ自体のフィールドを読む場合も、そのパーツを取得できるとは限らないため、公開記事への参照から確認してください。

[custom_field field="scf_text" type="text" post_id="123"]
[custom_field field="scf_textarea" type="textarea" post_id="123"]
[custom_field field="scf_checkbox" type="checkbox" post_id="123"]
[custom_field field="scf_radio" type="radio" post_id="123"]
[custom_field field="scf_image" type="image" post_id="123"]
[scf_btn text="詳しく見る" post_id="123"]
[scf_map post_id="123"]

typeはtext・textarea・checkbox・radio・imageです。画像は添付画像ID、チェックボックスは一次元の値の配列を想定しています。数値0と文字列0は消さずに表示します。グループの繰り返しフィールドには対応していません。

フィールド名と表示方法を対応させる

保存する値指定する表示方法出力
scf_text・scf_radioの文字列text・radioタグを文字として扱うテキスト
scf_textareaの文字列textarea改行を残したテキスト
scf_checkboxの一次元配列checkbox値をコンマで区切ったテキスト
scf_imageの添付画像IDimageWordPressの画像タグ
scf_btnのhttps/http URLscf_btn指定したラベルのリンク

fieldは管理画面の表示ラベルではなく、Smart Custom Fieldsで登録した実際のフィールド名に合わせます。この例の許可リストにない名前は空出力になります。別名を使う場合はショートコードだけでなく、公開してよい名前の許可リストも更新してください。

画像の保存値は画像URLではなく添付画像IDです。画像が出ないときは、フィールドの保存値とメディアのIDを確認します。数値に見える投稿IDでも、画像の添付ファイルを指していなければ表示されません。

ブログパーツから使う場合は、表示元の公開記事IDをpost_idに明示します。パーツのIDと、フィールドの値が保存されている記事のIDを取り違えないようにしてください。

画像を選択して保存し、表示元を確認する

SCFの画像フィールドではメディアライブラリから画像を選び、記事を更新します。フィールド名scf_imageに対して、ショートコードにはfield=”scf_image”とtype=”image”の両方を指定します。typeを省くと既定のtextとして扱われ、画像にはなりません。

2026年10月3日にSmart Custom Fields 5.0.8の実際の投稿編集画面でテキストと画像を保存しました。再表示した入力欄に選択画像が残り、本文ではSCF::get()が返した添付画像IDから実ファイルが表示されました。別記事からpost_idを明示した参照も同じ画像を表示しました。

通常の投稿IDを画像の保存値へ入れた場合は画像が出ず、パスワード保護中の記事をpost_idで参照した場合も空出力になりました。画像が出ないときは、記事の更新忘れ、typeの指定、フィールド名、表示元の記事ID、添付画像IDを順に確認します。

Smart Custom Fieldsの管理画面で保存したテキストと選択画像
記事更新後に再表示したSCFのテキストと画像欄。WordPress 7.1.2・Smart Custom Fields 5.0.8の隔離環境。

地図とボタンの入力

scf_btnにはhttpまたはhttpsのURLを入れます。scf_mapにはGoogleマップの「地図を埋め込む」で得たiframeのsrcだけを入れます。この例で許可するのはhttps://www.google.com/maps/embedで始まるパスです。通常の共有リンクや他社iframeは表示しません。旧Twitter埋め込みはこの実装には含めていません。

チェックとラジオを保存して表示する

SCFの入力表示例と確認
チェックボックス:設計と検証type=”checkbox”で「設計, 検証」
ラジオボタン:確定type=”radio”で「確定」
scf_btnに自サイトのURLボタンのリンク先が保存したURL

SCF側のフィールド名と、ショートコードのfieldを一致させます。

SCFのチェックボックスは複数の値を保存するため、この実装ではカンマ区切りの文字列として表示します。

ラジオボタンは単一の選択値です。

掲載例のscf_radioを実際のフィールド名に、post_idの123を値を保存した投稿IDに置き換え、type=”radio”を指定してください。

2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0 / SCF 5.0.8では、チェックをSpace、ラジオを矢印キーで選び、更新後の編集画面と本文で値が保持されました。

同じ画面で保存した自サイトURLへ、表示ボタンをEnterキーで開けました。

URLを保存する欄はscf_btnです。

通常のテキスト表示のfieldとは役割を分けて設定します。

地図の実表示や外部リンク先の挙動は別に確認してください。

戻すときは設置したショートコードを外し、この実装の登録を無効にします。

SCFに保存済みの値を削除する必要はありません。

保存したSCFのチェックとラジオの値を本文に表示した画面
保存したSCFのチェックとラジオの値を本文に表示した画面。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0 / SCF 5.0.8で撮影。

確認・解除

値なし、0、改行、引用符を含む文字列、画像未設定、非公開記事IDで確認します。SCFが無効なら空文字になります。ボタンはPC・スマホの両方でTabとEnterで操作し、地図には読み取れるタイトルがあることを確認してください。表示が違う場合はまずfield名とpost_idを見直します。

解除する場合は本文のショートコードを外し、追加した関数と登録処理をまとめて削除します。カスタムフィールドの値は削除しません。旧GitHub例とは同期していないため本文のコードを使用してください。

フィールドの取得方法はSmart Custom Fieldsの公式リポジトリを参照しています。

  • URLをコピーしました!

実装を任せたい方へ

WordPressのカスタマイズ代行

ブロックの追加、テーマの改修、管理画面の調整など、記事で紹介している内容の実装を承ります。1時間 ¥8,000〜(税込)。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次