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

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

更新2023/12/20

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

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

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

プラグインを使用する前に

私がWordPress6.1.1のバージョンで確認した時は問題なく使用できたので、この記事も更新しています。

しかしSCFは更新が数年ストップしており、最近のメジャーリリースWordPressバージョンでテストされていません。開発者の方からもクローズに向けて動く、というアナウンスがありました。

とりあえず、Smart Custom Fields と MW WP Form はクローズに向けて動こうと思います。どちらも公式ディレクトリでのユーザー数が一定を超えていて自分ではクローズできないということみたいなので、ちょっといついつにクローズしますと名言はできませんが、一応そういう方向性でいこうと思います。

引用:https://twitter.com/inc2734/status/1700388299444252998

プラグインページには「後継者を募集しています」という表示があったので、もしかしたら今後どなたかが引き継いでくれるかもしれません。
プラグインページ : Smart Custom Fields – WordPress plugin | WordPress.org

ただ現時点ではアップデートされていません。更新がないプラグインはWordPressのバージョンアップによって使用できなくなったり、エラーが発生しても対応されず、自身で解決したり他のプラグインを使用しなければなりません。

更新されないプラグインは不安…試しに使ってみたけどうまく使えないといった場合は別のプラグインも検討してみてください。

SCFのカスタムフィールド設定

動作確認環境

  • WordPressバージョン  :  6.1.1
  • プラグインバージョン  :  4.2.2
  • 動作確認日  :  2023/03/26

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

プラグイン追加画面

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

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

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

新規追加の初期画面

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

カスタムフィールド設定画面
投稿編集画面

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

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

繰り返しフィールドは、設定した項目を投稿画面上で増やせるフィールドです。複数の項目をグループとして分けたい場合も繰り返し機能をONにすることでグループにすることができます。

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

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

【PR】

SCFカスタムフィールドの出力方法

カスタムフィールドの値を取得し、echo を使って出力します。

SCF::get() はSCF専用のコードで簡単にカスタムフィールドの値を取得できます。
このコードの他、 post_custom()get_post_meta() などWordPressの汎用的な書き方でも取得可能です。こちらの記述方法にしておくとプラグインを変更したい時にファイルのコードがそのまま使えます。

SCF::get('field_name');
post_custom('field_name');
get_post_meta(get_the_ID(), 'field_name', true);

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

基本の出力コード

SCF の基本の取得コードはこちら。

SCF::get('field_name');

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

変数に入れておくと使い回しができて便利です。
SCFでは入力項目を必須に設定することはできないので、空欄の場合も想定して条件分岐を入れておくと安全です。

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

// $sampleを出力
echo $sample;

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

テキストエリアで改行を表示する

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

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

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

// 改行されない
echo $scf_textarea;
// 改行される
echo nl2br($scf_textarea);

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

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

$scf_checkbox = scf::get('check');
echo $scf_checkbox;

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

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

ラジオボタンやセレクトボックス(選択)は一つしか選択しないものなので、テキスト同様の書き方でOK。

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

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

画像の出力

画像を表示させるには wp_get_attachment_image() を使用します。

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

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

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

<?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 の部分はグループ内にあるフィールドで設定した「名前」が入ります。

TOPへ