wordpress

Smart Custom Fields(SCF)のタイプ一覧と取得するコード

このサイトはアフィリエイト広告を掲載しています。

Smart Custom Fields(SCF)で使用するフィールドタイプの一覧と使い方です。

主な機能、取得するコードをまとめています。基本的には投稿記事に紐づいたカスタムフィールドを取得しますが、他の投稿のカスタムフィールドから取得してくる方法もあります。

項目ごとに紐づけるカスタムフィールドを分けて、編集しやすい管理画面を目指しましょう!

ばく
ばく
  • この記事を書いた人

ばく

未経験、異業種からWeb制作の副業を経てフリーランスに。
学習ノウハウ、役に立った情報を初心者に寄り添った目線で発信します。

Smart Custom Fields(SCF)の主なフィールドタイプ一覧と使い方

繰り返し使うフィールドが多いと思われるSCF。

  • 画像+テキスト(テキストエリア)の組み合わせでカードを作る
  • クライアントがメニューを更新したいからカスタムフィールドを作る

といった利用方法が多いと思います。

以下のコードを追加してユーザーファーストのサイトを作り上げましょう。

1. テキスト(text)

用途:1行の簡単な入力(名前・タイトル・金額など)

取得方法

<?php echo esc_html( SCF::get('フィールド名') ); ?>

上記の場合は<php echo esc_html( scf::get('text') );?>ですね。

「名前*」のところがフィールド名になります。

  • ラベル:編集画面上の項目名
  • デフォルト:最初から入れるテキスト
  • 手順:編集画面上に表示される内容
  • メモ:編集画面上に表示されるメモ

2. テキストエリア(textarea)

用途:複数行の説明や紹介文

取得方法

<?php echo nl2br( esc_html( SCF::get('フィールド名') ) ); ?>

改行を反映させるためにnl2br()を使いましょう

上記の画像の例だと、<?php echo nl2br(esc_html(SCF::get('textarea')); ?>となります。

名前*がフィールド名ですね。

  • ラベル:編集画面上の項目名
  • 行:何行まで対応するか。最低3~
  • デフォルト:最初から入れるテキスト
  • 手順:編集画面上に表示される内容
  • メモ:編集画面上に表示されるメモ

3. メディア(image)

用途:画像のアップロード(IDで保存される)

取得方法

<?php echo wp_get_attachment_image( SCF::get('フィールド名'), 'full' ); ?>

wp_get_attachment_image( ID, サイズ )と返ってくるため、完全な <img src="..." width="..." ...> タグ を生成して返します。

背景画像のみ、urlのみ取得、と言った場合は

<?php echo wp_get_attachment_url( SCF::get('フィールド名'), 'full' ); ?>

と、image()url()が変わってきます。

名前*をフィールド名に入れてください。

  • ラベル:編集画面上の項目名
  • 手順:編集画面上に表示される内容
  • メモ:編集画面上に表示されるメモ

画像についての詳細はこちらをごらんください。

4. セレクトボックス(select)

用途:選択肢から1つを選ぶ(例:部屋タイプ)

取得方法

<?php echo esc_html( SCF::get('フィールド名') ); ?>

編集画面で選択したものがコードとして反映されます。

テキストをそのまま返す(反映される)ため

不動産サイトや求人サイトで

  • 募集中
  • 制約済み
  • 商談中

などの切り替えに使うことが多いです。

空欄だと変な隙間や行間が出来たりするので、if文で囲います。

<?php
// まず値を取得
$select_value = SCF::get('フィールド名');

// 値が入っている場合のみ表示する
if ( $select_value ) {
    echo '<p>選択したのは:' . esc_html( $select_value ) . '</p>';
}
?>

セレクトボックスの詳細についてはこちらの記事を参照してください。→作成中

5. チェックボックス(checkbox)

用途:複数の項目を選択できる(配列で取得)

取得方法

<?php
$values = SCF::get('フィールド名');
if ( is_array($values) ) {
    foreach ( $values as $value ) {
        echo esc_html( $value ) . '<br>';
    }
}
?>

「表示したいもの」を選択する機能です。

チェックボックス具体例

  • 物件や店舗などの「施設・設備」
  • スケジュールや営業日の「曜日指定」

などに使いやすいですね。

チェックボックスの使い方、コードの書き方についての詳細はこちらの記事を参照してください。

→作成中

6. ラジオボタン(radio)

用途:選択肢から1つを選ぶ(セレクトと似てる)

取得方法

<?php echo esc_html( SCF::get('フィールド名') ); ?>

選択した中から一つ選んで値を返します。

私は色を変えるクラスを変更するのに使ったりします。

以下のようなコードですね。

    <div class="wrapper">
        <?php
        $info_list = SCF::get('information'); //フィールド名を取得
        foreach ($info_list as $info) : ?>
            <div class="box">
                <?php
                // カードカラーによってクラスを決定
                $color_class = '';
                if ($info['card-color'] === 'black') {
                    $color_class = 'item--black';
                } elseif ($info['card-color'] === 'red') {
                    $color_class = 'item--red';
                } elseif ($info['card-color'] === 'gray') {
                    $color_class = 'item--gray';
                }
                ?>
            </div>
        <?php endforeach; ?>
    </div>

詳しい解説はこちらでどうぞ。

7. グループ(group)

用途:複数の項目を1セットでまとめて繰り返し使える

取得方法

<?php
$group = SCF::get('グループ名');
foreach ( $group as $item ) {
    echo esc_html( $item['サブフィールド名'] );
}
?>

SCFでも特に役立つと思われるグループでの繰り返しです。

例)カードの内容として取得する一覧

  • 画像
  • テキスト
  • テキストエリア

この3つの項目をひとまとめにして繰り返し処理を行うことが出来ます。

ばく
ばく

SCFでは基本的にこの「グループ」を使って繰り返すことが多いと思います。

「繰り返し」のスイッチをクリックしてグループを有効化してください。

8. 真偽値(true / false(true_false))

用途:チェックを入れたかどうか(ON/OFFスイッチ)

取得方法

<?php if ( SCF::get('フィールド名') ): ?>
    <p>チェックあり!</p>
<?php endif; ?>

はい(true)かいいえ(false)のチェックを入れてON/OFFを切り替えます。

if文に組み込み、trueを選択したら表示する、といった利用法が多いと思います。

真偽値を使う例

  • リストデータを編集中だけど、表示したくない…。
  • 「おすすめバッジ」や「NEW」のような表示のオン・オフをしたい
  • ボタンの色や形を期間によって入れ替えたい(A/Bテスト)

クライアントが簡単に切り替えを行えるようになるため、便利な機能です。

9.メッセージ

用途:カスタムフィールド内に見出し(のようなテキスト)を作成する

カスタムフィールドの説明、主にクライアントへの説明へ使います。

ただ、各項目に「手順」や「メモ」があるためあまり使わない機能ですね。

補足・具体例の紹介

SCF::get() は「今の投稿」のフィールドを取得します。

他の投稿の値を取得したいときは、第2引数に 投稿ID を渡します。

具体例:固定ページの値をfront-page.phpで取得したい場合

たとえば、固定ページ「トップページ設定」に登録したフィールド main_message を取得したいとき:

<?php
$top_page_id = get_option('page_on_front'); // フロントページの固定ページID
echo esc_html( SCF::get('main_message', $top_page_id) );
?>

具体例 :カスタム投稿タイプの値を「固定ページ」で取得したい場合

たとえば、「お知らせ投稿(post_type = news)」の中から特定の投稿(ID = 123)のカスタムフィールド news_title を取得:

<?php
echo esc_html( SCF::get('news_title', 123) );
?>

具体例: 投稿(通常のブログ)のカスタムフィールドを「カスタム投稿ページ」で取得したい場

たとえば、ブログ記事のIDが 45 で、そこに登録された recommend_reason をカスタム投稿ページで表示したいとき:

<?php
$blog_id = 45; // 取得したい投稿IDを指定
echo esc_html( SCF::get('recommend_reason', $blog_id) );
?>

投稿idの確認方法

IDがわからないときは、WordPress管理画面の投稿編集URL(例:post=123)から確認できます!

投稿をホバーしたら現れるURLにIDが表示されます。

まとめ:SCFを使いこなして更新しやすいサイトを作ろう

今回はSmart Custom Fields(SCF)の主要なフィールドタイプと、それぞれの取得・表示方法について解説しました。

SCFは単にデータを入力するだけでなく、「クライアントがいかに迷わず更新できるか」を設計できる強力なプラグインです。

ポイント

  • 適材適所のフィールド選び: 1行テキスト、複数行、画像、選択肢など、入力内容に最適な形式を選ぶことで入力ミスを防げる。
  • グループ機能の活用: 「繰り返し」機能を使えば、メニュー表やスタッフ紹介など、数が増減するコンテンツにも柔軟に対応。
  • 他ページの情報の取得: SCF::get('フィールド名', 投稿ID) を使うことで、トップページに固定ページの情報を表示するなど、サイト全体の連携がスムーズに。

コードはコピペで使えるようにしていますが、必ず esc_html() などのエスケープ処理をしてセキュリティも意識しましょう!

ばく
ばく

案件によっては「ここはチェックボックスの方がいいかな?」「画像とテキストはセットでループさせよう」といった判断が求められます。 この記事を辞書代わりに使いながら、ユーザーファーストな管理画面を作り上げてくださいね。

最後までご覧頂きありがとうございました!

  • この記事を書いた人
未経験からWeb制作フリーランスになった「ばく」です。

ばく

未経験、異業種からWeb制作の副業を経てフリーランスに。
学習ノウハウ、役に立った情報を初心者に寄り添った目線で発信します。

-wordpress