MENU

カテゴリー、タグ、タームなどアーカイブページを投稿画面で編集する方法

WordPressでは、カスタム投稿タイプやカスタムタクソノミー(カテゴリやタグなど)を利用することで柔軟なコンテンツ管理が可能です。しかし、ターム(タクソノミーの項目)ごとに記事を紐づけて管理し、タームアーカイブページに特定の投稿を表示するには、カスタマイズが必要です。

本記事では、カスタム投稿タイプとタクソノミーを関連づけ、タームの編集画面で関連する記事IDを入力・保存し、アーカイブページに表示する方法を紹介します。

目次

解説

このカスタマイズでは、ターム編集画面に記事ID入力欄を追加し、そのIDに紐づいた投稿をタクソノミーのアーカイブページに表示します。以下のような場面で役立ちます:

専門的なブログや学習サイト

各ターム(タグやカテゴリ)に関連する特定のリファレンス記事を自動で表示することで、ユーザーの理解を深めます。例:プログラミングのタグ「JavaScript」に関連する詳細な解説記事を表示。

商品カタログやECサイト

カテゴリーやタグに紐づけた商品ガイドやレビュー記事を表示し、購入を促進します。例:「夏のコーディネート」カテゴリーに関連する特定のファッション記事を自動で表示。

ポートフォリオサイト

制作実績のカテゴリに、関連するプロジェクトの紹介ページを自動的に表示します。例:「ウェブデザイン」タームのアーカイブに、その分野の特定の事例を表示。

イベント管理サイト

イベントカテゴリーに対応する準備ガイドや過去イベントのレポート記事を関連付け、ユーザーの参加を促します。例:ターム「オンラインセミナー」に関連する参加マニュアルを表示。

地域情報サイトや観光案内サイト

観光地や施設のカテゴリに、特定のスポット紹介記事を紐づけて表示します。例:「京都の観光」タームに関連する「嵐山観光のコツ」記事を表示。

メディアサイトやニュースサイト

タグに関連する特集記事や最新ニュースを自動表示することで、読者の興味を引きやすくします。例:「テクノロジー」タグに紐づけて、注目のガジェットレビュー記事を表示。

アーカイブページを充実させるためのカスタマイズ方法です。

ソース例

// カスタム投稿タイプ「product」を登録
add_action('init', 'create_custom_post_types');
function create_custom_post_types() {
    $args = array(
        'label' => '商品',
        'public' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'has_archive' => true,
        'show_in_rest' => true,
    );
    register_post_type('product', $args);

    // カスタムタクソノミー「product-category」を登録
    register_taxonomy(
        'product-category',
        'product',
        array(
            'label' => '商品カテゴリー',
            'hierarchical' => true,
            'show_in_rest' => true,
        )
    );
}

// タクソノミー編集画面に記事ID入力フィールドを追加
function add_product_id_field_to_category($term) {
    $related_post_id = get_term_meta($term->term_id, 'related_product_id', true);
    ?>
    <tr class="form-field">
        <th scope="row"><label for="related-product-id">関連商品ID</label></th>
        <td>
            <input type="text" name="related_product_id" id="related-product-id" 
                   value="<?php echo esc_attr($related_post_id); ?>">
            <p class="description">このカテゴリーに関連する商品のIDを入力してください。</p>
        </td>
    </tr>
    <?php
}
add_action('product-category_edit_form_fields', 'add_product_id_field_to_category');

// タクソノミーの保存時に入力したIDを保存
function save_product_id($term_id) {
    if (isset($_POST['related_product_id'])) {
        update_term_meta($term_id, 'related_product_id', sanitize_text_field($_POST['related_product_id']));
    }
}
add_action('edited_product-category', 'save_product_id');

// タームアーカイブページに関連する商品を表示する処理
function display_related_product_in_category() {
    $term_id = get_queried_object_id();
    $related_post_id = get_term_meta($term_id, 'related_product_id', true);

    if ($related_post_id) {
        $related_post = get_post($related_post_id);
        if ($related_post && $related_post->post_type === 'product') {
            echo '<div class="related-product">';
            echo apply_filters('the_content', $related_post->post_content);
            echo '</div>';
        }
    } else {
        echo '<p>このカテゴリーには関連する商品がありません。</p>';
    }
}
add_action('the_content', 'display_related_product_in_category');
register_post_type()

カスタム投稿タイプ「product」を登録します。記事本文やアイキャッチ画像などのサポートが有効化されています。

register_taxonomy()

「product-category」というカスタムタクソノミーを登録し、product投稿タイプと紐づけます。

add_action('product-category_edit_form_fields', ...)

タクソノミーの編集画面に、記事IDを入力するフィールドを追加します。

update_term_meta()

ターム編集画面で保存された記事IDをデータベースに保存します。

display_related_product_in_category()

タームアーカイブページで、関連する商品の投稿を表示する関数です。

使用しているタグ

  • register_post_type()
  • register_taxonomy()
  • get_term_meta()
  • update_term_meta()
  • add_action()
  • get_post()
  • apply_filters()

テンプレートファイルを作成する

// 現在のタームID(商品カテゴリーのID)を取得
$category_id = get_queried_object_id();

// カテゴリーメタから関連する商品ガイド記事IDを取得
$guide_post_id = get_term_meta($category_id, 'related_product_id', true);

// 関連する商品ガイド記事がある場合に表示
if ($guide_post_id) {
    $guide_post = get_post($guide_post_id);

    if ($guide_post && $guide_post->post_type === 'product') {
        echo '<div class="guide-post">';
        echo '<h2>おすすめガイド記事</h2>';
        echo '<h3>' . esc_html(get_the_title($guide_post_id)) . '</h3>';
        echo apply_filters('the_content', get_post_field('post_content', $guide_post_id));
        echo '</div>';
    }
} else {
    echo '<p>このカテゴリーには関連するガイド記事がありません。</p>';
}

このコードでは、次の手順で処理が行われています:

get_queried_object_id()

現在表示中のターム(カテゴリーやタグ)のIDを取得します。

get_term_meta()

タームに保存されたカスタムメタデータ(この場合はガイド記事のID)を取得します。

get_post()

取得したIDに基づいて、特定のカスタム投稿タイプ(product)の投稿を取得します。

apply_filters('the_content', ...)

取得した投稿の本文をWordPressのフィルタで整形して表示します。

条件分岐

設定された記事IDが存在し、取得した投稿のタイプが product であれば、その記事を表示します。

使用しているタグ

  • get_queried_object_id()
  • get_term_meta()
  • get_post()
  • apply_filters()
  • get_post_field

想定されるトラブル

関連する記事IDが正しく表示されない

スラッグ名のミスや、記事が公開されていない可能性があります。

ターム編集画面で入力した値が保存されない

フック名の指定ミスや、フォームフィールドのname属性に誤りがないか確認しましょう。

アーカイブページに表示が反映されない

キャッシュが原因の可能性があるため、キャッシュをクリアしてください。

関連する商品が表示されない

関連IDが間違っているか、取得する投稿タイプが異なっている可能性があります。

カテゴリー編集画面での保存が反映されない

update_term_meta() が正しく動作しているか、フックの使用に誤りがないかを確認してください。

Q&A

入力した記事IDに紐づいた投稿が表示されません。

記事IDが存在するか、指定した投稿タイプが一致しているか確認しましょう。

ターム編集画面にフィールドが表示されません。

使用しているタクソノミー名がフックと一致しているか確認してください。

関連する複数の投稿を表示したい場合はどうすれば良いですか?

related_product_idの代わりに、配列を用いたカスタムメタデータを保存し、get_posts()で複数投稿を取得するように変更します。

カスタム投稿タイプのアーカイブページが正しく表示されない場合の原因は?

パーマリンク設定を更新する必要があるか、has_archive パラメータが適切に設定されているか確認してください。

まとめ

このカスタマイズにより、ターム編集画面で関連する投稿を指定でき、アーカイブページで表示することが可能になります。特定の商品や記事をタクソノミーに結びつけることで、ユーザーにとって便利な情報提供が可能になります。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

WordPress Love! 休日はほぼWordPress仲間と一緒に勉強会や写真を撮りに行っています。現在育児中のため、オフが多いです(>△<<<)

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次