WordPressの子カテゴリー一覧ページをカスタマイズ!バナー挿入や編集方法を解説

WordPressの子カテゴリー一覧ページをカスタマイズ!バナー挿入や編集方法を解説

WordPressのカテゴリー一覧ページはデフォルトのままだと味気ないですが、特定の子カテゴリー(サブカテゴリー)の一覧ページにバナーを挿入したり、レイアウトを変更することで、より魅力的なページを作成できます。

本記事では、特定の子カテゴリーの一覧ページにバナーを挿入する方法や、その他のカスタマイズ方法について詳しく解説します。


1. WordPressのカテゴリー一覧ページとは?

WordPressでは、投稿にカテゴリーを設定することで、カテゴリーごとに一覧ページ(アーカイブページ)が自動生成されます。

カテゴリーには「親カテゴリー」と「子カテゴリー(サブカテゴリー)」があり、特定の子カテゴリーの一覧ページのみをカスタマイズする方法を知っておくと、柔軟なデザインが可能になります。


2. 子カテゴリーの一覧ページにバナーを挿入する方法

2-1. category-slug.php または category-ID.php を作成する

WordPressのテンプレート階層を利用して、特定の子カテゴリー専用のテンプレートファイルを作成します。

  1. 使用しているテーマのフォルダwp-content/themes/テーマ名/)に移動します。
  2. category.php をコピーし、category-スラッグ.php または category-カテゴリーID.php として保存します。
    • 例: 小カテゴリーのスラッグが news なら category-news.php を作成
    • 例: カテゴリーIDが 15 なら category-15.php を作成
  3. このファイルを編集することで、特定の子カテゴリーのみのデザインを変更できます。

2-2. テンプレート内にバナーを追加する

作成した category-スラッグ.php または category-ID.php にバナー画像を挿入します。

例: バナーをページの先頭に挿入

<?php if (is_category('news')): ?>
    <div class="category-banner">
        <img src="<?php echo get_template_directory_uri(); ?>/images/news-banner.jpg" alt="ニュースカテゴリー">
    </div>
<?php endif; ?>

CSSでデザインを調整

.category-banner {
    text-align: center;
    margin-bottom: 20px;
}
.category-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

この方法で、子カテゴリー「news」の一覧ページにのみバナーを表示できます。


3. プラグインを使って簡単にカスタマイズする方法

コードを直接編集したくない場合は、以下のプラグインを利用すると便利です。

3-1. Category Featured Image

このプラグインを使うと、カテゴリーごとにアイキャッチ画像(サムネイル)を設定できます。

設定方法:

  1. プラグインをインストール
    • WordPress管理画面の「プラグイン」→「新規追加」から Category Featured Image を検索してインストール&有効化。
  2. カテゴリーごとにバナー画像を設定
    • 「投稿」→「カテゴリー」から編集画面を開き、アイキャッチ画像を追加。
  3. テーマファイルで表示する
    • category.php に以下のコードを追加。
    <?php if (function_exists('z_taxonomy_image_url')): ?> <div class="category-banner"> <img src="<?php echo z_taxonomy_image_url(); ?>" alt="カテゴリーのバナー"> </div> <?php endif; ?>

3-2. WPBakery Page BuilderElementor を活用

もしノーコードでデザインを変更したい場合は、

  • WPBakery Page Builder
  • Elementor

などのページビルダープラグインを使えば、カテゴリーごとのデザインを視覚的にカスタマイズできます。


4. まとめ

  • category-slug.php または category-ID.php を作成してカスタマイズ
  • is_category() 関数を使って条件分岐でバナーを表示
  • プラグインを活用すれば簡単に設定可能

カテゴリーごとのデザインを変更すると、ユーザーの滞在時間が伸び、SEOにも好影響があります!

ぜひ、サイトに合った方法でカスタマイズを試してみてください。