WordPressのカスタムフィールドを記事に設定する2つの方法

2023.10.07
2023.10.07

WordPressの投稿画面にデフォルトで用意されている入力フィールドは
・タイトル
・本文
のみです。

しかし、WordPressの機能の1つ「カスタムフィールド」を利用することで以下のように入力フィールドを増やすことができます。

カスタムフィールドを活用することで、いちいち本文画面に入力項目と値を書き込まなくても必要な情報をすぐに表示させることができます

カスタムフィールドは、以下のようなWebサイトを制作するときに便利な機能です。
●お店紹介サイトや不動産サイトのように、1つのページに多数の情報を掲載するサイト
●決まったフォームで記事を量産するサイト
●商品やサービスを販売するショッピングサイト
●複数人で運営しているサイト

今回はカスタムフィールドを導入して、投稿作業をスムーズにする方法をご紹介します。

カスタムフィールドとは入力フィールドを増やす機能

デフォルト設定のWordpress投稿画面には、タイトルと本文2つの入力フィールドしかありません。

しかしカスタムフィールドを活用すれば、独自の入力フィールドを追加することができます。カスタムフィールドの追加例としては以下の項目が挙げられます。

・お店や不動産物件、会社の位置情報
・交通案内
・価格
・評価
・コメント

Webサイトに合わせて適切なカスタムフィールドを設定しましょう。

カスタムフィールドは本文とは異なった入力フィールドですので、単体で編集することができます。

カスタムフィールドが便利な場面

入力項目が固定されている場合

例えば、不動産サイトやショッピングサイト、お店の口コミサイトのように、記事ごとに内容は違うが固定の項目で情報を入力したいというときに活用されます。
また、カスタムフィールドは、本文とは別の位置に入力内容を表示することができます。

複数人で投稿している場合

複数人でブログを投稿している場合、入力項目にばらつきがでてしまう場合があります。
カスタムフィールドは入力項目の固定が可能なので、投稿内容を統一することができます。

カスタムフィールドを表示させる手順

カスタムフィールドを追加し、プレビュー画面で表示させる手順は以下の通りです。
●カスタムフィールドを追加する
●カスタムフィールドを表示させるテンプレートを作り、phpファイルに書き込む

カスタムフィールドを追加する

カスタムフィールドはデフォルトの投稿画面では表示されていません
したがって、プラグインを導入するか表示オプションから表示させる必要があります。

表示オプションからカスタムフィールドを表示させる

WordPress投稿画面の右上に「表示オプション」があるのでクリック。

「表示する項目」の「カスタムフィールド」にチェックを入れます。

本文の下にカスタムフィールドのウィジェットが表示されますので、カスタムフィールドの設定をおこないます。

「名前」の部分に入力項目名を入れます。(※今回は「サービス価格」と設定)
名前の隣は値を入力する部分です。(※今回は「50000円」と設定)
入力が完了したら、「カスタムフィールドを追加」をクリック。

「カスタムフィールドを追加」で追加することで、次に新規投稿する場合はプルダウンメニューからカスタムフィールドを選択することができるようになります。

なお、追加したカスタムフィールドは削除・更新が可能です。

プラグインでカスタムフィールドを表示させる

カスタムフィールドはプラグインを使って表示させることも可能です。
カスタムフィールドを表示させるプラグインはいくつかありますが、今回は「Advanced Custom Fields」というプラグインを使用します。
このプラグインは、通称「ACF」と呼ばれており、カスタムフィールドプラグインの定番です。
文字だけでなく画像、PDF、カレンダーなど様々なカスタムフィールドを簡単に追加することができます。

プラグインを追加するには、「プラグイン」→「新規追加」をクリック。

検索窓に「Advanced Custom Fields」と入力し、プラグインをインストールします。

インストールできると、「有効化」できるようになるのでクリック。

サイドバーに「カスタムフィールド」が追加されます。
「カスタムフィールド」→「新規追加」でカスタムフィールドを設定できます。

投稿画面に表示させるカスタムフィールドを設定します。
今回は「商品価格」を入力できるカスタムフィールドを作ります。
例えば、以下のように設定します。

すると、投稿画面には、以下のようにカスタムフィールドが追加されます。

カスタムフィールドを記事に表示させる

カスタムフィールドを投稿した記事に表示させるには、phpファイルにコードを記述する必要があります。
「投稿」なら投稿のphpファイル、「固定ページ」なら固定ページのphpファイルに記述します。今回は、投稿画面にカスタムフィールドを追加したので「singular.php」にコードを記述します。
(Webサイトによって、phpファイルの名称は異なります。)

phpファイルは、「外観」→「テーマエディタ」から開くことができます。

テーマエディタを開くとphpファイルのコードが表示されます。
書き込むphpファイルは赤枠の部分で選択できます。

コードを記述する際は、バックアップを取るか、コードを全てコピーしトラブルに備えましょう。
また、記述方法プラグインを使った場合と使わなかった場合で記述内容がそれぞれ違うので注意してください。

プラグインを使わなかった場合

「singular.php」ファイルを開き、カスタムフィールドを表示させるための関数を記述します。記述場所は、titleの直下などカスタムフィールドを表示させたい場所です。

カスタムフィールドを表示させるための関数はいくつか種類があります。
全ての情報を表示させるなら「get_post_custom()」という関数を使用します。

この関数を使い、phpファイル内に以下のようなコードを記述します。

今回は、サービス価格というカスタムフィールドを追加したため、(”)内が「サービス価格」になっています。

またテンプレートタグ「the_meta()」を使う方法もあります。
その場合、以下のコードを記述します。

さらに、テンプレートタグ「the_meta()」では表示フォントや色をカスタマイズすることもできます。

他にも以下のコードを使用した方法もあります。

「$post_id」は、データの値を取得する記事のID、「$key」は表示させるカスタムフィールドの名前、「$single」はtrueあるいはfalseを入れます。
trueに設定されている場合、結果が1つの文字列、falseの場合にはカスタムフィールドの配列が表示されます。

プラグインを使う場合

プラグインを使う場合、phpファイルに入力するコードがプラグインごとに異なります。
今回は、「Advanced Custom Fields」を使用したので、専用のコードをご紹介します。

Advanced Custom Fieldsの場合は、「the_field();」という関数を使用します。
()内にはカスタムフィールド作成時に設定したフィールド名を入れます。
今回は、「price」を設定したので、コードは「the_field(‘price’);」になります。

まとめ

カスタムフィールドは複数人で運営しているサイトやショッピングサイトに便利な機能です。カスタムフィールドを設定するには、
●投稿画面に表示させる
●phpファイルにプレビューで表示させるためのコードを記述する
といったことが必要です。
phpファイルを編集することになるので、バックアップやコピーを取ってから作成しましょう。

2023.10.07
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ