「あたりまえ」をアップデートしつづける

お問い合わせ

WordPressプラグイン「Advanced Custom Fields Pro」で出来ること

  • 投稿日 :
  • 最終更新日 :

読了目安 : 5分

フロントエンドエンジニア(ビジネス・アーキテクツ)

金融の営業、小売店の店長などを経て、2009年に地元・愛媛県のWeb制作会社に入社。 WebサイトのコーディングやCMSの実装をメインに、大小様々なWeb制作に携わる。 2018年にBAに入社しフロントエンドエンジニアUNITに所属。 引き続きWebサイトのコーディングとCMS実装の他、テクニカルディレクターとしてディレクターと開発との調整や、制作のガイドラインの作成なども行っている。

プロフィールアイコン(写真):フロントエンドエンジニア 芝

「Advanced Custom Fields Pro」はWordPressで構築したWebサイトの入力項目をカスタマイズするのに非常に便利なプラグインです。

WordPress の編集画面でフィールドを追加したり、テーマテンプレートファイルにカスタムフィールドの値を読み込み、表示したりすることができます。

とくにサイトの運用要件に応じた細かなカスタマイズを行うときには欠かせないプラグインの一つです。

WordPressプラグイン「Advanced Custom Fields Pro」で出来ること

「Advanced Custom Fields Pro」はカスタムフィールドの定番のプラグイン

「Advanced Custom Fields Pro」(以下、ACF Pro)は、その名の通りWordPressのカスタムフィールドを拡張するプラグインです。2022年3月現在、2600万以上のダウンロード数があるメジャーなプラグインといえます。

カスタムフィールドとは、通常WordPressの入力項目は「タイトル」と「本文」の2つの項目しかありませんが、そこに入力項目を追加できるものです。

例えば、飲食店サイトのメニュー紹介ページを作る場合、通常のWordPressの仕様だと本文中で料理の情報を工夫して入力する必要がありますが、カスタムフィールドを利用すると「料理名」「価格」「アレルギー情報」など「専用の入力項目」が設定できます。

このように専用の入力項目だけ用意しておいたほうが、ユーザーはスムーズに情報を登録できますよね。

カスタムフィールド自体はWordPressに標準機能として備わっていますが、標準機能で作る場合、カスタムフィールドの定義も、定義したあとの編集もすべてHTMLソースコード上で行う必要があります。

ACF Proを導入するとカスタムフィールドの設定がWordPressの管理画面上で行える上、後述するさまざまな機能が簡単に利用できるようになります。

この種のプラグインは他にもありますが、ACF Proは歴史も長く、群を抜いて機能が豊富であり、定番のプラグインです。

参考

無料版と有料版の違い

ACF Proには無料版の「Advacnced Custom Fields」もあります。

無料版でも、管理画面上でのカスタムフィールドの定義など基本的な機能は利用可能です。

しかし、利用できるカスタムフィールドの種類に制限があったり、後述するオプションページ・フロントエンド投稿機能・ACFブロックなどは有料版でしか利用できません。

そのためWordPressを本格的なCMSとして利用するなら、より高機能な有料版をお勧めします。

有料版は年間契約のサブスクリプションで、利用料金は1サイトだと年49ドル、10サイトだと年149ドル、無制限だと年249ドルです。

参考
  • ACF Pro.advancedcustomfields(参照 2022-3-2)

なお、年間契約が切れてもアップデートなどのサポートが受けられなくなるだけで、プラグイン自体は継続して利用できます。

ただしアップデートには機能追加の他、セキュリティアップデートもあるため、継続して契約することをお勧めします。

ACF Proの代表的な4つの機能

ACF Proの代表的な機能を4つ紹介します。

機能1.さまざまな種類のカスタムフィールドを柔軟に定義し実装できる

ACF Proにはさまざまな種類のカスタムフィールドが用意されています。例として代表的な12種類のカスタムフィールドを紹介します。

代表的な12種類のカスタムフィールド

  • 一行テキスト
  • 複数行テキスト
  • WYSIWYG
  • 画像アップロード
  • ファイルアップロード
  • ギャラリー
  • ラジオボタン
  • チェックボックス
  • カラーピッカー
  • 日付選択
  • Googleマップ
  • 関連投稿選択

これらの多数のフィールドを組み合わせることで、オリジナルの投稿画面を思い通りに実装できます。

さらに、決まったフィールドを繰り返し追加する「繰り返しフィールド」や、さまざまなフィールドを自由に追加する「柔軟コンテンツ」を組み合わせると、自由度の高い投稿画面が実装できます。

機能2.「オプションページ」を定義し、各投稿タイプごと、あるいはサイト全体の共通項目の登録画面を実装する

オプションページは個別のページ用とは独立したカスタムフィールドを定義する機能です。

各投稿タイプごと、あるいはサイト全体の共通項目の登録画面を実装できます。

例えば、全ページに共通で表示させるリンク付きのバナーリストや、特定の投稿タイプのメインビジュアルなどを設定する投稿画面が実装できます。

手動で実装すると、更新のたびにエンジニアに依頼する必要があります。

しかし、管理画面で更新できるようにすれば、ソースコードを触る必要が無くなり、誰でも対応できるようになるので、運用の負担が大幅に軽減できます。

機能3.投稿権限のないユーザーでも投稿が可能な入力フォームをWebページ内に設置する「フロントエンド投稿機能」

WordPressは投稿権限を持ったユーザーがWordPressの管理画面にアクセスし、そこから投稿を行うのが基本です。

ユーザー登録していなかったり、あるいは登録していても投稿権限のないユーザーは、記事を投稿できません。

しかし、ACF Proのフロントエンド投稿機能を利用すれば、そのような投稿権限のないユーザーでも投稿が可能な入力フォームをWebページ内に設置できます。

設置する入力フォームは前述の豊富なフィールドから選択できます。また投稿した記事は下書き状態にしておけるので、管理者権限のユーザーが確認・承認してから記事公開を行う、といった運用も可能です。

この機能を利用して、例えば会員制のサイトにおいて、閲覧権限しかないユーザーでも投稿が可能な掲示板を設置する、というような応用ができます。

機能4.Gutenbergにカスタムブロックを簡単に追加できる「ACFブロックエディタ」

WordPressはバージョン5.0から「Gutenberg」が標準のエディタになりました。

それまでの標準エディタは単一のWYSIWYG(What You See Is What You Getの頭文字を取ったもので、編集中の画面に表示されるものと同じものが表示されるエディタ)しかありませんでしたが、Gutenbergでは、さまざまな種類の「ブロック」があらかじめ用意されています。

その「ブロック」を組み合わせてコンテンツを作成することから、このようなエディタを「ブロックエディタ」といいます。

Gutenbergであらかじめ用意されているブロックでは対応しきれない場合、WordPressの標準仕様でもカスタマイズしたオリジナルのブロック(カスタムブロック)を追加することも可能です。

しかし、標準仕様でのブロックの追加は、作業としてはオリジナルのプラグインを作るような実装になるため、WordPressのアップデートごとに作ったプラグインの動作検証を慎重に行う必要が出てきます。またそこで追加したカスタムブロックはコードで記述するので、ブロックの管理が煩雑になる恐れもあります。

ACF Proには、Gutenbergにカスタムブロックを追加する「ACFブロック」という機能があります。

ACFブロックを使うと、カスタムブロックをACFのカスタムフィールドの管理画面で定義・管理することができるため、上に挙げたような標準仕様の実装で起こるような不具合も起きにくくなります。

また、前述した豊富な種類のフィールドもカスタムブロックとして利用できるので、サイトの目的に合ったカスタムブロックが容易に実装できます。

まとめ:高機能なWordPressサイトを構築するならACF Proの導入は欠かせない

ACF ProはWordPressをCMSとして利用するために欠かせないプラグインのひとつです。

ACF Proを使って、ユーザーが目的の行動をとりやすいWordPressでのWebサイトを実現してください。

もし、現在WordPressの運用にお困りの方、やりたいことに合ったプラグインの設定が分からない方はBAsixsにお気軽にご相談ください。WordPress運用経験豊富なエンジニアが、運用を見越した設定をご提案いたします。

御社のWordpress、有効活用できていますか?BAsixsエンジニアに御相談ください。

ビジネスを成功に導くWordpressの活用法を提案してまいります。どんなことでもご相談ください。

お問い合わせ

こちらの記事も合わせて読む

  • ここがすごいよ!サステナビリティページ制作で参考にしたい企業サイト5選

    • 投稿日 :
    • 最終更新日 :
    • CSR
    • SDGs
    • サステナビリティ

    もっと見る

  • コーポレートサイトの構成に今すぐ使えるテンプレートまとめ【100社を調査】

    • 投稿日 :
    • 最終更新日 :
    • コーポレートサイト
    • サイトマップ
    • 情報設計

    もっと見る

  • デザインガイドライン実践編:参考にしたい海外サイト

    • 投稿日 :
    • 最終更新日 :
    • UX
    • デザイン
    • 運用・保守

    もっと見る

この記事をシェアする

FACEBOOK
Facebookシェア
Twitter
Twitterシェア
はてなブックマーク
はてなブックマークに追加