カスタムフィールドを使って記事を投稿する

WorsPressを使って記事を投稿する場合、初期設定では「タイトル」と「本文」の二項目が用意されています。通常のブログ記事であれば、この二項目で十分なことも多いですが、WordPressをWebサイトを作るためのCMS（Contents Management System：コンテンツ・マネジメント・システム）として使用している場合、「タイトル」や「本文」以外にも複数の項目を用意しておきたいこともあります。

たとえば、ファッションのショッピングサイトを作るときには、それぞれの商品ページには「ブランド」「サイズ」「価格」などの項目が必要となります。これらの項目は本文の中に直接記入してHTMLなどで見た目を整えることもできます。しかし、あらかじめ「カスタムフィールド」として項目を用意しておき、テンプレートファイルで雛形を作っておくことで、商品の投稿や管理の負担を減らすことができます。

カスタムフィールドを使うための準備

WordPressでカスタムフィールドを使うには、「投稿」や「固定ページ」などの編集画面でカスタムフィールドを有効にしなければなりません。そのための手順を紹介します。なお、2021年12月11日時点で最新のバージョンである「WordPress 5.8.2」とGutenberg（グーテンベルグ）を使用していることを前提に記事を作成しています。使用しているWordPressのバージョンやテーマによっては設定方法が異なることもあります。

手順１

投稿ページで右上に表示されている「オプション」ボタンをクリックし、表示された項目の中から「設定」を選択します。

手順２

設定を選択し表示された項目の中から「パネル」を選択します。

手順３

カスタムフィールドの項目にチエックを入れると「有効化してリロード」というボタンが現れるので、それをクリックします。

リロードして編集ページに戻ると画面下のほうにカスタムフィールドの入力欄が表示されているので、カスタムフィールドを追加したいときにはこの欄を使用します。

※注意
「Advanced Custom Fields」など、カスタムフィールドを設定するためのプラグインもあります。それらのプラグインを利用している場合、ここで紹介した方法ではカスタムフィールドの入力欄は表示されません。

カスタムフィールドの追加

カスタムフィールドを使うための設定ができたら、投稿ページからいつでもカスタムフィールドを追加できるようになります。カスタムフィールドを追加するには、名前とそれに対応する値を入力して「公開」ボタンをクリックするだけです。

たとえば、商品の価格（100円）をカスタムフィールドとして追加したい場合は、「商品の価格」が名前、「100円」が値となります。ただし、名前はプログラム処理でカスタムフィールドを呼び出すときに使うキーとなるので、通常は日本語ではなく半角の英数字などを使います。

商品の価格などであれば名前を「price」などとして、「名前：price」「値：100円」とします。

また、複数のカスタムフィールドを使いたい場合は、１つ目のカスタムフィールドの入力が終わってから左下にある「カスタムフィールドを追加」をクリックすると新たな入力欄が表示されるので、同じ要領で入力します。

カスタムフィールドの値を使用する

カスタムフィールドに入力した値は、そのままでは記事に反映されません。カスタムフィールドの内容を記事に表示するには、テンプレートファイルを編集して表示させたい箇所にコードを追加します。

名前と値が1対1の場合

カスタムフィールドに登録した値を取り出すための関数はいくつかありますが、カスタムフィールドに登録した名前と値が1対1で対応している場合には、WordPressの組み込み関数の一つである「post_custom()」を使うと便利です。引数にカスタムフィールドで登録した名前を入れるだけで、それに対応する値を取り出すことができます。

たとえば、カスタムフィールドに「名前：price」「値：100」として登録したものを出力したい場合は次のように記述します。

<div>
価格：<?php echo post_custom('price'); ?>円
</div>

名前と値が1対ｎの場合

カスタムフィールドでは、１つの名前に対して複数の値を登録することもできます。その場合は、「post_custom()」で取り出した値を一度変数に入れ、foreachを使って出力することができます。

たとえば、「size」という名前に対して「S」「M」「L」の3つの値が登録されている場合は、次のように出力します。

<div>
<?php
  $values = post_custom('size');
  foreach($values as $value) {
    echo $value . '<br>';
  }
?>
</div>

このように記述することで、「S」「M」「L」が一つずつ改行されて表示されます。