Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

WPBeginnerでは、カテゴリーとサブカテゴリーの階層をうまく構築することで、ユーザーエクスペリエンスとSEOを改善できることを理解しています。

デフォルト設定では、ほとんどのWordPressテーマは投稿に関連するすべてのカテゴリーを一覧表示します。

しかし、ある読者から、投稿ループの中で親カテゴリーだけを表示し、子カテゴリーを除外することはできないかという質問がありました。彼らは、複雑な階層構造ではなく、各投稿の幅広いトピックに訪問者の注意を集中させたいと考えています。

この投稿では、コード・スニペットを使ってWordPressの投稿ループを変更し、個別投稿に親カテゴリーのみを表示する方法を紹介する。

Displaying only the parent category in WordPress loop

WordPressで親カテゴリーだけを表示する場合

多くのサイトオーナーは、親カテゴリーと子カテゴリーを使ってサイトの構造を作っている。

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

Parent and child categories displayed

同様に、料理ブログは、親カテゴリーと子カテゴリーで整理されたレシピを公開することができる。例えば、親カテゴリーは料理タイプで、子カテゴリーは料理タイプである。

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

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

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

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

このチュートリアルでは、WordPressテーマファイルを編集する必要があります。この作業を行ったことがない場合は、 WordPressでコードスニペットをコピー&ペーストする方法の投稿をご覧ください。

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

さらに詳しくは、サイトを壊すことなくWordPressにカスタムコードを追加する方法をご覧ください。

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

最初に行う必要があるのは、WPCodeプラグインをインストールして有効化することです。もし助けが必要であれば、WordPressプラグインのインストール方法のステップバイステップガイドに従ってください。

有効化した後、WPCode ” New Snippetのページに行くことができます。

Adding a New Snippet in 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);
}
Adding a Title and Code Snippet to WPCode

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

最後に、’Save Snippet’ボタンをクリックして設定を保存してください。

In WPCode, Select PHP as the Code Type and Toggle the Snippet Active

このコードでは、単に新しい関数wpb_get_parent_terms() を作成します。初期設定では、この関数は親カテゴリーだけを表示します。

次に、この関数をWordPressテーマファイルの親カテゴリーだけを表示したい場所に設置する必要がある。

どのテンプレートファイルを調べればよいかは、初心者向けのWordPressテンプレート階層チートシートをご覧ください。

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

<?php wpb_get_parent_terms(); ?> 

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

親カテゴリーや独立したカテゴリーが複数ある場合、そのようなカテゴリーもすべて表示されます。

Only parent category displayed

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

コードを次のように修正するだけだ:

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

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

また、商品の親カテゴリーまたは単独カテゴリーのみを表示します。

Only parent product category displayed

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

WordPressでカテゴリーを表示するエキスパートガイド

WordPressの投稿に親カテゴリーのみを表示する方法はお分かりいただけたと思いますが、WordPressのカテゴリー表示に関連する他のガイドもご覧ください:

この投稿が、WordPress投稿の親カテゴリーのみを表示する方法を学ぶのにお役に立てば幸いです。また、カスタムフィールドをループの外に表示する方法についてのガイド、またはあなたのサイトに最適なAIチャットボットソフトウェアのエキスパートピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

11件のコメント返信を残す

  1. Davide

    Great! And if i want to give a different css to these categories?

  2. Pedrille

    Awesome ! thks

  3. Nithi

    How to display only Child category? (Like in the image, “Thesis” above? )

    • Cami Tirapani

      I’m wondering the same thing. :/

      • Joseph

        I know its old, but that would just be the current category

  4. Kate M

    Didn’t work for me :(

  5. AselHora

    put date stamps to your posts. this way we know when you wrote it and not include code snippets 5 years old.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。