WordPressのカスタムフィールドの使い方と活用術

WordPressのカスタムフィールドを使えば、商品価格や詳細情報、著者の注釈などの追加データをメインコンテンツとは別に保存して表示できます。これによりコンテンツが煩雑になるのを防ぎつつ、サイトをよりダイナミックでパーソナライズされた印象に仕上げられるのです。

この記事では、WordPressのカスタムフィールドの基本から使い方まで詳しく解説します。さらに、実際の活用事例もいくつか紹介するので、自分のサイトにどう取り入れるか具体的にイメージできるはずです。

それでは早速見ていきましょう！

WordPressのカスタムフィールドとは

WordPressのカスタムフィールドとは、通常のコンテンツ以外の追加情報を表示できる機能です。

例えば、ECサイトの商品価格、タスク完了までの時間、イベントの開催日時、投稿の評価点数などを表示可能です。こうした情報を追加することで、Webサイトのコンテンツがより動的になり、ニーズに合わせたカスタマイズが可能になります。

WordPressのカスタムフィールドは、カスタム投稿タイプやカスタム投稿テンプレートと組み合わせて使われることが多く、サイトの機能性をグッと高めてくれます。

簡単に説明すると、カスタム投稿タイプはWordPressのデフォルトであるブログのような投稿形式から解放され、特定のニーズに応じてコンテンツを整理することができます。

一方、カスタム投稿テンプレートは、表示したいコンテンツの種類に応じた独自のレイアウトを設定できるものです。

これら3つの要素によって、Webサイトのコンテンツ構造とデザインを思い通りにできるのです。

例えば、不動産サイトを運営しているなら、物件リストを表示するためのカスタム投稿タイプを作成し、カスタム投稿テンプレートでレイアウトを整え、物件の詳細情報（間取り、築年数、最寄り駅など）をカスタムフィールドで追加できます。

WordPressの投稿とページでカスタムフィールドを有効にする方法

WordPressではカスタムフィールド機能はデフォルトで無効になっているので、まず有効にする必要があります。手順は次の通りです。

• WordPressの投稿または固定ページエディターを開きます。
• 右上隅の3点メニュー（オプションメニュー）をクリックします。
• 「設定」を選び、「一般」メニューの「高度な設定」までスクロールします。
• 「カスタムフィールド」のチェックボックスをオンにします。
• 表示される「ページを表示して、リロード」ボタンをクリックして完了です。

これで、コンテンツエディターの下部に「カスタムフィールド」パネルが表示されるようになりました。

「名前」と「値」のフィールドは、それぞれ『何の情報か（キー）』と『その内容（値）』を設定します。キーはカスタムフィールドの名前で、値はそれに関連付けられる具体的な情報です。

例として、スポンサー投稿の免責事項を表示するカスタムフィールドを作ってみましょう。まずは「新規入力」ボタンをクリックしてカスタムフィールドを作成します。

この例では、名前を「sponsored_post」とし、値には次のようなテキストを設定します：

本記事はスポンサー掲載記事です。なお、当サイトでは読者の皆様に価値のある製品・サービスのみをご紹介することを心がけております。

最後に「カスタムフィールドを追加」ボタンをクリックすれば完了です。

ただし、WordPressはカスタムフィールドの値をバックエンド（管理画面側）にしか持たないことに注意してください。。フロントエンド（実際のサイト上）にこのデータを表示するには、テーマファイルを編集する必要があるのです。

カスタムフィールドを表示する方法

実際にカスタムフィールドを表示する作業に入る前に、メインテーマに影響を与えることなく自由に実験できるよう、子テーマを作成しておくと安心です。そうすれば、親テーマのバージョンが更新されても、自分の加えた変更がしっかり保持されます。

クラシックテーマとブロックテーマではカスタムフィールドを表示するステップは異なるので、それぞれ別々に説明していきます。

クラシックテーマでの表示方法

まずはWordPressの管理画面（ダッシュボード）から「外観」→「テーマファイルエディター」に移動し、編集対象となる「個別投稿（single.php）」ファイルを探しましょう。

カスタムフィールドを表示するための基本的なコードは以下のようになります（get_post_meta()関数を使用）。

<?php echo get_post_meta($post->ID, 'key', true); ?>

このコードを使う際は、’key’部分を自分で設定したカスタムフィールドの「名前」に置き換えるのを忘れないようにしましょう。

上記の例はあくまでもWordPressカスタムフィールドの基本的な使い方です。より複雑な機能を実装したい場合は、追加のコーディングが必要になります。

では、先ほど作成したスポンサー投稿の免責事項を表示するために、次のコードを追加してみましょう。

$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>';

}

このコードを投稿の上部に表示したい場合は、while ( have_posts() ) : the_post(); の行のすぐ後に追加します。もちろん、投稿の別の場所に表示したい場合は、配置を変更することも可能です。

編集が完了したら、「ファイルを更新」ボタンをクリックして変更を保存しましょう。

このコードは、WordPressにsponsored_postというカスタムフィールドを持つ投稿を探し、その値を「免責事項」というテキストと共に表示するよう指示する役割を担います。

ブロックテーマでの表示方法

WordPressのブロックテーマを使っている場合は、single.phpファイルに直接アクセスできないので、代わりにショートコードを作成しなければなりません。

同じ例を使って、Twenty Twenty-Fiveなどのブロックテーマでカスタムフィールドを表示する方法を見ていきましょう。

まず「ツール」→「テーマファイルエディター」に移動し、「テーマのための関数（functions.php）」ファイルを開きます。最下部までスクロールして、次のコードを追加しましょう。

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');

必要に応じてコードをカスタマイズしてから、「ファイルを更新」ボタンをクリックして変更を適用します。

次に、投稿エディターを開きます。カスタムフィールドを表示したい場所に移動し、「ブロックを追加」（+）ボタンをクリックします。

「ショートコード」ブロックを選択すると入力フィールドが表示されます。

作成したショートコード「[sponsored_disclaimer]」を入力します。「保存」をクリックして変更を適用します。

これで、フロントエンドにスポンサー投稿の免責事項が表示されるようになりました。

WordPressプラグインを使ったカスタムフィールドの管理方法

カスタムフィールドを手動で追加するにはテーマファイルの編集が必要ですが、プラグインを使えば作業がグッと簡単になります。おすすめのWordPressのカスタムフィールドのプラグインには、Secure Custom Fields、Meta Field Block、Pods、Custom Field Suite、CarbonFieldsなどがあります。

ここでは先ほどと同じスポンサー投稿の免責事項の例を使って、Secure Custom FieldsとMeta Field Blockプラグインでコーディングせずにカスタムフィールドを表示する方法を紹介します。

まずは両方のプラグインをWordPressの管理画面にインストールして有効化 し、次のステップでカスタムフィールドを追加しましょう。

• WordPressダッシュボードから「SCF」メニューに移動します。
• フィールドグループエディターで「フィールドグループを追加する」ボタンをクリックします。

• フィールドグループは用途に応じて分かりやすい名前を付けましょう。
• フィールドタイプは「テキスト」を選択します。
• フィールドラベルボックスに記入して、カスタムフィールドの概要を示します。  
• フィールド名ボックスは自動入力されますが、必要に応じて編集可能です。
• カスタムフィールドに表示する初期値を入力します。投稿ごとに異なる値を使いたい場合は空白でも問題ありません。

• 「設定」ボックスまでスクロールしてカスタムフィールドの設定を変更します。
• この例では「ロケーションルール」だけを設定して、この例ではすべての投稿に表示されるようにします。  

• 右上の「変更内容を保存」ボタンをクリックして完了します。

上記の設定により、WordPressのすべての投稿エディターにカスタムフィールドセクションが表示されるようになります。

カスタムフィールドの設定によってセクションの見た目が決まることに留意してください。例えばデフォルト値を設定しない場合は、テキストボックスは空白になります。

この時点では、フィールドとその値は管理画面にのみ表示されています。通常、フロントエンドに表示するにはテーマファイルのコードを調整しなければなりません。

しかし、Meta Field Blockプラグインを使えばこの作業も簡単になります。

• カスタムフィールドを表示したい投稿やページのエディターを開きます。
• カスタムフィールドを表示したい場所を選び、「ブロックを追加」ボタンをクリック。
• 「Meta Field Block」ブロックを選択すると、ブロック設定パネルに「メタフィールド設定」が表示されます。
• 「フィールドタイプ」ドロップダウンから「ACF – Advanced Custom Fields」を選びます。  
• 設定したフィールド名（この例では「sponsored_post」）を入力します。

• 投稿を保存して変更を適用します。

これで実際の投稿にテキストが表示されるようになります。

WordPressのカスタムフィールドのメリット

WordPressのカスタムフィールドの主な目的は、通常のコンテンツエディターでは扱えない追加データを保存して表示することです。具体的には次のような点で役立ちます。

• コンテンツの整理が向上する – カスタムフィールドを使えば、投稿に関連する特定の詳細情報を追加できるため、データ構造が改善されます。
• サイトのカスタマイズ性が高まる – カスタムフィールドを活用することで、WordPressのデフォルト機能を超えた柔軟なカスタマイズが可能になります。
• プラグインなしでカスタムデータを追加できる – 多くのプラグインは追加フィールドを提供しますが、標準のカスタムフィールド機能を使えばサイトを軽量に保てます。
• 動的コンテンツのデータ管理が効率化される – ディレクトリ、ポートフォリオ、ECサイトなど構造化されたコンテンツを持つサイトでは、商品仕様や顧客の声、予約詳細などを効率的に保存・表示できます。  
• SEOとユーザー体験が向上する – カスタムフィールドは検索結果での表示を改善する構造化データ（スキーママークアップ）を保持でき、サイトのコンテンツを閲覧しやすく、操作しやすくすることでユーザー体験も向上します。

WordPressのカスタムフィールドの実践的な活用例

カスタムフィールドでWordPressのサイトを強化する方法はたくさんあります。以下で実例をいくつか見ていきましょう。

不動産リスト

価格、所在地、床面積、部屋数、空室状況などの物件情報をカスタムフィールドで保存すれば、不動産サイトで構造化されフィルタリング可能なリストが作成でき、ユーザー体験が大幅に向上します。

ECサイト商品情報

オンラインショップを運営している場合、SKU番号、割引率、在庫状況、メーカー情報、商品サイズなどの詳細情報を追加するのにカスタムフィールドが役立ちます。

イベント情報

イベントサイトでは、開催日時、会場の場所、チケット料金、出演者情報、RSVPリンクなどのカスタム情報を表示できます。こうした情報を一箇所にまとめることで、訪問者が必要な情報をすぐに見つけられるようになり、ユーザー体験が向上します。

レシピサイト

準備時間、調理時間、人数、材料リスト、カロリー、食事制限などの構造化されたレシピ情報をカスタムフィールドで追加すれば、読みやすさが向上し、ユーザーがレシピを理解しやすくなります。 

書評サイト

書評サイトにおいては、著者名、ジャンル、出版年、ページ数、読者の平均評価、個人的な評価点などの追加情報を表示すれば、読者はレビュー本文に入る前に簡潔な要約情報を得られます。

ポートフォリオサイト

フリーランスや制作会社のサイトでは、クライアント名、プロジェクト概要、使用技術、完了日、実際のプロジェクトへのリンクなどのカスタムフィールドを追加して、作品をより魅力的に紹介できます。

まとめ

WordPressのカスタムフィールドを使えば、コンテンツに追加情報を加えて、サイトをよりダイナミックで個性的なものに仕上げることができます。

このガイドでは、手動での設定方法とプラグインを使った簡単な実装方法の両方を紹介し、実際のニーズに合わせた活用例も見てきました。

このガイドがWordPressのサイトでのカスタムフィールド活用に役立つことを願っています。ぜひ試してみた方は、コメント欄で教えてください！

WordPressのカスタムフィールドに関するよくある質問

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。