【WordPressテーマの作り方第13回】投稿ページを強化！メタ情報とカスタムフィールドの活用術

2025年7月25日2025年8月12日

WordPress開発でよく登場する要望の一つが、「投稿ページにメタ情報や独自項目を追加したい」。
今回は カスタムフィールドの基本と 表示カスタマイズの実装まで、実例とともに解説します！

✅ 今回のゴール

投稿ページに「公開日」「更新日」「カテゴリー」などの情報を表示できる
カスタムフィールドでオリジナル情報（例：価格・会社名など）を追加できる
ACFプラグインを使った実践的な使い方もわかる

📝 メタ情報って何？

WordPressで言う「メタ情報」とは、以下のような投稿に紐づいた補足データを指します：

投稿日 / 更新日
カテゴリー・タグ
投稿者名
コメント数など

たとえば投稿テンプレート（single.php）内で以下のように記述すると表示できます。

📝 メタ情報の表示例

<p class="post-meta">
  投稿日：<?php the_time('Y年n月j日'); // 投稿の公開日を「2025年7月26日」形式で表示 ?><br>
  カテゴリー：<?php the_category(', '); // カテゴリー名をカンマ区切りで表示（各カテゴリーはリンク付き） ?>
</p>

🔧 「更新日」も出したいときは？

更新日を明示的に出すには get_the_modified_time() を使います：

🔧 更新日の表示

<p class="post-meta">
  更新日：<?php echo get_the_modified_time('Y年n月j日'); // 投稿が最後に更新された日付を表示 ?>
</p>

💡 投稿者やタグも表示したい場合

💡 投稿者・タグの表示

<p>投稿者：<?php the_author(); // 投稿者の名前を表示 ?></p>
<p>タグ：<?php the_tags('', ', '); // 投稿に設定されたタグをカンマ区切りで表示 ?></p>

💡補足：SEO目的で <meta name="author"> や article:tag を出力したい場合は、wp_head や add_action を使って出力できます（詳細は別記事で）。

🔍 カスタムフィールドとは？

「投稿ごとに追加情報を持たせたい」場合に便利なのがカスタムフィールド。

たとえば「商品価格」や「会場名」など、通常の投稿入力欄ではカバーできない情報を追加できます。

✍️ 標準のカスタムフィールドを表示する例

<?php
// 投稿IDをもとに 'price' というカスタムフィールドの値を取得（trueで単一の値を返す）
$price = get_post_meta(get_the_ID(), 'price', true);
if ($price) :
?>
  <p>価格：<?php echo esc_html($price); // 値をエスケープして表示 ?>円</p>
<?php endif; ?>

※投稿編集画面で「カスタムフィールド」メタボックスを有効にしておく必要があります。

🌟 ACF（Advanced Custom Fields）でより簡単に！

標準カスタムフィールドは少々扱いづらいため、現場では「ACF」プラグインが定番です。

✅ 手順例

ACFで「会社名」などのカスタムフィールドを作成
投稿タイプに紐づけ
テンプレートで出力：

🌟 ACFで作成したカスタムフィールドの出力例

<?php
// ACFで定義した 'company_name' フィールドを取得（get_field() は ACF 専用の関数）
$company = get_field('company_name');
if ($company) :
?>
  <p>会社名：<?php echo esc_html($company); // HTMLエスケープして出力（XSS対策） ?></p>
<?php endif; ?>

🧩 複数項目がある場合のレイアウト例（リスト表示）

🧩 複数カスタムフィールドをリスト形式で表示

<ul class="custom-meta">
  <?php if ($price) : ?><li>価格：<?php echo esc_html($price); ?>円</li><?php endif; ?>
  <?php if ($company) : ?><li>会社名：<?php echo esc_html($company); ?></li><?php endif; ?>
</ul>

🔁 補足：繰り返しや画像フィールドにも対応

たとえば「仕様リスト」や「商品画像」など、複数項目・画像もACFで簡単に追加可能。詳細は別回で解説予定です。

🛠 よくあるミスと注意点

get_post_meta() の第3引数は true をつけると「単一値」で取得（配列で返さない）
カスタムフィールド名の打ち間違いに注意
ACFフィールド名（英数字）は管理画面で確認

💡補足：ブロックエディターで独自フィールドを直接埋め込みたい場合、ACF Blocks や Block Bindings（WordPress 6.5〜）の活用も注目されています。

// ✅ 正しい使い方：true を指定すると文字列（単一値）として返る
$val = get_post_meta($post_id, 'カスタムフィールド名', true); 

// ❌ 間違った使い方：第3引数なしだと配列で返ってしまい echo で表示不可
// echo get_post_meta($post_id, 'カスタムフィールド名');

💡 補足：ループ外で取得したいとき

💡 ループ外での取得時（global $post の使い方）

global $post; // グローバル変数 $post を利用
$post_id = $post->ID; // 現在の投稿IDを取得
$company = get_post_meta($post_id, 'company_name', true); // カスタムフィールドの値を取得（trueで単一の値として取得）

📝 まとめ

メタ情報（投稿日・カテゴリなど）は the_ 系関数で取得
カスタムフィールドで独自情報も追加可能
実務では ACF を使うと入力・表示が圧倒的に楽になる

🔮 次回予告

第14回では、一覧ページでのカスタムフィールド表示や アーカイブの柔軟なカスタマイズに進みます。
投稿一覧に「価格」や「日程」などを表示したいとき、どう書く？を解決します！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

ロバンガさん

Web制作会社勤務、業界歴10年以上。現場を走り回ってきた制作者。
これからWeb制作を学ぶ人に寄り添いながら、実務で役立つ知識をわかりやすくシェアします。
「ゼロぐらいから学べる！」をモットーに、あなたの“がんばろ”を応援します！

【WordPressテーマの作り方 第13回】投稿ページを強化！メタ情報とカスタムフィールドの活用術