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

私たちの経験では、WordPressの投稿に多くのカテゴリを追加すると、少し混雑し始める可能性があります。複数のカテゴリ、特に親カテゴリと子カテゴリは、レイアウトを散らかし、読者が探しているものを見つけにくくする可能性があります。

各投稿に子カテゴリのみを表示する方がクリーンではありませんか?

このガイドでは、WordPressテーマファイルを調整して、投稿ループに子カテゴリのみを表示する方法を説明します。これにより、ブログがより洗練され、ユーザーフレンドリーな雰囲気になります。

WordPressの投稿ループ内で子カテゴリのみを表示

WordPress投稿ループで子カテゴリのみを表示するには?

WordPressブログを作成する際、コンテンツを整理するためにカテゴリとタグを使用できます。

読者が興味のあるコンテンツをより早く見つけられるように、子カテゴリ(またはサブカテゴリ)を作成することも検討してください。

例えば、旅行ブログを持っている場合、「目的地」というカテゴリを作成し、その下に「ヨーロッパ」、「アメリカ」、「オーストラリア」などの子カテゴリを作成することができます。

デフォルトでは、ほとんどのWordPressテーマは、投稿のすべての親カテゴリと子カテゴリを表示します。

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

ただし、多くのカテゴリを使用すると、ブログのページが乱雑で複雑に見え始める可能性があります。また、読者が関心のあるカテゴリを見つけにくくなる可能性もあります。

そのため、投稿の一般的な親カテゴリを非表示にして、子カテゴリのみを表示したい場合があります。それでは、WordPressの投稿ループに子カテゴリのみを表示する方法を見てみましょう。

WordPressテーマファイルを編集する前に:覚えておくべき重要なポイント

このガイドは、WordPressのテーマファイルをコーディングおよび編集することに慣れている方を対象としています。チュートリアルに従う前に、いくつか確認しておきたいことがあります。

  1. まず、これらのファイルにアクセスするために、FTPでウェブサイトに接続するか、ウェブホストのファイルマネージャーを開く必要があります。
  2. 初心者の方は、事前に準備するために、ウェブ上のスニペットをWordPressに貼り付ける方法に関する初心者ガイドをご覧ください。
  3. この方法を試す前に、バックアップを作成するか、ステージングサイトを使用することをお勧めします。これにより、万が一問題が発生しても、ライブサイトに影響はありません。

最後に、このガイドは クラシックWordPressテーマにのみ適用されます。ブロックテーマは、テーマファイルの構造が異なります。

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

このチュートリアルでは、Bluehostのファイルマネージャーを使用してテーマファイルを編集する方法を説明します。ただし、ホスティングプロバイダーに関係なく、手順は同様であるはずです。

まず、Bluehostダッシュボードにログインし、「Webサイト」タブに移動します。次に、編集したいサイトの「設定」をクリックします。

Bluehostサイト設定

次に、クイックリンクセクションまでスクロールします。

次に、「ファイルマネージャー」ボタンをクリックします。

Bluehostでウェブサイトのファイルマネージャーにアクセスする

これでファイルマネージャーが開きます。

次に、カテゴリを表示するコードをテーマファイル内で見つける必要があります。これは、サイトの public_html フォルダ » wp-content » themes » 現在のテーマのフォルダ に移動することから始められます。

この段階では、正しいファイルを見つけるために、各ファイルとフォルダを1つずつ開く必要があるかもしれません。できることの1つは、has_category または get_the_category_listのようなカテゴリ関連のコードを探すことです。それらを見つけた場合、正しいファイルにいるはずです。

適切なテンプレートファイルが見つからない場合は、WordPressテンプレート階層のチートシートと、編集する適切なテーマファイルの見つけ方に関するガイドをご覧ください。

Twenty Twenty-One テーマを使用している場合、探すべきファイルは「inc」フォルダ内の template-tags ファイルです。見つけたら、ファイルを右クリックして「編集」を選択できます。

BluehostファイルマネージャーでTwenty Twenty Oneテーマのincフォルダを開く

ファイル内では、カテゴリとタグを表示しているのはこのスニペットです。

if ( has_category() || has_tag() ) {

				echo '<div class="post-taxonomies">';

				$categories_list = get_the_category_list( wp_get_list_item_separator() );
				if ( $categories_list ) {
					printf(
						/* translators: %s: List of categories. */
						'<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' </span>',
						$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
					);
				}

				$tags_list = get_the_tag_list( '', wp_get_list_item_separator() );
				if ( $tags_list && ! is_wp_error( $tags_list ) ) {
					printf(
						/* translators: %s: List of tags. */
						'<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
						$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
					);
				}
				echo '</div>';
			}
		} else {

適切なコードが見つかったら、そのスニペット全体をこれに置き換えることができます。

if ( has_category() || has_tag() ) {

    echo '<div class="post-taxonomies">';

    // Get the list of categories
    $categories = get_the_category();
    $child_cat_IDs = array(); // Array to store child category IDs
    $parent_cat_IDs = array(); // Array to store parent category IDs
 
    foreach ( $categories as $category ) {
        if ( $category->parent > 0 ) {
            $child_cat_IDs[] = $category->term_id; // Store the child category ID
        } else {
            $parent_cat_IDs[] = $category->term_id; // Store the parent category ID
        }
    }

    // Output child categories if there are any
    if ( !empty($child_cat_IDs) ) {
        $output = '<span class="cat-links">' . esc_html__( 'Categorized as ', 'twentytwentyone' ) . ' ';
        foreach ( $child_cat_IDs as $cat_id ) {
            $cat_link = get_category_link($cat_id);
            $cat_name = get_cat_name($cat_id);
            $output .= '<a href="' . esc_url($cat_link) . '">' . esc_html($cat_name) . '</a> ';
        }
        $output .= '</span>'; // Close the span tag after the loop
        echo $output; // Output the child category links

    // Output parent categories if there are no child categories
    } elseif ( !empty($parent_cat_IDs) ) {
        $output = '<span class="cat-links">' . esc_html__( 'Categorized as ', 'twentytwentyone' ) . ' ';
        foreach ( $parent_cat_IDs as $cat_id ) {
            $cat_link = get_category_link($cat_id);
            $cat_name = get_cat_name($cat_id);
            $output .= '<a href="' . esc_url($cat_link) . '">' . esc_html($cat_name) . '</a> ';
        }
        $output .= '</span>'; // Close the span tag after the loop
        echo $output; // Output the parent category links
    }

    // Handle tags
    $tags_list = get_the_tag_list('', wp_get_list_item_separator());
    if ( $tags_list && ! is_wp_error( $tags_list ) ) {
        printf(
            /* translators: %s: List of tags. */
            '<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
            $tags_list // phpcs:ignore WordPress.Security.EscapeOutput
        );
    }

    echo '</div>'; // Close post-taxonomies div
}
} else {

このコードスニペットは、まず投稿に割り当てられているすべてのカテゴリを特定します。次に、各カテゴリに親があるかどうかを確認します。

もしそうであれば、それは子カテゴリであり、表示リストに追加されます。親カテゴリはスキップされ、投稿のカテゴリ分けがよりクリーンで具体的になります。

コードを置き換えると、次のようになります。

Bluehostファイルマネージャーを使用して、投稿ループ内のカテゴリリストを表示するコードを変更する

完了したら、変更を保存してください。

次に、1つ以上のサブカテゴリを持つ投稿にアクセスする必要があります。親カテゴリが非表示になり、WordPressがサブカテゴリのみを表示していることがわかります。

投稿ループで子カテゴリのみを表示するようにコードを編集した結果

この記事が、WordPressの投稿に子カテゴリのみを表示する方法を学ぶのに役立ったことを願っています。次に、WordPressで個々のカテゴリを異なるスタイルにする方法に関する記事や、WordPressでカテゴリ別に検索する方法の初心者向けガイドをご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

10 CommentsLeave a Reply

  1. 解決しました!

    foreach((get_the_category()) as $childcat) {
    $parentcat = $childcat->category_parent;
    if (cat_is_ancestor_of(10, $childcat)) {
    echo get_cat_name($parentcat);
    }
    }

  2. 私は3つの主要なカテゴリを持っており、このコードは単一ページのループで正常に機能し、実際に選択されたカテゴリ名を出力しています。
    次に、そのカテゴリの親を出力したいと考えています。複雑なのは、主要カテゴリの下に2つの階層(合計3階層)があり、最上位の親ではなく、1つ下の階層の親を出力したいということです。最上位の親を出力するのは簡単そうですが、孫カテゴリの子レベルカテゴリを返すコードを見たことがありませんか?

  3. これは素晴らしいコードです。今のところ本当にありがとうございます!

    私のプロジェクトの1つでは、さらに進んで、最も低いサブカテゴリのみを表示する必要があります。したがって、3つのレベル(フォーム -> 四角形 -> 大きな四角形)がある場合があります。このコードでは、すべてのサブ(四角形 -> 大きな四角形)が表示されます。このコードに、最後の子供が見つかって表示されるまでプロセスを繰り返すように指示するにはどうすればよいですか?

    そのための解決策があれば、皆さんは再び私のヒーローです!素晴らしい仕事とブログを続けてください!

  4. これは素晴らしい、ありがとう!

    しかし、cat 10だけでなく、すべてのカテゴリの子を表示するにはどうすればよいですか?

    Be great if someone could help with this. :)

    • すべての子カテゴリのリストを表示しようとしている場合は、wp_list_categories()関数を使用します。この関数には、子カテゴリのみ、または親カテゴリのみをリストするパラメータがあります。しかし、この記事で説明しているケースには当てはまりません。

      管理者

      • 素晴らしいですが、「カテゴリ10」ではなく「現在のカテゴリ」を表示したい場合はどうすればよいですか?

  5. 皆さんからの素晴らしい情報ですね。
    本当にPHPを始めないといけません。

    素晴らしいサイトですね、皆さん!そして、ページランク6に到達されたことに気づきました!
    ページランクを上げるための投稿をいくつか書いてみませんか?

返信する

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