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

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

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

当記事ではカテゴリーに独自のカスタムフィールドを自作で実装する方法と合わせて、そもそもカテゴリーやカスタムフィールドについても優しく解説しております。

また、当記事をお仕事でご活用いただけるように、実装に必要なフックについてもおまとめしております。

当記事の解説通りに手を動かせば非常に簡単に実装できるように構成して執筆しておりますので、よろしければぜひご活用いただけましたら幸いです。

カテゴリーとは

カテゴリーとは、投稿ページを分類する仕組みのことを言います。

分類とは、例えばWordPressで作られた飲食店を検索できるサイトがあったとして、投稿ページとしてさまざまな飲食店の情報を掲載したページが多数公開されているとします。

ユーザーはその公開された飲食店ページを見たいな〜という場面でまずすることとしては、日本の何県の何市のお店なのか、また中華なのか和食なのか、などを絞り込んでからページを探すこととなるかと思います。

そんな時に大活躍するのがカテゴリーです。

それぞれの飲食店ページごとに「東京都」や「新宿区」、「中華」などの情報をカテゴリーとして追加することができます。

このカテゴリーをページに追加することによって、「東京都」カテゴリーが追加されたページだけを絞り込んでページ上に表示（ここで表示されるページをアーカイブページと呼びます）させたり、「中華」カテゴリーのページのみに絞り込んだりすることが可能となり、ユーザーが読みたいページを探しやすくすることができます。

よくある挙動イメージとしては、下図のようにサイト上でカテゴリーを一覧で表示させておきます。

そしていずれかのカテゴリーをクリックすることによって、下図のように記事をそのカテゴリーに属するページだけとなるように絞り込むことが可能です。

ここまでが、カテゴリーの説明になります。

カスタムフィールドとは

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

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

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

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

今回はカテゴリーのカスタムフィールドになるので、例えば、カテゴリーごとのテキストや色データ、画像などを追加データとして実装することが可能です。

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

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

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

カテゴリーのカスタムフィールド実装方法

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

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

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

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

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

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

function save_category_custom_field($term_id) {
    if (isset($_POST['category_custom_field'])) {
        update_term_meta($term_id, 'category_custom_field', sanitize_text_field($_POST['category_custom_field']));
    }
}
add_action('created_category', 'save_category_custom_field');
add_action('edited_category', 'save_category_custom_field');

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

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

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

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

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

使用するフックについて

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

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

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

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

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

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

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

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

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

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

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

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

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

このコードは、現在の投稿に紐づいているカテゴリーを取得し、それぞれのカテゴリーに保存されているカスタムフィールド「category_custom_field」の値を表示する処理を行っています。

具体的には、まずget_the_category()関数を使って、その投稿に設定されているすべてのカテゴリー情報を取得します。そして、カテゴリーが存在する場合は、各カテゴリーに対してget_term_meta()関数を使用し、「category_custom_field」というキーで保存されたカスタムフィールドの値を取得します。

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

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

<?php
$term_id = 3; // カテゴリーIDを指定
$custom_field = get_term_meta( $term_id, 'category_custom_field', true );

if ( $custom_field ) {
    echo '<p>このカテゴリの追加情報: ' . esc_html( $custom_field ) . '</p>';
}

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

カスタムフィールドの値が空でない場合のみ、画面上にその情報が出力されます。これにより、あらかじめ設定したカテゴリー固有の追加情報を、任意の場所で表示することができます。

カテゴリーアーカイブページで表示する場合（category.php など）

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

<?php
$term = get_queried_object(); // 現在表示しているカテゴリー情報
if ( $term && isset( $term->term_id ) ) {
    $custom_field = get_term_meta( $term->term_id, 'category_custom_field', true );
    if ( $custom_field ) {
        echo '<div class="category-meta">';
        echo '<h3>このカテゴリーの追加情報</h3>';
        echo '<p>' . esc_html( $custom_field ) . '</p>';
        echo '</div>';
    }
}

このコードは、現在表示しているカテゴリーアーカイブページにおいて、そのカテゴリーに設定されているカスタムフィールド「category_custom_field」の値を取得し、存在していれば画面上に表示する処理です。

具体的には、get_queried_object()関数を使って現在のカテゴリー情報を取得し、その中からカテゴリーIDを参照します。そして、そのIDに紐づいたカスタムフィールドの値を get_term_meta()関数で取得します。値が存在する場合は、「このカテゴリーの追加情報」という見出しとともに、HTMLの<div>要素内に情報が出力されます。

このようにして、カテゴリーアーカイブページでカテゴリーごとの追加情報を表示できるようにしています。

まとめ

今回は、WordPressのカテゴリーにカスタムフィールドを自作で実装する方法について、基礎から丁寧に解説しました。

カテゴリーとは何か、カスタムフィールドとは何かという基本的な概念から始まり、実際の実装コードや使用するフックについても詳しくご紹介しました。

本記事の内容通りに手を動かしていただければ、シンプルかつ確実にカスタムフィールドを追加できる構成となっております。

実務でもご活用いただける内容となっておりますので、ぜひ参考にしていただけましたら幸いです。