カスタムフィールド

カスタムフィールドとは

WordPressの投稿には、デフォルトで「タイトル」「本文」「アイキャッチ画像」などの項目がありますが、これだけでは不足する場合があります。カスタムフィールドを使うと、任意の項目を追加し、独自のデータを管理できます。

カスタムフィールドの構造

カスタムフィールドは、「キー（名前）」と「値（データ）」のペアで構成されます。

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

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

• 構造化されたデータ管理 - 情報を整理して保存できる
• 柔軟なデザイン - データを好きな場所に好きな形式で表示できる
• 検索・絞り込み機能 - カスタムフィールドで検索や並び替えができる
• 再利用性 - 同じフォーマットを複数の投稿で使える
• API連携 - 外部システムとデータを連携しやすい

標準機能でのカスタムフィールドの使い方

WordPressには、標準でカスタムフィールド機能が備わっていますが、デフォルトでは非表示になっています。

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

1. 投稿編集画面を開く
   新規投稿または既存の投稿を開きます。
2. オプション表示設定を開く
   画面右上の「⋮」（縦3点リーダー）→「オプション」をクリックします。
3. カスタムフィールドにチェック
   「カスタムフィールド」にチェックを入れて、パネルを有効化します。
4. カスタムフィールドパネルが表示される
   投稿画面の下部にカスタムフィールド入力エリアが表示されます。

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

1. 「新規追加」をクリック
   カスタムフィールドパネルの「新規追加」リンクをクリックします。
2. キー（名前）を入力
   例：「price」「event_date」など（英数字とアンダースコア推奨）
3. 値（データ）を入力
   例：「15,000円」「2024-12-25」など
4. 「カスタムフィールドを追加」をクリック
   カスタムフィールドが保存されます。

標準機能での表示方法

カスタムフィールドのデータを表示するには、テーマファイルにコードを追加します。

<?php
// 単一のカスタムフィールド値を取得
$price = get_post_meta(get_the_ID(), 'price', true);
if ($price) {
    echo '<p>価格: ' . esc_html($price) . '</p>';
}

// 複数の値がある場合
$tags = get_post_meta(get_the_ID(), 'tags', false);
if ($tags) {
    echo '<p>タグ: ' . implode(', ', $tags) . '</p>';
}
?>

Advanced Custom Fields (ACF) プラグイン

Advanced Custom Fields（ACF）は、カスタムフィールドを簡単かつ強力に管理できる最も人気のあるプラグインです。

ACFの主な機能

ACFのインストールと設定

1. プラグインをインストール
   「プラグイン」→「新規追加」で「Advanced Custom Fields」を検索してインストール・有効化します。
2. フィールドグループを作成
   「カスタムフィールド」→「新規追加」でフィールドグループを作成します。
3. フィールドを追加
   「+ フィールドを追加」ボタンで必要なフィールドを追加します。
4. 表示場所を設定
   「位置」セクションで、どの投稿タイプに表示するかを設定します。
5. 公開
   「公開」ボタンをクリックして保存します。

ACFフィールドの作成例：イベント情報

ACFフィールドの表示方法

方法1：テンプレートタグを使用

<?php
// テキストフィールド
$event_date = get_field('event_date');
if ($event_date) {
    echo '<p>開催日時: ' . $event_date . '</p>';
}

// 画像フィールド
$image = get_field('event_image');
if ($image) {
    echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '">';
}

// リピーターフィールド（Pro版）
if (have_rows('speakers')) {
    while (have_rows('speakers')) {
        the_row();
        $name = get_sub_field('speaker_name');
        $title = get_sub_field('speaker_title');
        echo '<p>' . $name . ' - ' . $title . '</p>';
    }
}
?>

方法2：ショートコードブロック（Gutenberg）

ACF Blocks機能を使えば、Gutenbergエディターでカスタムフィールドを簡単に表示できます。

ACF Pro版の機能

カスタムフィールドの実用例

例1：商品レビューサイト

商品レビュー記事に構造化された情報を追加します。

<div class="product-review">
    <h3><?php the_field('product_name'); ?></h3>
    <div class="rating">
        評価: <?php the_field('rating'); ?> / 5
    </div>
    <div class="price">
        価格: <?php the_field('price'); ?>円
    </div>
    <a href="<?php the_field('purchase_link'); ?>">購入する</a>
</div>

例2：不動産物件サイト

物件情報を詳細に管理します。

例3：レシピサイト

料理レシピを構造化して管理します。

例4：イベント・セミナーサイト

イベント情報を一元管理します。

カスタムフィールドの検索と絞り込み

WP_Queryでカスタムフィールドを検索

カスタムフィールドの値で投稿を絞り込むことができます。

<?php
// 価格が10,000円以下の商品を表示
$args = array(
    'post_type' => 'product',
    'meta_query' => array(
        array(
            'key' => 'price',
            'value' => 10000,
            'compare' => '<=',
            'type' => 'NUMERIC'
        )
    )
);
$query = new WP_Query($args);

// 2024年12月以降のイベントを表示
$args = array(
    'post_type' => 'event',
    'meta_key' => 'event_date',
    'orderby' => 'meta_value',
    'order' => 'ASC',
    'meta_query' => array(
        array(
            'key' => 'event_date',
            'value' => '2024-12-01',
            'compare' => '>=',
            'type' => 'DATE'
        )
    )
);
$query = new WP_Query($args);
?>

複数条件での絞り込み

<?php
// 価格が5,000〜20,000円で、在庫ありの商品
$args = array(
    'post_type' => 'product',
    'meta_query' => array(
        'relation' => 'AND',
        array(
            'key' => 'price',
            'value' => array(5000, 20000),
            'compare' => 'BETWEEN',
            'type' => 'NUMERIC'
        ),
        array(
            'key' => 'in_stock',
            'value' => 'yes',
            'compare' => '='
        )
    )
);
$query = new WP_Query($args);
?>

カスタムフィールドでの並び替え

<?php
// 価格の安い順に表示
$args = array(
    'post_type' => 'product',
    'meta_key' => 'price',
    'orderby' => 'meta_value_num',
    'order' => 'ASC'
);

// 開催日が近い順に表示
$args = array(
    'post_type' => 'event',
    'meta_key' => 'event_date',
    'orderby' => 'meta_value',
    'order' => 'ASC'
);
?>

カスタムフィールドのベストプラクティス

1. 命名規則を統一する

カスタムフィールドのキー名は、わかりやすく一貫性のある命名規則を使いましょう。

2. データ型を適切に設定する

数値、日付、テキストなど、データの種類に応じて適切なフィールドタイプを選びましょう。

3. 必須フィールドと任意フィールドを明確にする

ACFでは、フィールドごとに「必須」設定ができます。重要な情報は必須にしましょう。

4. デフォルト値を設定する

よく使う値がある場合は、デフォルト値を設定すると入力の手間が省けます。

5. バリデーションを活用する

ACFのバリデーション機能で、不正なデータの入力を防ぎます。

• 数値フィールド：最小値・最大値を設定
• テキストフィールド：文字数制限を設定
• 日付フィールド：入力可能な範囲を設定
• URLフィールド：URL形式のチェック

6. パフォーマンスを考慮する

よくある質問（FAQ）

まとめ

カスタムフィールドは、WordPressで高機能なWebサイトを構築するための強力なツールです。標準機能でも使えますが、Advanced Custom Fields（ACF）プラグインを使うことで、より簡単で柔軟なカスタマイズが可能になります。

まずは無料版のACFで基本的なカスタムフィールドを試してみましょう。必要に応じてPro版にアップグレードすれば、さらに高度な機能が使えるようになります。

関連用語