クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > PHP > Smart Custom Fieldsの繰り返し（グループ）機能の出力タグ一覧

Smart Custom Fieldsの繰り返し（グループ）機能の出力タグ一覧

PHP WordPress

Qiitaアドベントカレンダー「WordPress」5日目の記事です。
WordPressのカスタムフィールド のプラグインSmart Custom Fields（SCF）は「繰り返し（グループ）」機能が標準で搭載されいます。いつも大変お世話になっています！このグループ機能がついた状態の出力タグ一覧を自分の備忘録も兼ねてまとめました。ちなみに巷でGutenbergの「ブロック」が話題になっておりますがカスタムフィールドはブロックとはまた違った機能であり、使い分けになっていくと思っています。

【目次】

※参考：WordPressの基本はこちら
【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ！（6記事） - クモのようにコツコツと

Gutenbergの「ブロック」と「カスタムフィールド」の違い

WordPress 5.0で搭載される新しい記事作成機能Gutenbergの「ブロック」。2018年12月現在、WordPress 4.9.8でもプラグインで先行体験できます。

Gutenberg | WordPress.org

私も早速触ってみました。いろんな種類のブロックを積み木状に配置して、あとからも自由に順番を入れ替えることができます。使い勝手がとても良くなりました！

ブロックが主流になると、これまで活躍していた「カスタムフィールド」は過去のものになってしまうのでしょうか？

※参考：Before Gutenberg - カスタムフィールド職人の命運やいかに？ - Capital P

私は両方を触ってみてこう感じました。「ブロック」と「カスタムフィールド」はお互いに違う役割があり、完全に取って代わるものではなく使い分けになるだろう、と　（今のところね）。

f:id:idr_zz:20181204004601j:plain

「ブロック」が配置されるのは本文の中です。いっぽうカスタムフィールド は本文の外にあります。そのため、このような役割分担になるのではないでしょうか。

  • ブロック：自由に入れ替えて構成したい記事コンテンツ
  • カスタムフィールド：商品スペック、人物プロフィールなどテンプレート化した項目

Smart Custom Fields（SCF）の繰り返し（グループ）機能

さて、カスタムフィールドの実装はプラグインを利用する方が便利です。認知度としては「Advanced Custom Fields（ACF）」がもっともよく知られています。

しかし私がよく利用しているのはACFではなく「Smart Custom Fields（SCF）」です。いつも大変お世話になっています！

Smart Custom Fields | WordPress.org

SCFの一番の特徴は「繰り返し（グループ）」機能が標準で搭載されていることです！（ACFではグループ機能は有料のオプションです）

f:id:idr_zz:20181204221035j:plain

※繰り返しの例：

  • グループ複製前：名前、出身地、写真（+）、コメント
  • グループ複製後：名前、出身地、写真（1枚目、2枚目、3枚目）、コメント

繰り返し機能を有効にしている「写真」グループのプラスアイコンを押すと写真の枚数を自由に増やせます。

増やした写真をリスト（li要素）に入れてslickのフォトスライダーにする、などの活用が可能です。

※参考：slick - the last carousel you'll ever need

SCF のダッシュボードでの操作方法はこちらの記事が詳しいです。

※参考：Smart Custom Fields(SCF)でカスタムフィールドを作成する | AkeCre

グループ機能の出力タグ

ダッシュボードで設定したSCFのカスタムフィールドを画面上に表示するには、テーマフォルダ内のphpファイルに出力タグを書く必要があります。

SCFの出力タグは、先ほどの記事の姉妹記事がこれまた詳しいです。

※参考：Smart Custom Fields(SCF)でカスタムフィールドを出力する | AkeCre

本記事は、いつもお世話になっている上記記事のコードをSCFならではの「グループ機能」バージョンに書き換えようという試みです。

テキストのグループ出力

Smart Custom Fieldsのデフォルトの書式はこちら

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

  • 変数$cf_sampleにカスタムフィールドcf_sampleの情報を代入。
  • SCF::get()メソッドはSmart Custom Fieldsの独自のメソッド。「SCF」はプラグイン名の頭文字ですね。
  • SCF::get()メソッドの引数にカスタムフィールド名を入れるとフィールドの値を取得します。
  • echoで$cf_sampleの値（テキスト）を出力します。

値の数は単一なのでechoで出力するだけで済みました。シンプルなコードです。

これを繰り返し（グループ）機能に対応した形に書き換えるとこうなります。
（カスタムフィールドのグループ名をcf_group、グループ内のカスタムフィールド名をcf_sampleとします）

<?php
$cf_group = SCF::get('cf_group');
foreach ($cf_group as $field_name => $field_value ) {
    echo $field_value['cf_sample'];
}
?>

  • 変数cf_groupにグループ名cf_groupの情報を代入（通常はフィールド名を入れる）
  • foreach文ループの条件は配列cf_groupの中のfield_name（フィールド名）の値field_value
  • echoでカスタムフィールド cf_sampleの値field_valueを出力

グループでは新たに配列やforeach文がでてきましたね。

グループは複数が前提のため、値は配列に格納されます。値は配列用のループforeach文で$field_value['フィールド名']という形で繰り返し取得します。

テキストエリア（改行も反映）のグループ出力

テキストエリアは複数業に渡るテキストです。2つの出力方法があります。

一つ目は改行も反映させて出力から。

<?php
$cf_sample = SCF::get('cf_group');
foreach ($cf_group as $field_name => $field_value ) {
echo nl2br($field_value['cf_sample']);
}
?>

テキストとの違いは$field_value['cf_sample']をnl2br()メソッドの引数に入れていること。nl2br()メソッドは文中の改行も出力されます。

テキストエリア（HTMLタグもテキスト扱い）のグループ出力

2つ目はHTMLタグをテキストとして扱って出力

<?php
$cf_sample = SCF::get('cf_group');
foreach ($cf_group as $field_name => $field_value ) {
echo esc_html($field_value['cf_sample']);
}
?>

今度は$field_value['フィールド名']をesc_html ()メソッドの引数に入れています。esc_html ()メソッドで文中のHTMLタグもテキストとして出力されます。

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

チェックボックスは項目が「複数選択可」のため、値が配列に入っています。グループ機能がないデフォルトのコードもforeach文で配列をループしています。

これまでの形（'echo $field_value['cf_sample'];'）で出力したところ、値がarray（「配列がありますよ」という意味）になりました。

そのため下記のようにforeach文を二重の入れ子構造にしました。

<?php
$cf_group = SCF::get('cf_group');
foreach ($cf_group as $field) {
    $check_array = $field['cf_sample'];
    foreach($check_array as $field_array) {
    echo $field_array;
    }
}
?>

  • 変数$check_arrayにチェックボックスのフィールド名$field['cf_sample']を入れる
  • foreach文の条件、$check_arrayをループ（変数名$field_array）
  • $field_arrayを出力

画像表示のグループ出力

画像の表示はwp_get_attachment_image()メソッドを使います（長い名前ですね）。

<?php
$cf_group = SCF::get('cf_group');
foreach ($cf_group as $field_name => $field_value ) {
    echo wp_get_attachment_image($field_value['cf_sample'] , 'large' );
}
?>

  • wp_get_attachment_image()メソッドの第1引数にグループ名とフィールド名（$field_value['cf_sample']）を入れる
  • 第2引数に画像サイズを入れる（個人的オススメはfullです。リサイズがないのでCSSで任意に設定できる）

画像のURLのグループ出力

画像のURLを取得して、既存のimg要素のsrc属性に入れたいときがあります。そんなときはwp_get_attachment_image_src()メソッドです（←長っ！）。

<?php
$cf_group = SCF::get('scf_g');
foreach ($cf_group as $field_name => $field_value ) {
    $cf_sample = wp_get_attachment_image_src($field_value['cf_sample'],'large');
    $imgUrl = esc_url($cf_sample[0]);
    echo $imgUrl;
}
?>

  • 変数$cf_sampleにwp_get_attachment_image_src()メソッドで画像の情報を入れる
  • wp_get_attachment_image_src()メソッドの第1引数はグループ名とフィールド名、第2引数は画像サイズ
  • 変数$imgUrlにesc_url()メソッドでWebサイトのホーム（Topページ）のURLを取得
  • esc_url()メソッド引数の中はホームURLに続くディレクトリ名。
  • $cf_sample[0]は$cf_sampleの第1引数（画像のURL）*1
  • 最後にechoで画像URLが入った$imgUrlを出力

ファイルURLのグループ出力

ファイルのURLはwp_get_attachment_url()メソッドです。a要素のhref属性に入れてダウンロードボタンを作ったりします。

<?php
$cf_group = SCF::get('scf_g');
foreach ($cf_group as $field_name => $field_value ) {
    $cf_sample = esc_url(wp_get_attachment_url($field_value['cf_sample']));
    echo $cf_sample;
}
?>

  • 変数$cf_sampleの中にesc_url()メソッドでWebサイトのホーム（Topページ）のURLを取得
  • esc_url()メソッドの引数はwp_get_attachment_url()メソッドでファイルのURLを取得
  • wp_get_attachment_url()メソッドの引数はグループ名とフィールド名$field_value['cf_sample']
  • 最後にechoでファイルのURL$cf_sampleを出力

画像URLと似ていますがね。サイズ情報がなくURL情報のみなので1行少なくてシンプルです。

関連する投稿のタイトル・URLのグループ出力

こちらは記事下とかに付けているレコメンド（関連する記事）に使ったりします。レコメンドなので複数ある前提で配列に入っています。

そのため先ほどのチェックボックスと同じように配列ようのループforeach文を入れ子にしています。

<?php
$cf_group = SCF::get('scf_g');
foreach ($cf_group as $field ) {
    $check_array = $field['cf_sample'];
    foreach ($check_array as $field_array) {
    echo get_post($field_array)->post_title;//タイトル
    echo get_permalink($field_array);//URL
    }
}
?>

  • 変数$check_arrayにチェックボックスのフィールド名$field['cf_sample']を入れる
  • foreach文の条件、$check_arrayをループ（変数名$field_array）
  • get_post()メソッドで関連投稿のタイトルを出力
  • get_permalink()メソッドで関連投稿のURLを出力

get_post()メソッドはタイトル、get_permalink()メソッドはURLを出力します。

※参考：その他の値についてはこちら
Smart Custom Fields(SCF)でカスタムフィールドを出力する | AkeCre

関連するタームの名前・スラッグ・URLのグループ出力

関連するタームもレコメンドですが、同じカテゴリの最新記事を表示したします。

こちらも複数ある前提で配列に入っているので、ループ foreach文を入れ子にします。

<?php
$cf_group = SCF::get('scf_g');
foreach ($cf_group as $field ) {
    $check_array = $field['cf_sample'];
    foreach ($check_array as $field_array) {
    $term = get_term($field_array);
    echo $term->name;//名前
    echo $term->slug;//スラッグ
    echo get_term_link($term->slug,$term->taxonomy);//URL
    }
}
?>

  • 変数$check_arrayにチェックボックスのフィールド名$field['cf_sample']を入れる
  • foreach文の条件、$check_arrayをループ（変数名$field_array）
  • 変数$termにget_term()メソッドで$field_arrayのターム情報を取得
  • ->nameで$termのターム名を出力
  • -> slugで$termのスラッグ 名を出力
  • get_term_link()メソッドでタームのURLを出力

関連する投稿とよく似た形式でしたね！

最後に

なお、本記事のコードの元となった元記事では、このあと「繰り返しフィールドの値を表示する」となります。

実はこのコードこそが本記事の冒頭の「テキストのグループ出力」と同一の形式なのです！つまり本記事は元記事の勝手な「続編（FORK）」というわけです。

グループ機能の基本形式は下記になります。

  • SCRの値を呼びたすSCF::get()メソッド。グループ機能は引数にグループ名を入れる
  • グループ機能の値は複数前提なので配列に格納されている
  • 配列用のループforeach文で配列の値を複数回取得する
  • $field_value[フィールド名]という書式でフィールドの値を取得する
  • チェックボックス、関連投稿、関連タームなどは複数項目あり、もともと配列に入っている。そのためforeach文を入れ子構造にしてループする。

SCFには今回紹介していない種類のカスタムフィールドもまだありますが、元記事と本記事を見比べていただくとどのように打ち替えればいいか想像がつくと思います。レッツトライ！

※参考：Smart Custom Fields(SCF)でカスタムフィールドを出力する | AkeCre

SCFはほぼほとんどのWordPress案件で使っていて、こちらの記事わわかりやすいのでいつも参照していました。そしてグループ機能を使う際は毎回自分で書き換えをしていました。いつかまとめたいなと思っていたので、どなたかのお役にも立てればと思います。2019年もカスタムフィールド 、使っていきまSHOW！

※2019/11/18追記

SCF作者のキタジマさんがカスタムブロックのプラグインを作られています！こちらを使うとテーマのPHPファイルにコーディングすることなくブロックの機能を拡張できます。Gutenberg時代も引き続きキタジマさんにお世話になりそうです♪

※参考：Snow Monkey Blocks – WordPress テーマ Snow Monkey