MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【WordPress】ACFのかゆいところに手が届く「Advanced Custom Fields: Extended」プラグイン

【WordPress】ACFのかゆいところに手が届く「Advanced Custom Fields: Extended」プラグイン

公開日:2021年05月10日
最終更新日:2021年05月10日
t.ono
WordPress
ホーム > 全記事一覧 > まとめ > 【WordPress】ACFのかゆいところに手が届く「Advanced Custom Fields: Extended」プラグイン

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
【WordPress】ACFのかゆいところに手が届く「Advanced Custom Fields: Extended」プラグイン
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

どうも!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」をインストールすることで、以下のような作業が可能となります。

  • カスタムフィールドのカテゴライズ
  • 柔軟フィールドのプレビュー機能・サムネイル表示
  • カスタムフィールドをカスタムフィールドにインクルード(クローン)
  • その他、色々

 

その他とまとめてしまいましたが、とにかくたくさんの機能が追加されます。カテゴリー・タクソノミーの編集画面も使いやすく変更されたりします。

詳しくは以下の公式サイトをご覧いただくとわかりやすいと思います。

https://www.acf-extended.com/

ここからは、私がいいなぁと思った機能に絞ってご紹介していきます。

 

カスタムフィールドのカテゴライズ

ACFでカスタムフィールドの数が増えてくると、あれ?これどこで使っているカスタムフィールドだっけ?となることも。
そんなときにはカスタムフィールドをカテゴライズしましょう。
固定ページで利用するカスタムフィールド、イベントページで利用するカスタムフィールドといった形で分類をしておけます。

カテゴリーの追加

プラグインをインストールすると、以下のようにACFの管理画面がカスタマイズされます。
上部のバーから「カテゴリー」を選択し、「Add New category」ボタンから新しくカテゴリーを追加します。

カテゴリーの適用

各カスタムフィールドグループの編集画面からカテゴリーを選択できるようになりますので、チェックを入れて更新します。

すると、以下のようにカスタムフィールドグループの一覧画面にカテゴリーが表示されるようになります。

細かい機能ではありますが、カテゴライズできることでミスを減らし、効率よくカスタムフィールドを利用することが可能になります。

 

柔軟フィールドのプレビュー機能・サムネイル表示

ACFのPro版には柔軟フィールドと呼ばれる、ブロックを積み上げて行くようにコンテンツを構築できるフィールドが用意されています。
結構便利なのですが、ブロックの量が多くなると単純に選びづらく、ブロックの名称だけではイメージが掴みづらいという難点もあります。

ACF Extendedでは、それらのブロックを選びやすくする仕組みも用意されています。
例えば、ブロック選択時にブロックの配置イメージから選択できるようになります。

 

柔軟フィールドのサムネイル表示

実際に、ACF Extendedの公式サイトで確認いただくとわかりやすいですが、柔軟フィールドの追加するブロックをサムネイルから選択できるようになります。

AddRowボタンをクリックすると、以下のようにどういったブロックを追加したいかがひと目で分かるインターフェースを適用できます。

 

柔軟フィールドのプレビュー

こちらは結構工夫が必要ですが、入力値をリアルタイムで確認することも可能です。同様に公式サイトで動作確認可能です。

 

カスタムフィールドのクローン

カスタムフィールドグループの中でいつも同じ項目定義しているなぁってこと有りませんか?ありますよね。

そういった時に便利なのがクローンフィールドです。このフィールドはACF Extendedをインストールすると選択可能になります。

例えば、すでによくある質問ページが有る中で、製品についてページでも、よくある質問が出てきた場合、クローンフィールドを利用することで一つのカスタムフィールドの定義を使い回すことが可能です。

フィールドタイプ「Clone」を選択して、フィールドには他で定義されたフィールドを指定します。

上記定義を行うことで、以下のような質問と回答の繰り返しフィールドが表示されます。

このフィールドの肝は、クローン元のフィールドを修正すると、クローン先のフィールドも同時に修正が反映される点です。

同様のフィールドを一元管理でき、表示ロジックの共用化も可能となります。

素敵!

最後に

WordPressを効果的に、効率よく利用する時に欠かせないカスタムフィールド。

皆様はどのように活用しているでしょうか?ACFをまだ現役でバリバリ活用される方、この記事が少しでもお役に立てば幸いです!

ではまた!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
簡単に解説!WordPressのオリジナルテーマを作成する5つの手順
WordPress
公開日: 2019年03月29日
最終更新日: 2019年03月29日
簡単に解説!WordPressのオリジナルテーマを作成する5つの手順
  • # WordPress
  • # オリジナルテーマ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
検索順位アップ!WordPressに導入したいおすすめのSEO対策プラグイン9選
WordPress
公開日: 2019年03月26日
最終更新日: 2019年03月26日
検索順位アップ!WordPressに導入したいおすすめのSEO対策プラグイン9選
  • # SEO
  • # WordPress
  • # プラグイン
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressにメルマガを導入!おすすめプラグイン5選!
WordPress
公開日: 2019年02月20日
最終更新日: 2019年02月20日
WordPressにメルマガを導入!おすすめプラグイン5選!
  • # WordPress
  • # メルマガ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressにはレンタルサーバーがおすすめ!初心者のための選び方のコツは?
WordPress
公開日: 2019年02月28日
最終更新日: 2019年02月28日
WordPressにはレンタルサーバーがおすすめ!初心者のための選び方のコツは?
  • # WordPress
  • # レンタルサーバー
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressデザインを自作するメリットやデメリットは!?どんな人にオススメなの?
WordPress
公開日: 2018年12月27日
最終更新日: 2018年12月27日
WordPressデザインを自作するメリットやデメリットは!?どんな人にオススメなの?
  • # WordPress
  • # デザイン
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者がWordPressを難しく感じる理由や特に難しいと感じてしまう人の特徴を大公開!
WordPress
公開日: 2019年01月15日
最終更新日: 2019年01月15日
初心者がWordPressを難しく感じる理由や特に難しいと感じてしまう人の特徴を大公開!
  • # WordPress
  • # 初心者
  • # 難しい
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
設定しておかないと大変!WordPress初心者が必ずやっておきたい8つの設定
WordPress
公開日: 2018年12月27日
最終更新日: 2018年12月27日
設定しておかないと大変!WordPress初心者が必ずやっておきたい8つの設定
  • # WordPress
  • # 設定
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2022年01月17日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
アフィリエイトサイトならWordPressがおすすめ!おすすめしたい理由8つ
WordPress
公開日: 2018年12月26日
最終更新日: 2018年12月26日
アフィリエイトサイトならWordPressがおすすめ!おすすめしたい理由8つ
  • # WordPress
  • # アフィリエイト
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ブログを始めよう!WordPressでブログをスタートさせる5ステップ
WordPress
公開日: 2018年12月19日
最終更新日: 2018年12月19日
ブログを始めよう!WordPressでブログをスタートさせる5ステップ
  • # WordPress
  • # ブログ
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。