どうも！WordPress おじさんのおのです。
今日は、WordPress で大人気のプラグイン「Advanced Custom Fields」通称 ACF を更に便利にするプラグインを紹介しちゃいます。
もうちょいエレガントにACFを使いたいなぁという場合にご参考にいただければ嬉しいです。
ACFまだ使ってんの？という方、すみません。いろいろな理由からまだ手放せずにいるACFおじさんでございます。
そもそも ACF とは？
さて冒頭では、当たり前のように ACF と言いましたが、そもそも ACF を聞いたこと無いという方もいらっしゃるかもしれません。
改めてカスタムフィールドや ACF について触れておこうと思います。
カスタムフィールドとは
管理画面にログインしてから、エディター(最近だと Gutenberg かな)を使ってコンテンツを書いていくことが、WordPress の編集方法として割とポピュラーですが、それだけではなかなか管理がしづらいこともあります。
例えば、あなたの会社がお客様との交流イベントを定期的に開催している場合、開催日の近い順からイベント情報を一覧表示したい。終了済みのイベントは一覧に表示したくない。という要望が出てくるかもしれません。
そういったとき、エディターのコンテンツとは別に、イベントの開催日だけ格納する入力フィールドを用意すると便利です。
イベント開催日だけが格納されているため、並び替え・表示非表示に対応しやすくなります。
このフィールドのことを WordPress では、カスタムフィールドと呼んでいたりします。
ACFとは
WordPress に標準で備え付けられたカスタムフィールドは、シンプルにテキストだけを記入できる様になっております。
テキストを記述するだけなので、日付を入れるときに、ある人は「2021 年 4 月 3 日」と入れるかもしれませんし、「2021/4/3」と入れるかもしれません。
そういった表現の揺れがあると並び替えのときに困りますよね。
本記事冒頭の ACF とは、Advanced Custom Fields という WordPress のプラグインのことで、このカスタムフィールドをより使いやすくするためによく利用されています。
Advanced Custom Fields
https://ja.wordpress.org/plugins/advanced-custom-fields/
例えば先述の日付の選択であれば、DatePickerのようなインターフェースで値を設定できます。
そうすることで、先述の入力形式のブレを減らし、プログラムを動作させやすくなります。
この方式だったら誰でもミス無く日付を入れられますね。
その他にも繰り返しフィールドと呼ばれるものを使うことで、FAQのように質問と回答を繰り返すようなフィールドを設けたり、柔軟フィールドと呼ばれる形で様々なフィールドを組み合わせてコンテンツを作成することも可能です。（繰り返しフィールド、柔軟フィールドを利用するにはACF Pro版が必要です）
Advanced Custom Fields: Extended とは
さあ、本題。カスタムフィールドの構築に非常に便利なAdvanced Custom Fields。
ただ、使い込んでくるとちょっと物足りなさを感じることがあります。
- カスタムフィールドの数が増えてきたときに管理が大変（どのページにこのフィールド使ってたっけ？とか）
- 柔軟フィールドを使ってページビルダー的なコンテンツを構成をしたものの、沢山のブロックができてしまって、選択しづらい
- 似たようなカスタムフィールドを持つフィールドグループが乱立していて、一つ項目を追加するのも大変
こういったときに便利なのが、「Advanced Custom Fields: Extended」というプラグインです。
Advanced Custom Fields: Extended
https://ja.wordpress.org/plugins/acf-extended/
「Advanced Custom Fields: Extended」をインストールすることで、以下のような作業が可能となります。
- カスタムフィールドのカテゴライズ
- 柔軟フィールドのプレビュー機能・サムネイル表示
- カスタムフィールドをカスタムフィールドにインクルード（クローン）
- その他、色々
その他とまとめてしまいましたが、とにかくたくさんの機能が追加されます。カテゴリー・タクソノミーの編集画面も使いやすく変更されたりします。
詳しくは以下の公式サイトをご覧いただくとわかりやすいと思います。
ここからは、私がいいなぁと思った機能に絞ってご紹介していきます。
カスタムフィールドのカテゴライズ
ACFでカスタムフィールドの数が増えてくると、あれ？これどこで使っているカスタムフィールドだっけ？となることも。
そんなときにはカスタムフィールドをカテゴライズしましょう。
固定ページで利用するカスタムフィールド、イベントページで利用するカスタムフィールドといった形で分類をしておけます。
カテゴリーの追加
プラグインをインストールすると、以下のようにACFの管理画面がカスタマイズされます。
上部のバーから「カテゴリー」を選択し、「Add New category」ボタンから新しくカテゴリーを追加します。
カテゴリーの適用
各カスタムフィールドグループの編集画面からカテゴリーを選択できるようになりますので、チェックを入れて更新します。
すると、以下のようにカスタムフィールドグループの一覧画面にカテゴリーが表示されるようになります。
細かい機能ではありますが、カテゴライズできることでミスを減らし、効率よくカスタムフィールドを利用することが可能になります。
柔軟フィールドのプレビュー機能・サムネイル表示
ACFのPro版には柔軟フィールドと呼ばれる、ブロックを積み上げて行くようにコンテンツを構築できるフィールドが用意されています。
結構便利なのですが、ブロックの量が多くなると単純に選びづらく、ブロックの名称だけではイメージが掴みづらいという難点もあります。
ACF Extendedでは、それらのブロックを選びやすくする仕組みも用意されています。
例えば、ブロック選択時にブロックの配置イメージから選択できるようになります。
柔軟フィールドのサムネイル表示
実際に、ACF Extendedの公式サイトで確認いただくとわかりやすいですが、柔軟フィールドの追加するブロックをサムネイルから選択できるようになります。
AddRowボタンをクリックすると、以下のようにどういったブロックを追加したいかがひと目で分かるインターフェースを適用できます。
柔軟フィールドのプレビュー
こちらは結構工夫が必要ですが、入力値をリアルタイムで確認することも可能です。同様に公式サイトで動作確認可能です。
カスタムフィールドのクローン
カスタムフィールドグループの中でいつも同じ項目定義しているなぁってこと有りませんか？ありますよね。
そういった時に便利なのがクローンフィールドです。このフィールドはACF Extendedをインストールすると選択可能になります。
例えば、すでによくある質問ページが有る中で、製品についてページでも、よくある質問が出てきた場合、クローンフィールドを利用することで一つのカスタムフィールドの定義を使い回すことが可能です。
フィールドタイプ「Clone」を選択して、フィールドには他で定義されたフィールドを指定します。
上記定義を行うことで、以下のような質問と回答の繰り返しフィールドが表示されます。
このフィールドの肝は、クローン元のフィールドを修正すると、クローン先のフィールドも同時に修正が反映される点です。
同様のフィールドを一元管理でき、表示ロジックの共用化も可能となります。
素敵！
最後に
WordPressを効果的に、効率よく利用する時に欠かせないカスタムフィールド。
皆様はどのように活用しているでしょうか？ACFをまだ現役でバリバリ活用される方、この記事が少しでもお役に立てば幸いです！
ではまた！
Udemyを実際に体験した方の感想記事もぜひご覧ください♪
- 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
- 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
- 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
- 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
- 【体験談】UdemyでWeb開発を学びました【コスパ最強】
