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

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

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

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

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

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

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

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

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

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

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

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

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressで簡単に子テーマの作成ができるプラグイン「Child Theme Generator」

WordPressの管理画面にある一覧でクイック編集が更に便利になるプラグイン「Admin Management Xtended」

WordPressでプラグインやテーマをZIP形式でパソコンに保存(エクスポート)できるプラグイン「Export Plugins and Templates」


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

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

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

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示される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でも動作します。

このプラグインを有効化した上で
<?php the_field(“ここにカスタムフィールド名”, $post->ID); ?>
を任意の場所へ挿入します。
※「ここにカスタムフィールド名」の場所へACFのフィールド名を入力します

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

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

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

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

テーマの表示したい場所へ
<?php the_field(“ここにカスタムフィールド名”, $post->ID); ?>
を記述します。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
【中古】 ビジネスサイトをこれからつくる WordPressデザイン入門 WordPress Ver.4.x対応 サイト制作から納品までのはじめの一歩 ..

【中古】 ビジネスサイトをこれからつくる WordPressデザイン入門 WordPress Ver.4.x対応 サイト制作から納品までのはじめの一歩 ..

1,045 円 (税込)
秋元英輔(著者),清野奨(著者),プライム・ストラテジー株式会社(その他)販売会社/発売会社:SBクリエイティブ発売年月日:2016/02/01JAN:9784797383300//付属品〜CD−ROM付
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報