WordPressのタグでカスタムフィールドを自作で実装する方法を徹底解説(サンプルコード付き)

みなさんこんにちは！エンジニアの高澤です！

今回は、WordPressのタグでカスタムフィールドを自作で実装する方法を徹底解説したいと思います。

ちょっとニッチな内容になるかもしれませんが、WordPressの標準機能として搭載されている投稿ページの「タグ」機能について解説し、このタグに独自のカスタムフィールドを実装することができる内容となっております。

WordPressでのWebサイト制作などをされている場合、クライアントから細かい要望をもらったり、テーマ開発などで細かいところに手が届くといったことが可能です。

よろしければぜひお仕事などに当記事を繰り返しご活用いただき、お役立ていただけましたら幸いです。

タグとは

タグとは、投稿ページに自由なキーワードを付けて分類・関連付けできる仕組みのことを言います。

みなさんX（旧Twitter）やってると、ツイートにハッシュタグ「#〇〇」でキーワードが追加されているのって見たことありますよね？

なんなら皆さんツイートしたことがある方はこのハッシュタグをつけてツイートしたことがあるのではないでしょうか？

そうです、まさにXで言うところのこのハッシュタグの機能がWordPressでいう「タグ」です。

WordPressでは下図のように表示されているのがタグになります。

上図のように表示されているいずれかのタグをクリックすると、Xのようにそのクリックしたタグが付けられた投稿ページをアーカイブページで絞り込むことができます。

カスタムフィールドとは

今回はタグのカスタムフィールドを実装するという内容になるため、カスタムフィールドについて事前に確認しておきましょう。

カスタムフィールドとは、投稿ページや固定ページなどに独自のデータを追加する仕組みのことを言います。

例えば、WordPressでは通常、投稿ページや固定ページにタイトルや本文、カテゴリーなどあらかじめ決まったデータを入力したり設定することができますが、他にも独自にデータを追加して入力したり設定したりできるようにしたい場合があります。

カスタムフィールドとしてわかりやすい例としては、ECサイトの商品ページでは、タイトルや本文の他に価格や色、生産地域などさまざまな商品ごと（ページごと）のデータを設定する必要がありますが、そのようなデータをカスタムフィールドという仕組みを使って設定することになります。

今回はタグのカスタムフィールドになるので、例えば、タグごとのOGPやアーカイブページのサムネイル用などの画像や、アーカイブページをnoindexとするかのチェックボックスなどの追加データとして実装することが可能です。

当記事で実装する内容のイメージとしては下図のような感じです。
まず元々「名前」「スラッグ」「説明」の3つしかなかった状態から…

下図のように「追加フィールド」という独自の入力項目が追加されるイメージです。

もしカスタムフィールドについてより詳しく知りたい方は、以下の記事をご確認いただけましたら幸いです。

タグのカスタムフィールド実装方法

それでは早速、タグのカスタムフィールドの実装方法を解説いたします。

ここでは実装として以下を行いたいと思います。

• タグにテキストのカスタムフィールドの入力UIを編集画面に追加
• 編集画面に追加したテキストのカスタムフィールドの保存処理を追加
• タグにテキストのカスタムフィールドの入力UIを新規追加画面に追加
• 新規追加画面に追加したテキストのカスタムフィールドの保存処理を追加

そして、上記それぞれを全て実装しているソースコードが以下になります。実装する際は、以下のコードをfunctions.phpにそのままコピー＆ペーストしてください。

<?php
function add_tag_custom_field_new() {
    ?>
    <div class="form-field">
        <label for="tag_custom_field">追加フィールド</label>
        <input type="text" name="tag_custom_field" id="tag_custom_field" value="">
        <p class="description">タグに関する追加情報を入力してください。</p>
    </div>
    <?php
}
add_action('post_tag_add_form_fields', 'add_tag_custom_field_new');

function add_tag_custom_field_edit($term) {
    $custom_field_value = get_term_meta($term->term_id, 'tag_custom_field', true);
    ?>
    <tr class="form-field">
        <th scope="row"><label for="tag_custom_field">追加フィールド</label></th>
        <td>
            <input type="text" name="tag_custom_field" id="tag_custom_field" value="<?php echo esc_attr($custom_field_value); ?>">
            <p class="description">タグに関する追加情報を入力してください。</p>
        </td>
    </tr>
    <?php
}
add_action('post_tag_edit_form_fields', 'add_tag_custom_field_edit');

function save_tag_custom_field($term_id) {
    if (isset($_POST['tag_custom_field'])) {
        update_term_meta($term_id, 'tag_custom_field', sanitize_text_field($_POST['tag_custom_field']));
    }
}
add_action('created_post_tag', 'save_tag_custom_field');
add_action('edited_post_tag', 'save_tag_custom_field');

ペーストが完了したら、WordPress管理画面をご確認ください。

すると、下図のようにWordPress管理画面左メニュー「投稿」の「タグ」をクリックしていただき、新規追加フォームをご確認いただくと、独自のテキストを入力できるUIが追加されていることを確認できるかと思います。

そして、各タグの編集画面をご確認いただくと、下図のように新規追加画面と同じく独自のテキストを入力できるUIが追加されていることを確認できるかと思います。

はい、もうこれでタグにカスタムフィールドを追加することができました。お疲れ様でした！

そんなに難しくなかったかと思います。

使用するフックについて

使用するフックについてもまとめておきます。実装で使用するフックは以下になります。

公式ドキュメントをご確認いただければわかるかと思いますが、実際のところ「post_tag_add_form_fields」や「created_post_tag」などというフックがあるわけではなく、実際のフック名としては「{$taxonomy}_add_form_fields」や「created_{$taxonomy}」といった具合に、{$taxonomy}の部分をタグなら「post_tag」と置き換えているだけになりますので、細かいですがご注意ください。

なので例えば、カテゴリーのカスタムフィールドを実装する際は「category_add_form_fields」や「created_category」となります。（カテゴリーの場合は「category」、タグの場合は「post_tag」）

また、そもそもフックってなに？という方のために以下の記事を執筆いたしました。よろしければご活用いただけましたら幸いです。

追加したカスタムフィールドの表示

追加したカスタムフィールドの表示の実装方法についても解説いたします。

実装において入力と出力はセットになるので、ここでしっかりおさえておきましょう

ここでは、以下の内容で実装方法について解説したいと思います。

• 投稿ページで付けられたタグのカスタムフィールドを表示する
• 特定のタグIDでカスタムフィールドの値を取得・表示
• タグアーカイブページで表示する場合（tag.php など）

それぞれ解説いたします。

投稿ページで付けられたタグのカスタムフィールドを表示する

投稿ページで付けられたタグのカスタムフィールドを表示するには、以下のコードをテーマのPHPテンプレート（single.php、sidebar.php等）のお好きな箇所にコピー＆ペーストしてください。

<?php
$tags = get_the_tags();
if ( $tags ) {
    foreach ( $tags as $tag ) {
        $custom_field = get_term_meta( $tag->term_id, 'tag_custom_field', true );
        if ( $custom_field ) {
            echo '<p><strong>' . esc_html( $tag->name ) . ' の追加カスタムフィールド：</strong> ' . esc_html( $custom_field ) . '</p>';
        }
    }
}

このコードは、現在の投稿に設定されているすべてのタグを取得し、それぞれのタグに保存されているカスタムフィールド「tag_custom_field」の値を確認し、値が存在する場合にその内容を表示する処理です。

具体的には、まず get_the_tags()関数を使って投稿に付けられているタグの一覧を取得します。そして各タグについて、get_term_meta()関数を使用して「tag_custom_field」の値を取得し、その値が存在すれば、「タグ名 の追加情報: ○○」という形式で画面に出力されます。

このようにして、投稿に関連付けられた各タグに対する追加情報を、記事の中などに表示できるようにしています。

特定のタグIDでカスタムフィールドの値を取得・表示

特定のタグIDでカスタムフィールドの値を取得・表示するには、以下のコードをテーマのPHPテンプレート（single.php、sidebar.php等）のお好きな箇所にコピー＆ペーストしてください。

<?php
$term_id = 5; // 表示したいタグIDを指定
$custom_field = get_term_meta( $term_id, 'tag_custom_field', true );

if ( $custom_field ) {
    echo '<p>このタグの追加情報：' . esc_html( $custom_field ) . '</p>';
}

このコードは、特定のタグ（IDが5）に保存されているカスタムフィールド「tag_custom_field」の値を取得し、その値が存在していれば「このタグの追加情報: ○○」という形式で表示する処理です。

タグIDを直接指定することで、投稿に依存せず任意の場所で特定タグに関連する情報を出力することができます。カスタムフィールドの値が空でない場合のみ表示される仕組みです。

タグアーカイブページで表示する場合（tag.php など）

タグアーカイブページでデータを表示する場合は、以下のコードをテーマのPHPテンプレートであるtag.phpやarchive.phpなどのお好きな箇所にコピー＆ペーストしてください。

<?php
$term = get_queried_object(); // 現在表示中のタグオブジェクト
if ( $term && isset( $term->term_id ) ) {
    $custom_field = get_term_meta( $term->term_id, 'tag_custom_field', true );
    if ( $custom_field ) {
        echo '<div class="tag-meta">';
        echo '<h3>このタグの追加情報</h3>';
        echo '<p>' . esc_html( $custom_field ) . '</p>';
        echo '</div>';
    }
}

このコードは、タグのアーカイブページが表示されているときに、そのタグに登録されているカスタムフィールド「tag_custom_field」の値を取得し、存在する場合にその内容を画面に表示する処理です。

まずget_queried_object()関数を使って現在表示中のタグオブジェクトを取得し、タグIDからget_term_meta()関数を使ってカスタムフィールドの値を取得します。値が存在していれば、「このタグの追加情報」という見出しとともに、その情報を HTML の<div>要素内に表示します。

これにより、タグアーカイブページごとに、個別の補足情報などを柔軟に表示できるようになります。

まとめ

今回はWordPressの「タグ」機能に対して、カスタムフィールドを自作で実装する方法を詳しく解説しました。ややニッチな内容ではありますが、タグに独自の情報を持たせることで、サイト構築の自由度が大きく広がります。

クライアントからの細かな要望にも柔軟に対応できるようになり、オリジナルテーマの開発においても非常に有用です。

ぜひ本記事の内容を繰り返しご活用いただき、日々の制作業務や開発にお役立ていただければ幸いです。