WordPressのカスタムタクソノミーでカスタムフィールドを自作で実装する方法を徹底解説(サンプルコード付き)
みなさんこんにちは！エンジニアの高澤です！
今回は、WordPressのカスタムタクソノミーでカスタムフィールドを実装する方法を徹底解説したいと思います。
カスタムタクソノミーはWordPress標準機能であるカテゴリーやタグの他に、投稿ページなどを分類する機能が欲しい時に大変重宝する仕組みとなります。
当記事では、このカスタムタクソノミーに独自のカスタムフィールドを実装するといった内容となっております。
カスタムタクソノミーを扱えてさらにカスタムタクソノミーまで実装できれば、WordPressサイト開発の自由度や柔軟性が一気に上がるかと思いますので、ぜひ当記事をお仕事などでご活用いただけましたら幸いです。
目次
カスタムタクソノミーとは
カスタムタクソノミーとは、記事ページを分類できる仕組みのことを言います。
WordPressでは、初めからインストール直後にすでに「カテゴリー」と「タグ」が機能として備わっていることと思います。まずこの「カテゴリー」と「タグ」を総称して「タクソノミー」と言います。
「カテゴリー」や「タグ」があれば、投稿ページを簡単に分類できますが、さらに同様のタクソノミーとしての機能を追加したかったり、新たにカスタム投稿タイプを追加して、そのカスタム投稿タイプにタクソノミーを追加する場合など、さまざまな場面でカスタムタクソノミーという仕組みは役に立ちます。
このカスタムタクソノミーについて詳しく知りたい方は、よろしければ以下の記事をご確認ください。
また、カスタム投稿タイプについても詳しく知りたい方は以下の記事をセットでご確認ください。
カスタムフィールドとは
今回はカスタムタクソノミーのカスタムフィールドを実装するという内容になるため、カスタムフィールドについて事前に確認しておきましょう。
カスタムフィールドとは、投稿ページや固定ページなどに独自のデータを追加する仕組みのことを言います。
例えば、WordPressでは通常、投稿ページや固定ページにタイトルや本文、カテゴリーなどあらかじめ決まったデータを入力したり設定することができますが、他にも独自にデータを追加して入力したり設定したりできるようにしたい場合があります。
カスタムフィールドとしてわかりやすい例としては、ECサイトの商品ページでは、タイトルや本文の他に価格や色、生産地域などさまざまな商品ごと（ページごと）のデータを設定する必要がありますが、そのようなデータをカスタムフィールドという仕組みを使って設定することになります。
今回はカスタムタクソノミーのカスタムフィールドになるので、例えば、タクソノミーごとの色データや画像などを追加データとして実装することが可能です。
もしカスタムフィールドについてより詳しく知りたい方は、以下の記事をご確認いただけましたら幸いです。
カスタムタクソノミーのカスタムフィールド実装方法
それでは早速、カスタムタクソノミーのカスタムフィールドの実装方法を解説いたします。
ここでは実装として以下を行いたいと思います。
- 投稿にカスタムタクソノミー（ID名：custom_taxonomy）を作成
- 作成したカスタムタクソノミーにテキストのカスタムフィールドの入力UIを編集画面に追加
- 編集画面に追加したテキストのカスタムフィールドの保存処理を追加
- 作成したカスタムタクソノミーにテキストのカスタムフィールドの入力UIを新規追加画面に追加
- 新規追加画面に追加したテキストのカスタムフィールドの保存処理を追加
そして、上記それぞれを全て実装しているソースコードが以下になります。実装する際は、以下のコードをfunctions.phpにそのままコピー＆ペーストしてください。
<?php
// カスタムタクソノミーの追加
function create_custom_taxonomy() {
register_taxonomy(
'custom_taxonomy', // タクソノミーのスラッグ（内部名）
'post', // 適用する投稿タイプ（例: 'post' や 'page'）
array(
'label' => 'カスタムタクソノミー',
'hierarchical' => true, // true = カテゴリー型 / false = タグ型
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'custom-taxonomy'),
)
);
}
add_action('init', 'create_custom_taxonomy');
// タクソノミーの追加フィールド（編集画面）
function add_custom_taxonomy_fields($term) {
$custom_field_value = get_term_meta($term->term_id, 'custom_field_key', true);
?>
<tr class="form-field">
<th scope="row"><label for="custom_field_key">追加フィールド</label></th>
<td>
<input type="text" name="custom_field_key" id="custom_field_key" value="<?php echo esc_attr($custom_field_value); ?>">
<p class="description">このタクソノミーに関する追加情報を入力してください。</p>
</td>
</tr>
<?php
}
add_action('custom_taxonomy_edit_form_fields', 'add_custom_taxonomy_fields');
// タクソノミーの編集フィールド（編集画面）
function save_custom_taxonomy_fields($term_id) {
if (isset($_POST['custom_field_key'])) {
update_term_meta($term_id, 'custom_field_key', sanitize_text_field($_POST['custom_field_key']));
}
}
add_action('edited_custom_taxonomy', 'save_custom_taxonomy_fields');
// タクソノミーの追加フィールド（新規追加画面）
function add_custom_taxonomy_fields_new($term) {
?>
<div class="form-field">
<label for="custom_field_key">追加フィールド</label>
<input type="text" name="custom_field_key" id="custom_field_key" value="">
<p class="description">このタクソノミーに関する追加情報を入力してください。</p>
</div>
<?php
}
add_action('custom_taxonomy_add_form_fields', 'add_custom_taxonomy_fields_new');
// タクソノミーの編集フィールド（新規追加画面）
function save_custom_taxonomy_fields_new($term_id) {
if (isset($_POST['custom_field_key'])) {
update_term_meta($term_id, 'custom_field_key', sanitize_text_field($_POST['custom_field_key']));
}
}
add_action('created_custom_taxonomy', 'save_custom_taxonomy_fields_new');ペーストが完了したら、WordPress管理画面をご確認ください。
すると、下図のようにWordPress管理画面左メニュー「投稿」に「カスタムタクソノミー」が追加されていることを確認できるかと思います。
クリックしていただくと、カスタムタクソノミー（ID名：custom_taxonomy）として、新規追加画面を開くことが可能です。
ご確認いただくと、画面下部に「追加フィールド」ということでテキスト入力機能を追加されていることと思います。テキストを入力後「カテゴリーの追加」をクリックすれば「追加フィールド」のテキストデータを含めてタームを追加することができます。
（タームってなに？と思った方はよろしければこちらの記事をご確認ください）
試しに何かしら適当に入力して追加してみてください。追加したら、下図のように追加されるかと思います。追加したタームのテキストリンクをクリックしましょう。
クリックすると、下図のようにちゃんと編集画面が開き、「追加フィールド」が追加されていることと思います。データとしてちゃんと入力していたテキストが保存されていることと思います。
これでカスタムタクソノミーを実装し、カスタムフィールドを追加することができました。お疲れ様でした！
実装したカスタムフィールドの表示
カスタムタクソノミーにデータ保存周りの実装ができたら、次は追加したカスタムフィールドの表示の実装方法についても解説いたします。
実装において入力と出力はセットになるので、ここでしっかりおさえておきましょう。
それでは早速表示の実装ですが、内容としては現在表示している投稿に紐づけられたカスタムタクソノミーの各タームを取得し表示する実装コードを解説いたします。
以下のコードをテーマファイルのsingle.php等投稿ページなどのPHPテンプレートのお好きなコードの箇所にコピー＆ペーストしてください。
<?php
$terms = get_the_terms( get_the_ID(), 'custom_taxonomy' );
if ( $terms && ! is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
$custom_field = get_term_meta( $term->term_id, 'custom_field_key', true );
if ( $custom_field ) {
echo '<p><strong>' . esc_html( $term->name ) . ' の追加情報：</strong> ' . esc_html( $custom_field ) . '</p>';
}
}
}上記コードは、現在表示している投稿に紐づけられたカスタムタクソノミー「custom_taxonomy」の各ターム（分類）を取得し、それぞれのタームに保存されているカスタムフィールド「custom_field_key」の値を取得して表示する処理です。
まず、get_the_terms()関数を使って投稿に設定されているタームを取得し、その結果が存在しエラーでないことを確認します。次に、各タームに対して get_term_meta()関数を使い、カスタムフィールドの値を取得します。
もし値が存在していれば、「ターム名 の追加情報：○○」という形式で画面に出力されます。
この処理により、投稿に関連するカスタムタクソノミーごとの補足情報を、フロントエンド上に動的に表示することができます。
上記コードは他にもいろいろな実装で参考になりますので、ここでしっかり確認しておきましょう。
ちなみにポイントとなるget_term_meta()関数については以下の公式ドキュメントからご確認いただけます。よろしければご確認ください。
画像のカスタムフィールドを実装する方法
基本的な実装方法がわかったと思うので、次は画像のカスタムフィールドを実装する方法について解説したいと思います。
画像のカスタムフィールドを追加できれば、例えばタームごとのアーカイブページでその設定した画像をページのサムネイル画像として表示させり、OGP画像として設定したりするなど色々と応用することが可能です。
実装する場合は、以下のコードをfunctions.phpにそのままコピー＆ペーストしてください。
<?php
// カスタムタクソノミーの追加
function create_custom_taxonomy() {
register_taxonomy(
'custom_taxonomy',
'post',
array(
'label' => 'カスタムタクソノミー',
'hierarchical' => true,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'custom-taxonomy'),
)
);
}
add_action('init', 'create_custom_taxonomy');
// メディアアップローダー用のJSを読み込む
function custom_taxonomy_media_script() {
if (!isset($_GET['taxonomy']) || $_GET['taxonomy'] !== 'custom_taxonomy') return;
wp_enqueue_media();
?>
<script>
jQuery(document).ready(function($){
let mediaUploader;
function bindUploader(buttonSelector, inputSelector, previewSelector) {
$(document).on('click', buttonSelector, function(e){
e.preventDefault();
const button = $(this);
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media({
title: '画像を選択',
button: { text: 'この画像を使う' },
multiple: false
});
mediaUploader.on('select', function(){
const attachment = mediaUploader.state().get('selection').first().toJSON();
$(inputSelector).val(attachment.url);
$(previewSelector).attr('src', attachment.url).show();
});
mediaUploader.open();
});
}
bindUploader('#custom_taxonomy_image_upload_button', '#custom_taxonomy_image', '#custom_taxonomy_image_preview');
bindUploader('#custom_taxonomy_image_upload_button_new', '#custom_taxonomy_image_new', '#custom_taxonomy_image_preview_new');
});
</script>
<style>
.custom-taxonomy-image-preview {
max-width: 100px;
margin-top: 10px;
display: block;
}
</style>
<?php
}
add_action('admin_footer', 'custom_taxonomy_media_script');
// 編集画面でフィールド表示
function add_custom_taxonomy_fields($term) {
$image_url = get_term_meta($term->term_id, 'custom_taxonomy_image', true);
?>
<tr class="form-field">
<th scope="row"><label for="custom_taxonomy_image">画像</label></th>
<td>
<input type="text" name="custom_taxonomy_image" id="custom_taxonomy_image" value="<?php echo esc_attr($image_url); ?>" style="width:60%;">
<input type="button" id="custom_taxonomy_image_upload_button" class="button" value="画像を選択">
<img id="custom_taxonomy_image_preview" class="custom-taxonomy-image-preview" src="<?php echo esc_url($image_url); ?>" <?php echo $image_url ? '' : 'style="display:none;"'; ?>>
<p class="description">このタクソノミーの画像を選択してください。</p>
</td>
</tr>
<?php
}
add_action('custom_taxonomy_edit_form_fields', 'add_custom_taxonomy_fields');
// 保存処理（編集）
function save_custom_taxonomy_fields($term_id) {
if (isset($_POST['custom_taxonomy_image'])) {
update_term_meta($term_id, 'custom_taxonomy_image', esc_url_raw($_POST['custom_taxonomy_image']));
}
}
add_action('edited_custom_taxonomy', 'save_custom_taxonomy_fields');
// 新規追加画面でフィールド表示
function add_custom_taxonomy_fields_new($taxonomy) {
?>
<div class="form-field">
<label for="custom_taxonomy_image_new">画像</label>
<input type="text" name="custom_taxonomy_image" id="custom_taxonomy_image_new" value="" style="width:60%;">
<input type="button" id="custom_taxonomy_image_upload_button_new" class="button" value="画像を選択">
<img id="custom_taxonomy_image_preview_new" class="custom-taxonomy-image-preview" src="" style="display:none;">
<p class="description">このタクソノミーの画像を選択してください。</p>
</div>
<?php
}
add_action('custom_taxonomy_add_form_fields', 'add_custom_taxonomy_fields_new');
// 保存処理（新規追加）
function save_custom_taxonomy_fields_new($term_id) {
if (isset($_POST['custom_taxonomy_image'])) {
update_term_meta($term_id, 'custom_taxonomy_image', esc_url_raw($_POST['custom_taxonomy_image']));
}
}
add_action('created_custom_taxonomy', 'save_custom_taxonomy_fields_new');ペーストが完了したら、管理画面をご確認ください。
下図のように画像の設定UIが追加されていることと思います。メディアアップローダーという仕組みで実装されているため、画像も追加設定しやすいUIとなっているかと思います。
これで実装は完了です。お疲れ様でした！
カラー設定のカスタムフィールドを実装する方法
次はカラーのカスタムフィールドを実装する方法について解説したいと思います。
カラーのカスタムフィールドを追加できれば、例えばタームごとにアイコンの背景色を変えることができたりできます。
実装する場合は、以下のコードをfunctions.phpにそのままコピー＆ペーストしてください。
<?php
// タクソノミー登録（すでにある場合は省略可）
function create_custom_taxonomy() {
register_taxonomy(
'custom_taxonomy',
'post',
array(
'label' => 'カスタムタクソノミー',
'hierarchical' => true,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'custom-taxonomy'),
)
);
}
add_action('init', 'create_custom_taxonomy');
// カラーピッカーの読み込みと初期化
function enqueue_custom_taxonomy_color_picker() {
if (isset($_GET['taxonomy']) && $_GET['taxonomy'] === 'custom_taxonomy') {
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('custom-taxonomy-color-script', '', [], false, true); // ダミー登録（下でインライン出力）
add_action('admin_footer', function () {
?>
<script>
jQuery(document).ready(function($) {
$('.custom-taxonomy-color-field').wpColorPicker();
});
</script>
<?php
});
}
}
add_action('admin_enqueue_scripts', 'enqueue_custom_taxonomy_color_picker');
// 編集画面（既存ターム用）
function add_custom_taxonomy_color_field_edit($term) {
$color = get_term_meta($term->term_id, 'custom_taxonomy_color', true);
?>
<tr class="form-field">
<th scope="row"><label for="custom_taxonomy_color">カラー設定</label></th>
<td>
<input type="text" name="custom_taxonomy_color" id="custom_taxonomy_color" class="custom-taxonomy-color-field" value="<?php echo esc_attr($color); ?>" />
<p class="description">このタクソノミーに色を設定してください。</p>
</td>
</tr>
<?php
}
add_action('custom_taxonomy_edit_form_fields', 'add_custom_taxonomy_color_field_edit');
// 編集画面：保存処理
function save_custom_taxonomy_color_field_edit($term_id) {
if (isset($_POST['custom_taxonomy_color'])) {
update_term_meta($term_id, 'custom_taxonomy_color', sanitize_hex_color($_POST['custom_taxonomy_color']));
}
}
add_action('edited_custom_taxonomy', 'save_custom_taxonomy_color_field_edit');
// 新規追加画面（新規ターム用）
function add_custom_taxonomy_color_field_add($taxonomy) {
?>
<div class="form-field">
<label for="custom_taxonomy_color">カラー設定</label>
<input type="text" name="custom_taxonomy_color" id="custom_taxonomy_color" class="custom-taxonomy-color-field" value="#000000" />
<p class="description">このタクソノミーに色を設定してください。</p>
</div>
<?php
}
add_action('custom_taxonomy_add_form_fields', 'add_custom_taxonomy_color_field_add');
// 新規追加画面：保存処理
function save_custom_taxonomy_color_field_add($term_id) {
if (isset($_POST['custom_taxonomy_color'])) {
update_term_meta($term_id, 'custom_taxonomy_color', sanitize_hex_color($_POST['custom_taxonomy_color']));
}
}
add_action('created_custom_taxonomy', 'save_custom_taxonomy_color_field_add');ペーストが完了したら、管理画面をご確認ください。
下図のようにカラーの設定UIが追加されていることと思います。カラーピッカーという仕組みで実装されているため、色の追加設定がしやすいUIとなっているかと思います。
これで実装は完了です。お疲れ様でした！
もし他の種類のカスタムフィールドを実装したい場合はAIを使ってプロンプトをたたいてコードを生成してみてください。
まとめ
今回は、WordPressのカスタムタクソノミーにカスタムフィールドを実装する方法について徹底解説しました。
カスタムタクソノミーは、WordPressの標準機能である「カテゴリー」や「タグ」以上に、投稿を柔軟に分類したいときに非常に役立つ機能です。そこに独自のカスタムフィールドを組み合わせることで、より自由度の高いサイト設計が可能になります。
カスタムタクソノミーとカスタムフィールドを自在に扱えるようになることで、WordPress開発の幅は一気に広がります。クライアントワークや自社サイトの構築など、さまざまなシーンで活用できるテクニックですので、ぜひ実際の案件やプロジェクトでお役立ていただければ幸いです。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など