2020年09月11日

[WordPress][プラグイン]
Advanced Custom Fieldsで管理画面で設定した項目を呼び出す

ディレクターの大槻です。
今回はお客様からWordPressでサイトリニューアルするのにあたり、「製品の機能別にフィルタをかけて一覧表示したい」というご要望がありまして、見積もりを作る上で技術検証をおこなったので、その内容をご紹介していきたいと思います。

Advanced Custom Fieldsとは？

Advanced Custom Fieldsは、WordPressのカスタムフィールドの入力を視覚的に行えるようにしてくれるので、非常に使い勝手の良いプラグインです。

ACF | Advanced Custom Fields Plugin for WordPress

Customise WordPress with powerful, professional and intuitiv…

https://www.advancedcustomfields.com/

使われている方も多いのではないでしょうか。
弊社でもページの属性の追加に限らずページ入力の補助に使用することもよくあります。

Advanced Custom Fields自体をサイト運用に使用する際のノウハウは追々ご紹介していければと思います。

実現したかったページ構成

今回、製品ページが大量にあり、それぞれの製品について性能の属性値を設定する必要がありました。

例えば、スマホのページがたくさんあるとして、
製品Aは

・サイズは6inch未満
・容量は64GB、128GB、256GB
・色はシルバー、黒、白

のような要素があります。

そして、製品検索のページでは

サイズ▼
・6inch未満
・6inch以上
容量▼
・64GB
・128GB
・256GB
色▼
・シルバー
・ゴールド
・黒
・白
・赤
・青

から選択する

・・・ようなイメージです。

スマホ製品がずらりと並んでいるページをイメージして下さい。
そこで、上記のような要素を選択すると製品が絞り込まれていくようなページを想定しています。

例えばこんな感じです。

• auのスマートフォン製品一覧ページの例

検索ページの構成

まず、各製品ページに要素の入力フィールドを設置します。

イメージとしてはこんな感じですね。
要素があり、選択肢があり、の繰り返し。画像ではチェックボックスしかないですが、ラジオボタンで項目を一つだけ選択させることもあるかと思います。

これを製品の各ページに適用させ、データを入力します。
そしてjsonデータとして一つのファイルに出力します。

検索ページでは出力したjsonを読み込み、プルダウン型の検索項目で読み込んだjsonを抽出する・・・という構成を検討しました。

図にするとこんな感じ。

ここまでは技術的にはできそうなのですが、ここでふと疑問になったのが
選択項目は自動で抽出できるだろうか？
ということでした。

選択項目の抽出

要するに上の図の「要素A」「要素B」「要素C」のセレクタの中身を出力するページに抽出して表示できるのか、ということです。
お客様に伺ったところ、

• 管理している表の通りに項目を並べたい
• 使用されていない項目も並べたい

ということでした。
もちろん管理画面を別に用意すればいいのですが、スマートじゃない。
なにかいい方法はないかな・・・と考えていましたが、

管理画面の要素が抜き出せればいいんじゃない！？

と思いつきました。
要するにここです。

・・・ところが調べても調べても管理画面の要素を抜き出すコマンドが見つからず困っておりました。
試しにフォーラムで聞いてみたところ、

acf_get_fields( $parent );

というAdvanced Custom Fieldsの関数を教えてもらいました。

acf_get_fields();とは

acf_get_fields( $parent ) は、パラメータとして$parentにグループIDを設定します。
グループIDは、フィールドグループのURLから確認することができます。

var_dump();してもらうと出力がわかると思いますが、上記の例でいくと、

$buf=acf_get_fields( 5 );
  $buff=$buf[0]["choices"];
  if(is_array($buff)){
    foreach($buff as $value){
    echo $value."<br>";
  }
}

のような記述で

機能A-1
機能A-2
機能A-3

という、欲しかった情報を得られることができました。

Advanced Custom Fieldsにはこの他にも公開されていない関数が用意されているらしく、この関数に関連した

acf_get_field_group();

という関数もあるようです。
その他の関数も調べて、機会があったらご紹介したいと思います。

• プロのデザイナーが選ぶAdobe® Photoshop® 2020の便利な機能まとめ7選

気になったら
まずはご相談を

あなたの悩みのために専門家がチームを組み、課題解決に取り組みます。
まずはお気軽にお問い合わせください。

日本全国どこでも対応します。