WordPressカスタムフィールドの設定方法まとめ!表示されない原因から自作テンプレートまで紹介

2025年4月3日

「カスタムフィールドを追加したのに、表示されない…」
WordPressでサイト構築をしていると、こんな壁にぶつかった経験がある方も多いのではないでしょうか。特に「カスタム投稿＋カスタムフィールド」で動的なコンテンツを構築しようとすると、設定ミスやテンプレート側の調整不足で詰まりがちです。
この記事では、WordPressのカスタムフィールドを使いこなすための基本から、自作での設置、よくあるトラブル（表示されない）、PHPやCSSでの調整方法、テンプレートへの反映方法まで徹底的に解説します。

カスタムフィールドとは？WordPressで使う目的とメリット

カスタムフィールドってなに？

カスタムフィールドとは、投稿や固定ページに独自の情報（メタデータ）を追加できる機能です。
たとえば、以下のような用途に使われます：

商品ページに「価格」や「SKU」などの情報を追加
コラム記事に「著者の肩書き」や「レビュー評価」を追加
施工事例に「施工日」「担当者」などを管理

なぜカスタムフィールドが必要なのか？

通常の投稿だけでは表現しきれない情報を、構造化して柔軟に出力できるため、データベースとしての活用やレイアウトの自由度向上に貢献します。

カスタムフィールドの設定方法（基本編）

WordPress標準のカスタムフィールドを有効化する

初期状態では非表示になっているため、以下の手順で有効化します：

投稿編集画面右上の「表示オプション（またはブロック設定）」を開く
「カスタムフィールド」にチェックを入れる
投稿画面下部にカスタムフィールド欄が表示される

値の登録と呼び出し

「名前」「値」のペアで登録し、PHPテンプレートで呼び出すことで表示できます。

php
<?php echo get_post_meta(get_the_ID(), 'custom_key', true); ?>

カスタムフィールドが表示されない？よくある原因と対処法

① 入力はあるのにテンプレートで表示されない

多くのケースで、PHP側の記述ミスや出力位置の間違いが原因です。

get_post_meta() のキー名が合っていない
the_ID() を使わず固定IDになっている
出力位置が loop の外になっている

② カスタムフィールド欄が編集画面に出てこない

Gutenberg（ブロックエディタ）では標準UIでは非表示です。「表示設定」から有効化する必要があります。

カスタムフィールドを自作で実装する方法（プラグインなし）

functions.phpに追記してメタボックスを作成

以下のようにコードを追加して、オリジナルのUIを投稿画面に追加することが可能です。

php
function add_custom_field_box() {
    add_meta_box(
        'custom_field_id',
        'カスタム項目',
        'custom_field_callback',
        'post'
    );
}
add_action('add_meta_boxes', 'add_custom_field_box');

function custom_field_callback($post) {
    $value = get_post_meta($post->ID, '_custom_field_key', true);
    echo '<input type="text" name="custom_field_name" value="' . esc_attr($value) . '">';
}

保存処理も忘れずに実装します。

カスタムフィールドをテンプレートに出力する方法（PHP実装）

基本の取得・表示コード

php
<?php
$value = get_post_meta(get_the_ID(), 'custom_field_name', true);
if ($value) {
    echo '<p>' . esc_html($value) . '</p>';
}
?>

条件分岐との組み合わせ例

php
<?php if (get_post_meta(get_the_ID(), 'special_label', true) === '注目') : ?>
    <span class="highlight">注目記事</span>
<?php endif; ?>

カスタムフィールドをCSSで装飾する方法

カスタムフィールドで出力した値にclassを付与して、CSSで個別デザインが可能です。

php
<?php
$value = get_post_meta(get_the_ID(), 'label_color', true);
echo '<span class="label ' . esc_attr($value) . '">特集</span>';
?>

css
.label.red { background: #e74c3c; }
.label.green { background: #2ecc71; }

カスタムフィールドを繰り返し出力する（リピーター対応）

手動配列で管理する場合

php

$items = get_post_meta(get_the_ID(), 'features', true);
if (is_array($items)) {
    echo '<ul>';
    foreach ($items as $item) {
        echo '<li>' . esc_html($item) . '</li>';
    }
    echo '</ul>';
}

ACFなどのプラグインを使わない繰り返し処理

プラグインを使わず、シリアライズして保存→展開という形で繰り返し構造を実現可能ですが、中〜上級者向けになります。初学者にはACFの使用も選択肢として検討を。

プラグインを使わずに実装するメリットと注意点

メリット

表示速度が速くなる
不要な依存を減らせる
自由度が高く、保守性が良い

注意点

コード保守が必要（PHPエラー時にサイト全体に影響）
UIがわかりづらくなりがち
クライアントへの引き渡し時に説明が必要

よく使われるカスタムフィールドテンプレートの例

商品ページで使えるテンプレート構成例

商品名
型番
価格
スペック一覧（繰り返しフィールド）
購入リンク（条件分岐）

コラム記事で使える構成例

著者名
著者肩書き
SNSリンク（Twitter/LinkedIn）
関連タグ（非公開）

まとめ｜カスタムフィールドを使いこなせば、WordPressはもっと自由になる

カスタムフィールドは、「WordPress＝ブログツール」というイメージを一変させるほどの柔軟性を与えてくれる機能です。
表示されない原因さえ正しく理解できれば、複雑な設計も自作で自由自在に構築可能になります。
プラグインに頼らず、テンプレート側で制御する設計にすることで、表示速度・管理性・SEO対策面でも強力な武器になります。

まずは小さなカスタムフィールドから、PHPとCSSを少しずつ組み合わせて、実務に活かしてみてください！