WordPressの投稿ループで親カテゴリのみを表示する方法

ウェブサイト上のコンテンツを整理することの重要性は、誰もが知っています。WPBeginnerでは、カテゴリとサブカテゴリを使用することで、訪問者がサイトを探索しやすくなり、検索結果でのランキングも向上すると理解しています。優れたカテゴリ構造は、訪問者が必要なものを見つけるのにも役立ちます。

ほとんどのWordPressテーマは、サブカテゴリを含め、投稿に関連付けられたすべてのカテゴリを自動的に一覧表示します。これは訪問者にとって非常に混乱を招く可能性があります。しかし、最近、読者から単一投稿ページでメインカテゴリのみを表示したいという要望がありました。多くのサブカテゴリに圧倒されるのではなく、メインのトピックに焦点を当ててほしいと考えていました。

この記事では、簡単なコードを使用してWordPressのカテゴリ表示方法を変更する方法を紹介します。これにより、単一投稿ページでメインカテゴリのみを表示できるようになり、訪問者にとってのサイト体験を大幅に向上させることができます。

WordPressで親カテゴリのみを表示するのはいつか

多くのウェブサイト所有者は、ウェブサイトの構造を作成するために親カテゴリと子カテゴリを使用しています。

たとえば、旅行ブログでは、各地域を親カテゴリ、都市を子カテゴリとして、カテゴリ別に整理された旅行先を持つことができます。

同様に、料理ブログでは、親カテゴリと子カテゴリに整理されたレシピを公開できます。たとえば、親カテゴリは料理の種類、子カテゴリは料理の種類にすることができます。

現在、ほとんどのWordPressテーマでは、投稿に関連付けられたすべてのカテゴリを一覧表示するために、the_category() テンプレートタグを使用しています。

この関数は効率的ですが、すべてのカテゴリをアルファベット順に表示し、親/子の関係を完全に無視します。

それでは、この動作を変更し、WordPressループで親カテゴリのみを表示する方法を見てみましょう。

WordPress投稿ループで親カテゴリのみを表示する

このチュートリアルでは、WordPressのテーマファイルを編集する必要があります。以前にこれを行ったことがない場合は、WordPressにコードスニペットをコピーして貼り付ける方法に関する記事をご覧ください。

まず、テーマのfunctions.phpファイルにコードを追加するか、コードスニペットプラグインを使用する必要があります。サイトを壊すことなくコードを追加でき、スマートコードスニペット検証機能が一般的なコードエラーを防ぐのに役立つため、WPCodeの使用をお勧めします。

サイトを壊すことなくWordPressにカスタムコードを追加する方法に関するガイドで詳細をご覧ください。

このチュートリアルでは、WPCodeの無料版を使用します。フルバージョンにはすべての高度な機能はありませんが、開始するために必要なすべてが揃っています。

最初に行う必要があるのは、WPCodeプラグインをインストールしてアクティブ化することです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドに従ってください。

有効化したら、WPCode » 新規スニペットページに移動できます。

これにより、カスタムスニペットを作成できるページが開きます。

まず、スニペットのタイトルを追加する必要があります。その後、以下のコードスニペットをコードプレビューペインにコピー＆ペーストできます。

function wpb_get_parent_terms($taxonomy = 'category')
{
    $currentPost = get_post();
    $terms       = get_the_terms($currentPost->ID, $taxonomy);

    if (is_wp_error($terms)) {
        /** @var \WP_Error $terms */
        throw new \Exception($terms->get_error_message());
    }

    $map = array_map(
        function ($term) use ($taxonomy) {
            return '<a href="' . esc_url(get_term_link($term->term_id,
                    $taxonomy)) . '" title="' . esc_attr($term->name) . '">
                ' . $term->name . '
                </a>';
        },
        array_filter($terms, function ($term) {
            return $term->parent == 0;
        })
    );

    return implode(', ', $map);
}

次に、コードタイプのドロップダウンメニューから「PHPスニペット」オプションを選択し、「非アクティブ」スイッチを「アクティブ」に切り替える必要があります。

最後に、「スニペットを保存」ボタンをクリックして設定を保存してください。

このコードは、単純に新しい関数 wpb_get_parent_terms() を作成します。デフォルトでは、この関数は親カテゴリのみを表示します。

次に、この関数を、親カテゴリのみを表示したいWordPressテーマファイルに配置する必要があります。

どのテンプレートファイルを確認する必要があるかを判断するには、初心者向けのWordPressテンプレート階層チートシートをご覧ください。

基本的に、WordPressループ内のthe_category()テンプレートタグを探します。見つけたら、次のコードに置き換える必要があります。

<?php wpb_get_parent_terms(); ?> 

このコードは、親カテゴリのみを表示します。

親またはスタンドアロンカテゴリが複数ある場合、それらのカテゴリもすべて表示されます。

このコードスニペットは、他のすべてのタクソノミーでも機能します。例えば、WooCommerceの製品カテゴリや、お持ちのカスタムタクソノミーなどです。

コードを次のように変更するだけです。

<?php wpb_get_parent_terms( 'product_cat '); ?>

このコードは、WooCommerceストアの製品カテゴリを表示します。

また、製品の親カテゴリまたはスタンドアロンカテゴリのみを表示します。

カスタムタクソノミーを表示したい場合は、product_cat をカスタムタクソノミー名に置き換えてください。

WordPressでカテゴリを表示するための専門家向けガイド

この記事が、WordPress投稿の親カテゴリのみを表示する方法を学ぶのに役立ったことを願っています。WordPressカテゴリの表示に関連する他のガイドも参照したいかもしれません。

• WordPressの投稿ループで子カテゴリのみを表示する方法
• WordPressでカテゴリページにサブカテゴリを表示する方法
• WordPressでカテゴリーの説明を表示する方法
• WordPress でカテゴリの順序を変更する方法
• WordPressで特定のカテゴリの最新投稿を表示する方法
• WordPressでカテゴリを表示/非表示する方法（究極ガイド）
• WordPressウィジェットで空のカテゴリを表示する方法
• WordPressで個別のカテゴリを異なる方法でスタイル設定する方法
• WordPressでサブカテゴリを非表示またはスタイル設定する方法
• WordPressにタクソノミー画像（カテゴリアイコン）を追加する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。