WordPressのカテゴリー一覧ページはデフォルトのままだと味気ないですが、特定の子カテゴリー(サブカテゴリー)の一覧ページにバナーを挿入したり、レイアウトを変更することで、より魅力的なページを作成できます。
本記事では、特定の子カテゴリーの一覧ページにバナーを挿入する方法や、その他のカスタマイズ方法について詳しく解説します。
1. WordPressのカテゴリー一覧ページとは?
WordPressでは、投稿にカテゴリーを設定することで、カテゴリーごとに一覧ページ(アーカイブページ)が自動生成されます。
カテゴリーには「親カテゴリー」と「子カテゴリー(サブカテゴリー)」があり、特定の子カテゴリーの一覧ページのみをカスタマイズする方法を知っておくと、柔軟なデザインが可能になります。
2. 子カテゴリーの一覧ページにバナーを挿入する方法
2-1. category-slug.php
または category-ID.php
を作成する
WordPressのテンプレート階層を利用して、特定の子カテゴリー専用のテンプレートファイルを作成します。
- 使用しているテーマのフォルダ(
wp-content/themes/テーマ名/
)に移動します。 category.php
をコピーし、category-スラッグ.php
またはcategory-カテゴリーID.php
として保存します。- 例: 小カテゴリーのスラッグが
news
ならcategory-news.php
を作成 - 例: カテゴリーIDが
15
ならcategory-15.php
を作成
- 例: 小カテゴリーのスラッグが
- このファイルを編集することで、特定の子カテゴリーのみのデザインを変更できます。
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
このプラグインを使うと、カテゴリーごとにアイキャッチ画像(サムネイル)を設定できます。
設定方法:
- プラグインをインストール
- WordPress管理画面の「プラグイン」→「新規追加」から
Category Featured Image
を検索してインストール&有効化。
- WordPress管理画面の「プラグイン」→「新規追加」から
- カテゴリーごとにバナー画像を設定
- 「投稿」→「カテゴリー」から編集画面を開き、アイキャッチ画像を追加。
- テーマファイルで表示する
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 Builder や Elementor を活用
もしノーコードでデザインを変更したい場合は、
- WPBakery Page Builder
- Elementor
などのページビルダープラグインを使えば、カテゴリーごとのデザインを視覚的にカスタマイズできます。
4. まとめ
category-slug.php
またはcategory-ID.php
を作成してカスタマイズis_category()
関数を使って条件分岐でバナーを表示- プラグインを活用すれば簡単に設定可能
カテゴリーごとのデザインを変更すると、ユーザーの滞在時間が伸び、SEOにも好影響があります!
ぜひ、サイトに合った方法でカスタマイズを試してみてください。