【徹底解説】Advanced Custom Fieldsによるカスタムフィールドの使い方

WordPressでサイトを作る際にカスタムフィールドを知っておくと、できることの幅が広がります。

この記事では、Advanced Custom Fieldsという便利なプラグインをもとに、カスタムフィールドの使い方を紹介します。

カスタムフィールドとは

カスタムフィールドとは、その名の通り、自由に設定できる入力項目のことです。

一般的なWordPressのテーマでは、タイトル、本文、カテゴリー、タグ、アイキャッチ画像くらいしか入力できる項目はありません。

そこに独自の入力欄を追加して、情報を登録できる機能がカスタムフィールドです。

例えば、上の図は記事の投稿画面に「記事の概要」を入力できる欄を新たに追加しています。ここに情報を入力して更新ボタンを押せば、それがデータベースに登録されます。

カスタムフィールドとして登録した情報は自由に使えます。例えば上の図では、記事の一覧を表示する際に、アイキャッチ画像、タイトルに加えて、先ほど登録した記事の概要を表示しています。

また、記事の一覧以外にも、検索結果のスニペット（メタディスクリプション）やOGPタグに記事の概要を使うこともできます。

カスタムフィールドについて、さらに具体例を紹介していきます。

上記のサイトでは、サイドバーにおすすめ記事のランキングを表示していますが、これにはカスタムフィールドを使っています。

記事の投稿画面にランキングの項目をカスタムフィールドで作り、ランキングが入力された記事を順番に並び替えています。

参考としてプログラムを掲載すると、以下のようになります。

<?php
    $args = array(
        'post_type' => 'post',
	'posts_per_page' => 5,
	'meta_key' => 'ranking',
	'orderby' => 'meta_value_num',
	'order' => 'ASC',
        'meta_query' => array(
			       array(
                                  'key' => 'ranking',
                                  'value'   => 1,
                                  'compare' => '>=',
                                  'type ' => 'NUMERIC'
			       ))
    );

    $the_query = new WP_Query($args);
    if($the_query->have_posts()) :
?>
    <ul class="rank-widget">
<?php
    while($the_query->have_posts()) :
        $the_query->the_post();
?>
        <li>
            <a href="<?php the_permalink(); ?>">
                <figure>
                    <?php the_post_thumbnail('full'); ?>
	        </figure>
	        <div class="text"><?php the_title(); ?></div>
	    </a>
        </li>
<?php   endwhile; wp_reset_postdata(); ?>
    </ul>
<?php  endif; ?>

「ranking」というカスタムフィールドを作り、meta_keyに設定しています。

orderbyに「meta_value_num」、orderに「ASC」を指定することで、ランキングの数字が小さい順番に並び替えています。

meta_queryでは、「ランキングの数字が1以上」という抽出条件を設定しています。これによって、ランキングの項目がゼロだったり、入力されていない記事を除外しています。

カスタムフィールドを使うために必要な作業

カスタムフィールドを使うためには、主に3つの作業が必要です。

1. カスタムフィールドの作成
   Advanced Custom Fieldsを使ってカスタムフィールドを作成します。
2. カスタムフィールドに情報を登録
   カスタムフィールドを作成すると、記事の投稿画面に項目が追加されます。そこに情報を入力して更新します。
3. カスタムフィールドの表示
   情報を登録するだけでは意味がありません。それを画面に表示するプログラムを書きます。

二つ目の手順に関しては、単純に入力や選択をするだけです。そのため、ここからはカスタムフィールドの作成と表示について、やり方を説明していきます。

カスタムフィールドの作成方法

まずは、カスタムフィールドの作成方法を説明します。

カスタムフィールドはWordPressの標準機能として使えますが、非常に便利なプラグインがあるのでそちらを紹介します。

私が使っているのは「Advanced Custom Fields」というプラグインです。

プラグインをインストールして有効化すると、WordPressの管理画面のメニューに「カスタムフィールド」が追加されます。

ここで「フィールドグループ」をクリックすれば作成済みのカスタムフィールドを編集できて、「新規追加」をクリックすればカスタムフィールドを新たに作成できます。

新規追加をクリックするとカスタムフィールドの作成画面が表示されます。項目が多くて難しそうに感じるかもしれませんが、画面を5つに分割して考えると分かりやすいです。

• フィールドグループのタイトル
  複数のカスタムフィールドをまとめるタイトルです。
• フィールド
  カスタムフィールドを一つまたは複数設定します。
• 位置
  カスタムフィールドの入力欄を表示する場所を設定します。基本的には「投稿」だと思いますが、「固定ページ」や「カスタム投稿タイプ」も設定できます。
• Settings
  カスタムフィールドの入力欄の見た目など細かい内容を設定します。
• 公開
  全て設定が終わったら、公開ボタンを押すとカスタムフィールドが作成されます。

1. フィールドグループのタイトルを入力

カスタムフィールドのグループには、一つまたは複数のカスタムフィールドを登録できます。それらをまとめる分かりやすいタイトルを入力します。上の例では「投稿のフィールドグループ」としています。

2. フィールドを設定

「フィールドを追加」ボタンをクリックして、カスタムフィールドを設定します。「記事の概要」の例では、以下の設定をして、それ以外は初期値のままにしています。

• フィールドラベル：記事の概要
• フィールド名：post_summary
• フィールドタイプ：テキストエリア
• 説明：記事の概要を80文字以内で入力してください。
• 必須か？：はい
• 行数：4

ここで設定した内容は、記事の投稿画面で以下のように反映されます。

なお、上の図に表示されていない「フィールド名」はシステムの内部で使う変数名のことで、カスタムフィールドを表示するプログラムを書くときに使用します。

最初に説明したように、カスタムフィールドはテキスト以外にも様々な内容を作成できます。それを設定する項目が上の図にある「フィールドタイプ」です。

テキストエリアを選んだ場合には「行数」の設定が必要になるように、フィールドタイプによって設定すべき項目が変わるため、ここをまずは選択した方が良いです。

3. 位置を設定

カスタムフィールドの入力欄をどこに表示させるか設定します。

WordPressは標準で「投稿」と「固定ページ」の2種類があります。「投稿」だけで使うなら、上の図のように初期値のままで良いです。

「投稿」と「固定ページ」の両方でカスタムフィールドを使うなら、上の図のように「ルールを追加」ボタンをクリックして「または」の条件を加えます。

4. Settingsを設定

カスタムフィールドの細かい内容を設定しますが、基本的には初期値のままで良いと思います。何か不都合があるなら後から調整してください。今回の例では「スタイル」を「シームレス」にしていますが、見た目が変わるだけなので好みです。

5. 公開

全て設定が終わったら、「公開」ボタンをクリックすればカスタムフィールドの作成は完了です。

カスタムフィールドの表示方法

カスタムフィールドを新たに作成したら、それを表示させるプログラムを書きましょう。Advanced Custom Fieldsでは、とても簡単にカスタムフィールドの値を表示できます。

<?php the_field('フィールド名'); ?>
<?php the_field('フィールド名', 投稿ID); ?>
<?php $field = get_field('フィールド名'); ?>

上のように、表示させたい場所で「the_field」関数を使うだけです。また、表示ではなく、一度変数に格納する場合など取得するときは「get_field」関数を使います。

どこに処理を書くかはテーマによって異なるので一概には言えませんが、例えば投稿の個別ページに表示させるときは「single.php」になります。

1行目のように引数を何も指定しないと現在の投稿に紐づくカスタムフィールドが表示されます。2行目のように投稿IDを指定すると、指定した投稿に紐づくカスタムフィールドが表示されます。

投稿IDを指定するケースは、以下のようにループの中で使用する場合です。

<?php
$args = array('post_type' => 'post');
$the_query = new WP_Query($args); 
if ( $the_query -> have_posts() ) :
while ( $the_query -> have_posts() ): $the_query -> the_post();
?>

<p><?php the_field('フィールド名', get_the_ID()); ?></p>

<?php 
endwhile; wp_reset_postdata();
endif;
?>

サンプルなので処理を簡略化していますが、簡単に言うと全ての投稿を取得して、カスタムフィールドの値を順番に出力しています。get_the_IDという関数は現在の投稿IDを取得します。

<?php echo get_post_meta(get_the_ID(), 'フィールド名', true); ?>

the_fieldはAdvanced Custom Fieldsの専用の関数です。Advanced Custom Fieldsを使わない場合には、上のようにWordPressの標準の関数であるget_post_metaでも表示できます。

Advanced Custom Fields PRO

Advanced Custom Fieldsは無料版の他に有料版（PRO）があります。

無料版だけでも様々な機能を使えるのですが、有料版を購入すると以下の機能が追加で使えます。

• 繰り返しフィールド
• ACFブロック
• 柔軟コンテンツ
• オプションページ
• ギャラリーフィールド
• クローンフィールド

それぞれの機能の詳しい使い方や有料版の購入などは、プラグインの公式サイトをご確認ください。

有料版の記載時点の料金は、個人向けが25ドル、開発者向けが100ドルです。違いは個人向けは一つのサイトのみに使えて、開発者向けは好きな数のサイトに使えます。

私は繰り返しフィールドとオプションページを複数のサイトで使いたかったので、開発者向けを購入しました。なお、ブラックフライデーのときに25%OFFのクーポンを配布していたように、時々安くなるみたいです。

繰り返しフィールドとオプションページについては以下の記事で詳しく紹介しています。

（応用編）日付で判定する

ここからは、今までの応用として、カスタムフィールドを使った具体例を紹介します。

まず最初は、カスタムフィールドを使って日付を登録して判定します。ここでは、イベントの投稿に対してイベントの開始年月日と終了年月日を登録して、現在の日付がイベントの開催期間内であれば「現在開催中です！」という文字を表示させます。

カスタムフィールドの作成

• フィールドラベル：イベントの開始年月日
• フィールド名：event_start_date
• フィールドタイプ：デイトピッカー
• 説明：イベントの開始年月日を入力してください。
• 必須か？：はい
• 表示フォーマット：Custom（Y/m/d）
• 返り値のフォーマット：d/m/Y
• 週の始まり：月曜日

※イベントの終了年月日（event_end_date）も同様

カスタムフィールドの表示

function now_event() {
    $now_date = date_i18n('Ymd');
    $start_date = get_post_meta(get_the_ID(), 'event_start_date', true);
    $end_date = get_post_meta(get_the_ID(), 'event_end_date', true);

    if($start_date <= $now_date && $now_date <= $end_date) {
        return true;
    }

    return false;
}
※簡略化しています。

上記のように、functions.phpに日付を判定するプログラムを書きます。カスタムフィールドからイベントの開始年月日と終了年月日を取得して、現在日付と比較しています。現在日付が開始年月日と終了年月日の間にあれば「true」を返しています。

<?php if( now_event() ) { ?>
<span style="color: red;">現在開催中です！</span>
<?php } ?>
※簡略化しています。

archive.phpなどイベントの一覧を表示するテンプレートファイルの中で、先ほど作成した日付判定のプログラムを呼び出します。if文を使ってnow_event関数でtrueが返ってきたときのみ「現在開催中です！」の文字を表示します。

（応用編）記事を表示する順番を変える

通常、一覧ページの記事は投稿日付の順番で表示されますが、それを好きな順番に並び替えるやり方です。例えば、収益が多く発生している記事を一覧の先頭にもってくることで、さらに収益を伸ばすといった効果を期待できます。記事ごとにカスタムフィールドで数値を登録して、数値が大きい記事から順番に表示させます。

カスタムフィールドの作成

• フィールドラベル：表示優先度
• フィールド名：display_priority
• フィールドタイプ：数値
• 説明：一覧ページにおいて数字が大きいほど優先的に表示されます。
• 必須か？：はい
• デフォルト値：0
• 最大値：99999

カスタムフィールドの利用

function customize_main_query ($query) {
    if (is_archive()) {
        $query->set('meta_key', 'display_priority');
        $query->set('orderby', 'meta_value_num date');
        $query->set('order', 'DESC');
        return;
    }
}
add_action( 'pre_get_posts', 'customize_main_query' );

「orderby」が並び替えの処理です。orderbyに「meta_value_num」を指定すると、「meta_key」に指定したカスタムフィールドの値（ここでは「display_priority」）で並び替えをしてくれます。orderbyは複数の条件を付けられるので、今回の例ではdisplay_priorityが同じ場合は「date（投稿日付）」で並び替えています。

（応用編）カテゴリーによって背景色を変える

カテゴリーに対してカスタムフィールドを使って背景色を登録します。例えば、上の図では「SEO」のカテゴリーは赤色、「WordPress」のカテゴリーは黄色の背景色を設定しています。目立たせたいカテゴリーは強めの背景色を設定するといった使い方ができます。

カスタムフィールドの作成

• フィールドラベル：カテゴリーの背景色
• フィールド名：category_color
• フィールドタイプ：カラーピッカー
• 説明：カテゴリーを表す背景色を設定してください。
• 必須か？：はい

注意点としては、これまでは位置のルールで「投稿タイプ」を選択していましたが、今回はカテゴリーの登録画面に背景色の項目を追加するので、ここには「タクソノミー」を選択します。

カスタムフィールドを作成すると、カテゴリーの登録画面には上のような背景色の項目が追加されます。

カスタムフィールドの利用

function display_category_with_color() {
    $terms = get_the_terms(get_the_ID(), 'category');
    if(!empty($terms)) {
	foreach($terms as $term) {
	    $category_color = get_field('category_color', 'cateory_' . $term->term_id);
	    if(!$category_color) $category_color = '#6699FF';
	    $color_style = 'background-color:' . $category_color;
	    echo '<span style="' . $color_style . '">'.$term->name.'</span> ';
	}
    }
}

get_fieldでカテゴリーの背景色を取得して、それをstyle属性のbackground-colorに設定しています。「#6699FF」は初期値なので好きな色を設定してください。

<p><?php display_category_with_color(); ?></p>
※簡略化しています。

背景色付きのカテゴリーを表示させたい場所で、上のように関数を呼び出します。

（応用編）カテゴリーに画像を登録する

カスタムフィールドを使ってカテゴリーに画像を登録して表示させます。

カスタムフィールドの作成

• フィールドラベル：カテゴリーの画像
• フィールド名：category_image
• フィールドタイプ：画像
• 説明：カテゴリーを表す画像を設定してください。
• 必須か？：はい
• 返り値：画像URL
• プレビューサイズ：中

カテゴリーに背景色を設定したときと同様に、位置のルールで「タクソノミー」を選択します。

カスタムフィールドの表示

<?php
    $category_list = get_terms( array( 'taxonomy'=>'category', 'get'=>'all' ) );
    foreach($category_list as $category):
        $category_image = get_field('category_image', 'category_'.$category->term_id);
?>

    <img src="<?php echo $category_image; ?>" alt="<?php echo $category->name; ?>"/>
    <a href="<?php echo get_term_link($category->term_id) ?>">
        <div><?php echo $category->name; ?></div>
    </a>
	
<?php
    endforeach;
?>
※簡略化しています。

（応用編）関連するページを設定する

プラグインなしで、カスタムフィールドで関連記事を設定できるようにします。

カスタムフィールドの作成

• フィールドラベル：関連記事
• フィールド名：related_post
• フィールドタイプ：関連
• 説明：関連する記事があれば選択してください。
• 必須か？：いいえ
• 投稿タイプで絞り込み：投稿
• フィルター：検索、タクソノミー
• 最大投稿数：6
• 返り値のフォーマット：投稿オブジェクト

カスタムフィールドを作成すると、記事の投稿画面に上の図のような関連記事を選択する項目が追加されます。記事の数が多くて関連記事を探すのが大変なときは、上部の検索機能を使うか、「タクソノミーを選択」からカテゴリーで絞り込みをしてください。

カスタムフィールドの表示

<?php 
$related_posts = get_post_meta($post->ID, 'related_post', true);
if ( $related_posts ) :
    $args = array(
               'post_type' => 'post',
               'posts_per_page' => 6,
               'post__in'  => $related_posts
            );
    $the_query = new WP_Query($args); 
    if ( $the_query -> have_posts() ) :
?>

<h2>関連記事</h2>

<?php 
    while ( $the_query -> have_posts() ): $the_query -> the_post();
?>

    <div>～関連記事を表示するHTML～</div>

<?php
    endwhile;
    wp_reset_postdata();
    endif;
endif;
?>
※簡略化しています。

single.phpなど関連記事を表示させたいテンプレートファイルで、上のようなプログラムを書きます。get_post_metaで関連記事を取得して、それを「post__in」に指定することで、関連記事の投稿を取得します。表示する部分のHTMLやCSSは省略しています。

まとめ

Advanced Custom Fieldsというプラグインを使ってカスタムフィールドを作成して表示させる方法を紹介しました。

最初は難しいと感じるかもしれませんが、慣れてくればこんなに便利なプラグインはありません。ぜひ、色々と試して勉強してみてください。

なお、掲載しているプログラムなどの情報は自己責任で参考にしてください。