WordPressのカスタムフィールドとは、通常のコンテンツ以外の追加情報を表示できる機能です。<\/p>
例えば、ECサイトの商品価格、タスク完了までの時間、イベントの開催日時、投稿の評価点数などを表示可能です。こうした情報を追加することで、Webサイトのコンテンツがより動的になり、ニーズに合わせたカスタマイズが可能になります。<\/p>
WordPressのカスタムフィールドは、カスタム投稿タイプやカスタム投稿テンプレートと組み合わせて使われることが多く、サイトの機能性をグッと高めてくれます。<\/p>
簡単に説明すると、カスタム投稿タイプ<\/strong>はWordPressのデフォルトであるブログのような投稿形式から解放され、特定のニーズに応じてコンテンツを整理することができます。<\/p> 一方、カスタム投稿テンプレート<\/strong>は、表示したいコンテンツの種類に応じた独自のレイアウトを設定できるものです。<\/p> これら3つの要素によって、Webサイトのコンテンツ構造とデザインを思い通りにできるのです。<\/p> 例えば、不動産サイトを運営しているなら、物件リストを表示するためのカスタム投稿タイプ<\/strong>を作成し、カスタム投稿テンプレート<\/strong>でレイアウトを整え、物件の詳細情報（間取り、築年数、最寄り駅など）をカスタムフィールド<\/strong>で追加できます。<\/p> WordPressではカスタムフィールド機能はデフォルトで無効になっているので、まず有効にする必要があります。手順は次の通りです。<\/p> これで、コンテンツエディターの下部に「カスタムフィールド<\/strong>」パネルが表示されるようになりました。<\/p> 「名前<\/strong>」と「値<\/strong>」のフィールドは、それぞれ『何の情報か（キー）』と『その内容（値）』を設定します。キーはカスタムフィールドの名前で、値はそれに関連付けられる具体的な情報です。<\/p> 例として、スポンサー投稿の免責事項を表示するカスタムフィールドを作ってみましょう。まずは「新規入力<\/strong>」ボタンをクリックしてカスタムフィールドを作成します。<\/p> この例では、名前を「sponsored_post<\/strong>」とし、値には次のようなテキストを設定します：<\/p> 本記事はスポンサー掲載記事です。なお、当サイトでは読者の皆様に価値のある製品・サービスのみをご紹介することを心がけております。<\/strong><\/p> 最後に「カスタムフィールドを追加<\/strong>」ボタンをクリックすれば完了です。<\/p> ただし、WordPressはカスタムフィールドの値をバックエンド<\/strong>（管理画面側）にしか持たないことに注意してください。。フロントエンド（実際のサイト上）にこのデータを表示するには、テーマファイルを編集する必要があるのです。<\/p> 実際にカスタムフィールドを表示する作業に入る前に、メインテーマに影響を与えることなく自由に実験できるよう、子テーマ<\/strong><\/a>を作成しておくと安心です。そうすれば、親テーマのバージョンが更新されても、自分の加えた変更がしっかり保持されます。<\/p> クラシックテーマとブロックテーマ<\/strong>ではカスタムフィールドを表示するステップは異なるので、それぞれ別々に説明していきます。<\/p> クラシックテーマでの表示方法<\/strong><\/p> まずはWordPressの管理画面（ダッシュボード）から「外観」<\/strong>→<\/strong>「テーマファイルエディター」<\/strong>に移動し、編集対象となる「個別投稿（<\/strong>single.php<\/strong>）<\/strong>」ファイルを探しましょう。<\/p> カスタムフィールドを表示するための基本的なコードは以下のようになります（get_post_meta()<\/strong>関数を使用）。<\/p> このコードを使う際は、’key’部分を自分で設定したカスタムフィールドの「名前」に置き換えるのを忘れないようにしましょう。<\/p> 上記の例はあくまでもWordPressカスタムフィールドの基本的な使い方です。より複雑な機能を実装したい場合は、追加のコーディングが必要になります。<\/p> では、先ほど作成したスポンサー投稿の免責事項を表示するために、次のコードを追加してみましょう。<\/p> このコードを投稿の上部に表示したい場合は、while ( have_posts() ) : the_post();<\/strong> の行のすぐ後に追加します。もちろん、投稿の別の場所に表示したい場合は、配置を変更することも可能です。<\/p> 編集が完了したら、「ファイルを更新<\/strong>」ボタンをクリックして変更を保存しましょう。<\/p> このコードは、WordPressにsponsored_post<\/strong>というカスタムフィールドを持つ投稿を探し、その値を「免責事項<\/strong>」というテキストと共に表示するよう指示する役割を担います。<\/p> ブロックテーマでの表示方法<\/strong><\/p> WordPressのブロックテーマを使っている場合は、single.php<\/strong>ファイルに直接アクセスできないので、代わりにショートコードを作成しなければなりません。<\/p> 同じ例を使って、Twenty Twenty-Five<\/strong>などのブロックテーマでカスタムフィールドを表示する方法を見ていきましょう。<\/p> まず「ツール」<\/strong>→<\/strong>「テーマファイルエディター」<\/strong>に移動し、「テーマのための関数（<\/strong>functions.php<\/strong>）」<\/strong>ファイルを開きます。最下部までスクロールして、次のコードを追加しましょう。<\/p> 必要に応じてコードをカスタマイズしてから、「ファイルを更新<\/strong>」ボタンをクリックして変更を適用します。<\/p> 次に、投稿エディターを開きます。カスタムフィールドを表示したい場所に移動し、「ブロックを追加」<\/strong>（+）ボタンをクリックします。<\/p> 「ショートコード」<\/strong>ブロックを選択すると入力フィールドが表示されます。<\/p> 作成したショートコード「<\/strong>[sponsored_disclaimer]<\/strong>」<\/strong>を入力します。「保存」<\/strong>をクリックして変更を適用します。<\/p> これで、フロントエンドにスポンサー投稿の免責事項が表示されるようになりました。<\/p> \n\n\n カスタムフィールドの見た目をカスタマイズしたい場合は、WordPressのCSSファイル<\/a>を編集することでスタイルを自由に調整できます。 <\/p>\n <\/div>\n\n\n\n<\/p> カスタムフィールドを手動で追加するにはテーマファイルの編集が必要ですが、プラグインを使えば作業がグッと簡単になります。おすすめのWordPressのカスタムフィールドのプラグインには、Secure Custom Fields<\/strong>、<\/strong>Meta Field Block<\/strong>、<\/strong>Pods<\/strong>、<\/strong>Custom Field Suite<\/strong>、<\/strong>CarbonFields<\/strong>などがあります。<\/p> ここでは先ほどと同じスポンサー投稿の免責事項の例を使って、Secure Custom Fields<\/strong><\/a>とMeta Field Block<\/strong><\/a>プラグインでコーディングせずにカスタムフィールドを表示する方法を紹介します。<\/p> まずは両方のプラグインをWordPressの管理画面にインストールして有効化<\/strong> し、次のステップでカスタムフィールドを追加しましょう。<\/p> 上記の設定により、WordPressのすべての投稿エディターにカスタムフィールドセクションが表示されるようになります。<\/p> カスタムフィールドの設定によってセクションの見た目が決まることに留意してください。例えばデフォルト値を設定しない場合は、テキストボックスは空白になります。<\/p> この時点では、フィールドとその値は管理画面にのみ表示されています。通常、フロントエンドに表示するにはテーマファイルのコードを調整しなければなりません。<\/p> しかし、Meta Field Blockプラグインを使えばこの作業も簡単になります。<\/p> これで実際の投稿にテキストが表示されるようになります。<\/p> \n\n\n ここで紹介した例はWordPressカスタムフィールドの基本的な使い方です。カスタム投稿タイプ、テンプレート、クエリループ<\/a>などの他のWordPress機能と組み合わせれば、さらにサイトの目的に合わせたカスタマイズが可能になります。<\/p>\n <\/div>\n\n\n\n<\/p> WordPressのカスタムフィールドの主な目的は、通常のコンテンツエディターでは扱えない追加データを保存して表示することです。具体的には次のような点で役立ちます。<\/p> カスタムフィールドでWordPressのサイトを強化する方法はたくさんあります。以下で実例をいくつか見ていきましょう。<\/p> 不動産リスト<\/strong><\/p> 価格、所在地、床面積、部屋数、空室状況などの物件情報をカスタムフィールドで保存すれば、不動産サイトで構造化されフィルタリング可能なリストが作成でき、ユーザー体験が大幅に向上します。<\/p> EC<\/strong>サイト商品情報<\/strong><\/p> オンラインショップを運営している場合、SKU番号、割引率、在庫状況、メーカー情報、商品サイズなどの詳細情報を追加するのにカスタムフィールドが役立ちます。<\/p> イベント情報<\/strong><\/p> イベントサイトでは、開催日時、会場の場所、チケット料金、出演者情報、RSVPリンクなどのカスタム情報を表示できます。こうした情報を一箇所にまとめることで、訪問者が必要な情報をすぐに見つけられるようになり、ユーザー体験が向上します。<\/p> レシピサイト<\/strong><\/p> 準備時間、調理時間、人数、材料リスト、カロリー、食事制限などの構造化されたレシピ情報をカスタムフィールドで追加すれば、読みやすさが向上し、ユーザーがレシピを理解しやすくなります。 <\/p> 書評サイト<\/strong><\/p> 書評サイトにおいては、著者名、ジャンル、出版年、ページ数、読者の平均評価、個人的な評価点などの追加情報を表示すれば、読者はレビュー本文に入る前に簡潔な要約情報を得られます。<\/p> ポートフォリオサイト<\/strong><\/p> フリーランスや制作会社のサイトでは、クライアント名、プロジェクト概要、使用技術、完了日、実際のプロジェクトへのリンクなどのカスタムフィールドを追加して、作品をより魅力的に紹介できます。<\/p> WordPressのカスタムフィールドを使えば、コンテンツに追加情報を加えて、サイトをよりダイナミックで個性的なものに仕上げることができます。<\/p> このガイドでは、手動での設定方法とプラグインを使った簡単な実装方法の両方を紹介し、実際のニーズに合わせた活用例も見てきました。<\/p> このガイドがWordPressのサイトでのカスタムフィールド活用に役立つことを願っています。ぜひ試してみた方は、コメント欄で教えてください！<\/p> WordPressのカスタムフィールドは商品スペックや評価点、制作時間などの詳細情報を追加するためのものですが、カスタム投稿タイプは通常の投稿やページとは別の独自のコンテンツ構造を定義するものです。 <\/p>\n\n<\/div>\n<\/div>\n 空のカスタムフィールドを非表示にするには、テーマテンプレートで条件分岐を使います。get_post_meta()<\/strong>関数をif<\/strong>文で囲んで、フィールドに値がある場合にのみ表示されるようにしましょう。 <\/p>\n\n<\/div>\n<\/div>\nWordPress<\/strong>の投稿とページでカスタムフィールドを有効にする方法<\/strong><\/h2>
\n
![\"WordPressの環境設定メニューにある「&](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-104.png\/public\")
<\/figure>![\"投稿エディタのWordPressカスタムフィールドセクション\n\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-105.png\/public\")
<\/figure>![\"WordPressの投稿エディターで新しいカスタムフィールドを追加するインターフェース\n\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-106.png\/public\")
<\/figure>カスタムフィールドを表示する方法<\/strong><\/h3>
![\"WordPressのテーマエディターで開いたsingle.phpファイル\n\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-107.png\/public\")
<\/figure><?php echo get_post_meta($post->ID, 'key', true<\/strong>); ?><\/pre>
$sponsored = get_post_meta(get_the_ID(), 'sponsored_post', true);
if (!empty($sponsored)) {
echo '<p class=\"sponsored-disclaimer\"><strong>Disclaimer:<\/strong> ' . esc_html($sponsored) . '<\/p>';
}<\/pre>![\"テーマファイルにWordPressカスタムフィールドを表示するコード行を追加\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-108.png\/public\")
<\/figure>![\"クラシックテーマでのWordPressカスタムフィールドのフロントエンド表示\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-109.png\/public\")
<\/figure>function display_sponsored_disclaimer() {
$sponsored = get_post_meta(get_the_ID(), 'sponsored_post', true);
if (!empty($sponsored)) {
return '<p class=\"sponsored-disclaimer\"><strong>Disclaimer:<\/strong> ' . esc_html($sponsored) . '<\/p>';
}
}
add_shortcode('sponsored_disclaimer', 'display_sponsored_disclaimer');<\/pre>![\"WordPressカスタムフィールドを追加するためにfunctions.phpファイルに追加されたコード行\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-110.png\/public\")
<\/figure>![\"カスタムフィールドを表示するためのショートコードブロック\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-111.png\/public\")
<\/figure>![\"ブロックテーマにおけるWordPressカスタムフィールドの表示例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-112.png\/public\")
<\/figure>ポイント<\/h4>\n
WordPress<\/strong>プラグインを使ったカスタムフィールドの管理方法<\/strong><\/h2>
\n
![\"Secure](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-113.png\/public\")
<\/figure>\n
![\"SCFプラグインのカスタムフィールドグループエディタインタフェース\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-114.png\/public\")
<\/figure>\n
![\"SCF](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-115.png\/public\")
<\/figure>\n
![\"SCFとMeta](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-116.png\/public\")
<\/figure>\n
![\"WordPressブロックエディターのメタフィールドブロック\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-117.png\/public\")
<\/figure>\n
![\"SCFとMeta](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-118.png\/public\")
<\/figure>ポイント<\/h4>\n
WordPressの<\/strong>カスタムフィールドのメリット<\/strong><\/h2>
\n
WordPressの<\/strong>カスタムフィールドの実践的な活用例<\/strong><\/h3>
![\"物件一覧ページにおけるカスタムフィールドの実装例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-119.png\/public\")
<\/figure>![\"eコマースサイトにおけるカスタムフィールドの実装例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-120.png\/public\")
<\/figure>![\"イベント情報サイトにおけるカスタムフィールドの実装例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-121.png\/public\")
<\/figure>![\"レシピサイトにおけるカスタムフィールドの実装例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-122.png\/public\")
<\/figure>![\"書評サイトにおけるカスタムフィールドの実装例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-123.png\/public\")
<\/figure>![\"ポートフォリオサイトにおけるカスタムフィールドの実装例\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/05\/image-124.png\/public\")
<\/figure>まとめ<\/strong><\/h2>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/43\/2025\/08\/JP_WP.png\/public\")
<\/a><\/figure>WordPressの<\/strong>カスタムフィールドに関するよくある質問<\/strong><\/h2>
WordPressのカスタムフィールドとカスタム投稿タイプの違いは何ですか？<\/strong><\/h3>\n
空のカスタムフィールドを非表示にするにはどうすればよいですか？<\/strong><\/h3>\n