WordPressのカスタムフィールドとは?投稿の作業効率が向上!

コピペ書き換え職人になりかけていた私を救ってくれたのが、カスタムフィールドでした。

ホームページに新しい投稿を追加する際、入力する項目が決まっていることがありますよね。
たとえば、複数店舗の情報を管理している場合、店舗名、住所、電話番号など、どの店舗でも入力すると思います。
入力する項目が決まっているのに、わざわざ以前の内容をコピーして貼り付けていたら手間がかかりますよね。

そんな手間で悩んでいる方に朗報です。
WordPressのカスタムフィールドを使えば、入力項目をあらかじめ決めて管理することができます。
コピペしなくてよくなるので、作業効率がアップします。

この記事では、「WordPressのカスタムフィールドの使い方」についてご説明します。

目次

カスタムフィールドとは

カスタムフィールドとは、好きな入力項目を追加できる機能です。
WordPressにデフォルトでついている機能なので、誰でも使用することができます。

ブログを書くだけであれば、特に出番はないかもしれません。
しかし、商品のレビューをしたり店舗を管理したりする時には、タイトルと本文だけでは書きづらいです。

そんな時に、カスタムフィールドが活躍します。
カスタムフィールドを使用すれば、追加したい入力項目を自由に設定できます。
店舗名や住所など、入力する項目を決めて設定することで、効率的に管理をすることができます。

カスタムフィールドのことがわかったところで、メリットについて説明します。

カスタムフィールドを使用するメリット

カスタムフィールドを使用するメリットは、次のとおりです。

  1. 作業効率が向上する
  2. 入力作業が標準化できる
  3. 入力情報の管理がしやすくなる

作業効率が向上する

コピペから解放されます。

カスタムフィールドを使用しない場合、新しく入力項目を作成するか、コピペして用意する必要があります。
しかし、必要なのは入力項目だけで、入力内容はその都度違うため、コピペの作業効率は良くありません。

カスタムフィールドを使用すれば、コピペをする必要がありません。
入力項目が既に用意された状態で投稿できます。

入力内容を埋めるだけで良くなるので、作業工程が少なくなります。
その結果、効率がよくなります。

入力作業が統一化できる

やり方さえわかれば、誰が入力しても同じになります。
また、入力する項目についても、入力する項目を決めてしまうことで、入力忘れを防ぐことができます。

入力情報の管理がしやすくなる

入力する情報が多くなっても、管理がしやすくなります。

カスタムフィールドを使用しない場合、記事の数が多いと、変更する箇所を探すのが大変です。
ミスも発生しやすくなります。

カスタムフィールドを使用すれば、数が多くてもわかりやすく情報を変更することができます。

カスタムフィールドの使い方

カスタムフィールドのメリットがわかったところで、使い方について説明します。
カスタムフィールドを使う方法は2つあります。

  • デフォルトの機能を使用する
  • プラグインを使用する

どちらの方法でも、カスタムフィールドを設定する作業表示する作業が必要です。

おすすめはプラグインを使用することです。
ですが、ここではデフォルトの使い方とプラグインの両方を説明します。
お好みで使い分けてください。

デフォルトの機能を使用する

カスタムフィールドを有効化する

カスタムフィールドを使えるようにしていきます。
とても簡単です。

  1. 投稿から新規作成をクリックします。
  2. 右上の縦の3点リーダーから、設定を選択します。
  3. パネルをクリックして、追加のカスタムフィールドの設定を有効にします。

これだけで、カスタムフィールドが画面に表示されたと思います。

カスタムフィールドの設定

名前と値のところに入力フォームがあります。
仕組みはこんな感じです。

例)店舗名を設定する場合
名前: 店舗名
値: サンプル店舗

名前が項目名で、値が実際に入力する内容です。

入力項目を新規追加する場合は、新規追加をクリックして、名前と値を入力します。
その後、カスタムフィールドを追加ボタンをクリックすれば新規追加できます。
一度新規追加すれば、別の投稿でも同じ入力項目を使用することができます。

以前追加した入力項目を使用する場合は、名前が選択となっている状態でクリックすると、入力項目が選択できます。

あとは値を入力して、カスタムフィールドを追加ボタンをクリックすれば追加できます。

デフォルトのカスタムフィールドの表示設定

実は、カスタムフィールドは、何もしなければ投稿に表示されません。
投稿に表示されるようにするための設定方法を説明します。

投稿に表示されるようにするための設定方法は、以下の3つの関数のどれかを使用します。

  1. get_post_meta関数
  2. post_custom関数
  3. the_meta関数

注意ですが、the_meta関数は非推奨関数となっています(WordPress バージョン6.0.2から)。
できるだけ使用しないようにしましょう
代わりに、get_post_meta関数の使用をおすすめします。

どの方法を使用しても、表示させたい箇所に記述してください。
見た目の調整をしたい場合は、CSSで調整してください。

1.get_post_meta関数

指定された投稿IDの投稿メタフィールドを取得します。
参照:
https://developer.wordpress.org/reference/functions/get_post_meta/
the_meta関数の代わりに使用をおすすめします。

簡単に言えば、投稿に紐付いているカスタムフィールドの情報を取得することができます。
項目名と値を取得することもできますし、特定の項目名の値を取得することもできます。

使い方は、投稿IDを指定して、ループ処理をする必要があります。
こちらは、投稿に紐付いている項目名と値を全て取得して、リスト形式で出力する簡単な使い方の例です。
WordPressの内部的なものまで取得してしまうので、アンダーバーから始まるものは表示しないようにしています。

   <dl>
     <?php
     // メタデータを取得する
     $fields = get_post_meta(get_the_ID());
     // 使用しないキーを指定する
     $not_used_key = "_";
     ?>
     <?php foreach ($fields as $key => $values) : ?>

       <?php
       // _(アンダーバー)から始まる場合は出力しない
       if (strpos($key, $not_used_key) === 0) {
         continue;
       }
       ?>
       <!-- 入力項目名 -->
       <dt><?php echo esc_html($key); ?></dt>
       <!-- 入力された内容 -->
       <dd>
         <?php foreach ($values as $value) : ?>
           <?php echo esc_html($value); ?>
         <?php endforeach; ?>
       </dd>
     <?php endforeach; ?>
   </dl>

値を出力する際は、esc_html関数でエスケープ処理をするようにしています。

金額が項目名だった場合、金額の値を取得する書き方はこちらです。

<dl>
  <dt>金額</dt>
  <dd><?php echo esc_html(get_post_meta(get_the_ID(), "金額", true)); ?></dd>
</dl>

金額の箇所に取得したい項目名を指定してください。
trueの箇所は、trueのままをおすすめします。
これは、取得する値が配列か文字列かを設定するパラメーターです。
trueにすると文字列、falseにすると配列になります。
デフォルトはfalseです。

2.post_custom関数

投稿のカスタムメタデータフィールドを取得します。
参照:
https://developer.wordpress.org/reference/functions/post_custom/

1.のget_post_meta関数で同じことができます。
金額が項目名だった場合、金額の値を取得する簡単な例です。

<dl>
  <dt>金額</dt>
  <dd><?php echo esc_html(post_custom("金額")); ?></dd>
</dl>

3.the_meta関数

投稿カスタムフィールドをリスト形式で表示します。
参照:
https://developer.wordpress.org/reference/functions/the_meta/

使い方は簡単です。
表示させたい箇所に、the_meta関数を記述するだけです。
そうすると、以下のような形式で出力されます。

<ul class="post-meta">
  <li><span class="post-meta-key">金額:</span> 100円</li>
  <li><span class="post-meta-key">商品名:</span> サンプル商品</li>
</ul>

繰り返しになりますが、the_meta関数は非推奨関数となっています。
できるだけ使用しないようにしましょう。

プラグインでの使い方(Advanced Custom Fields)

続いて、プラグインを使用してカスタムフィールドを表示する方法について説明します。
プラグインには、いくつか種類があります。
ここでは、「Advanced Custom Fields」というプラグインを使用します。

Advanced Custom Fieldsをインストール

  1. プラグインをクリックして、新規追加をクリックします。
  2. プラグインの検索に、「Advanced Custom Fields」を入力します。
  3. 「Advanced Custom Fields」という名前のプラグインをインストールして有効にします。

Advanced Custom Fieldsを使用したカスタムフィールドの設定方法

カスタムフィールドをクリックして、新規追加をクリックします。
それぞれの項目を入力します。

Generalタブ

フィールドタイプは、フィールドの種類を変更できます。
テキストやチェックボックス、画像など必要な項目に変更します。

フィールドラベルは、入力項目名です。管理画面に表示されます。

フィールド名は、フィールドのkeyとなる名前です。
日本語でもいいですが、わかりやすい名前にしてください。

初期値は、デフォルト値です。
最初から決まった値を入力したい場合は、ここに値を入力します。

Validationタブ

Validationタブは、入力された値の検証をすることができます。
例えば、必ず値を設定したい場合は、Requiredを有効にします。
そうすることで、対象の入力項目が未入力だった場合、エラーを表示してくれるようになります。
いろいろ設定できるので、必要に応じて調整してください。

Presentationタブや、条件判定タブもありますが、投稿するだけであれば上記の設定だけで特に問題ありません。
より細かくて複雑な設定をしたい場合は、必要に応じて設定するようにしてください。

最後に、このフィールドグループ全体のルールを設定します。
どこの画面で表示するかを設定することができます。

全ての設定が完了したら、Save Changesボタンをクリックします。
クリックしないと保存されないので、必ずクリックするようにしてください。

なお、フィールドを追加する場合は、Add Fieldボタンをクリックするだけです。
あとは、上記で行った設定をします。

Advanced Custom Fieldsを使用したカスタムフィールドの入力方法

上記で指定したルールによって変わってきます。
ここでは、投稿ページの場合を例にします。

投稿をクリックして新規追加をクリックします。
すると、画面の下側に、設定したカスタムフィールドが表示されています。
あとは、値を入力して保存します。

Advanced Custom Fieldsを使用したカスタムフィールドの表示方法

詳細な方法については公式サイトをご確認ください。
https://www.advancedcustomfields.com/resources/how-to-get-values-from-a-user/

ここでは、基本的な取得の方法について説明します。
以下は、the_field関数を使用して金額を表示します。

   <dl>
     <dt>金額</dt>
     <dd><?php the_field('price'); ?></dd>
   </dl>

priceの部分は、Generalタブで設定したフィールド名を指定します。

続いて、画像を表示させる例です。

   <?php $image = get_field('sample_image'); ?>
   <img src="<?php echo $image['url']; ?>" alt="">

sample_imageの部分は、Generalタブで設定したフィールド名を指定します。

注意点としては、the_field関数は、エスケープ処理がされていません
表示する際には、以下の「商品メニューをカスタムフィールドで管理する例を作成」を参考にしてください。

商品メニューをカスタムフィールドで管理する例を作成

最後に、カスタムフィールドで飲食店の商品メニューを管理する例を作成してみます。
出来上がりの画面はこちらです。

管理する項目は、以下の3つです。

  • 画像
  • 商品名
  • 金額

カスタムフィールドの設定は以下のように設定しました。
商品名は、タイトルを使用するので、画像と金額だけ設定しています。

内容を入力した後は、表示したい箇所に以下のコードを書きます。

 <!-- 画像を出力する -->
 <?php $image = get_field('item_image'); ?>
 <img src="<?php echo esc_url($image['url']); ?>" alt="商品画像">


 <!-- タイトル(商品名)を出力する -->
 <h2><?php echo esc_html(get_the_title()); ?></h2>
 <!-- 金額を出力する -->
 <p><?php echo esc_html(get_field('item_price')); ?>円</p>

繰り返しになりますが、the_field関数は、エスケープ処理がされていません
ですので、get_field関数を使用してエスケープ処理を行っています。
画面に出力する際は、適宜エスケープ処理をするようにしましょう。

まとめ

WordPressのカスタムフィールドについての記事でした。
カスタムフィールドとは、入力項目を追加できる機能です。
カスタムフィールドを使用するメリットは、以下の3つです。

  1. 作業効率が向上すること
  2. 入力作業が標準化できること
  3. 入力情報の管理がしやすくなる

カスタムフィールドの使う場合は、基本的にはプラグインの「Advanced Custom Fields」を使用することをおすすめします。
カスタムフィールドを使用して、作業効率の向上を目指しましょう。

「カスタムフィールドが難しくて良くわからない」
「カスタムフィールドを使用して、カスタマイズしたいことがある」
お悩みの方は、一度、サイバースペースにご相談ください
相談無料ですので、お気軽にお問い合わせください。

よかったらシェアしてね!
  • URLをコピーしました!

ご相談・お問い合わせ

まずはお気軽にご相談ください。
Webやシステムに関することはもちろん、動画や写真、
補助金のお悩み相談も承ります。

ご相談・お問い合わせはこちら

TEL 089-968-2521受付時間:平日9:00〜18:00

目次