MENU
2018.03.05

カスタムフィールドを追加するWPプラグイン「Advanced Custom Fields」の使い方と利用案

以前書いたカスタム投稿タイプを追加できるプラグインの記事で触れましたが、今回はカスタムフィールドを追加するプラグインの使い方と、どういう時に使うと便利なのかを説明したいと思います。

カスタムフィールドのプラグインの紹介や、設定方法などは色んなブログでご紹介されているのですが、どのように案件で使うのかという部分を紹介しているブログはあまり見かけなかったので、使い方とあわせて利用方法についてもご紹介できればと思います。

カスタムフィールドとは

WPの投稿やカスタム投稿画面は基本的に「タイトル」「本文」「抜粋」くらいしか自由に入力できる部分がありません。

カスタムフィールドとは上記以外の追加の入力できる項目だと思ってもらえればと思います。

今回ご紹介する「Advanced Custom Fields」を使うとこんな感じで投稿画面下部に入力フィールドを追加することができます。

 

 

Advanced Custom Fieldsのインストール

プラグインから検索して有効かするか、こちらからダウンロードしてプラグインフォルダにアップしてください。

 

 

Advanced Custom Fieldsの設定方法・使い方

プラグインを有効化にすると、サイドバーに「カスタムフィールド」が追加されますので、そちらから設定画面に移動できます。

 

Advanced Custom Fieldsの設定方法

新規追加を行うと以下の画面になります。

各項目の説明

タイトル

カスタムフィールドのタイトルを入力します。
分かりやすい名前でいいので「製品カスタムフィールド」や「ニュースカスタムフィールド」などでいいと思います。

 

フィールドを追加

カスタムフィールドを追加できます。

テキストやテキストエリア、プルダウン、ラジオボタン、画像など様々な形式から選ぶことができます。
実際どのように利用するかについては後述します。

 

位置

どこにカスタムフィールドを出すかの設定になります。

投稿タイプで設定するのが一般的かと思います。
WPの投稿にカスタムフィールドを追加したい場合は「投稿タイプ」「等しい」「post」と設定します。

カスタム投稿に追加したい場合は「投稿タイプ」「等しい」「(カスタム投稿のスラッグ)」と設定します。

 

カスタムフィールドの利用案

実際にカスタムフィールドをどんな風に使うのか、どういう案件でつかうといいのかなどご紹介します。PHPを使って条件分岐や値のチェックなどを行うことで、柔軟にデータの運用が可能となります。
また入力ヒントを登録することができるので、登録者がクライアント側の場合のオペレーションも補完することができます。

例)製品紹介などのページ

製品紹介などでは、アイキャッチ画像や本文だけで綺麗な形で整形するのは難しいとおもいます。クライアント側で登録する場合、レイアウト崩れなどが起こらないよう、決められたフォーマットで登録することが望ましいと思います。

カスタムフィールドの例

製品画像を複数登録する場合はフィールドタイプ「画像」
製品スペックなどは「テキスト」や「テキストフィールド」
製品のタイプやパターンなどは「ラジオボタン」「セレクトボックス」「チェックボックス」などがむいています。

 

例)不動産物件などのページ

基本的に製品紹介のように情報を出し入れすることで、大体の項目を埋めることができます。入力する項目が多くなりがちなので、テキストフィールドの利用が多くなるかと思います。

カスタムフィールドの例

不動産物件などは画像とテキスト量が多いため「画像」「テキストフィールド」あたりを良く使います。また物件のポイントなどで「チェックボックス」は良く使います。(駅近とか、都市ガス、ペット可など)

 

例)イベントやキャンペーン、セミナーなど

配布物がある記事で、カスタムフィールドを使わず実装する場合は本文中にリンクを設置することになります。レイアウト的に不恰好になったり、ダウンロードのリンクが分かりにくかったりなどします。
ダウンロードボタンなどを設置する場合はカスタムフィールドが活躍します。

カスタムフィールドの例

データ配布がある場合は「ファイル」を使用します。
画像だけでなく、PDFなどの配布にも利用することができます。

 

カスタムフィールドのデータ出力方法と運用

色々な場面でカスタムフィールドが使えることが分かっていただけたかと思います。実際に運用するに当たって必要となる、カスタムフィールドに登録したデータの取り出し方をご紹介します。

基本的な形

カスタムフィールドを取得する場合は、下記のような形が基本となります。

get_field(“フィールド名”)

 

テキストやテキストエリアなどの単純な出力

テキストなどをHTMLとして出力する場合は以下になります。

<p><?php echo get_field(“テキストなどのフィールド名”); ?></p>

 

ラジオボタンやチェックボックス、セレクトボックスなど値が複数ある場合

値が複数ある場合は、値が出力されます。
値をそのまま出力したい場合は、テキストなどと同じやり方で問題ありませんが、値に応じて判定したい場合はPHPのif文やswitch文などを使うことになると思います。

 

画像の出力

画像は少し出力のさせ方が違います。
例えば画像がある場合は画像URLを変数に入れるとする場合は下記のようになります。

画像の値があるかどうか確認し、存在すれば変数に画像URLを入れる処理

if(get_field(“商品画像”)){
$imgData = get_field(“商品画像”);
$imgDataLarge = $imgData[“sizes”][“large”];  //大サイズの画像URL
$imgDataThumbnail= $c01img01ID[“sizes”][“thumbnail”]; //サムネイルサイズの画像URL
}

変数に入れた画像URLを画像として出力

<img src=”<?php echo imgDataLarge ?>” alt=”<?php the_title(); ?>”>

画像の場合、一度処理を挟んでこのように利用します。

 

最後に

カスタムフィールドを使うことで、ブログやコラム・お知らせなどのテキストベースのコンテンツだけでなく、レイアウトや設計が複雑なコンテンツもクライアント側で更新できるようになります。

一度システムを構築すれば、質の高いコンテンツをクライアント側で更新できるというのは素晴らしいことだと思いますし、サイトにとって非常に大事なポイントだと思います。

PHPの知識があればさらに複雑なシステムを構築できますし、扱える情報量の多さや種類を考えるとAdvanced Custom Fieldsはウェブサイトを作る上で欠かせないものとなるのではないでしょうか。

ウェブサイトをWPで開発する際には是非活用してみてください。

スポンサーリンク
pagetop