Smart Custom Fields を使ってカスタムフィールド作成

カスタムフィールドを作るWordPressのプラグイン Smart Custom fields(スマートカスタムフィールド)の使い方についてのメモです。(ここからSmart Custom fields → SCF と表記します)

カスタムフィールド作成のプラグインで一番有名なのは、Advanced Custom Fields(ACF)だと思います 。ACFは無料版と有料版があり、無料でできることが限られており、そのうちの一つに繰り返しフィールドがあります。

この繰り返しフィールドをSCFは無料で使えることがACFに勝るメリット。ACFほど豊富な機能は必要ない場合、シンプルで使いやすいのもSCFです。

前書き

使い方の前に、SCFについてお話ししておきます。

このプラグインは以前、数年もの間更新されておらず、作者の方がクローズに向けて動く、新しく採用するのは推奨しないとのことをアナウンスされていました。

しかしバグやエラーの修正が主ではありますが、現在でも更新はされていました。現時点でWordPress最新バージョンの6.8.6まで検証済みとなっています。

プラグインページ : Smart Custom Fields – WordPress plugin | WordPress.org

更新されてはいるため使い続けられるのかな…と思いつつ、一度クローズするとの話はあったこと、機能のアップデートなどはなさそうなため、少し慎重に使用すべきかなとも思います。
一度試しに使ってみて問題ないか確認してから本番のサイトに取り入れてみてください。

基本のカスタムフィールド作成

広告

動作確認環境

  • WordPressバージョン  :  6.8.1
  • プラグインバージョン  :  5.0.3
  • 動作確認日  :  2025/06/22

まずはプラグイン追加画面から「Smart Custom fields」を検索しインストール & 有効化。

プラグイン追加時の表示

有効化したらメニューに「Smart Custom fields」が追加されるのでクリックして設定画面へ移動します。

上部にある「新規追加」をクリックしてカスタムフィールドを作っていきます。

カスタムフィールドのタイトルを入力し、「フィールドを追加」をクリックしてフィールドの内容を設定していきます。

タイトルを設定しなくてもフィールドの公開はできますが、投稿の編集画面に作成したカスタムフィールドが表示されませんでした。なのでタイトルも忘れずに設定しましょう。

新規追加の初期画面

「タイプ」と「名前」は入力必須です。「ラベル」は投稿時に表示されるテキストで、空欄にした場合は「名前」で設定したテキストが表示されます。

広告
カスタムフィールド設定画面

選べるタイプは基本のテキストやテキストエリア、チェックボックスやラジオ・セレクト、画像やファイル、関連投稿なども選べます。

表示条件の設定

カスタムフィールドをどの投稿タイプで使用するかを設定も必要です。「表示条件(投稿)」に、サイトで使用されている投稿タイプがリストに表示されているので、使用するものをONにします。

どの投稿タイプもOFFの状態の場合、どこにもカスタムフィールドが表示されません。

表示条件は投稿の他、プロフィール(ユーザー権限)、タクソノミー、オプションページが用意されています。これらは、全ての条件で表示させたい場合は ON にする必要はありません。

作成したカスタムフィールド投稿を公開すると、表示条件にて設定した投稿タイプの編集画面に、フィールドが表示されます。

投稿編集画面

SCFの基本の取得・出力方法

SCFには、カスタムフィールドの情報を取得する SCF:: から始まる専用コードがあります。取得のみなので、echo を使って出力するのが基本の使い方です。

このコードの他 post_custom()get_post_meta() など、WordPressの汎用的な書き方でも取得可能です。こちらの記述方法のメリットは、プラグインを変更した時にファイルのコードがそのまま使えることです。

PHP
post_custom('field_name');
get_post_meta(get_the_ID(), 'field_name', true);

この記事では SCF::*** を使ってコードを紹介していきます。

カスタムフィールドに入力された値は SCF::get('field_name') で取得することができます。

“SCF” の文字列は大文字でも小文字でもOK。field_name の部分にSCFで設定したフィールド名を入れると、そのフィールドに入力した内容が取得できます。

SCFでは入力項目を必須に設定することはできないので、空欄の場合も想定して条件分岐を入れておきましょう。変数に入れておくと使い回しができて便利です。
またこのコードの戻り値はサニタイズされていないとのことなので、必要に応じてサニタイズ処理も入れておくと安全です。

PHP
$sample = esc_html(SCF::get('field_name'));

// $sampleを出力
echo $sample;

// $sampleを使って条件分岐
if($sample) {
  // $sampleがあったら…
} else {
  // $sampleがなかったら…
}

テキストエリアで改行を表示させたい

フィールドタイプ「テキストエリア」にした時、入力時に改行しても、SCF::get('field_name'); だけでは出力の時に改行されません。(半角スペースになる)

改行を表示したい時は nl2br() を使います。

PHP
$scf_textarea = esc_html(SCF::get('textarea'));

// 改行されない
echo $scf_textarea;
// 改行される
echo nl2br($scf_textarea);
nl2br() 有りと無しそれぞれのコードの出力結果

チェックボックスはforeachを使う

チェックボックスは配列で値を返します。下記のようなコードだとエラーになり表示されません。

PHP
$scf_checkbox = scf::get('checkbox');
echo $scf_checkbox;

配列の場合、foreachを使って出力します。

PHP
$scf_checkbox = scf::get('checkbox');
foreach($scf_checkbox as $field ){
  echo esc_html($field);
}

ラジオボタンやセレクトボックス(選択)は、テキストタイプと同様の書き方で取得できます。

PHP
$scf_radio = esc_html(scf::get('radio'));
echo $scf_radio;

$scf_select = esc_html(scf::get('select'));
echo $scf_select;

画像の出力

SCF の画像タイプの戻り値は「ID」です。そのため、画像を表示させるためには wp_get_attachment_image() を使用します。

PHP
$scf_image = scf::get('image');
echo wp_get_attachment_image($scf_image);

ファイルURLの出力

ファイルタイプのフィールドも、画像と同じく戻り値は「添付ファイルのID」です。ファイルのURLを取得するには wp_get_attachment_url() を使います。

PHP
$scf_file = scf::get('file');
echo esc_url(wp_get_attachment_url($scf_file));

繰り返しフィールドの作成と出力

繰り返しフィールドは、設定した項目を投稿画面上で増やせるフィールドです。

SCF は ACF のようにフィールドタイプに「グループ」というものはありません。
そのため、項目を動的に増やす必要はないけれど、複数の項目をグルーピングしたいという時にもこちらの機能が役立ちます。

この設定によって投稿画面で表示の増減ができるようになります。
三線部分をドラッグして表示順を変えることもできます。

作成したSCFのフィールドが表示された投稿画面

繰り返しフィールドの出力は、まずグループを取得し、foreach で回して各項目の値を出力させます。

PHP
<?php
  $scf_group = SCF::get('scf_group');
  foreach ($scf_group as $item):
?>
<table>
  <tr>
    <th><?php echo wp_get_attachment_image( $item['scf_img'] , 'large' ); ?></th>
    <td><?php echo $item['group_text']; ?></td>
  </tr>
</table>
<?php endforeach ?>

$item['scf_img']scf_img の部分はグループ内にあるフィールドで設定した「名前」が入ります。

チェックボックスのグループ出力

繰り返しフィールドの中にチェックボックスがある場合も、通常のチェックボックス出力(チェックボックスはforeachを使う)と同様に値が配列で返ってきます。そのため、繰り返しフィールド用の foreach の中に、チェックボックス用の foreach をさらに入れ子にする必要があります。

PHP
<?php
  $scf_group = SCF::get('scf_group');
  foreach ($scf_group as $item):
    $scf_checkbox = $item['group_checkbox'];
?>
<ul>
  <?php foreach ($scf_checkbox as $check): ?>
  <li><?php echo esc_html($check); ?></li>
  <?php endforeach; ?>
</ul>
<?php endforeach; ?>

チェックボックスや関連投稿・関連タームなど「もともと複数値を返すフィールドタイプ」を繰り返しフィールドの中に入れた場合は、この二重ループの形が基本になります。

関連投稿フィールドの設定・出力

「関連する投稿」タイプを使うと、記事ごとにおすすめの関連記事を選択できるようになります。ここでは設定画面と出力コードをあわせて紹介します。

関連投稿フィールドの設定

SCFの設定画面でタイプを「関連する投稿」にします。

「投稿タイプ」は、投稿・固定ページ・ナビゲーションメニューから選択可能。「投稿」のみにチェックすると、投稿だけが検索候補になり、複数選択も可能です。

「選択できる個数」は、1つのフィールドで選べる関連投稿の上限数です。空欄にすると上限なしになります。

この設定を保存すると、投稿の編集画面のメタボック内に「関連投稿フィールド」(カスタムフィールドで付けたタイトル)が追加されました。

検索欄にタイトルの一部を入力すると候補が一覧表示され、選択すると右側のリストに追加されます。右側に追加された項目は、三線アイコンをドラッグして表示順を並び替えたり、×アイコンでリストから削除したりできます。「選択できる個数」を超えて追加しようとしても選択できません。

「関連する投稿」タイプは、フィールド自体が「選択できる個数」の設定によって複数選択に対応しています。そのため、単に複数の関連記事を選びたいだけなら「繰り返し」をONにする必要はありません(実際、投稿編集画面には検索窓+選択リストという、追加のトグルなしでも複数選択できるUIが表示されます)。

「関連投稿1件ごとに表示用ラベルやメモなど、別のフィールドもセットで持たせたい」という場合は、グループ化して繰り返しをONにする必要があります。その場合はグループ用のforeachの中に、下記の出力コードをさらに入れ子にする形になります。

関連投稿フィールドの出力

「選択できる個数」を複数(2以上)に設定しているため、SCF::get('投稿名') の戻り値は選択された投稿IDの配列です。投稿IDの配列を1回foreachでループするだけで済みます。

PHP
<?php
  $related_posts = SCF::get('投稿名');
  if ($related_posts):
    foreach ($related_posts as $post_id):
      $title = get_the_title($post_id);
      $url   = get_permalink($post_id);
?>
<p><a href="<?php echo esc_url($url); ?>"><?php echo esc_html($title); ?></a></p>
<?php
    endforeach;
  endif;
?>

繰り返し(グループ)を使う場合は、グループ用のforeach を追加します。

PHP
<?php
  $scf_group = SCF::get('関連投稿');
  foreach ($scf_group as $item):
    $related_posts = $item['投稿名'];
    if ($related_posts):
      foreach ($related_posts as $post_id):
        $title = get_the_title($post_id);
        $url   = get_permalink($post_id);
?>
<p><a href="<?php echo esc_url($url); ?>"><?php echo esc_html($title); ?></a></p>
<?php
      endforeach;
    endif;
  endforeach;
?>

出力時のサニタイズ処理について

SCF::get() の戻り値はサニタイズされていないため、出力前にエスケープ処理を入れておくと安全です。ただし、フィールドの種類によって使う関数が変わるので注意が必要です。

  • テキスト・テキストエリア・ラジオ・セレクト・チェックボックスの値、関連投稿のタイトルや関連タームの名前など、プレーンテキストとして表示する値esc_html()
  • ファイルURL・画像URL・関連投稿や関連タームのURL(get_permalink()get_term_link() の戻り値) → esc_url()
  • href 以外のHTML属性(alt 属性や title 属性など)に値を入れる場合 → esc_attr()
  • wp_get_attachment_image() の戻り値 → エスケープ不要。
    すでに安全な <img> タグ(属性はWordPress内部で esc_attr() 済み)を返しているため、esc_html() で囲むとタグ自体が文字列としてエスケープされ表示が崩れる
  • テキストエリアで改行を反映する場合 → nl2br(esc_html($text)) 。これは順序を逆(esc_html(nl2br()))にすると <br> タグまでエスケープされてしまいます。
  • 関連投稿・関連タームのID自体 → エスケープ不要。
    IDは get_the_title()get_permalink() の引数として使うだけなので、エスケープするのは取得後のタイトル文字列やURLの方になります。

「最終的にHTMLの中にテキストとして差し込む値」には esc_html()、「URLとして差し込む値」には esc_url()、「すでにHTMLタグを返す関数の戻り値」にはエスケープ不要、という使い分けになります。

広告

カテゴリー : WordPress