トピックス

  1. HOME
  2. トピックス
  3. WEBコーディング
  4. 【2026年版】WordPress カスタムフィールドを使いこなす。初〜中級者向け「設定から活用」まで全手順ガイド
NEW

【2026年版】WordPress カスタムフィールドを使いこなす。初〜中級者向け「設定から活用」まで全手順ガイド

WordPressで記事を書いていると、「投稿タイトルと本文だけでは情報が足りない」と感じる場面が出てきます。たとえば店舗情報として「営業時間」「定休日」「最寄り駅」を毎回本文に書いていたり、不動産物件ページに「面積」「築年数」「間取り」を手動でコピペしていたりするケースは珍しくありません。

そのような「投稿ごとに繰り返し入力する独自項目」を、構造的・効率的に管理できるのがWordPressの「カスタムフィールド」機能です。正しく理解すれば、サイトのデータ管理が劇的にシンプルになり、デザインや表示のカスタマイズ幅も大幅に広がります。

本記事では、カスタムフィールドの基本的な概念から、WordPress標準機能での設定方法、ACFプラグインを使った応用展開、そしてテンプレートへの出力まで、実践に直結する知識をステップごとに整理してお届けします。

 

第1章:WordPress カスタムフィールドとは何か?その本質と仕組み

1

【参考サイト】

▼WordPress カスタムフィールドの使い方|https://wordpress.org/documentation/article/assign-custom-fields/

まず「カスタムフィールドとは何か」を正確に把握しましょう。基礎の理解が、後の設定・活用すべての土台になります。

カスタムフィールドの正体「投稿に紐づく独自データ」

WordPressの投稿には、デフォルトで「タイトル」「本文」「カテゴリ」「タグ」などのフィールドが用意されています。しかしこれらだけでは、サービスサイト・ポートフォリオ・不動産・飲食店など業種特有の情報を構造的に管理するには不十分です。

カスタムフィールドとは、この標準フィールドに追加できる「独自のデータ項目」のことです。WordPressの内部では投稿メタデータ(Post Metadata)として管理され、データベースのwp_postmetaテーブルにキーと値のペアで保存されます。

・キー(Key): フィールドの名前。例:「price」「access」「opening_hours」

・バリュー(Value): そのフィールドに入力された値。例:「3,000円」「JR渋谷駅徒歩3分」「10:00〜22:00」

この仕組みを理解すると、「タイトルと本文以外のあらゆる情報を、構造的にWordPressに持たせられる」ということが分かります。

カスタムフィールドが解決する3つの課題

カスタムフィールドの導入によって、特に次の課題が解決されます。

・本文のフォーマット崩れを防ぐ: 「営業時間:10:00〜22:00」という情報を毎回本文に書くと、担当者が変わると書き方がバラバラになります。カスタムフィールドとして定義すれば、入力欄が固定されてフォーマットが統一されます。

・テンプレートで一括表示・一括変更できる: カスタムフィールドの値をテンプレートファイルに書き出せば、1つの変更が全投稿に反映されます。デザイン変更の工数が大幅に削減されます。

・検索・絞り込みに活用できる: 「エリア:新宿」「ジャンル:イタリアン」のようにカスタムフィールドでデータを構造化しておくと、WordPressの検索クエリ(WP_Query)を使って絞り込み検索機能を実装できます。

第2章:【目的別比較】標準機能 vs プラグイン あなたに最適な選択肢はどれか

【参考サイト】

▼ACF(Advanced Custom Fields)公式|https://www.advancedcustomfields.com/

カスタムフィールドの実装方法は大きく2つあります。WordPress標準機能を使う方法と、プラグインを使う方法です。それぞれの特徴を比較して、自分のスキルレベルと目的に合った方法を選びましょう。

実装方法の比較表

比較項目

WordPress標準機能

ACF(無料版)

ACF Pro(有料版)

管理画面のUI

シンプル(テキスト入力のみ)

直感的なGUI

高度なGUI

フィールドの種類

テキストのみ

テキスト・画像・選択肢など多数

繰り返し(Repeater)/柔軟コンテンツ(Flexible Content)/ギャラリー(Gallery)/クローン(Clone)」など

コーディング知識

出力に最低限必要

ほぼ不要

ほぼ不要

カスタム投稿対応

対応

対応

対応

費用

無料

無料

年額約$49

まずACFを選ぶべき理由

カスタムフィールドの導入が初めての方には、ACF(Advanced Custom Fields)の無料版を強く推奨します。その理由は明快です。

・管理画面から視覚的にフィールドを設計できる: コードを書かなくても、フィールドグループ名・フィールドのラベル・フィールドの種類(テキスト・画像・日付・セレクトボックスなど)をGUI上で設定できます。

・出力用関数がシンプル: テンプレートファイルでの出力が「the_field(‘フィールド名’)」または「get_field(‘フィールド名’)」という直感的な関数で完結します。WordPressのget_post_meta()より記述がスマートです。

・世界200万サイト以上で採用: 信頼性・情報量ともに業界最高水準。日本語の解説記事も豊富なため、詰まったときの解決策が見つかりやすい環境が整っています。

【操作のポイント】

WordPress管理画面の「プラグイン」→「新規プラグインを追加」→「Advanced Custom Fields」で検索→インストール&有効化。これだけで左メニューに「カスタムフィールド」の項目が追加されます。

WordPress高速化でSEO効果を最大化!表示速度改善の決定版

第3章:【実践手順】ACFでカスタムフィールドを設定・表示する全工程

3

プラグインの選択が決まったら、実際にカスタムフィールドを設定して、フロントエンドに表示するまでの工程を順番に進めましょう。

フィールドグループの作成と設定

ACFでは、複数のカスタムフィールドを「フィールドグループ」という単位でまとめて管理します。

  1. 管理画面の「カスタムフィールド」→「新規追加」をクリック。
  2. フィールドグループ名を入力します(例:「店舗詳細情報」)。
  3. 「フィールドを追加」ボタンをクリックし、フィールドを設定します。
  4. 「ルール」セクションで「投稿タイプが〇〇と一致する場合」を設定し、どの投稿タイプにこのフィールドグループを表示するかを指定します。
  5. 「公開」ボタンをクリックして保存。

【操作のポイント】

「フィールドタイプ」の設定は特に重要です。入力したいデータの種類に合わせて、テキスト・テキストエリア・数値・画像・ファイル・セレクト・チェックボックス・日付ピッカーなど最適なタイプを選びましょう。「フィールド名(英数字)」は後でテンプレートから参照する際のキーになるので、わかりやすい名前にしてください。

投稿画面での入力と確認

フィールドグループを公開すると、対象の投稿タイプの編集画面に自動でカスタムフィールドの入力エリアが追加されます。

  1. 「投稿」または該当のカスタム投稿タイプの新規追加画面を開きます。
  2. 通常の編集エリアの下(またはサイドバー)に、設定したフィールドグループが表示されていることを確認します。
  3. 各フィールドに情報を入力して「更新」または「公開」をクリックします。

これだけで、データがWordPressのデータベースに「キー&バリュー」の形で保存されます。

テンプレートファイルへの出力コード

保存したカスタムフィールドの値を、実際のサイト上に表示するには、テーマのテンプレートファイル(single.phpなど)に出力用のコードを追記します。

ACFを使った出力(推奨):

<?php

// 値を直接表示する場合

the_field('opening_hours');

// 値を変数に格納して加工する場合

$price = get_field('price');

<if( $price ) {

echo '<p>料金:' . esc_html($price) . '円</p>';

}

?>

WordPress標準関数を使った出力:

<?php

$value = get_post_meta( get_the_ID(), 'opening_hours', true );

if( $value ) {

echo '<p>営業時間:' . esc_html($value) . '</p>';

}

?>

【操作のポイント】

出力する際は必ずesc_html()などのエスケープ関数を使い、XSS(クロスサイトスクリプティング)対策を施してください。ユーザーが入力した値をそのままechoするのは、セキュリティ上の重大リスクです。

第4章:サイトの表現力を格段に引き上げる「カスタムフィールド活用術4選」

【参考サイト】

▼ACF活用事例と応用テクニック|https://www.advancedcustomfields.com/resources/

基本の設定・表示をマスターしたら、実際のサイト制作でよく使われる応用パターンを押さえておきましょう。

カスタム投稿タイプとの組み合わせ

カスタムフィールドが最も力を発揮するのは、カスタム投稿タイプと組み合わせる場面です。

・活用例: 「物件情報」というカスタム投稿タイプを作成し、「所在地」「面積」「賃料」「間取り」というカスタムフィールドを紐づけることで、不動産情報を構造的に管理できます。テンプレートで一括出力すれば、デザインを維持したまま情報だけを効率的に追加・編集できます。

・メリット: 投稿者がHTML/CSSの知識なしで、決められた入力欄に埋めるだけでページが完成します。入力ミスや表示崩れのリスクを大幅に減らせます。

条件分岐による動的コンテンツの生成

カスタムフィールドの値に応じて、表示内容を動的に切り替える実装は非常に実用的です。

<?php

$status = get_field('availability');

if( $status === '空きあり' ) {

echo '<span class="badge-open">受付中</span>';

} else {

echo '<span class="badge-full">満員御礼</span>';

}

?>

・活用シーン: セミナーの「募集中/満員」表示、店舗の「本日営業中/定休日」表示、求人の「募集中/締め切り」表示など、状態に応じた動的UIを簡単に実装できます。

WP_Queryを使ったカスタムフィールド絞り込み検索

カスタムフィールドに蓄積したデータは、WP_Queryのmeta_queryパラメータを使って検索・フィルタリングに活用できます。

<?php

$args = array(

'post_type'  => 'property',

'meta_query' => array(

     array(

         'key' => 'area',

         'value'   => '新宿',

         'compare' => '=',

     ),

),<

);

$query = new WP_Query( $args );

?>

・活用シーン: 「エリアで絞る」「価格帯で絞る」「ジャンルで絞る」といった絞り込み検索機能を、外部のサービスに頼らずWordPress単体で実現できます。

ACF Proの繰り返しフィールドで複雑な情報を管理

ACF Proの「Repeater Field(繰り返しフィールド)」を使えば、数が不定の項目を管理画面から柔軟に追加・削除できます。

・活用例: 「スタッフ紹介」ページで各スタッフの「名前・役職・写真・コメント」を繰り返しフィールドで管理すると、スタッフが増えても管理画面から追加するだけでページが更新されます。ハードコーディングが不要になり、運用効率が劇的に向上します。

【徹底ガイド】WordPressで利用できるおすすめレンタルサーバー10選!

第5章:【Before / After事例】カスタムフィールド導入でサイト運用はどう変わるか

5

同じ情報を管理するにしても、カスタムフィールドを使うかどうかで、管理者の作業効率とサイトの品質は大きく変わります。

テーマ:飲食店(カフェ)の店舗情報ページ

【Before:カスタムフィールドなしの運用】

「営業時間:月〜金 9:00〜21:00、土日祝 10:00〜22:00|定休日:火曜日|最寄り駅:地下鉄〇〇駅3番出口 徒歩5分」

(※情報を毎回本文エディタに手入力しているため、担当者が変わるたびに表記ゆれが発生。テーブル形式で表示したくてもHTMLを直接編集する必要があり、非エンジニアには困難。)

【After:カスタムフィールド(ACF)導入後の運用】

  1. ACFで「営業時間(平日)」「営業時間(土日祝)」「定休日」「最寄り駅」の4つのカスタムフィールドを作成し、「店舗情報」カスタム投稿タイプに紐づけ。
  2. 担当者は管理画面の専用入力欄に情報を書き込むだけ。HTMLの知識不要で表記も統一される。
  3. テンプレートファイルにthe_field()で出力コードを一度書くだけで、すべての店舗ページが同一フォーマットで表示される。
  4. 新店舗を追加する際も「新規追加」から必要事項を埋めるだけ。5分で新しい店舗ページが完成。

結果として、店舗情報の更新作業時間の削減や、非エンジニアのスタッフでも正確な情報更新が可能になり、ページのデザイン崩れを無くす事が見込まれます。

第6章:カスタムフィールドで絶対に避けるべき「4つの落とし穴」

【参考サイト】

▼カスタムフィールド出力時のエスケープ処理|https://developer.wordpress.org/apis/security/escaping/

便利なカスタムフィールドですが、使い方を誤ると管理コストの増大やセキュリティリスクを招きます。以下の落とし穴は必ず把握しておきましょう。

  1. 「フィールド名を日本語にする」の落とし穴: カスタムフィールドのキー(フィールド名)に日本語や記号を使うと、PHPでの参照時にエラーが発生しやすくなります。フィールド名は必ず半角英数字とアンダースコアで構成してください(例:「opening_hours」「entry_fee」)。
  2. 「出力時にエスケープ処理を省く」の落とし穴: get_field()やget_post_meta()で取得した値をそのままechoすると、悪意のあるコードが埋め込まれていた場合にXSS攻撃が成立します。必ずesc_html()・esc_url()・wp_kses_post()などの適切なエスケープ関数を使用してください。
  3. 「フィールドを増やしすぎる」の落とし穴: カスタムフィールドは便利なため、ついあれもこれもと増やしてしまいがちです。不要なフィールドはデータベースを圧迫し、管理画面の入力画面も複雑化します。「本当にこの情報を構造的に持つ必要があるか」を都度問い直す設計眼が重要です。
  4. 「テーマ変更時にカスタムフィールドの参照が壊れる」の落とし穴: カスタムフィールドの出力コードをfunctions.phpにゴリゴリ書いているケースでは、テーマを変更した途端にサイトが壊れる事態が起こります。カスタムフィールドに関する処理は子テーマやカスタムプラグインに分離しておくことで、テーマ変更の影響を最小限に抑えられます。

【決定版】初心者でもわかる!WordPressにおけるレスポンシブ対応の仕方を徹底解説

第7章:WordPressサイトをフルポテンシャルで活かすならSTEP UP WEBへ

7

【参考サイト】

▼STEP UP WEB様HP

https://web.alfactory.co.jp/

ここまで「WordPress カスタムフィールド」の基本設計から実装手順、応用活用術までを体系的にご紹介してきました。カスタムフィールドは、WordPressサイトを情報が入るだけの箱からビジネスの実務を支えるプラットフォームへと格上げするための、強力な仕組みです。

「ACFの設定まではできたが、テンプレートへの出力でつまずいている」

「カスタム投稿タイプとカスタムフィールドを組み合わせた、本格的なサイトを構築したい」

「運用担当者が非エンジニアでも使いこなせるWordPressサイトに刷新したい」

こうした課題を根本から解決するのが、私たち STEP UP WEB です。私たちは、ホームページ制作の枠を超え、お客様のビジネスプロセスそのものをWebで効率化するコンサルティングパートナーとして伴走します。

・ビジネス要件から逆算したカスタムフィールド設計: 「どんな情報をどう管理したいか」というビジネス要件を丁寧にヒアリングし、カスタム投稿タイプ・フィールドグループ・テンプレート構造を最適設計。運用開始後の追加改修コストを最小化します。

・非エンジニアでも使いこなせる管理画面の構築: ACFのフィールド設計と入力UI最適化により、Web担当者がHTMLを触らずに情報更新・ページ追加ができる運用体制を実現します。担当者の交代があっても品質が維持される仕組みを提供します。

・集客・収益に直結するWeb基盤への進化: カスタムフィールドによる情報構造化を起点に、構造化データ(Schema.org)への活用・検索絞り込み機能の実装・SEO強化まで、一気通貫でサポート。作り込まれたサイトが実際の集客・売上につながる仕掛けを設計します。

WordPressサイトをビジネスの競争優位に変えたい企業様は、ぜひSTEP UP WEBへご相談ください。

まとめ

WordPress カスタムフィールドは、サイトのデータ構造を設計し、管理効率と表現力を同時に高める、中級者への扉を開く機能です。

標準機能での基本的な設定から、ACFによるGUI設計、テンプレートへの出力、WP_Queryを使った絞り込み検索まで、段階的にマスターしていくことで、WordPressサイトの可能性は飛躍的に広がります。

最初のステップは小さくて構いません。まずはACFをインストールし、既存の投稿に「よく手入力している項目」を1つカスタムフィールドとして定義することから始めてみましょう。その小さな一歩が、サイト運用の効率とクオリティを大きく引き上げる出発点になります。

「カスタムフィールドを使って、WordPressサイトをビジネスの実務に耐える本格的な仕組みに変えたい」

そのビジョンを実現するパートナーとして、STEP UP WEBがお客様のプロジェクトを力強くサポートします。

まずはお気軽にお問い合わせください。お客様のサイトの現状と目標をお聞きした上で、最適な構築・運用プランをご提案いたします。

CONTACTお問い合わせ・ご相談はこちら

おすすめ記事

CONTACT

WEB戦略型ホームページ制作・
集客・ブランディングのご相談はこちら

お電話でのお問い合わせ

06-4792-7678

株式会社アルファクトリー
〒530-0001 大阪市北区梅田2-6-20
パシフィックマークス西梅田4F
営業時間/平日10:00~18:00 土日祝定休

メールでのお問い合わせ

制作・リニューアルをお考えの方へ
まずは無料ホームページ診断!