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



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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

プラグインのインストールと有効化については新規追加画面で検索すれば問題なく完了できるので割愛しますが類似プラグインが多いので、「水色に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 Code for posts】は本文やウィジェットへ挿入したPHPコードが動作するようになるとともに、PHPコードをショートコード化してから挿入するようにできるプラグインです。

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

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

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

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

2,894 円 (税込) 送料込
<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

2,570 円 (税込) 送料込
あらゆるビジネスサイトで使える企画・設計・制作・運 田中勇輔 翔泳社ウェブ タントウシャ ノ タメノ ワードプレス ガ ワカル ホン タナカ,ユウスケ 発行年月:2015年09月15日 ページ数:287p サイズ:単行本 ISBN:9784798142708 田中勇輔(タナカユウスケ) Webディレク..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る