Advanced Custom Fieldsでカスタムフィールドを簡単に設定する

プラグインを利用してカスタムフィールドを実装する

今回の記事では、わたしも実際に利用している「Advanced Custom Fields」の導入から、基本的な使い方をお伝えしていきます。 ※「4.4.3」のバージョンで説明しています

WordPressには、「カスタムフィールド」という仕組みがあり、投稿画面の入力項目を独自に増やして、好きなところに出力することができます。この機能は「MovableType」にもありますし、CMSを触っている方にはおなじみの機能かもしれません。

WordPress には、投稿者が投稿に「カスタムフィールド」を追加できる機能があります。この任意の情報は「メタデータ」と呼ばれており、たとえば以下のような情報を含めることができます。

現在のムード: 幸せいっぱい

今読んでいる本: 星の王子様

BGM: Rock Around the Clock

今日の天気: 晴れ

メタデータは「名前」と、その「値」の組み合わせからなっています。「名前」は、メタデータ要素の名称のことを指します。「値」は、その要素に対応する情報を指します。一般的には、固定された「名前」に対し、記事によって異なる「値」を記入します。

引用元：カスタムフィールドの使い方 – WordPress Codex 日本語版

”今日の天気”という「名前」に対して、記事を書く際に、”今日は雨”のような「値」を入れることで、いわゆる本文とは別のデータを表示することができるようになるんです。好きな情報を記事毎に入れられる機能、という理解でも問題ないかもしれませんね。

ただ、カスタムフィールドを設定するには、少し知識が必要です。先の引用元には「カスタムフィールドの使い方」の記載もありますし、慣れてしまえば簡単な作業かもしれませんが、記事を書く作業に集中したかったり、それなりの勉強が必要になりそうです・・・。

そこで、WordPressにはプラグインというシステムがありますので、今回はプラグインの力を借りてお手軽に設定していきましょう。

今回の記事の目的

プラグインのインストール方法
「Advanced Custom Fields」を使ってみる
「JSON-LD」の入力欄を作って記事に挿入する

カスタムフィールドを利用することで、投稿画面に複数の入力項目を設けることができます。また、出力する箇所を複数にできるため、さまざまな使い方ができるようになると思います。

以前に書いた「構造化マークアップ」の「JSON-LD」の場合カスタムフィールドを利用すると、記事毎に簡単に設定できるので便利です。見た目には表示されませんが、「JSON-LD」を埋め込むようなイメージです。

レシピの構造化データを「JSON-LD」で書こう

まずはプラグインをインストールしよう

WordPressでプラグインを利用するには、プラグインのファイルを「インストール」する必要があります。さらにインストールしたプラグインを「有効化」して利用できる状態になります。

ここでは「Advanced Custom Fields」を例にし、インストールの流れを説明していきたいと思います。

管理画面からのインストールとファイルのアップロード

プラグインは管理画面からも検索でき、そのままインストールすることも可能です。また、WordPress公式の「Plugin Directory」というページでプラグインを検索し、該当のファイルをダウンロード、自分のサーバーにアップして利用することもできます。大きな違いはありませんが、どちらのパターンもあわせて書いていければと思います。

1.WordPressの「Plugin Directory」にある「Advanced Custom Fields」にアクセス

または、WordPressの左メニューの「プラグイン」→「新規追加」の画面にて「Advanced Custom Fields」を検索します。

Advanced Custom Fields

2.「Download Version 4.x.x」をクリックしてプラグインをダウンロード

または、管理画面に表示された「Advanced Custom Fields」の「今すぐインストール」をクリックします。

上の図ではすでにインストール済みになっていますが、「今すぐインストール」をクリックする形になります。管理画面からインストールした場合、そのまま有効化してプラグインを利用できるようにします。

3.プラグインをアップロードして有効化

ダウンロードした「advanced-custom-fields.zip」ファイルを解凍。

次に解凍した「advanced-custom-fields」ファイルをそのまま「プラグイン」ディレクトリにアップします。「～/wordpress/wp-content/plugins」

「インストール済みプラグイン」に表示がされるので、「有効化」を選択します。管理画面の左メニューに、「カスタムフィールド」という項目が表示されていたら、インストール、有効化の完了です。

その他のプラグインを利用する場合にも、同様な流れになるので覚えておくと便利です。

カスタムフィールドを追加してみよう

それでは、実際にカスタムフィールドを「Advanced Custom Fields」を使って設定してみましょう。今回は例として、以前の記事でも取り上げた「JSON-LD」を入力する項目を作る流れで解説していきます。

レシピの構造化データを「JSON-LD」で書こう

まずは、左メニューの「カスタムフィールド」に移動します。

1.「フィールドグループ」の新規追加をおこないます

「Advanced Custom Fields」では、カスタムフィールドをグループ単位で設定していきます。例えば、イベントページを作っている場合、「イベント」というグループの中に「開催日」「開催時刻」「場所」「備考」などの項目が含まれるイメージです。グループ毎に管理画面のデザインもひとまとまりになるので、分かりやすいように設定しておくといいと思います。

例では「構造化データ」というグループに「JSON-LD」という項目を入れていきます。

2.フィールドに情報を入れていきます

上の画像のような入力画面になるので、順番に項目を埋めていきます。基本的には必須の「フィールドラベル」「フィールド名」「フィールドタイプ」を入力します。

必須項目をチェック

フィールドラベル	投稿画面で表示される名前。分かりやすい名前をつけておくと項目は増えた際に便利です。
フィールド名	出力の際に利用する項目、半角の英数で入力します。
フィールドタイプ	カスタムフィールドの種類を選択します。「テキスト」や「Wysiwygエディタ」など、入力項目のタイプを選択。

今回はラベルに「JSON-LD」、フィールド名に「json-ld」、フィールドタイプは「テキストエリア」としました。その他は詳細はここでは割愛させていただきますが、KoToRiさんの以下の記事が大ボリュームで非常に分かりやすく参考になります！

Advanced Custom Fieldsの使い方

一カ所ハマりやすいポイントがあります。

例で進めている「JSON-LD」は「javascript」の記述となります。フォーマットが「Convert HTML into tags」の場合、「javascript」もそのまま出力できます。しかし、「No formatting」になっていると、文字列として出力してしまうため「＜」が「＆lt;」のようになってしまいます。もし出力がうまくいかない場合は「フォーマット」をチェックしてみましょう。

3.公開して、投稿画面を確認

間が少し長くなりましたが、ステップ3で投稿画面の確認をしていきます。「Advanced Custom Fields」の設定画面右上の「公開」をクリックすると、以下の画像のように投稿画面に反映されます。

4.データの入力と出力の設定

ここまでの設定で投稿画面に「JSON-LD」用の入力項目ができました。データを入力して保存することで、データベースに情報が保存されるようになりました。

そして次に保存された情報をページの中に呼び出さなくてはいけません。

記事の中に「JSON-LD」を出力する

出力に関しては、「Advanced Custom Fields」独自の記述になります。

<?php the_field('json-ld'); ?>

テキストエリアに入力されたデータを呼び出す場合は、上記の形で出力可能です。「json-ld」は先ほどフィールド名に入力したものになります。

実際に単一記事の投稿 (single.php)に設定して、出力結果を見てみましょう！「JSON-LD」はページ内のどこに記述しても問題ありませんので、分かりやすいところに書いておきます。

これで「Advanced Custom Fields」カスタムフィールドの設定から出力までは完了しました！長々と書きましたが、実際に作業をしてみると難しいところはありませんので、ぜひ挑戦してみてください。

また、「Advanced Custom Fields」はフィールドタイプにあわせて様々な出力方法があります。出力の解説もKoToRiさんの記事が分かりやすいので、ぜひチェックしてみてください。特に画像周りに出力は以前わたしも苦戦した経験があり、そのカスタマイズのこともいづれ記事で紹介できればと思います。

http://kotori-blog.com/wordpress/acf_output/

まとめ

いかがでしたか？カスタムフィールドをカンタンに設定するプラグインを紹介いたしました。「Advanced Custom Fields」は個人的にもよく利用しているプラグインなので、また違った角度から記事が書ければと思います。

すごく初歩的なことかもしれませんが、プラグインのインストール方法から有効化についてお伝えしました。また、カスタムフィールドはデフォルトの機能を分かりやすく解説できれば、それで問題ないのですが、やっぱり「Advanced Custom Fields」は管理画面も分かりやすいので、オススメなんです。分かりやすいという点はとても大事で、忘れた頃に触っても使いやすいプラグインは重宝します！

今回のまとめは・・・。