【自作テーマ開発】WordPressオリジナルテーマの作成方法⑦（カスタムフィールドの実装方法）

WordPress
2024.08.14

この記事の監修者

三谷 将大

フリーランスエンジニア/WEBデザイナー/WEBマーケター

1997年 愛知出身。
業界5年以上。実務経験後に独立し、30社以上のホームページ制作やマーケティング支援を行っている。

カスタムフィールドとは？

通常、WordPressの編集画面は、タイトルと本文（ブロックエリアを追加できるエリア）の2種類の入力欄が用意されています。カスタムフィールドはそこに独自に入力項目を追加できる機能です。

まずオリジナルテーマ制作ではテンプレートファイルであるphpファイルを編集していると思います。
こちらに本文やテキストを直接書くこともできるのですが、それだとクライアントではテキストの変更など軽微な変更でさえも難しくなってしまいます。Wordpressの編集画面から変更できるようにしたいですよね。
とはいえ、すべてを編集画面の本文で作成してしまうと入力欄がわかりずらくなったり、編集ミスでサイトが崩れかねません。
そこで役立つのがカスタムフィールドです。
カスタムフィールドを使用し、各所に対する入力項目を設けることで、クライアントでも簡単に入力可能で管理のしやすい編集画面にすることができます。

カスタムフィールドには他にも、繰り返し機能を使用することで、効率的かつ拡張性のある入力ができるというメリットもあります。

▼カスタムフィールドを使用した編集画面例

カスタムフィールドの実装方法

カスタムフィールドはプラグインを使用して実装します。カスタムフィールドのプラグインと言えば、以下の3つが有名です。

  • Advanced Custom Fields（ACF）
  • Smart Custom Fields（SCF）
  • Custom Field Suite（CFS）

このうち、今回使用するのは、「Custom Field Suite（CFS）」です。理由は「繰り返しフィールド」が無料で使えるというメリットがあるからです。繰り返しフィールドについては後ほど詳しく紹介いたします。

STEP1. プラグインをインストールして有効化

まずはプラグインをインストールしましょう。
管理画面の『プラグイン＞新規プラグインの追加』から「Custom Field Suite」を検索し、『今すぐインストール』をクリックし、そのまま『有効化』もクリックします。

STEP2. フィールドグループ追加方法

フィールドグループとは、その名の通り複数のフィールド（入力項目）をまとめたものです。
ページごとにまとめる。セクションごとにまとめる。など、管理しやすいようにまとめておきます。
カスタムフィールドを実装する際には、まずはこのフィールドグループから作成します。

フィールドグループ以下の手順で作成していきます。

①ダッシュボードの『設定→Custom Field Suite』をクリックします。

②フィールドグループの管理画面になるので、「新規投稿を追加」をクリックします。

③この画面からフィールドグループを作成していきます。保存する際は「公開」ボタンをクリックします。
以下の大きく4つの大項目を設定していきます。

簡単に4つの項目の役割を説明します。

タイトル…フィールドグループの名前です。画面上に出力される物ではないので、管理しやすいタイトルにしておけばOKです。
フィールド…入力項目の設定をします。テキスト、画像、リンクなどフィールドの種類（フィールドタイプ）などを選択します。
配置ルール…カスタムフィールドをどの管理画面上に表示するかを決めます。
エクストラ…カスタムフィールドの表示順や位置を設定します。

以下でフィールドと配置ルールの使い方ついて、もう少し詳しく説明します。

配置ルールの設定方法

フィールドの設定方法については長くなるため、先に配置ルールについて解説いたします。

まず『等しい or 等しくない』については以下となります。

等しい … 右の入力欄に一致する場合
等しくない … 右の入力欄に一致しない場合

では各項目について説明していきます。

投稿タイプ

投稿タイプを指定します。

  • post：投稿ページ（カスタム投稿を含む）
  • page：固定ページ

例えば、投稿ページのみに表示する場合は『等ししい・post』とします。

ユーザー権限グループ

ユーザー権限を指定します。

  • administrator：管理者
  • editor：編集者
投稿

投稿名で指定できます。
既に投稿されている記事のタイトルから検索できます。
2文字以上入れると候補がでてきてくれます。

分類

カテゴリーやカスタムタクソノミーなど指定します。

固定ページテンプレート

固定ページのテンプレートごとで指定できます。

フィールドの設定方法

ラベル

ラベルは編集画面で表示されるフィールド名です。ユーザーが見る画面には表示されません

名前

名前はカスタムフィールドを出力させる名前となり、テンプレートファイルに記述します。半角英数字・アンダースコアのみとなります。

デフォルト値

デフォルト値は、初期値を設定したい場合に入力します。

バリデーション

チェックをいれると必須項目にできます。

概要

項目に対して、説明書きやメモを追加することができます。

フィールドタイプ

テキスト、画像、リンクなどフィールドの種類を設定します。
次のセクションで1つずつ解説いたします。

各フィールドタイプの設定方法

単一行テキスト

これは一行で表示するテキストです。
全フィールドタイプ共通の項目以外に設定するものは特にありません。
▼実際の入力画面はこちら

テキストエリア

複数行のテキストを入力したいときに使います。
改行の有無を『改行変換なしor改行を<br/>に変換』で選択します。
▼実際の入力画面はこちら

リッチエディタ

入力欄をビジュアルエディタにします。
こちらではフォーマットを2つから選択する必要があります。

  • デフォルト：デフォルトフォーマットは、リッチエディタで利用可能なすべての機能とオプションを有効にします。デフォルトフォーマットは、高度な書式設定が必要な場合や、様々なコンテンツを挿入したい場合に適しています。
  • フィルターなし：フィルターなしフォーマットは、デフォルトフォーマットで利用可能な機能のうち、一部の機能を制限します。フィルターなしフォーマットは、シンプルな書式設定のみでテキストを入力したい場合や、HTMLタグを直接編集したい場合に適しています。

特に理由がなければ、デフォルトでいいでしょう。

▼実際の入力画面はこちら

ハイパーリンク

URL・リンクテキスト・リンク先の入力欄を表示します。
ここでは出力フォーマットを「HTML」と「PHPの配列」の2つから選びます。これは出力時にかかわる設定なので、詳しくは後ほど解説します。個人的にはPHP配列の方が使用頻度は多いです。

▼実際の入力画面はこちら

日付フォーマット

日付フォーマットは、カレンダーを表示して、日付を入力できるようにします。
全フィールドタイプ共通の項目以外に設定するものは特にありません。
▼実際の入力画面はこちら

カラーピッカー

カラーピッカーを表示して色を選択できるようにします。
全フィールドタイプ共通の項目以外に設定するものは特にありません。
▼実際の入力画面はこちら

真 / 偽（簡易チェックボックス）

チェックボックスを表示させます。チェックの有無を判別して、要素を表示・非表示するなどで使用します。
メッセージにはチェックを入れたらどうなるかを記載すると良いでしょう。

▼実際の入力画面はこちら（チェックしたら受付ボタンを非表示にするケースで使用したもの）

セレクト（ドロップダウンリスト）

ドロップダウンリストを表示します。
以下の3つを設定する必要があります。

  • 選択肢：一行に選択肢を1つ入力します
  • 複数選択：チェックを入れると複数選択が可能になります
  • Select2：チェックを入れると複数選択時のデザインが変わります

▼実際の入力画面はこちら

関連ポスト選択

関連記事の選択をできるようにします。

投稿タイプを3つの中から選択します。

  • post：投稿ページ（カスタム投稿を含む）
  • page：固定ページ
  • attachment：添付ファイル

▼実際の入力画面はこちら（選択したものが右に移ります。）

Term

タームを選択できるようにします。

Taxonomiesを3つの中から選択します。

  • category：カテゴリー
  • post_tag：タグ
  • post_format：投稿フォーマット

▼実際の入力画面はこちら（選択したものが右に移ります。）

ユーザー

ユーザーを選択できるようにします。

ファイルのアップロード

ファイルをアップロードボタンを表示します。

File Typeを以下から設定します。

  • Any：任意（WordPressにアップロード可能なファイル全て）
  • Image：画像
  • Audio：音声
  • Video：動画

返り値は出力方法に関わる設定で「ファイルURL」と「添付ファイルID」の2つがありますが、私は「ファイルURL」を利用することが多いです。

▼実際の入力画面はこちら

ループ（複製フィールド）

こちらが繰り返しフィールドになります。
このフィールドはこれだけでは意味がなく、この中に繰り返し表示させたいフィールドを設定することで、複数回同じフィールドを表示できるようにするものです。
ドラッグ&ドロップすることによって、フィールドを繰り返しフィールドに設定することができます。
ループを設定すると以下のようになります。

▼入力画面ではまず「追加」をクリック

フィールドが表示されて入力できるようになります。
さらに「追加」をクリックすることで同じフィールドを任意の数だけ表示することができます。

タブ

カスタムフィールドの入力画面にタブを作ることができます。
デフォルトではフィールドは縦に並んでいくので、複数あると縦にかなり長くなってしまいます。
これを、グループごとにまとめてタブ表示することで、短く収めることができます。
タブも1つでは意味がなく、2つ以上必要になります。

設定の仕方は、例えば以下のようになります。

▼入力画面はこちら

フィールドの出力方法

カスタムフィールドを出力するには、テンプレートファイルに関数を記述する必要があります。

フィールドを作成する際に設定した「名前」を使用します。

単一行テキスト

単一行テキストを出力するコードは以下です。

<?php echo CFS()->get('名前'); ?>

※「CFS()」は「$cfs」でもOKです。

例えば、名前が「text」の場合以下になります。

<?php echo CFS()->get('text'); ?>

そして実際は以下のようにタグと一緒に使うことがほとんどです。

<p class="contents">
  <?php echo CFS()->get('text'); ?>
</p>

テキストエリア

複雑な記述はなく、単一行テキストと同じです。

<?php echo CFS()->get('名前'); ?>

リッチエディタ

これも単一行テキストと同じです。

<?php echo CFS()->get('名前'); ?>

ハイパーリンク

出力フォーマットによって異なります。
出力フォーマットが「HTML」の場合は、単一行テキストと同じです。

<?php echo CFS()->get('名前'); ?>

出力フォーマットが「PHPの配列」の場合は、以下になります。

<?php $link = CFS()->get('名前'); ?>
<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>">
  <?php echo $link['text']; ?>
</a>

このように「PHPの配列」にすることで、各入力内容を別々で出力できます。
aタグにクラスを付けるときや、リンクテキストなどの入力内容を他にも利用したいときなどをに活用できます。

<?php $link = CFS()->get('名前'); ?>
<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>" class="itemlinks">
    <img src="upload/image.jpg" alt="<?php echo $link['text']; ?>のイメージ画像">
    <p><?php echo $link['text']; ?></p>  
<?php echo $link['text']; ?>
</a>

日付フォーマット

記述の仕方によって日付の表示形式を指定できます。
例えば「2024年01月01日」という「年月日」で表示したい場合は

<?php echo date( 'Y年m月d日', strtotime( CFS()->get('date') ) ); ?>

「2024.01.01」とピリオドで区切って表示したい場合は

<?php echo date( 'Y.m.d', strtotime( CFS()->get('date') ) ); ?>

となります。

ちなみに、月日が一桁の場合に頭の0を表示させない場合は、m→nに、d→j にすれば0を表示しません。

カラーピッカー

出力方法は単一行テキストと同じです。だだ、注意したいのが、出力されるのはカラーコードであるということです。
以下のように記述しておくと、背景色などをPHPファイルから編集できない方でも簡単に変更できるようにするのに役立ちます。

<div style="background-color: <?php echo CFS()->get('color'); ?>;">
   <!-- ここにコンテンツ -->
</div>

真 / 偽（簡易チェックボックス）

こちらも出力方法は単一行テキストと同じですが、あくまでもチェックの有無を出力するだけなので、「何を表示・非表示にするのか」などはテンプレートファイル側で設定します。
以下のようにチェックの有無を条件分岐を使って判別します。

<?php if( CFS()->get('名前') ): ?>
    <!-- チェックがある場合の内容 -->
<?php else: ?>
    <!-- チェックがない場合の内容 -->
<?php endif; ?>

例えばチェックの有無でボタンを変更する場合

<?php if( CFS()->get('名前') ): ?>
   <a href="/contact" class="receive-on">申し込みはこちら</a>
<?php else: ?>
   <p class="receive-off">受付終了いたしました</p>
<?php endif; ?>

セレクト（ドロップダウンリスト）

複数選択が不可能にしている場合は以下の記述でOKです。

<?php
$values = CFS()->get('名前');
if (!empty($values)) {
  foreach ($values as $key => $label) {
    echo $label;
  }
}
?>

複数選択を可能にしている場合、そのままではテキストが全部つながってしまいます。
<ul>と<li>を使ってリスト表示するのが一般的です。その出力方法が以下になります。

<?php
$values = CFS()->get('名前');
if (!empty($select)) {
?>
  <ul>
    <?php foreach ($values as $key => $label): ?>
    <li><?php echo $label; ?></li>
    <?php endforeach; ?>
  </ul>
<?php
}
?>

関連ポスト選択

出力方法は以下になります。

<?php
$values = CFS()->get('名前');
foreach ($values as $post_id): <!-- 以下で選択されている関連ポスト情報を変数に設定-->
  $post_link = get_permalink($post_id);   
  $post_title = get_the_title($post_id);   
  $post_img = get_the_post_thumbnail($post_id, 'large');
?>
  <!-- タグや構造はデザインによって変更する -->
  <a href="<?php echo esc_url($post_link); ?>">
    <div><?php echo $post_img ?></div>
    <p><?php echo esc_html($post_title); ?></p>
  </a>
<?php endforeach; ?>
<?php wp_reset_postdata();?> // 投稿データをリセット（これがないと以下の関数に影響してしまう）

Term

出力方法は以下になります。

<?php
$values = CFS()->get('名前'); 
foreach ($values as $term_id):   
  $the_term = get_term($term_id);  // タームの名前、説明を取得
  $term_link = get_term_link($the_term); // タームのリンクを取得
?>
  <!-- タグや構造はデザインによって変更する -->
  <a href="<?php echo esc_url($term_link); ?>">
    <p><?php echo $the_term->name; ?></p>
    <p><?php echo $the_term->description; ?></p>
  </a>
<?php endforeach; ?>

ユーザー

出力方法は以下になります。

<?php
$values = CFS()->get('user'); 
foreach ($values as $user_id):
  $user_info = get_userdata($user_id); // ユーザー情報を取得
  $user_name = $user_info->display_name; // ユーザー名を取得
  $user_email = $user_info->user_email; // ユーザーのメールアドレスを取得
?>
  <!-- ユーザー情報の表示 -->
  <div>
    <!-- ユーザーIDの表示 -->
    <span><?php echo $user_id; ?></span>
    <!-- ユーザー名の表示 -->
    <span><?php echo $user_name; ?></span>
    <!-- ユーザーのメールアドレスの表示 -->
    <span><?php echo $user_email; ?></span>
  </div>
<?php endforeach; ?>

ファイルのアップロード

出力方法は返り値が「ファイルURL」か「添付ファイルID」で変わります。

「ファイルURL」の場合は単一行テキストと同じで、以下のように使います。

<img src="<?php echo CFS()->get('名前'); ?>">

「添付ファイルID」の場合は、以下のようになります。

<?php
$file_id = CFS()->get('名前'); 
if (!empty($file_id)) { // ファイルIDが空でないことを確認
  echo wp_get_attachment_image($file_id, 'large'); // ファイルの添付画像を表示
}
?>

ループ（複製フィールド）

例えば、ループの中に「単一行テキスト」と「ファイルのアップロード」のフィールドを入れた場合は以下のように記述します。

<?php
$fields = CFS()->get('ループの名前'); // ループを指定
foreach ($fields as $field) : //ループの中の各フィールドを取得
?>
<!-- ここまでは共通 -->
<!-- ここからはフィールドやデザイン次第でカスタマイズ -->
<div class="field-wrapper">
  <!-- 単一行テキストを表示 -->
  <div class="text"><?php echo $field['ループの中の単一行テキストフィールドの名前']; ?></div>
  <!-- ファイルのアップロードを表示 -->
  <img src="<?php echo $field['ループの中のファイルのアップロードフィールドの名前']; ?>" />
</div>
<!-- ここまでがカスタマイズ -->
<?php endforeach; ?>

また、foreachで繰り返される範囲も理解して利用しましょう。
リスト表示で<li>を複製していく場合、

<ul>
    <?php
    $fields = CFS()->get('ループの名前'); // ループを指定
    foreach ($fields as $field) : //ループの中の各フィールドを取得
    ?>
    <!-- ここから -->
    <li class="item">
      <div class="text"><?php echo $field['フィールドの名前1']; ?></div>
      <img src="<?php echo $field['フィールドの名前2']; ?>" />
    </li>
    <!-- ここまでがループ -->
    <?php endforeach; ?>
</ul>

となります。

ループの中にループ

CFSではループの中にループを作ることができます。

その場合は以下のように出力します。

<?php
$fields = CFS()->get('親ループの名前');
foreach ($fields as $field) :
?>
<div class="field-wrapper">
    <div class="text"><?php echo $field['親ループの中のフィールドの名前1']; ?></div>
    <img src="<?php echo $field['親ループの中のフィールドの名前2']; ?>" />
  <?php
  $subfields = $field['子ループの名前']; // ループ内の子ループを指定。subfieldsとして取得
  if ($subfields) :
    foreach ($subfields as $subfield) ://子ループの中の各フィールドを取得
  ?>
  <div class="text-area"><?php echo $subfield['子ループの中のフィールドの名前']; ?></div>
  <?php endforeach; endif; ?>//子ループの終了
</div>
<?php endforeach; ?>//親ループの終了

まとめ

今回はWordpressのカスタムフィールドの実装方法についてご紹介しました。
初めは難しく感じますが、たまにしか使用しないものも多く、わからなくなったらその都度見直しながら使用しても問題ないと思います。
この他にも条件分岐などのカスタマイズ方法もありますので、別記事で紹介させていただきます。

WordPressオリジナルテーマ制作に関する記事一覧

  1. 環境構築とファイルの準備
  2. 固定ページの作り方
  3. 404ページの作り方
  4. 記事一覧ページの作り方
  5. カスタム投稿の作り方
  6. 検索フォーム・検索結果ページの作り方
  7. カスタムフィールドの実装方法

スポンサーリンク
タイトルとURLをコピーしました