WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

カスタムフィールド機能を簡単に便利に使えるプラグイン「Advanced Custom Fields」

公開日:2015(平成27)年10月17日/最終更新日:

WordPressのプラグイン情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressでは予め表示方法をテンプレート化しておき、入力窓に入力された文字や画像などを呼び出して表示するという機能があります。こういう機能を持ったインターネットサイト作成ツールを総じて「CMS(コンテンツマネージメントシステム)」というのですが、機能を知らなかったり知っていても使い方が分からなかったりという方が多いと思います。

複数の方で運営するサイトなどで自由に投稿するようにすると文体やレイアウトが様々になってサイトに統一感がなくなることを解消する手段として前述したような手段を用いることが多く、これを使うにはカスタムフィールドを使用することが必須となります。

でも、投稿編集画面にはカスタムフィールドという項目があり、存在は知っていても何にどう利用するのかとなると・・・

という方のために「Advanced Custom Fields」プラグインはWordPressのデフォルトではちょっと使いにくいカスタムフィールドの設定を簡単にし、視覚的な設定ができる便利なプラグインです。

【Advanced Custom Fields】プラグインの基本的な機能・できること

  1. カスタムフィールドの作成が簡単にできる
  2. 文字やコード、画像などいろいろな形式を入力するフィールドを作ることができる
  3. 追加プラグインでさらにいろいろな機能が追加できる
  4. カスタムフィールドを表示する条件が指定できる
  5. 作成したカスタムフィールドグループをエクスポート/インポートして使いまわせる

このプラグインを使う場合の注意事項

私も最近気づいて苦労したことです。この【Advanced Custom Fields】は直訳すると高度なカスタムフィールドという名前のプラグインですが、実際にはWordPress標準のカスタムフィールドとして機能はしていません(詳細は割愛します)。

これは投稿する側(管理する側)の使い勝手向上のためにいろいろな入力オプションが使用できるようにしているためで、普通にフォーム入力したい、それを投稿内に呼び出したいという使い方であれば問題ないと思います。

が、このカスタムフィールドから訪問者が検索したい・・・という要件になると話は別で、前述したように通常のカスタムフィールドへ格納されているデータではないため、検索フォームなどを使った検索では機能しないことが多いです。

使用用途を考えてからインストールするかどうかの判断をすべきプラグインだと思います。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Advanced Custom Fields】プラグインの設定画面や表示の日本語化と翻訳

【Advanced Custom Fields】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

QA AnalyticsQA Analytics

【Advanced Custom Fields】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

プラグインのインストールと有効化については新規追加画面で検索すれば問題なく完了できるので割愛しますが類似プラグインが多いので、「水色にACFとロゴの入ったプラグイン」を選択してインストールしてください。日本語に対応していますので、有効化すればそのまま使えます。

【Advanced Custom Fields】プラグインの基本的な使い方

カスタムフィールドの追加や編集は

  1. 管理画面の「カスタムフィールド」をクリックして「新規追加」をクリック
  2. 「フィールドグループ」という画面が開くので、「グループ名」(分かりやすい名前)を入力
  3. 青地の「フィールド追加」をクリック
  4. 必要な項目を入力(日本語化されているので見れば分かると思います)。必要なフィールド分だけ追加していく
    右上の「公開」ボタンをクリックして完了

でおこなうことができます。
このとき、「デフォルト値」という項目があるのでここを埋めておく(一番使う言葉や選択肢を入力しておく)と、記事作成でうっかり入力し忘れたときにエラーが出たり表示されるべき内容が空白になったりして記事の表現がおかしくなったりするのを防ぐことができます。

作成したカスタムフィールドを表示する条件を指定する

カスタムフィールドグループをいくつも作っていると記事や固定ページの編集画面に全部のカスタムフィールドが表示されてしまいごちゃごちゃになってしまうことになります。

また、「このカテゴリーの記事を作るときだけ」とか「この権限のユーザーのとき」とか、「ページだけ」「記事だけ」など条件を設けたいときが出てきます。
これを解決するために、表示条件を設定します。

  1. 管理画面の「カスタムフィールド」をクリックして一覧から条件を指定するフィールドグループをクリック
  2. 画面の中の「位置」という項目の中のルールで設定する

設定条件はいろいろな組み合わせができますし、条件を複数指定する(サイト管理者が○○カテゴリーの記事を書くときだけなど)ことができますので、実際に表示される投稿編集画面をみながら調整してください。

一歩進んだ設定

  1. 「位置」項目の下に「オプション」というのがあります。ここを設定するとより便利に使うことができます。
  2. 順序番号/通常は登録したフィールドグループ順に表示されるカスタムフィールドの並び替えができる
  3. 位置/カスタムフィールドを表示する場所を変更できる
  4. Style/移動可能なメタボックスにするか移動不可にするかが指定できる

画面に表示しない/このフィールドグループが表示されるときに通常の投稿画面で表示されるさまざまな項目を非表示にできる
特に最後の項目を設定していくと、投稿画面にカスタムフィールドの入力窓だけを表示して投稿するといったことができますので、複数の人で管理したり記事を追加したりするサイトでは重宝すると思います。

【Advanced Custom Fields】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

カスタムフィールドの値を投稿本文などで使用する方法

せっかくカスタムフィールドを作ってもそれが投稿本文の中などで使えなかったら意味がない!!でも、公式サイトにはこの点についての記述がない・・・ということで、表示する方法を3つ紹介します。だんだん難易度が高くなると思って読んでくださいね。

1.ショートコードで入力する

通常のカスタムフィールドならオリジナルのショートコードを使って呼び出すというちょっと難しい作業が必要なのですが、【Advanced Custom Fields】では呼び出すためのショートコードがあらかじめ用意されています。

呼び出すためのコードは
[acf field=”field_name” post_id=”123″]
です。
field=”field_name“・・・field_nameにはACFで作成したカスタムフィールドのフィールド名を入力します
post_id=”123“・・・123には引っ張り出す値の投稿IDを入力します。
※post_id=”123″を省略すると今表示している投稿に入力されているfield_nameの値を表示します

この方法では別のショートコードのパラメーターとしては使用できません。

例えば
[ssample param=””]のようなショートコードがあった場合の「param」という値に対して、ACFのショートコードを挿入しても動作しません。こういった使い方をする場合には次の【2.PHPコードを投稿などの本文へPHPで呼び出す】方法を用います

2.PHPコードを投稿などの本文へPHPで呼び出す

この方法は別のプラグインを追加で使用することになります。通常WordPressの投稿本文ではPHPコードが使えないようになっていますので、PHPが動作するようにできるプラグインを使用します。「PHP Code For Posts」というプラグインがPHPの最新版であるバージョン7でも動作します。

https://www.momosiri.info/wppi/php-code-for-posts/

このプラグインを有効化した上で

<?php the_field("ここにカスタムフィールド名", $post->ID); ?>

を任意の場所へ挿入します。
※「ここにカスタムフィールド名」の場所へACFのフィールド名を入力します

この方法だとショートコード内のパラメーター値としてデータを呼び出せるので非常に便利なのですが、

  1. WordPressで本文へのPHPコード挿入は推奨されていない
  2. PHP7ではセキュリティ上推奨されていない
  3. 本文でPHPを動かすためのプラグインが更新されていない、また、公式サイトから削除されつつある

ことからあまり使用はおすすめしません。当サイトでもこの方法を使っていましたが、将来的に使えなくなるかもしれないということでショートコード化しました

3.テーマをカスタマイズしてPHPで呼び出す

テーマの表示したい場所へ

<?php the_field("ここにカスタムフィールド名", $post->ID); ?>

を記述します。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)