こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WordPressでカスタムフィールドを追加できるプラグインは様々なものがあります。その中の「Smart Custom Fields（SCF）」は全ての機能を無料で利用することが出来ます。その中には「繰り返しフィールド」という他カスタムフィールドを追加できる「Advanced Custom Fields」では有料版でのみ利用可能な機能も利用することが出来ます。

今回の記事ではそんなSmart Custom Fieldsの各フィールドの 使い方・ 出力方法を解説したいと思います。フィールド名はscf_field、グループ名はscf_groupとしています。

Smart Custom Fieldsの基本的な使い方・出力方法

まずはSmart Custom Fieldsの基本的な使い方・出力方法から見てきましょう。

SCF::get()メソッドを使う

基本的な使い方・出力方法はSCF::get(‘フィールド名’);になります。この出力方法はSmart Custom Fields特有の出力方法です。

<?php
  // 直接出力する場合
  echo SCF::get('scf_field');

  // 変数へ格納する場合
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

SCF::get()メソッドを使用してフィールド名「scf_field」を引数として指定します。直接出力することも一度変数へ格納することも可能です。

post_custom()メソッドを使う

もう一つの使い方・出力方法はpost_custom(‘フィールド名’);になります。こちらはSmart Custom Fields専用の出力方法ではなく、WordPressの標準関数になります。

<?php
  // 直接出力する場合
  echo post_custom('scf_field');

  // 変数へ格納する場合
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

post_custom()メソッドを使用してフィールド名「scf_field」を引数として指定します。SCF::get()メソッドと同様、直接出力することも一度変数へ格納することも可能です。

別ページの値を取得

Smart Custom Fieldsは別ページに設定されている値を取得して表示する使い方も出来ます。

記述方法はSCF::get(‘フィールド名’,’投稿IDまたは投稿スラッグ名’);になります。以下例では投稿ID「123」としています。

<?php
  // 直接出力する場合
  echo SCF::get('scf_field',123);

  // 変数へ格納する場合
  $scf_field = SCF::get('scf_field',123);
  echo $scf_field;
?>

Smart Custom Fieldsの各フィールドの使い方・出力方法

テキスト

<?php
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

テキストが基本の出力になります。

テキストエリア

<?php
  $scf_field = SCF::get('scf_field');
  echo nl2br($scf_field);
?>

テキストエリアを出力する場合はnl2br()メソッドを使用します。nl2br()メソッドは改行箇所を<br>へ変換してくれる関数です。nl2br()メソッドを使用しないと管理画面で改行した個所が改行されずに出力されてしまいます。

メッセージ

「メッセージ」は厳密にはカスタムフィールドではありません。カスタムフィールドの入力画面に表示する説明文を設定するためのものです。

設定は上記のようにしたとします。

こんな感じで入力画面にメッセージが出力されます。

真偽値

<?php
  $scf_field = SCF::get('scf_field');
  if( $scf_field ){
    // はい（true）の時の処理

  }else{
    // いいえ（false）の時の処理
  }
?>

「真偽値」は「はい」を選択した場合、trueが返り値として取得できます。「いいえ」を選んだ場合はfalseが返り値として取得できます。「真偽値」は上記のようにif文で処理を分岐して使用します。

チェック

<?php
  $scf_field = SCF::get('scf_field');
  foreach( $scf_field as $value ){
    echo $value;
  }
?>

セレクトは取得すると配列として取得 として取得されるので、そのまま出力するとarrayと表示されてしまします。そのためforeach文を使い配列の値を出力します。

ラジオボタン

<?php
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

ラジオボタンの場合、選択できる項目はひとつの為、foreach文で配列を回す必要はありません。テキスト同様そのまま出力出来ます。

選択

<?php
  $scf_field = SCF::get('scf_field');
  foreach( $scf_field as $value ){
    echo $value;
  }
?>

選択もセレクト同様、普通に取得すると配列として取得されるので、そのまま出力するとarrayと表示されてしまします。そのためforeach文を使い配列の値を出力します。

ファイル

<?php
  $scf_field = SCF::get('scf_field');
  echo wp_get_attachment_url($scf_field);
?>

ファイルはSCF::get()メソッドで取得するとファイルIDが格納されます。このファイルIDからファイルURLを取得するにはwp_get_attachment_url()メソッドを使用します。

画像

imgタグを含めて取得する場合は以下のように記述します。「thumbnail」のところは画像の大きさを表します。thumbnail, medium, large, fullを指定することが出来ます。

<?php
  $scf_field = SCF::get('scf_field');
  echo wp_get_attachment_image($scf_field,'thumbnail');
?>

imgタグのURLを取得する場合は以下のように出力します。[0]とするのはwp_get_attachment_image_src()メソッドを使用するとURL以外の情報も取得できるためです。そのうち画像URLは配列の0番目に格納されています。

<?php
  $scf_field = SCF::get('scf_field');
  $img_src = wp_get_attachment_image_src($scf_field,'thumbnail');
?>
<img src="<?php echo $img_src[0]; ?>">

WYSIWYG

<?php
  $scf_field = SCF::get('scf_field');
  echo nl2br($scf_field);
?>

WYSIWYGは、ビジュアルエディタのことです。テキストエリア同様通常の出力だと改行されないのでnl2br()を使用して改行させます。

カラーピッカー

<?php
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

カラーピッカーはテキスト同様の形式で出力出来ます カラーピッカーを出力すると#付きの16進数形式のカラーコードで出力されます。

日付ピッカー

<?php
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

日付ピッカーもテキスト同様の形式で出力出来ます。日付ピッカーはカスタムフィールドを設定する画面で以下のように予め設定した形式に沿って出力されます。

yy/mm/dd（D）→2022/08/1（月曜）

時刻付き日付ピッカー

<?php
  $scf_field = SCF::get('scf_field');
  echo $scf_field;
?>

時刻付き日付ピッカーは日付ピッカーに時間が追加されたものなります。使い方は日付ピッカーと同様でカスタムフィールドの設定画面で予め設定した形式に沿って出力されます。

関連する投稿

<?php
  $scf_field = SCF::get('scf_field');
  foreach( $scf_field as $value ){
    echo get_the_title(value);
  }
?>

関連する投稿はSCF::get()で取得すると投稿IDが配列形式で格納されます。格納された投稿IDをforeach文で適宜WordPress関数を使用して取得します。上記例は選択した記事のタイトルを表示しています。

<?php
  $scf_field = SCF::get('scf_field');
  foreach($scf_field as $value){
    $args = array(
      'post_type'=>'投稿タイプ名', 
      'p'=>$value
    );
    $query = new WP_Query($args);
    if($query->have_posts()){
      while($query->have_posts()){
        $query->the_post();
        // 内容を出力

      }
    }
  }
?>

上の例みたいにサブループを使って出力することも可能です。

関連するターム

<?php
  $scf_field = SCF::get('scf_field');
  foreach($scf_field as $value){
    echo get_the_title(value);
  }
?>

関連するタームを取得し表示するとタームIDが出力されます。以下のようにそれぞれ指定することでタームIDからターム情報を取得できます。

<?php
  $scf_field = SCF::get('scf_field');
  foreach( $scf_field as $value ){
    $cat = get_category($value);
    echo $cat->name;
  }
?>

Smart Custom Fieldsを使用した応用テクニック

Smart Custom Fieldsを使用したテクニックとしてブログカードの作成方法は以下記事でご紹介しています。

まとめ

いかがでしたか？
Smart Custom Fieldsの各フィールドの使い方・出力方法をご紹介しました。この便利なプラグイン「Smart Custom Fields」を使用してWordPressをより便利にカスタマイズしていきましょう！