Advanced Custom Fieldsの使い方を解説する【WordPressプラグイン】

みやしも WordPress

今回は、WordPressプラグインの「Advanced Custom Fields」の使い方について解説してゆきます。



▼この記事の解説内容

  • 「Advanced Custom Fields」のインストールや使い方
  • カスタム投稿タイプ・カスタムフィールドの関係について
  • オリジナルの「コンテンツ編集機能」を作成する方法
WordPressを学習中の方、オリジナルテーマを制作中の方は必見の内容です!
今回の解説内容を進めるには、その前提として『WordPress(ワードプレス)』が必要になります。

これから利用する方は、まずはエックスサーバー  ConoHa WINGなどのレンタルサーバーを使ってWordPressの導入からすすめてゆきましょう。

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

WordPressプラグイン「Advanced Custom Fields」について

Advanced Custom Fields

「Advanced Custom Fields」は、WordPressのカスタムフィールドの仕組みを拡張して、さまざまな形式の入力項目を追加できる様にするためのプラグインです。



WordPressには「カスタムフィールド」という編集画面に入力項目を追加できる仕組みがありますが、デフォルトの状態では単純なテキストの項目しか扱うことが出来ません。

WordPressのカスタマイズフィールド
WordPressのカスタムフィールド

そこで「Advanced Custom Fields」を使えば、例えば画像やチェックボックス、ラジオボタンといった、様々な種類の項目が追加できる様になります。

Advanced Custom Fieldsのイメージ
Advanced Custom Fields
「Advanced Custom Fields」はWordPressのカスタムフィールドの仕組みを拡張するプラグイン。導入すれば画像やチェックボックス、ラジオボタンといった様々な入力項目が扱えるようになります。

どの様な目的に役立つプラグインなのか

「Advanced Custom Fields」を使えば、例えば次のようなオリジナルの『コンテンツ編集機能』を作成できる様になります。

コンテンツ編集機能の例
コンテンツ編集機能の例

▼コンテンツ例

  • 制作実績:写真・タイトル・説明文
  • 商品情報:写真・商品名・価格・説明文
  • お客様の声:写真・名前・コメント



WordPressでは「投稿」を利用することで自由な文章が作成ができますが、上記の様なフォーマットが決められたコンテンツの制作には基本的には不向きです。

WordPressの投稿(ブロックエディタ―)
WordPressの「投稿(ブロックエディタ―)」
フォーマットを揃えたいコンテンツの編集にはちょっと自由過ぎるかも...?

このためにも「Advanced Custom Fields」を使ってコンテンツの内容に合わせた編集画面を作成してゆけば、情報ごとの編集・管理がスムーズに行える、運用のしやすいWEBサイトが構築できます。

上記の様な必要性から「Advanced Custom Fields」は、WEB制作・ホームページ制作を背景とした”WEBサイト型”のWordPressテーマの制作のために広く利用されているプラグインとなっています。

「カスタム投稿タイプ」と組み合わせて利用します

そんな「Advanced Custom Fields」はWordPressの「カスタム投稿タイプ」と組み合わせた使用方法が一般的です。

先にも挙げたコンテンツの編集機能とは、実際は「カスタム投稿タイプ+カスタムフィールド(Advanced Custom Fields)」の組み合わせによって実現できます。
少しややこしい。。ので、これまでの言葉の関係や役割をまとめておきますね!
WordPress - カスタム投稿タイプ・カスタムフィールドの関係
カスタム投稿タイプとカスタムフィールドの関係
カスタム投稿タイプ 役割:「投稿の種類」を定義する
(例:制作実績)
実装方法①:WordPressテーマの「functions.php」を編集する
実装方法②:プラグイン「Custom Post Type UI」の利用
カスタムフィールド 役割:「投稿の種類」の入力項目を定義する
(例:写真/タイトル/説明文etc...)
実装方法:プラグイン「Advanced Custom Fields」の利用



上記の通り「Advanced Custom Fields」は、あくまで「カスタムフィールド」を扱うための手段という位置づけであり、『コンテンツ編集機能』を作るためには「カスタム投稿タイプ」と複合的に利用していく必要があります。

今回は上記の「カスタム投稿タイプ+カスタムフィールド」の組み合わせを想定したプラグインの利用方法を中心に解説を進めてゆきます。

カスタム投稿タイプについて詳しく知りたい方、WordPressテーマへの設定方法が知りたい方には次の記事が参考になります。

Advanced Custom Fieldsの使い方

Advanced Custom Fieldsの使い方

ここからは、WordPressプラグイン「Advanced Custom Fields」の使い方について解説してゆきます。また今回は、先にも登場した以下コンテンツの編集画面の作成を例としてゆきます。

▼コンテンツ例
名前:制作実績
項目:メイン画像・テキスト×1、サブ画像・テキスト×4
コンテンツ例
コンテンツ例

プラグインのインストール方法

WordPressプラグイン「Advanced Custom Fields」は以下の方法でインストールできます。



▼プラグインのインストール方法

  1. プラグイン>新規追加を選択する
  2. プラグイン「Advanced Custom Fields」を検索する
  3. 「Advanced Custom Fields」のインストールを実行する
  4. 「Advanced Custom Fields」を有効化する

プラグインの設定画面を開く方法

「Advanced Custom Fields」を追加すると、WordPressの管理画面に「カスタムフィールド」というプラグイン専用のメニューが追加されます。

Advanced Custom Fieldsの編集画面の開き方
プラグインの編集画面を開く方法①

メニューをクリックすると「Advanced Custom Fields」の設定画面が開きます。

Advanced Custom Fieldsの編集画面
プラグインの編集画面を開く方法②

フィールドグループとは?

「Advanced Custom Fields」では、カスタムフィールドを「フィールドグループ」という単位ごとに編集してゆきます。フィールドグループとは複数の「カスタムフィールド」をまとめて管理するためのグループのことです。

フィールドグループのイメージ
Advanced Custom Fieldsの「フィールドグループ」
フィールドグループは、例えば「制作実績」「商品情報」「お客様の声」といった様にコンテンツの種類に合わせて決めてゆきます。

カスタムフィールドを作成するためには、「新規作成」ボタンを押してフィールドグループの編集画面に移動すればOKです。実際の編集画面は次のようになっています。

フィールドグループの編集画面
フィールドグループの編集画面

上記の画面を通して、WordPressで利用するカスタムフィールドの定義を行ってゆきます。ここでは主に、次の3つの項目を設定してゆきます。



▼編集画面で設定する内容3つ

  1. タイトル:コンテンツの「タイトル」を設定する
  2. カスタムフィールド:コンテンツの「カスタムフィールド」を設定する
  3. 位置:どの編集画面で使用するか?を設定する

編集①:タイトル

まずはフィールドグループのタイトルを設定してゆきます。

編集①_タイトル
編集①:タイトル
タイトルはコンテンツの種類に合わせて決めてゆけばOKです。今回は例にしたがって「制作実績」と設定します。

編集②:カスタムフィールド

続けてカスタムフィールドを設定してゆきます。



編集画面の「+フィールドを追加」ボタンをクリックすると、カスタムフィールド1つ分の編集エリアが開きますので、コンテンツの内容に応じて設定を行います。

編集②_カスタムフィールド
編集②:カスタムフィールド

ここで設定すべき基本的な内容は以下の3つです。



▼カスタムフィールドで設定する内容

  1. フィールドラベル:編集ページで表示される名前
  2. フィールド名:PHPコードから参照する”キー”。スペースは不可、アンダースコアとダッシュは使用可能です。
  3. フィールドタイプ:入力項目の種類



カスタムフィールド1つ分の入力が終わると次のように表示されます。

カスタムフィールド1つ分の入力が終わった状態
カスタムフィールド1つ分の入力が終わった状態
上記の要領で、コンテンツの編集画面に設置したい入力項目を繰り返し設定してゆきましょう。

また今回の例の場合、カスタムフィールドの入力後の状態は次のようになります。

編集②_カスタムフィールド(入力後)
カスタムフィールドの設定後の状態
コンテンツの内容に合わせて、カスタムフィールドを1つ1つ定義してゆきましょう!

編集③:位置

最後にフィールドグループの「位置」を設定します。位置とは具体的に、定義したカスタムフィールドをどの編集画面で使用するか?を決めるための設定内容です。

編集②_位置
編集③:位置
今回の例だと「投稿タイプ・等しい・制作実績」と選択してゆきます。こうすると、カスタム投稿タイプ『制作実績』の編集画面を開いた時にだけカスタムフィールドが表示される様になります。
編集②_位置(入力後)
「位置」の入力後の状態

以上①~③の設定が終わったらフィールドグループを保存しましょう。

ここまでの作業がおわると、作成したフィールドグループの内容が対応する投稿タイプの編集画面に表示される様になります。

補足:表示に関する設定

フィールドグループの編集画面にある「設定」の項目では、カスタムフィールドの表示に関する設定ができる様になっています。

設定
カスタムフィールドの表示に関する設定

いずれの設定もカスタムフィールドの動作には関係ありませんが、見やすい・入力しやすい編集画面にするためにも適切に設定してゆきましょう。

実際の画面を見ながら、都度設定を変えてゆくと調整が行いやすいと思います!

設定内容を確認する

最後に設定した内容の確認をしてみましょう。上手くいっていると、対応する【カスタム投稿タイプ】の編集画面でカスタムフィールドが表示されると思います。

設定内容を確認する
設定内容を確認する

表示されない場合はフィールドグループの「位置」の設定が正しく出来ていないと思いますので、設定を見直してみましょう。また、上手く表示出来た場合は、動作の確認や項目に不足がないか等の検討を進めてゆきましょう。

使いやすい編集画面にするためには実際に使用してみて、使用感をもとにカスタムフィールド・レイアウトなどの細かな調整を進めることが大切です。

以上で「Advanced Custom Fields」の使い方の解説は終わりです。

ここまでの作業、本当にお疲れ様でした!

WordPressのおススメ記事紹介

ここからは、WordPressサイトの運用で役立つおススメ記事を紹介してゆきます。

基本的な使い方

WordPressの基本的な使い方については、つぎの記事で確認できます。

おススメWordPressテーマ

WordPressサイトを構築するなら『SWELL』を利用するのがおススメです。

おススメ・定番プラグイン

このほかサイト運営で役立つおススメプラグインを紹介いたします。



投稿記事を1クリックで複製できる:『Duplicate Post』

投稿記事を並び替えできる:『Intuitive Custom Post Order』

記事をかんたんに装飾できる:『AddQuickTag』

ブロックエディターを使う:『Classic Editor』

テキストエディタを見やすくする:『HTML Editor Syntax Highlighter』

記事の目次を追加出来る:『Table of Contents Plus』

お問い合わせフォームを追加する:『MW WP Form』

WordPressのSEO対策:『All in one SEO Pack』

Wordpressを日本語に対応させる:『WP Multibyte Patch』

画像を圧縮して表示速度を改善する:『EWWW Image Optimizer』

シンプルにCSS編集できる:『Simple Custom CSS』

この記事のまとめ

今回は、WordPressプラグインの「Advanced Custom Fields」の使い方について解説してゆきました。



▼この記事の解説内容

  • 「Advanced Custom Fields」のインストールや使い方
  • カスタム投稿タイプ・カスタムフィールドの関係について
  • オリジナルの「コンテンツ編集機能」を作成する方法



WordPressの利用の際には、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WordPressの情報を多く掲載しています。あわせてご活用くださいませ。



WordPressの記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事