WordPressのカスタムフィールドとは？Smart Custom Fieldsで実装する方法

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressのカスタムフィールドについて解説していきたいと思います。

カスタムフィールドはWordPressの仕組みを担っているなくてはならない非常に重要な機能といっても過言ではなく、WordPressのデータ構築を便利にしてくれる重要な機能です。

エンジニアであればこのカスタムフィールドは必ず扱えなければなりません。

当記事ではこのカスタムフィールドについて詳しく解説するとともに、実装方法についてもSmart Custom Fieldsプラグインを使って解説していきたいと思います。

よろしければお仕事でぜひ当記事をご活用いただけましたら幸いです。

カスタムフィールドとは

WordPressでコンテンツ（記事データや固定ページ等）に独自のデータを追加するための機能です。

通常、WordPressの投稿やページにはタイトルや本文などの基本情報しかありませんが、カスタムフィールドを使用すると、これに追加の情報を含めることができます。

これにより、特定のコンテンツに関連するさまざまな情報を管理したり、表示したりすることができます。

カスタムフィールドには「テキスト」「テキストエリア」「画像」「チェックボックス」「セレクトボックス」「色ボックス」などなど様々なデータ形式で設定することが可能です。

カスタムフィールドのメリット

カスタムフィールドには以下のメリットがあります。

• 追加のメタデータの保存
• 柔軟なデータ構造
• 表示のカスタマイ
• 検索とフィルタリング

それぞれ解説していきます。

追加のメタデータの保存

カスタムフィールドを使用して、投稿やページに関連付けられた追加の情報（メタデータ）を保存できます。

例えば、商品ページの価格や著者の誕生日などが挙げられます。

柔軟なデータ構造

カスタムフィールドを使用すると、WordPressの標準フィールド（タイトルや本文など）にはない、特定のデータ型や構造を持った情報を追加できます。

これにより、あらゆる種類の情報を柔軟に扱うことができます。

表示のカスタマイズ

カスタムフィールドに保存された情報を利用して、テーマやプラグインを使用してコンテンツをカスタマイズすることができます。

例えば、特定のカスタムフィールドに保存された情報を商品ページに表示することができます。

検索とフィルタリング

カスタムフィールドに保存された情報を使用して、コンテンツを検索したりフィルタリングしたりすることができます。

これにより、特定の条件を満たすコンテンツを見つけたり、表示したりすることができます。

このように、カスタムフィールドはWordPressの柔軟性と拡張性を向上させ、さまざまな用途に応用できる重要な機能です。

カスタムフィールドで実現できること

それではカスタムフィールドでどんなことが実現できるのでしょうか？

筆者のこれまでの実装の経験上例えば以下のことがあげられます。

• 記事データごとに付加情報を追加してそれを表示する
• カテゴリーごとに色の付加情報を追加してカテゴリー一覧で色の違いを出す
• チェックボックスのカスタムフィールドを設置してチェックのついた記事だけ一覧に出力する
• 管理画面にオプションページを作成してそのページに画像カスタムフィールドやテキストカスタムフィールドを入力できるようにしてslick.jsなどと組み合わせて画像スライド機能を実装する

カスタムフィールドのプラグイン

WordPressには「カスタムフィールドのプラグインがいくつかあります。

ここでは筆者的に非常に優秀で使いやすく高機能、そしておまけに有名なプラグインでは以下のものがあります。

• Smart Custom Fields
• Advanced Custom Fields
• Custom Field Suite

いずれも非常におすすめで外さないプラグインではありますが、筆者的には木基本的にSmart Custom Fieldsが一番おすすめで、WordPressの実装要件によってはAdvanced Custom Fieldsを使用することもあります。

これは開発者の好みもあるため実装のしやすさやスピードを重視した手慣れ度具合を鑑みて選定しても良いかもしれません。

次の実装方法の解説でSmart Custom Fieldsについて詳しくご説明いたします。

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

それでは早速カスタムフィールドの実装方法について解説していきます。

当記事ではSmart Custom Fieldsプラグインを使用します。

Smart Custom Fieldsでしばしば必要になる実装方法についてここで確認し、実務で問題なく使えるようになりましょう。

Smart Custom Fieldsとは

Smart Custom Fieldsは、WordPressのカスタムフィールドを管理するためのプラグインです。

このプラグインを使用すると、簡単にカスタムフィールドを作成し、WordPressの投稿やページに追加の情報を表示できます。

このプラグインは筆者的には決して開発者の方に媚を売っているわけではなく純粋に最高峰のプラグインと思っております。

理由は、とにかくシンプルで使いやすく、Advanced Custom Fieldsでは有料になってしまう「独自の設定ページ（オプションページ）」を作成や「繰り返しフィールド」を使用することができるので、非常に優秀なプラグインだと思います。

そのためサイト構築の要件にもよりますが、迷ったらまずSmart Custom Fieldsをインストールして使っていただくのが良いかと思っております。

Smart Custom Fieldsのメリット

すでに少し触れてしまったのですが、Smart Custom Fieldsのメリットをご説明しておきたいと思います。

メリットは以下になります。

• 機能やインターフェース全てにおいて良い意味でシンプル
• 無料でオプションページを作成可能
• 無料で繰り返しフィールド機能を使用可能

それぞれのメリットを活かして、様々な機能の実装方法を知り高度なWordPressサイトを作っていきましょう。

次からはSmart Custom Fieldsでのカスタムフィールドの実装方法について解説いたします。

プラグインをインストール

まずはSmart Custom Fieldsプラグインをインストールしましょう。

WordPress管理画面左メニューにある「プラグイン」→「新規プラグイン追加」でプラグイン新規インストール画面へ進みます。

画面右上にある検索ボックスに「Smart Custom Fields」と入力してください。

検索結果にSmart Custom Fieldsが表示されるので、「今すぐインストール」ボタンをクリックして「有効化」してください。

有効化が完了したら、Smart Custom Fieldsの設定ページが追加されて、Smart Custom Fieldsが使えるようになります。

これでプラグインのインストールは完了です。

記事データにカスタムフィールドを追加してデータを表示

それでは早速、カスタムフィールドのデータを出力してみましょう。

Smart Custom Fieldsを使用してカスタムフィールドを追加し、記事データを表示するための基本的なコード例を解説します。

まず、Smart Custom Fieldsでカスタムフィールドを作成します。次に、作成したカスタムフィールドの値を取得し、記事内で表示します。

例えば、Smart Custom Fieldsで “author_name” というキーで著者名のカスタムフィールドを作成したとします。

以下の内容で設定していただきましたら「公開」ボタンをクリックしてカスタムフィールドの設定を完了させてください。

• カスタムフィールド名：「投稿カスタムフィールド」
• タイプ：「テキスト」
• ラベル：「著者名」
• 名前：「author_name」
• 表示条件：「投稿」

以下のコードは、記事内にそのカスタムフィールドの値を表示するコードです。

記事詳細ページを表示するテンプレートファイルであるsingle.phpまたはsingle-[カスタム投稿タイプ名].phpに以下のコードをコピー＆ペーストしてください。

ここでは表示条件の設定を「投稿」にしたので、ご自身のWordPressテーマファイル内にあるsingle.phpもしくはsingle-post.phpにペーストしてください。

<?php
// 著者名のカスタムフィールドの値を取得します
$author_name = get_post_meta( get_the_ID(), 'author_name', true );

// 著者名が設定されている場合にのみ表示します
if ( $author_name ) {
    echo '<p>著者名: ' . esc_html( $author_name ) . '</p>';
}
?>

上記コードについて解説いたします。

1. get_post_meta() 関数を使用して、現在の記事の “author_name” カスタムフィールドの値を取得します。get_the_ID() は、現在の記事のIDを取得します。
2. 取得した著者名を <p> タグで囲み、記事内で表示します。esc_html() 関数を使用して、セキュリティ対策として著者名をエスケープしています。

これにより、Smart Custom Fieldsで設定した著者名が記事内に表示されます。同様の方法で、他のカスタムフィールドの値も表示できます。

画像カスタムフィールドを表示

画像カスタムフィールドのデータを表示するための実装方法を解説いたします。

実装イメージとしては、記事ページに画像カスタムフィールドを設定し、設定したらそれぞれの記事ページにその設定した画像が表示されることを想定しています。

以下のサンプルコードはsingle.phpやsingle-{カスタム投稿タイプ}.phpに記述するイメージです。

流れとしては、

1. 画像カスタムフィールドのデータを取得
2. データ取得後、画像出力コードで画像を表示

の流れで実装していきます。

簡単なお伝えで恐縮ですが、事前に画像カスタムフィールドを任意で作成していただき、投稿管理画面から画像を設定しておいていただけると実装しながら読み進められます。

先ほどテキストカスタムフィールドの設定と実装の手順とざっと流れは同じなので、それを元に以下の解説を読み進めて実装してみてください。

get_post_meta()関数でデータを取得する場合

まずは画像カスタムフィールドのデータを取得していきますが、取得方法には以下の3種類があります。

• get_post_meta()関数でデータを取得
• SCF::get()関数でデータを取得
• post_custom()関数でデータを取得

いずれの方法でも実装可能なので、ご自身の実装方針などに適したもので進めていただけますと幸いです。

get_post_meta()関数でデータを取得する場合は以下のコードになります。

<?php
$image = get_post_meta($post->ID, 'カスタムフィールド名', true);
?>

「カスタムフィールド名」の部分に「author_name」のような半角英数字に変更して実装してください。

SCF::get()関数でデータを取得する場合

SCF::get()関数でデータを取得する場合は以下のコードになります。

SCF::get()の書き方はSmart Custom Fields専用の関数です。

<?php
$image = SCF::get('カスタムフィールド名');
?>

「カスタムフィールド名」の部分に「author_name」のような半角英数字に変更して実装してください。

post_custom()関数でデータを取得する場合

post_custom()関数でデータを取得する場合は以下のコードになります。

<?php
$image = post_custom('カスタムフィールド名');
?>

「カスタムフィールド名」の部分に「author_name」のような半角英数字に変更して実装してください。

データ取得後、imgとして画像を出力

3種類のいずれかの実装コードでデータを取得できたら、次は画像を出力するコードを記述していきます。

画像出力にも2種類やり方がありまして、

• imgとして画像を出力
• 画像URLを出力

の2種類の方法がありますので、ご自身の実装に適した方で実装してください。

まずは以下imgとして画像を出力するコードになります。

<?php
echo wp_get_attachment_image($image, 'large');
?>

wp_get_attachment_image()関数で引数に先ほど取得したデータが格納された$image変数を設定してechoしてimgタグごと画像を出力させています。

データ取得後、画像URLを出力

次は画像URLを出力するコードになります。

<img src=”<?php echo wp_get_attachment_url($image); ?>”>

HTMLのimgタグのsrc属性にwp_get_attachment_url()関数に先ほど取得したデータが格納された$image変数を設定してechoして画像URLを出力させています。

画像カスタムフィールド出力のまとめ

最後に画像カスタムフィールドを出力するコードをまとめさせていただきます。

以下のコードの「カスタムフィールド名」の部分をカスタムフィールド名に修正した上でsingle.phpやsingle-{カスタム投稿タイプ}.phpにコピー＆ペーストしてください。

<?php
$image = get_post_meta($post->ID, 'カスタムフィールド名', true);
?>
<img src=”<?php echo wp_get_attachment_url($image); ?>”>

すると記事ページごとに設定した画像が表示されるかと思います。

繰り返しフィールドを表示

次にSmart Custom Fieldsの最大のメリットである繰り返しフィールドを設定し、データを表示させる実装方法について解説していきたいと思います。

簡単なお伝えで恐縮ですが、事前に繰り返しフィールドを任意で作成していただき、投稿管理画面からデータを設定しておいていただけると実装しながら読み進められます。

当記事では以下のグループ名、データ名で設定しておきます。

• カスタムフィールド名：「繰り返しフィールド」
• グループ名：「sample_text_loopgroup」
• タイプ：「テキスト」
• ラベル：「テキスト1」
• 名前：「sample_text_val1」
• タイプ：「テキスト」
• ラベル：「テキスト2」
• 名前：「sample_text_val2」

先ほどテキストカスタムフィールドの設定と実装の手順とざっと流れは同じなので、それを元に以下の解説を読み進めて実装してみてください。

上記のように設定していただくと下図のように投稿管理画面に繰り返しフィールドの入力ボックスが現れます。

データの入力が完了しましたら、以下のコードをsingle.phpやsingle-{カスタム投稿タイプ}.phpにコピー＆ペーストしてください。

<?php
$sample_text_loopgroup = SCF::get('sample_text_loopgroup');
foreach ($sample_text_loopgroup as $val):
?>
<div>
    <span>
        <?php echo $val['sample_text_val1']; ?>
    </span>
    <span>
        <?php echo $val['sample_text_val2']; ?>
    </span>
</div>
<?php
endforeach;
?>

すると記事ページごとに設定したテキストが表示されるかと思います。

画像を繰り返しフィールドで表示

次に画像を繰り返しフィールドを設定した場合の実装方法について解説していきたいと思います。

簡単なお伝えで恐縮ですが、事前に繰り返しフィールドを任意で作成していただき、投稿管理画面からデータを設定しておいていただけると実装しながら読み進められます。

当記事では以下のグループ名、データ名で設定しておきます。

• カスタムフィールド名：「画像繰り返しフィールド」
• グループ名：「sample_img_loopgroup」
• タイプ：「画像」
• ラベル：「画像1」

「繰り返し」には必ずチェックを入れてください。

設定が完了したら、以下のコードをsingle.phpやsingle-{カスタム投稿タイプ}.phpなどにコピー＆ペーストしてください。

<?php
// グループ名のカスタムフィールドの値を取得
$fields = SCF::get('sample_img_loopgroup');
// 取得した値を繰り返し処理
foreach($fields as $val):
  // 画像がアップロードされているかを確認
  if($val['sample_img_val1']):
    // 画像のURLを取得
    $image = wp_get_attachment_image_src($val['sample_img_val1'], 'thumbnail'); // 画像の大きさをthumbnailに指定
    // 画像が存在する場合は表示
    if ($image):
    ?>
      <img src="<?php echo $image[0]; ?>" alt="">
    <?php
    else:
    ?>
      <p>画像はございません。</p>
    <?php
    endif;
  else:
    ?>
      <p>画像はございません。</p>
<?php
  endif;
endforeach;
?>

すると記事ページごとに設定した画像が表示されるかと思います。

カスタムフィールドで設定したチェックボックスにチェックが入っている記事を表示

次にカスタムフィールドで設定したチェックボックスにチェックが入っている記事を表示する場合の実装方法について解説していきたいと思います。

簡単なお伝えで恐縮ですが、事前にチェックボックスを任意で作成していただき、投稿管理画面からデータを設定しておいていただけると実装しながら読み進められます。

当記事では以下のグループ名、データ名で設定しておきます。

• カスタムフィールド名：「チェックボックス」
• タイプ：「チェック」
• ラベル：「チェックボックス」
• 名前：「sample_check_key」
• 選択肢：「記事一覧に表示」

設定が完了したら、以下のコードをお好きなテンプレートファイルにコピー＆ペーストしてください。

<?php
// チェックボックスの値を持つ記事を取得するクエリ
$args = array(
    'post_type' => 'my_post_type', // 投稿タイプを指定
    'meta_key' => 'sample_check_key', // カスタムフィールドのキーを指定
    'meta_value' => '記事一覧に表示', // チェックされている場合の値を指定（例えば、1）
    'meta_compare' => '=', // チェックボックスの値が指定値と等しいかどうかを比較
    'posts_per_page' => -1 // 全ての投稿を表示する場合は-1を指定
);
// カスタムクエリを使用して記事を取得
$my_query = new WP_Query($args);
// 記事があるかどうかを確認
if ($my_query->have_posts()):
    // 記事がある場合はループして表示
    while ($my_query->have_posts()):$my_query->the_post();
        ?>
        <h2>
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
        </h2>
        <?php
    endwhile;
    // ループの後に元の投稿データに戻す
    wp_reset_postdata();
else:
    // 記事が見つからない場合の処理
    ?>
    <p>チェックボックスが選択されている記事はありません。</p>
    <?php
endif;
?>

するとチェックを入れた記事のみが記事一覧に表示されるかと思います。

独自のオプションページを作成してデータを表示

次にSmart Custom Fieldsの最大の特徴かつメリットである独自のオプションページを作成し、データを表示させる実装方法について解説していきたいと思います。

まずはfunctions.phpに以下のコードをコピー＆ペーストしてください。

/**
 * カスタムフィールドのオプションページを追加する
 *
 * @param string $page_title ページのtitle属性値
 * @param string $menu_title 管理画面のメニューに表示するタイトル
 * @param string $capability メニューを操作できる権限（manage_options とか）
 * @param string $menu_slug オプションページのスラッグ。ユニークな値にすること。
 * @param string|null $icon_url メニューに表示するアイコンの URL
 * @param int $position メニューの位置
 */
SCF::add_options_page( 'ページタイトル', 'メニュータイトル', 'manage_options', 'theme-options' );

上記コードをご自身のテーマに適した形で修正して実装してください。

functions.phpにペースト後保存したら、管理画面を確認すると管理画面左メニューにオプションページのメニュー項目が追加され、オプションページが追加されていることが確認できます。

そして下図のようにカスタムフィールド設定画面からテキストカスタムフィールドを設定しましょう。

データ名は「sample_text」とします。

次に右サイドバーにある表示条件のチェックボックを先ほど作成したオプションページに設定してください。

設定を保存していただくと、下図のようにオプションページに設定したテキストカスタムフィールドの入力枠が追加されておりますので、適当に文字を入力して保存します。

保存したら、以下のコードをheader.phpなどお好きなテンプレートファイルにコピー＆ペーストしてください。

<?php
$custom_field_value = SCF::get_option_meta( 'theme-options', 'sample_text' );
if ( $custom_field_value ) {
    echo esc_html( $custom_field_value );
}
?>

ここまで完了したら、無事設定した文字がページ画面に表示されているかと思います。

オプションページの繰り返しフィールドを出力

次はオプションページに繰り返しフィールドを設定して出力する場合の実装について解説いたします。

先ほどのfunctions.phpに記述したオプションページ作成のコードは実装済みであることを前提とさせていただきます。

これまでと同様に下図のようにカスタムフィールド設定画面からテキストカスタムフィールドを設定しましょう。

グループ名は「sample_text_group」データ名は「sample_text」とします。

「繰り返し」には必ずチェックを入れてください。

次に右サイドバーにある表示条件のチェックボックを先ほど作成したオプションページに設定してください。

設定を保存していただくと、下図のようにオプションページに設定した繰り返しフィールドのテキストカスタムフィールドの入力枠が追加されておりますので、適当に文字を入力して保存します。

保存したら、以下のコードをheader.phpなどお好きなテンプレートファイルにコピー＆ペーストしてください。

<?php
// オプションページから設定値を取得
$fields = SCF::get_option_meta( 'theme-options', 'sample_text_group' );
// フィールドの数だけループ
foreach( $fields as $field_name => $field_value ):
?>
<!-- テキストボックスを表示 -->
<div class="text-box">
  <?php echo $field_value['sample_text']; ?>
</div>
<?php
endforeach;
?>

無事実装できましたでしょうか？

これが無料ですよ！？すごくないですか！！？？

まとめ

カスタムフィールドについての解説と、実装方法についての解説は以上になります。

カスタムフィールドはWordPressの中核を担う非常に重要な機能といっても過言ではありません。

また、エンジニアにとってカスタムフィールド機能の仕組みの理解は必須になりますし、ほぼほぼWordPress構築では必要になる機能になるかと思います。

そのため、よろしければぜひ当記事をお仕事でお役立ていただけましたら幸いです。