MENU
  1. ホーム
  2. WordPress
  3. WordPressカスタムフィールド完全ガイド！標準機能、プラグインなど徹底解説！

WordPressカスタムフィールド完全ガイド！標準機能、プラグインなど徹底解説！

広告
WordPress カスタムフィールド

「投稿画面に独自の項目を追加できるって聞いたけど、どうやって使うの？」
「プラグインを入れたらサイトが重くなりそうで不安……」
「テーマ編集でカスタムフィールドを出力するコードって難しそう！」
「料金表やレビュー評価を簡単に管理したいけど、標準機能だけで足りるのかな……？」

こんな悩みや疑問を抱えていませんか？

WordPressのカスタムフィールドは、投稿や固定ページに価格・在庫・評価など独自情報を登録し、サイト上に自由自在に表示できる強力な機能です。

しかし、標準機能とプラグイン、さらには自作メタボックスまで選択肢が多く、「どれをどう使えばいいの？」と迷ってしまう方も多いはず。

本記事では、

  1. 標準機能だけで始める手順
  2. 定番プラグイン（ACFなど）を使った応用
  3. 自作メタボックスでさらに自由度を高める方法

を、初心者の方にもわかりやすくステップごとに解説します。

これを読めば、カスタムフィールドの全体像がつかめ、すぐに実践できるようになります！🎉

目次

カスタムフィールドの概要

カスタムフィールドとは何か

カスタムフィールドは、投稿や固定ページに独自の入力項目を追加できる機能です。

通常、WordPressの投稿画面にはタイトルや本文、カテゴリーなどの基本要素しかありませんが、カスタムフィールドを使うと、たとえば「価格」「著者コメント」「レビュー星評価」など、サイト固有のデータを簡単に登録・管理できます。

  • 🔍 使い道例
    • ECサイトの商品情報（価格、在庫状況）
    • 不動産物件の詳細（間取り、築年数）
    • イベント情報の会場住所や開始時刻

利点：作業効率＆表記統一

カスタムフィールドを活用すると、手作業での編集ミスを減らし、チーム運営をスムーズに進められます。

  • 入力作業の短縮
    フォーム形式で必要項目だけを入力するため、本文中に直接数値やテキストを打ち込むよりも速く正確です。
  • 表記の一貫性
    ドロップダウンやチェックボックスを使えば、ユーザー同士の表記ゆれを防げます。
  • 再利用性
    テンプレート内で同じフィールドを呼び出せば、複数のページで共通レイアウトが実現できます。
  • 多彩な出力
    登録したデータを表形式やアイコン付き、グラフ風など好きな形で表示できます。

注意点：ブロック／クラシックエディタの差異

エディタによってカスタムフィールドの表示方法や設定画面が異なるため、事前に確認が必要です。

スクロールできます
ポイントクラシックエディタブロックエディタ（Gutenberg）
表示オプション位置画面上部「表示オプション」内画面右上の「︙（三点リーダー）」→「オプション」
カスタムフィールド欄ページ下部に常時表示デフォルトでは非表示。手動で有効化要
UIの直感性シンプルだがやや古い印象モダンで拡張機能も多いが慣れが必要
プラグイン対応ほとんどのプラグインが対応一部プラグインはGutenberg専用ブロックが必要

💡 ポイント

  • ブロックエディタでは最初に「カスタムフィールド」を有効化しないと入力欄が出てきません。
  • Classicエディタに慣れている場合は、プラグイン「Classic Editor」を併用するとスムーズです

活用シーンと事例

ECサイトの商品情報管理

カスタムフィールドを使えば、商品ページに必要な情報を統一フォーマットで登録できます。

  • 価格（例：price フィールド）
  • 在庫数（例：stock_quantity フィールド）
  • 色・サイズ（例：color／size フィールド）

メリット

  • 💡 誤入力防止：ドロップダウンや数値入力フォームで正確に管理
  • 📊 自動集計：在庫数データを別ページやCSVにまとめやすい
  • 🔄 一括更新：同じフィールドを使う商品をまとめて編集可能

不動産・施工実績の表示

物件や施工事例を見やすく整理し、検索性を高められます。

スクロールできます
フィールド名説明入力例
location住所・エリア東京都渋谷区
floor_area延床面積（㎡）120.5
completion_year完成年2022
image_gallery写真ギャラリー（複数）画像ファイルのURL

メリット

  • 🗂 絞り込み検索：面積や築年でユーザーが簡単にフィルタ
  • 🖼 ビジュアル強化：ギャラリー機能で魅力的に紹介
  • 🔍 SEO対策：物件詳細に構造化データが入り検索結果で優位に

飲食店や宿泊施設のレビュー掲載

ユーザーの評価やコメントをフィールド化して、一覧・ランキング化が可能です。

  • 評価（例：rating フィールド、1〜5の数値選択）
  • コメント（例：review フィールド、テキストエリア）
  • 訪問日（例：visit_date フィールド、日付ピッカー）

メリット

  • ⭐️ 星評価のビジュアル化：アイコン表示で直感的に伝わる
  • 🗓 日付順・評価順ソート：最新レビューや高評価のみ抽出
  • 💬 ユーザー信頼度向上：コメントを構造化し、信頼感を強化

多言語・CSSカスタマイズへの応用

カスタムフィールドを応用すると、サイトを多言語対応や見た目の細かな調整にも役立ちます。

  • 多言語ラベル（例：label_en／label_ja フィールド）
  • カスタムCSSクラス（例：custom_class フィールド）
  • 背景色・アイコン指定（例：bg_color／icon_choice フィールド）

メリット

  • 🌐 多言語切替：言語ごとのテキストを個別に保持
  • 🎨 デザイン自由度：投稿毎に色やアイコンを変更し、統一感と個性を両立
  • 🔧 テーマ非依存：テーマ側をいじらずに、フィールド値だけでスタイル反映可能

以上のように、カスタムフィールドは多彩な用途でサイト運営を効率化し、表現力を高める強力なツールです。

ぜひ自分のサイトで活用してみてください！

標準機能での設定手順（プラグイン不要）

投稿編集画面で入力欄を有効化

  1. 投稿編集画面を開く
  2. 画面右上の「︙（三点リーダー）」→「オプション」を選択
  3. 「カスタムフィールド」にチェックを入れる
  4. 下部に カスタムフィールド セクションが表示される 🎉

💡 ヒント: クラシックエディタを使っている場合は、画面上部の「表示オプション」から同じように有効化できます。

新規カスタムフィールドを追加

  1. カスタムフィールド欄の「新規追加」をクリック
  2. フィールド名（キー） と 値（Value） を入力
    • 例）キー：price、値：3,980円
  3. 「追加」ボタンを押して保存
  4. 「更新」または「公開」をクリックして反映

🔍 ポイント: キーは半角英数字＋アンダースコアでシンプルに命名すると管理しやすいです。

3.3 the_meta()／post_custom()でテンプレートに出力

投稿テンプレート（single.phpなど）に以下を記述するだけで、登録したフィールドを表示できます。

<?php 
  // 投稿に登録されたすべてのカスタムフィールドを自動で一覧出力
  the_meta(); 

  // キーを指定して出力（値だけ）
  post_custom('price'); 
?>
  • the_meta()
    • 投稿に紐づく全フィールドを自動リスト化
    • 本番環境では必要なものだけフィルタしたほうが見た目が整います
  • post_custom(‘$key’)
    • 特定のキーの値を直接取り出すときに便利

get_post_meta()系関数の使い分け

細かい制御が必要な場合は get_post_meta() 系を使い分けましょう。

スクロールできます
関数名説明返り値の形式
get_post_meta($id, $key)投稿ID・キーを指定し、単一値を取得文字列
get_post_meta($id, $key, false)同上だが、同一キーのすべての値を配列で取得配列
get_post_custom($id)投稿IDを指定し、すべてのフィールドを配列で取得連想配列（キー ⇒ 値の配列）
get_post_custom_keys($id)投稿IDを指定し、登録されたキー一覧を取得配列（キーのみ）
get_post_custom_values($key, $id)キー指定ですべての値を配列で取得配列（指定キーの複数値）

⭐️ 使い分け例

  • get_post_meta($id, 'price', true) → 単一の商品価格を出力
  • get_post_custom_values('gallery', $id) → ギャラリー画像URLを配列で取得

プラグインを活用した実装方法

おすすめプラグイン一覧

以下のプラグインは多機能かつ安定性が高く、初心者にも扱いやすいものを厳選しました。

スクロールできます
プラグイン名特徴
Advanced Custom Fields（ACF）豊富なフィールドタイプ、ドラッグ＆ドロップで直感的に設定 🎨
Custom Field Templateシンプルなテンプレート管理機能、軽量で高速
Custom Field Suite繰り返しフィールド対応、ターム（カテゴリ）にも設定可能 🔁
Meta Box高い拡張性とアドオンの豊富さ、開発者向けカスタマイズにも最適

💡 Point: まずは「ACF」を試し、慣れてきたら用途に応じて他プラグインを検討すると学習コストが低くなります。

プラグイン導入共通の流れ

プラグインごとに設定画面は異なりますが、基本的な手順は以下のとおりです。

  1. インストール＆有効化
    • WordPress管理画面 → プラグイン → 「新規追加」
    • プラグイン名を検索し、「今すぐインストール」→「有効化」
    • 🎉 インストール後は必ず有効化を確認！
  2. フィールドグループ／テンプレート登録
    • 管理画面に追加された「ACF」や「Custom Field Template」のメニューを開く
    • 新規フィールドグループ（またはテンプレート）を作成
    • フィールド名・タイプ・説明文を入力して保存
  3. 表示位置やレイアウトの調整
    • 「公開ページ」「投稿タイプ」「特定のカテゴリー」など、表示ルールを設定
    • レイアウト（ラベル位置、説明文の表示/非表示など）を微調整
    • 📋 チェックリスト：
      • 対象投稿タイプは正しいか
      • 必須フィールドの設定漏れはないか
  4. 出力コード（the_fieldなど）の記述
    • テンプレートファイル（single.phpやpage.phpなど）を開く
    • フィールドを呼び出すコードを記述
    <?php // ACFの場合 the_field('フィールド名'); // get_post_meta()系でも取得可能 echo esc_html( get_post_meta(get_the_ID(), 'フィールド名', true) ); ?>
    • 保存後、フロントエンドで正しく表示されるか確認 ✅

🚀 Tip: テーマの子テーマや独自プラグイン内でテンプレート編集を行うと、将来のアップデートで上書きされにくくなります。

Advanced Custom Fields（ACF）の使い方

ACFのインストールと初期設定

  1. プラグインの追加
    • 管理画面 → プラグイン → 「新規追加」で「Advanced Custom Fields」を検索
    • 「今すぐインストール」→「有効化」をクリック 🎉
  2. 初期設定の確認
    • 管理画面に「Custom Fields」メニューが追加されていればOK
    • 設定 → ACF の画面で、必要に応じてGoogle Map APIキーなどを入力

フィールドグループの作成手順

  1. フィールドグループ新規作成
    • 「Custom Fields」→「フィールドグループを追加」
  2. グループ名を入力
    • 例：商品情報、イベント詳細 など
  3. フィールドを追加
    • 「フィールドを追加」ボタンを押し、フィールドラベルとフィールド名を設定
    • フィールドタイプ（テキスト、画像、リピーターなど）を選択
  4. 表示ルールの設定
    • 「このフィールドグループを表示する場所」で表示対象を指定（投稿タイプ、カテゴリーなど）
  5. 公開
    • 画面右上の「公開」をクリックして保存 ✅

各種フィールドタイプの設定例

スクロールできます
フィールドタイプ用途例設定ポイント
テキスト (Text)商品価格や短いキャッチコピー最大文字数、プレースホルダー設定
画像 (Image)商品写真やアイキャッチ画像メディアライブラリから選択
リピーター (Repeater)ギャラリーやFAQのQ\&Aペア繰り返し子フィールドをグループ化可能
チェックボックス特徴タグの複数選択ラベル名を一覧で設定
セレクト (Select)カテゴリー分けやステータス指定単一選択／複数選択を切り替え

💡 Tip: リピーターフィールドは繰り返し構造を簡単に扱えるので、複数アイテム管理におすすめです。

テンプレートへの出力コード

作成したフィールドをテーマのテンプレートに組み込みます。

<?php 
  // 単一フィールドの出力
  if( get_field('price') ) {
    echo '<p class="price">価格：<strong>' . esc_html( get_field('price') ) . '円</strong></p>';
  }

  // リピーターフィールドの出力（例：FAQ）
  if( have_rows('faq_items') ) {
    echo '<div class="faq-list">';
    while( have_rows('faq_items') ) { the_row();
      echo '<h4>' . esc_html( get_sub_field('question') ) . '</h4>';
      echo '<p>' . esc_html( get_sub_field('answer') ) . '</p>';
    }
    echo '</div>';
  }
?>
  • get_field()：値を取得し、返り値を扱いやすい
  • have_rows() / the_row() / get_sub_field()：リピーター内ループ用

実際の表示確認方法

  1. 投稿画面で入力
    • 作成したフィールドグループに従い、投稿編集画面で値を入力
  2. フロントエンドで確認
    • 該当ページを表示し、設定した内容が正しく反映されているかチェック 👀
    • レイアウト崩れやタグ未閉じなどがないか、ブラウザの検証ツールで確認
  3. キャッシュクリア
    • キャッシュ系プラグインやブラウザキャッシュをクリアして最新状態を表示
  4. レスポンシブ確認
    • スマホ・タブレットでの表示崩れがないかも必ず確認

🚀 ワンポイント

  • テンプレート編集後は子テーマで管理すると、本テーマ更新時に上書きされません。

Custom Field Templateの導入プロセス

プラグインを有効化

  1. プラグインのインストール
    • 管理画面 → プラグイン → 「新規追加」で「Custom Field Template」を検索
    • 「今すぐインストール」→「有効化」をクリック 🎉
  2. 設定画面を確認
    • 有効化後、ダッシュボードのメニューに「Custom Field Template」が追加されていることを確認

入力フォーム／表示テンプレートの登録

  1. 入力フォームの登録
    • 「Custom Field Template」→「フォームテンプレート」→「新規追加」
    • フォーム名をわかりやすく設定（例：商品情報フォーム）
    • フィールドキー と ラベル、フィールドタイプ を入力し、順番をドラッグで調整
  2. 表示テンプレートの登録
    • 同じく「テンプレート」→「表示テンプレート」→「新規追加」
    • テンプレート名を入力（例：商品一覧表示）
    • HTML＋ショートコード形式でレイアウトを記述
    <div class="product-item"> <h3>[cft key="product_name"]</h3> <p>価格：<strong>[cft key="price"]円</strong></p> <img src="[cft key='image_url']" alt="商品画像"> </div>
  3. テンプレート設定の保存
    • 各テンプレートを「公開」または「更新」ボタンで確定
    • チェックポイント：フィールドキーとショートコードのキーが一致しているか必ず確認

投稿画面での確認とショートコード利用

  1. 投稿編集画面の確認
    • 投稿編集画面に移動し、「表示オプション」でカスタムフィールド入力欄が表示されていることを確認
    • 登録したフォームテンプレート名のタブを開く
  2. 入力と保存
    • フォームに沿って必要なデータを入力し、「更新」または「公開」ボタンをクリック
    • ✅ 入力例：
スクロールできます
フィールド値例
product_nameスマートウォッチ
price12,800
image_urlhttps://…/watch.jpg
  1. ショートコードの埋め込み
    • 記事本文や固定ページ内に以下を貼り付け
    [cft template="商品一覧表示"]
    • ショートコードを使うことで、登録データが一括表示される
  2. フロントエンドでの確認
    • 実際のページを表示し、デザイン崩れやデータ漏れがないかチェック 👀
    • 不具合があれば、入力フォームや表示テンプレートを再編集し、再度ショートコードを貼り直す

💡 ポイント

  • フォームとテンプレートはセットで管理すると、後からの修正が楽になります。
  • ショートコード名は日本語でも使えますが、半角英数字にするとトラブルが少ないです。

自作で拡張する──メタボックス＆保存処理

カスタムメタボックスの追加コード

投稿画面に独自の入力フォームを追加するには、add_meta_box を使います。

以下は基本形です。

// 1. メタボックス登録
add_action('add_meta_boxes', 'my_custom_meta_box');
function my_custom_meta_box() {
  add_meta_box(
    'my_meta_id',          // メタボックスID
    '追加情報',             // タイトル
    'my_meta_box_callback', // 表示コールバック
    'post',                // 対象投稿タイプ
    'normal',              // コンテキスト（normal, side, advanced）
    'high'                 // 優先度（high, core, default, low）
  );
}

// 2. 表示コールバック
function my_meta_box_callback($post) {
  wp_nonce_field('my_meta_nonce', 'my_meta_nonce_field');
  $value = get_post_meta($post->ID, '_my_meta_key', true);
  echo '<label for="my_field">サブタイトル:</label> ';
  echo '<input type="text" id="my_field" name="my_field" value="' . esc_attr($value) . '" size="25" />';
}
  • 🔑 ポイント
    • wp_nonce_field でセキュリティチェック用の nonce を出力
    • get_post_meta で既存の値を取得してフォームに表示

データ保存とセキュリティ対策

フォームで入力されたデータを保存するには、save_post フックを使い、nonce検証や権限チェックを必ず行いましょう。

add_action('save_post', 'my_save_meta_box');
function my_save_meta_box($post_id) {
  // 1. 自動保存なら何もしない
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

  // 2. nonce検証
  if (!isset($_POST['my_meta_nonce_field']) ||
      !wp_verify_nonce($_POST['my_meta_nonce_field'], 'my_meta_nonce')
  ) return;

  // 3. 権限チェック
  if (!current_user_can('edit_post', $post_id)) return;

  // 4. データ取得＆サニタイズ
  if (isset($_POST['my_field'])) {
    $safe = sanitize_text_field($_POST['my_field']);
    update_post_meta($post_id, '_my_meta_key', $safe);
  }
}
スクロールできます
チェック項目処理内容
自動保存判定DOING_AUTOSAVE でリクエスト元を確認
nonce検証wp_verify_nonce でフォーム改ざんを防止
ユーザー権限current_user_can で投稿編集権限をチェック
データサニタイズsanitize_text_field や esc_url_raw で安全化

画面への出力サンプル（サンプルコード付き）

保存したメタデータをテーマ内で呼び出す例です。

<?php
// テンプレートファイル内
$subtitle = get_post_meta(get_the_ID(), '_my_meta_key', true);
if ($subtitle) {
  echo '<h2 class="post-subtitle">▶︎ ' . esc_html($subtitle) . '</h2>';
}
?>

📌 ポイント

  • get_post_meta(..., true) で単一の値として取得
  • esc_html で出力時にHTMLタグを無効化し、安全性アップ

独自データ形式（複数選択・ギャラリー等）

配列やギャラリー情報を扱う場合、保存時にシリアライズ／アンシリアライズが自動で行われます。

// チェックボックスで複数選択
// 保存側（例：$_POST['my_checkbox'] は配列）
update_post_meta($post_id, '_checkbox_key', array_map('sanitize_text_field', $_POST['my_checkbox']));

// 取得＆ループ
$choices = get_post_meta($post_id, '_checkbox_key', true);
if (!empty($choices) && is_array($choices)) {
  echo '<ul class="choices">';
  foreach ($choices as $c) {
    echo '<li>' . esc_html($c) . '</li>';
  }
  echo '</ul>';
}

// ギャラリー（添付IDの配列）
update_post_meta($post_id, '_gallery', $_POST['gallery_ids']); 

$ids = get_post_meta($post_id, '_gallery', true);
if ($ids) {
  echo '<div class="gallery">';
  foreach ($ids as $img_id) {
    echo wp_get_attachment_image($img_id, 'medium');
  }
  echo '</div>';
}
  • 🎯 ポイント
    • 配列データはそのまま update_post_meta／get_post_meta で扱える
    • ギャラリー画像は添付IDから wp_get_attachment_image で呼び出す

以上で、自作メタボックスから保存処理、多様なデータ形式までの基本とサンプルコードを網羅しました。

初めはシンプルなテキストから始め、慣れてきたらギャラリーやリピーター風の構造に挑戦してみましょう！

表示されないときのチェックポイント

エディタ設定の見落とし

  • カスタムフィールドが非表示になっていないか確認
    • ブロックエディタ：右上「︙」→「オプション」→「カスタムフィールド」に✅
    • クラシックエディタ：画面上部「表示オプション」で同様に有効化
  • 💡 Tip：長期間触っていないサイトでは、いつの間にかオプションがオフになっていることがあります。

テンプレートタグの書き間違い

  • キー名のミス
  // NG: フィールドキーが間違っている例
  echo get_post_meta(get_the_ID(), 'prize', true);
  // → 正しくは 'price'
  • 関数の混同
    • the_field() と get_field()（ACF）の使い分け
    • the_meta() は全出力、post_custom() は単一キー
  • エスケープ忘れによる表示崩れや空白
    • 推奨：esc_html()／esc_url() を併用

⚠️ 要チェック：

  • コードをコピー＆ペーストする際、シングルクォート（’）とバッククォート（`）を取り違えないように
  • テーマ側で該当テンプレートが正しく読み込まれているかも再確認

プラグインの競合・キャッシュ問題

スクロールできます
症状原因例対処法
フィールドが空白で表示他プラグインがフックを上書き一時的にプラグインを無効化して確認
最新の値が反映されないキャッシュ（ブラウザ / サーバー）キャッシュをクリア
管理画面で入力フォーム消失JavaScriptのエラーブラウザコンソールでエラー確認／プラグイン停止
  • 🔄 キャッシュクリア手順
    1. ブラウザのキャッシュを更新（Ctrl+F5）
    2. サーバー側キャッシュプラグインの「キャッシュ削除」
    3. CDN利用時はCDN側のキャッシュもリフレッシュ

🚨 注意：

  • 競合検証は「ステージング環境」で行うと安全です。
  • 問題特定後は一つずつプラグインを戻し、どれが原因か切り分けましょう。

これらのチェックポイントを順に確認することで、思わぬトラブルを素早く解消できます。

安心してカスタムフィールドを活用しましょう！

まとめ

本記事では、WordPressのカスタムフィールドを

  • 標準機能で有効化し、基本的な使い方をマスター
  • プラグイン（ACF／Custom Field Templateなど）で効率化＆拡張
  • コード自作でメタボックスの追加＆データ保存を自在にカスタマイズ

という流れで、具体的な手順とサンプルコードを交えてご紹介しました。

ポイントをおさらいすると、

  1. まずは標準機能で「カスタムフィールド」の仕組みを理解
  2. ACFなどプラグインで直感的にフィールド管理＆表示設定
  3. 自作メタボックスと保存処理でさらなる自由度アップ

これらを組み合わせることで、ECサイトや不動産、レビューサイトなど、あらゆる用途に応じたデータ管理が可能になります。

ぜひこの記事を参考に、あなたのサイトに最適なカスタムフィールド活用法を取り入れてみてください！

💡 次のステップ：

  • 実際にフィールドを追加してテスト
  • 子テーマでテンプレートを編集し、表示をカスタマイズ
  • プラグイン同士やキャッシュとの相性もチェック
WordPress

関連記事

目次