WordPressカスタムフィールドを徹底解説！初心者でもわかる「もう一歩進んだ情報追加術」

もっと自由に情報を載せたい！そんな時に「カスタムフィールド」

WordPressで記事を書いていると、「タイトル」や「本文」だけじゃ伝えきれない情報って出てきませんか？

例えば、

• 映画のレビュー記事なら、「監督の名前」や「公開日」
• イベント情報なら、「開催日時」や「場所」
• お店の紹介なら、「営業時間」や「定休日」

こんな風に、決まった形式で情報を追加したい時、WordPressの「カスタムフィールド」という機能がとっても役立ちます。

この機能を使えば、あなたのWordPressサイトを、ただのブログではなく、もっと整理された、目的に合った情報サイトに変えられますよ！

1. WordPressにもともとある「隠れたカスタムフィールド」を見てみよう

WordPressには、実は最初から「カスタムフィールド」という機能が備わっています。普段は隠れているので、気づかない人も多いかもしれません。

どこにあるの？どう使うの？

1. 記事の編集画面を開きます。
2. 画面右上にある「表示オプション」をクリックします。
3. 表示されるメニューの中から「カスタムフィールド」にチェックを入れます。
4. すると、記事の編集画面の下の方に「カスタムフィールド」の入力欄が出てきます。

ここに、

• 名前（キー）：例えば「映画監督」や「公開日」のように、どんな情報かを示す名前
• 値：具体的な情報（例：「スピルバーグ」「2025/01/01」）

を入力して「カスタムフィールドを追加」ボタンを押せば、記事にその情報を紐づけられます。

実際に記事に表示してみよう！

追加したカスタムフィールドの情報を、サイトに表示するには、少しだけテーマのファイルを編集する必要があります。single.php や content.php といったファイル（記事を表示するテンプレートファイルです）の中に、以下のコードを追加します。

<?php
// 今見ている記事のID（番号）を取得します
$post_id = get_the_ID();

// 'my_custom_field' という名前のカスタムフィールドの値を取り出して、$my_field_value に入れます
// 'true' は、値が1つだけならそのまま取り出す、という意味です
$my_field_value = get_post_meta( $post_id, 'my_custom_field', true );

// もし、$my_field_value に何か値が入っていたら、画面に表示します
if ( ! empty( $my_field_value ) ) {
    // <p>タグの中に「カスタムフィールドの値: 」と、取り出した値を表示します
    // 表示する文字列は「esc_html()」でエスケープ処理し、安全に表示します
    echo '<p>カスタムフィールドの値: ' . esc_html( $my_field_value ) . '</p>';
}
?>

この方法のちょっと大変なところ

この方法でもカスタムフィールドは使えますが、

• 入力欄がただのテキストなので、日付などを間違えやすい
• もっとたくさんの種類の情報を追加したい時に不便
• テーマファイルを直接編集するので、慣れていないと難しい

といった課題があります。そこで登場するのが、次の「便利なプラグイン」です！

2. もっと簡単に！もっと便利に！「高機能カスタムフィールドプラグイン」を使おう

WordPressの「プラグイン」を使えば、先ほどの課題をすべて解決し、誰でも簡単に高機能なカスタムフィールドを扱えるようになります。

おすすめは「ACF (Advanced Custom Fields)」プラグイン！

数あるカスタムフィールドプラグインの中でも、特に有名で機能が豊富なのが「ACF（Advanced Custom Fields）」です。プロの現場でもよく使われています。

ACFのインストールと準備

1. WordPressの管理画面から「プラグイン」→「新規追加」を選びます。
2. 検索ボックスで「Advanced Custom Fields」と入力して検索します。
3. 表示されたプラグインを「今すぐインストール」し、「有効化」します。
4. 有効化すると、管理画面の左メニューに「ACF」という項目が追加されます。

ACFでカスタムフィールドを作ってみよう

ACFを使えば、マウス操作で簡単にカスタムフィールドの入力欄を作れます。

1. 「ACF」メニューから「フィールドグループ」→「新規追加」をクリックします。
2. 「フィールドグループ名」に「映画情報」や「イベント詳細」など、分かりやすい名前をつけます。
3. 「+ フィールドを追加」ボタンをクリックして、カスタムフィールドを作っていきます。

1. フィールドラベル: 管理画面に表示される入力欄のタイトル（例：監督名、公開日）
2. フィールド名: プログラムで使うための名前（例：director_name, release_date）
3. フィールドタイプ: テキスト、日付ピッカー、画像、URL、チェックボックスなど、入力したい情報の種類に合わせて選びます。これがACFの最大の魅力です！

1. その他、必須にするか、初期値は何か、などの設定もできます。
2. 最後に「場所」という設定で、「投稿」や「固定ページ」など、どの種類の記事にこのカスタムフィールドを表示させるかを決めます。
3. 設定が終わったら「公開」ボタンを押せば完了です！

これで、指定した記事の編集画面に、あなたが作ったカスタムフィールドの入力欄が表示されるようになります。

3. 作ったカスタムフィールドをサイトに表示しよう！実践コード例

ACFで作成したカスタムフィールドも、テーマファイルにコードを追加することでサイトに表示できます。ACFには、専用の便利な関数が用意されていますよ！

the_field() と get_field() の違い

• the_field('フィールド名');：カスタムフィールドの値を直接画面に出力します。
• $変数名 = get_field('フィールド名');：カスタムフィールドの値を取得して変数に入れることができます。取得した値を使って条件分岐したり、加工したりしたい時に便利です。

具体的なコード例を見てみよう！

テーマのファイル（single.phpやcontent.phpなど、記事を表示する部分）に以下のコードを追加してみてください。

例1：ブログ記事に「おすすめ度」を追加する

記事に星の数で「おすすめ度」を表示したい場合。

• ACFでの設定: フィールドタイプを「数値」（または「ラジオボタン」で1～5の選択肢）に設定。
• PHPコード例:

<?php
// 「recommendation_level」という名前のカスタムフィールドの値を取得します
$recommendation = get_field('recommendation_level');

// もし「おすすめ度」が入力されていれば、表示します
if ( $recommendation ) {
    echo '<p>おすすめ度: ';
    // おすすめ度の数だけ「★」を表示します
    // 表示する数値は「esc_html()」でエスケープ処理します
    for ( $i = 0; $i < esc_html( $recommendation ); $i++ ) {
        echo '★';
    }
    echo '</p>';
}
?>

例2：イベント情報に「開催日時」と「場所」を追加する

イベントの詳細情報を綺麗に表示したい場合。

• ACFでの設定:
  • 「開催日時」フィールド名:event_date (フィールドタイプ: 日付ピッカーが便利！)
  • 「場所」フィールド名:event_location (フィールドタイプ: テキスト)
• PHPコード例:

<?php
// イベントの日付と場所のカスタムフィールドの値を取得します
$event_date = get_field('event_date');
$event_location = get_field('event_location');

// 両方の情報が入力されていれば、表示します
if ( $event_date && $event_location ) {
    echo '<div class="event-info">';

    // 日付をタイムスタンプに変換し、変換に成功した場合のみ表示
    $timestamp = strtotime($event_date);
    if ( $timestamp ) {
        // 日付は「esc_html()」でエスケープし、「YYYY年MM月DD日」の形式に変換して表示
        echo '<p>開催日時: ' . esc_html( date('Y年m月d日', $timestamp) ) . '</p>';
    } else {
        // もし変換に失敗したら、生のデータやエラーメッセージなどを表示することも検討できます
        // 例: echo '<p>開催日時: 無効な日付形式です。</p>';
    }

    // 場所は「esc_html()」でエスケープして表示
    echo '<p>場所: ' . esc_html($event_location) . '</p>';
    echo '</div>';
}
?>

例3：プロフィールページに「SNSリンク」を追加する

SNSのアイコンとリンクを並べて表示したい場合。

• ACFでの設定:
  • 「Twitter URL」フィールド名:twitter_url (フィールドタイプ: URL)
  • 「Facebook URL」フィールド名:facebook_url (フィールドタイプ: URL)
• PHPコード例:

<?php
// TwitterとFacebookのURLカスタムフィールドの値を取得します
$twitter_url = get_field('twitter_url');
$facebook_url = get_field('facebook_url');
?>

<ul class="sns-links">
    <?php if ( $twitter_url ) : // TwitterのURLが入力されていれば表示 ?>
        <li>
            <a href="<?php echo esc_url($twitter_url); ?>" target="_blank">Twitter</a>
        </li>
    <?php endif; ?>
    <?php if ( $facebook_url ) : // FacebookのURLが入力されていれば表示 ?>
        <li>
            <a href="<?php echo esc_url($facebook_url); ?>" target="_blank">Facebook</a>
        </li>
    <?php endif; ?>
</ul>

4. カスタムフィールドでもっと便利に！応用テクニック

カスタムフィールドは、上記のような簡単な使い方以外にも、もっと便利な応用方法があります。

写真ギャラリーも簡単に！「繰り返しフィールド（リピーターフィールド）」

同じ種類の情報を複数セットで登録したい場合（例えば、1つの記事に複数の写真を載せるギャラリーなど）に便利なのが「繰り返しフィールド」（ACFではリピーターフィールドと呼ばれます）。

• ACFでの設定: フィールドタイプで「リピーター」を選び、その中に「画像」や「キャプション」などのサブフィールドを追加します。
• PHPコード例 (ギャラリー写真):

<?php
// 'image_gallery'というリピーターフィールドに何か行があれば、ループを開始
if ( have_rows('image_gallery') ):
?>
    <div class="gallery">
        <?php
        // リピーター内の各行をループ処理
        while ( have_rows('image_gallery') ) : the_row();
            // 各行の中から「gallery_image」（画像フィールド）と「image_caption」（キャプションフィールド）の値を取得
            $image = get_sub_field('gallery_image');
            $caption = get_sub_field('image_caption');
            ?>
            <figure>
                <?php if ( $image ) : // 画像があれば表示 ?>
                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                <?php endif; ?>
                <?php if ( $caption ) : // キャプションがあれば表示 ?>
                    <figcaption><?php echo esc_html($caption); ?></figcaption>
                <?php endif; ?>
            </figure>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

記事の種類を自分で増やす「カスタム投稿タイプ」との組み合わせ

WordPressでは「投稿」や「固定ページ」以外にも、例えば「映画」「商品」「求人情報」など、あなた独自の「記事の種類」（カスタム投稿タイプと呼びます）を増やすことができます。

このカスタム投稿タイプとカスタムフィールドを組み合わせることで、それぞれの情報にぴったりの入力欄を用意し、管理も表示もとっても楽になります。カスタムフィールドは、このカスタム投稿タイプと組み合わせると真価を発揮すると言えるでしょう。

5. こんな時はどうする？よくある疑問と解決策

• カスタムフィールドが管理画面に表示されない！: 「フィールドグループ」の設定で、表示条件（投稿タイプなど）が合っているか確認しましょう。

• 作ったはずのカスタムフィールドがサイトに表示されない！:
  • テーマファイルに正しくコードが書かれていますか？
  • 記事にカスタムフィールドの値は入力されていますか？
  • フィールド名が間違っていませんか？（スペルミスなどに注意！）

まとめ：カスタムフィールドでWordPressサイトをパワーアップ！

WordPressのカスタムフィールドを使えば、あなたのサイトはただ情報を並べるだけでなく、もっと整理され、読者にとっても分かりやすい、目的に特化したサイトに進化します。

最初は少し難しく感じるかもしれませんが、ACFプラグインを使えば、プログラミングの知識があまりなくても直感的に操作できますし、実際にコードを書いてみて動くのを見ると、きっと楽しくなりますよ！

ぜひ、あなたのWordPressサイトでカスタムフィールドを試して、表現の幅を広げてみてくださいね。