みなさんこんにちは！フロントエンドエンジニアの高澤です！ 今回は、WordPressをベースにWebサイトを制作する方に必須といっても過言ではない機能である「カスタムフィールド」についてご紹介していきたいと思います。
WordPressでお仕事をしている方であれば、今回のスキルを習得してしまえば実務で役立つこと間違いなしなので、よろしければ当記事を最後まで読んで頂ければ幸いです。

カスタムフィールドとは

カスタムフィールドとは、WordPressの投稿画面はタイトルと本文しか入力できませんが、それ以外に画像やテキストなど別の情報(データ)をサイトに表示させることができる機能です。

カスタムフィールドを使用する目的

カスタムフィールドを使用する目的は、WordPressはデフォルトの状態のままでは投稿画面でタイトルと本文しか入力できないため機能が少なく不便に感じる場面がよくあるので、タイトルや本文以外に画像や数値、URLなどを入力できる機能を追加し、サイトの運用をより使いやすく便利にすることだと筆者は考えます。 また、設定次第では投稿画面上に新たに追加した情報ごとに入力を「必須」として設定することによって、ページを公開する際に追加漏れを検知してくれたりします。なので情報漏れを防ぐことができるなど便利な機能があります。

図のように、投稿画面のタイトルと本文以外にデータを入力できる項目を増やすことができます。

カスタムフィールドの具体的な使用例

WordPressでサイト制作を行う場合、カスタムフィールドは実務でほぼ使うものと言っても過言ではありません。それだけ大変便利なものであり、なくてはならないものだと言えます。
ただ、カスタムフィールドについて理屈ではわかってもどんなものかを言葉の説明だけではわかりづらいので、ここからは一般に公開されているサイトによく使われている使用例を見ていきたいと思います。

使用例１） もしカスタムフィールドを利用してECサイトの商品ページを作る場合
カスタムフィールドはWordPressの投稿画面にタイトルと本文以外にも情報としてテキストや画像、数値などを入力できる機能を追加することができると説明しました。
そのカスタムフィールドの機能を活かせるサイトの１つとして、商品を取り扱ったECサイトがあります。
商品の種類にもよりますが、「価格」や「色」、「商品のサイズ」、「商品番号」など商品ごとに小さな情報が存在しますが、この小さな情報を管理し運用するために大活躍するのがカスタムフィールドになります。

上記はアパレルのECサイトの商品一覧ページですが、もし上記の例でカスタムフィールドを使用するなら、商品ごとの「色」や「商品名」、「値段」を投稿画面上から設定し、サイト上に表示させるといった使い方をします。
例のようにWordPressでECサイトを作るなら機能の構築も運用も効率的に実現できます。

使用例２） もしカスタムフィールドを利用して企業サイトのニュース一覧を作るなら
カスタムフィールドはコーポレートサイト制作にも大変有効です。
コーポレートサイトには会社からのお知らせやIR情報など自社のニュースを一覧で表示させているサイトがあるかと思います。
それら「お知らせ」「メディア」「セミナー」「IR情報」などの情報をニュース記事ごとに割り振って、管理運用することができます。

上記は弊社のコーポレートサイトになりますが、カスタムフィールドを利用して作られております。
カスタムフィールドが活かされている部分としては、「お知らせ」「メディア掲載」「セミナー」のそれぞれ３つを分けて一覧表示させたり、青い長方形で囲まれている「お知らせ」のモジュールを表示させたりすることができます。

カスタムフィールドを利用する方法

カスタムフィールドを利用する方法は、大きく分けて
・プラグインを使う方法 ・functions.phpにプログラムを記述して機能を構築する方法 ・デフォルトで存在する機能を使う方法 の３つの方法があります。
筆者的には、プラグインを使用する方法がおすすめです。
その理由は、プラグインを使えば簡単かつ迅速にWordPressに導入することができ、機能も豊富で運用面でも使いやすい操作画面を提供してくれるので、実務でもよく使われておりメリットがとても大きいといえます。 なので今回はプラグインを利用した方法をご紹介していきたいと思います。

プラグインでカスタムフィールドを実装する方法

プラグインに関しては、Advanced Custom Fields、Custom Field Template、Custom Field Suite、など様々なプラグインが無料で提供されていますが、当記事ではAdvanced Custom Fieldsをおすすめします。
その理由は、Advanced Custom Fieldsはとても人気のあるプラグインで、しばしば実務で使われており、ネットや書籍でも非常に情報が多く存在し、何か困ったことがあればすぐに調べられるといったメリットがあるからです。
また、管理画面からの操作性が優れており、大変使いやすいインターフェースを備えている点も大きなメリットだと言えます。
以上の理由から筆者はおすすめさせていただきます。

Advanced Custom Fields をインストールする方法

それではインストールの手順をご説明します。 まずは「Advanced Custom Fields」プラグインをWordPressにインストールしましょう。下記の順番で進めばインストールすることができます。
1. WordPressの管理画面の左側にある「プラグイン」をクリックする。

3. 開いたプラグインの新規追加ページの右側に検索窓があるので、そこに「Advanced Custom Fields」と入力し検索します。

4. プラグインの一覧にAdvanced Custom Fieldsが表示されるので、「今すぐインストール」をクリックします。

5. 4の「今すぐインストール」をクリック後に、「有効化」をクリックします。

以上の順番通りに進めばプラグインがインストールされます。

Advanced Custom Fieldsの使い方　〜まずは入力したテキストを表示してみよう〜

プラグインのインストールが終わったら、カスタムフィールドを利用して入力した任意の文字をサイト上に表示させることができる手順を通して、Advanced Custom Fieldsの使い方をご説明します。
また、後述しますが、Advanced Custom Fieldsではプラグイン専用のテンプレートタグのget_field()関数とthe_field()関数があります。主にget_field()関数を使いますが、今の段階ではそういうものがあるんだという程度に頭に入れておいていただければ十分です。

１、カスタムフィールドを作成する

まずはじめに、WordPress管理画面の左メニューバーにある「カスタムフィールド」をクリックします。 ※Advanced Custom Fieldsをインストールしなければ表示されません。

クリックしたら「フィールドグループ」ページが表示されるので、「新規追加」をクリックします。

「フィールドグループを新規追加」ページが表示されるので、フィールドグループのタイトルを入力しましょう。
ここでは今回の例として「サンプルグループ」と入力しておきましょう。

次にタイトル入力欄のすぐ下にある「フィールドを追加」をクリックします。

クリックしたら、フィールドの各項目を入力する欄が表示されるので、それぞれに必要な情報を追加していきます。

２、カスタムフィールドを設定する

次は下記の５つを設定してください。

下記の５つは設定する際に必ず理解しておくべき項目です。
なぜこの５つかというと、カスタムフィールドを利用するために最低限必要な設定内容だからです。運用上でもとても重要なものなので、今回ご紹介させていただいております。
逆にいうと、これら５つの項目以外は実務でもあまり触ることが少なく、また当記事での目的はカスタムフィールドを理解し利用できるようになることなのでここでは割愛いたします。

①「フィールドラベル」

投稿画面で表示されるカスタムフィールド欄の名前です。運用上のわかりやすくと言う意味で基本的に日本語で入力します。
ここでは今回の例として「サンプルテキスト」としておきましょう。

②「フィールド名」

カスタムフィールドの任意の名前です。半角英数字（スペースは不可）で入力します。ここで入力したフィールド名は、PHPのテンプレート上で関数の値として使用されますので、意味のわかる名前にしましょう。
ここでは今回の例として「sample_text」としておきましょう。

③「フィールドタイプ」

フィールドタイプの種類を指定します。例えば、単純にテキストを入力してそれを表示させたいのであれば「テキスト」、長文のテキストを表示させたいなら「テキストエリア」、選択して特定の値を出力させたいなら「チェックボックス」や「ラジオボタン」を選択します。
また、選択したフィールドタイプによって直下の設定欄が変わりますので内容に合わせて設定してください。
ここでは今回の例として「テキスト」としておきましょう。

④「説明」

設定したカスタムフィールドがどういう意図で設定されたのか、どういう機能なのか、何をしてほしいのかの説明を入力できます。入力した内容は、投稿画面の設定したカスタムフィールド欄に表示されます。
ここでは「サンプルブログのテキストです。」と入力しておきましょう。
※こちらは設定しなくても大丈夫ですが、設定しておくと該当するカスタムフィールドが何を指しているのかがわかるので運用面で大変役に立ちます。

⑤「必須か？」

「はい」か「いいえ」で選択できます。「はい」で設定した場合、投稿画面で「公開」をクリックした場合、そのカスタムフィールドに何も入力していなかったり選択していなかった場合はWordPressがエラーを検知して公開をストップしてくれます。
ここではお好きな方でかまいません。

３、どのページでカスタムフィールドを利用できるようにするか設定する

上記の設定が終わったら、「フィールドグループを新規追加」ページに戻り、「位置」という設定項目があるかと思います。

この項目ではどのページでカスタムフィールドを使えるようにするかを設定できます。
設定は条件形式になっており、例えばデフォルトだと（投稿タイプ＋等しい＋投稿）で個別の記事の投稿画面で使えるようになっていますが、固定ページで使えるようにしたい場合は（投稿タイプ＋等しい＋固定ページ）にして固定ページで使える条件を設定すれば使えるようになります。
使いたい場所によって条件を指定してあげましょう。
ここではデフォルトの設定（投稿タイプ＋等しい＋投稿）にしておきましょう。

４、カスタムフィールドを公開する

ここまで設定が済んだら「フィールドグループを編集」ページ（ページはそのまま）の画面右にある「公開」をクリックします。

「公開」をクリックしたら下記のように「サンプルテキスト」が追加されているのが確認できるかと思います。

公開をした後、管理画面の左側メニューから「投稿」→「投稿一覧」へ進み投稿画面を確認して見ましょう。 下記のようにカスタムフィールドの入力欄が追加されているのがわかります。

ここまでの手順まで進んでいただけましたらもう少しです。 残念ながら、今の段階だと投稿画面で入力して公開してもサイト上には表示されません。 表示させるためには「テーマエディター（テーマの編集）」でget_field()関数を記述しなければなりません。 その方法を下記の５でご説明します。

５、テンプレートにget_field()関数を記述する

カスタムフィールドを表示させるために、テンプレートファイル（例、index.phpやsidebar.phpなど）に簡単なテンプレートタグ を記述しなければなりません。
テンプレートファイルとはカスタムフィールドを表示させたいphpファイル（拡張子が「.php」）のことで、表示させたい部分にget_field()関数を記述します。
まずはテーマの編集をしましょう。
テーマの編集の手順 １、WordPress管理画面左側メニューの「外観」をクリック

２、「テーマエディター（もしくは「テーマの編集」）」をクリック

３、画面右側にある「テーマファイル」の中の表示させたいテンプレート（ここではsidebar.php）を選択

４、表示させたい箇所に「<?php echo get_field(‘sample_text’); ?>」をコピペする

５、画面下の「ファイルを更新」をクリック

●get_field()関数とは
get_field()関数はカスタムフィールドとして設定したデータを取得します。
どのカスタムフィールドを使うのかを指定するための関数の値は「２、カスタムフィールドを設定する」で設定していただいた半角英数字の「フィールド名」を使います。
また重要なのがget_field()関数はデータを取得する関数なので必ず表示させる時はPHPのecho関数を使います。
記述の仕方は下記の通りです。

上記のコードを記述した場所にカスタムフィールドが表示されます。

６、投稿画面でカスタムフィールドを入力して記事を公開する

ここまできたら、あとは投稿画面を開いて、カスタムフィールドを入力して公開をしてみましょう。 ここでは「この記事の著者は山田太郎です」と入力しましょう。

入力した通りの情報が画面上に出力されているはずです。

カスタムフィールドを利用する手順についての解説はここまでです。 無事サイドバーに「この記事の著者は山田太郎です」というテキストを表示することができましたでしょうか？
上記の手順で設定を進めていただければカスタムフィールドの設定は問題なくできるかと思います。
ただ、ここまでの内容だと「投稿画面でテキストを入力して更新したらそれが表示された！」で終わってしまうので、次はもうちょっと実践的な内容を解説したいと思います。

Advanced Custom Fieldsの実践的な使い方

ここからはサイト制作で筆者がよくやる実践的なAdvanced Custom Fields の使い方を解説します。
ここでご紹介する使い方ができるようになれば、ブロガーの方であればWordPressで運営されているブログサイトにカスタムフィールドを使って自由な機能を追加したりできますし、エンジニアの方やWebデザイナーの方などWordPressでの開発に携わっていらっしゃる方であればカスタムフィールドのカスタマイズスキルを身につけ実践で活かせるかと思います。
ここからは上記２つの機能の実装を解説していきたいと思います。 ・投稿記事によって違ったバナー画像をサイドバーに表示する ・ラジオボタンで投稿記事ごとのライタープロフィール表示させる

今回の実践的な使い方を厳選した理由

そもそもカスタムフィールドで扱えるデータは多くの種類があります。
現時点で確認できる数は31種類あり、エンジニア目線で考えてもよっぽどではない限り実際の現場ですべての機能を使うことはあまりないのかなと思います。
使うとしたら、「テキスト」「テキストエリア」「数値」「URL」「画像」「ファイル」「チェックボックス」「ラジオボタン」「Link」ぐらいでしょう。
また、これからご紹介する実践的な使い方はとても汎用性があり、応用次第で他にも様々な機能が作れると考えたからです。
上記を踏まえて、エンジニア目線で考えたより実践的なカスタムフィールドの使い方をご紹介したいと思います。
ちなみにAdvanced Custom Fieldsプラグインをインストールされてない方がいらっしゃいましたら、先にインストールしていただければと思います。

インストール方法はこちら

１、投稿記事によって違ったバナー画像をサイドバーに表示する

（１）カスタムフィールドを設定する

まずは管理画面左にある「カスタムフィールド」をクリックし、「フィールドグループを編集」のページを開きます。

画面上にある「新規追加」をクリックし、

「タイトルを追加」のところにフィールドグループのタイトルを入力します。

ここでは例として「サイドバーグループ」と入力しておきましょう。 次に「タイトルを追加」の直下にある「＋フィールドを追加」をクリックし、

「フィールドラベル」「フィールド名」「フィールドタイプ」「説明」「必須か？」の５つの情報を入力しましょう。

ここでは下記の例で設定しておきましょう。 １、「フィールドラベル」を「サイドバーのバナー」 ２、「フィールド名を」を「sidebar_banner」 ３、「フィールドタイプ」を「画像」 ４、「説明」を「サイドバーにバナーを表示させる機能です。バナー画像を挿入して下さい。」と入力 ５、「必須か？」を「いいえ」 ６、そしてここでは「返り値のフォーマット」を「画像URL」

入力が終わったら右側にある「公開」をクリックします。

（２）投稿画面で必要な情報を追加する

公開をした後、管理画面の左側メニューから「投稿」→「投稿一覧」へ進み投稿画面を確認して見ましょう。 本文入力欄の下に「サイドバーグループ」の枠の中に「サイドバーのバナー」という任意の画像を追加できるボタンが設置されているのがわかります。

「画像を追加する」をクリックしてバナー画像をアップロードし、

画面右側の「公開」もしくは「更新」をクリックします。

（３）テーマの編集をする

設定はできましたが、このままの状態ではバナーは表示されないのでテーマの編集をします。 管理画面に戻って下記の手順に従って進めてください。 １、「外観」をクリック

２、「テーマエディター（もしくはテーマの編集）」をクリック

３、画面右側の「テーマファイル」で「sidebar.php」を選択 ※sidebar.phpがなければ、サイドバーとして記述してあるプログラムを選択

４、テンプレートのバナーを表示させたい任意の箇所に下記のコードをコピー＆ペーストする

『コードの説明』 上記のコードはPHPのif文とempty関数で少しカスタマイズしているプログラムです。 内容は「投稿画面でバナー画像を設定してあればそのバナー画像を表示し、設定していなければ非表示にする」という機能になっています。
get_field()関数とif文とempty関数を組み合わせてカスタムフィールドの設定が空じゃなかったら表示、空だったら非表示、となっています。
あとは投稿ページごとにお好きなバナー画像を設定していただくと、投稿ページごとに違ったバナー画像が表示されます。

上記の３つの言語はWebサイト制作でかなり重要なプログラムなので、必ず抑えておきましょう。

上記のコードをコピー＆ペーストしたら、「テーマを編集」ページの下の方にある「ファイルを更新」ボタンをクリックします。

「ファイルを更新」をクリックしたら、先ほど設定した記事ページを表示してみましょう。
サイドバーに設定したバナー画像が表示されていることが確認できます。

また、他の記事ページにもバナーを設定していただければ下記の様に様々なバナーを表示させることができます。

ここまでが投稿ページごとにサイドバーにバナー画像を表示させる機能の手順でした。

２、ラジオボタンで投稿記事ごとのライタープロフィール表示させる

まずは管理画面左にある「カスタムフィールド」をクリックし、「フィールドグループを編集」のページを開きます。

画面上にある「新規追加」をクリックし、

「タイトルを追加」のところにフィールドグループのタイトルを入力します。

ここでは例として「記事ページグループ」と入力しておきましょう。 次に「タイトルを追加」の直下にある「＋フィールドを追加」をクリックし、

「フィールドラベル」「フィールド名」「フィールドタイプ」「説明」「必須か？」の５つの情報を入力しましょう。

ここでは下記の例で設定しておきましょう。 １、「フィールドラベル」を「ライタープロフィール」 ２、「フィールド名を」を「writer_profile」 ３、「フィールドタイプ」を「ラジオボタン」 ４、「説明」を「」 ５、「必須か？」を「はい」 ６、選択肢に「山田太郎　田中太郎　山本太郎」と入力 ７、「返り値」を「ラベル」と選択

入力が終わったら右側にある「公開」をクリックします。

（２）投稿画面で必要な情報を追加する

今度は記事の投稿画面を開きます。 本文入力欄の下に「記事ページグループ」の枠の中に「ライタープロフィール」という３つのラジオボタンが設置されているのがわかります。

３つのうちの１つのどれか（今回は例として田中太郎）を選択し、

画面右側の「公開」もしくは「更新」をクリックします。

（３）テーマの編集をする

このままの状態ではライターのプロフィールは表示されないのでテーマの編集をします。 管理画面に戻って下記の手順に従って進めてください。 １、「外観」をクリック

２、「テーマエディター（もしくはテーマの編集）」をクリック

３、画面右側の「テーマファイル」で「single.php」を選択 ※single.phpがなければ、記事ページとして記述してあるプログラムを選択

４、テンプレートのライタープロフィールを表示させたい箇所に下記のコードをコピー＆ペーストする

『コードの説明』 ここでのプログラムはget_field()関数の値の取得を利用し、PHPのif文の条件分岐で構成されています。
投稿画面のラジオボタンの項目にある山田太郎を選択すれば、HTMLとCSSで構成された山田太郎のプロフィールが表示されて、田中太郎を選択すれば田中太郎のプロフィールが表示されます。
上記のコードをコピー＆ペーストしたら、「テーマを編集」ページの下の方にある「ファイルを更新」ボタンをクリックします。

「ファイルを更新」をクリックしたら、先ほど設定した記事ページを表示してみましょう。 ライターのプロフィールが表示されていることが確認できます。

また、他の記事ページにもラジオボタンでそれぞれ執筆したライターの名前を選択していただければ下記の様にそれぞれのライタープロフィールを表示させることができます。

ここまでが記事ページにライターのプロフィールを表示させる機能の手順でした。
上記２つの実践的な方法をご紹介しましたが、大変応用が効く基本的な機能になります。なので、サンプルコードを任意でカスタマイズしていただけると、多くの機能を実装できる様になります。

他にも「Custom Field Template」や「Custom Field Suite」などカスタムフィールドのプラグインはありますが、今回取り上げなかった理由は、Advanced Custom Fields よりかは機能が少なめであるのと、一般的によく使われており情報量の多いAdvanced Custom Fields の方が使い慣れるべきプラグインとして優先度が高いと考えたためです。

まとめ

カスタムフィールドはWordPressのデフォルトの状態の物足りない部分を、より便利にするために機能を拡張するものです。
また、カスタムフィールドのプラグインであるAdvanced Custom Fieldsを使えばとても簡単に設定することができます。
当記事でご紹介した内容はカスタムフィールドが何かがわかり、また基本的な使い方から便利な昨日の実装方法まで網羅しておりおります。
なので最後まで読んでいただければ、カスタムフィールドについて人に教えられる様になり、主流の使い方がわかり、実際に機能を実装することができる様になるかと思います。
実務でもそのまま活かせるので、お仕事や個人的なサイト制作をする際の参考になりましたら幸いです。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

WordPressでバックアップをとる方法【タイミング/用途別で解説】

バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。

【最短】WordPress（ワードプレス）で問合せフォームを設置する方法

お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。

【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。

<a href="https://digitor.jp/textbook/custom-field/">【徹底解説】WordPressカスタムフィールドの設定方法+おすすめプラグイン</a>