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

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

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

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

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

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

例えば、旅行ブログでは、各地域を親カテゴリ、都市を子カテゴリとして、旅行先をカテゴリ別に整理している場合があります。

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

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

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

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

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

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

まず、テーマのfunctions.phpファイルにコードを追加するか、コードスニペットプラグインを使用する必要があります。WPCodeは、サイトを壊すことなくコードを追加でき、スマートコードスニペット検証により一般的なコードエラーを防ぐことができるため、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でもフォローできます。