初心者でもできる！WordPressでカテゴリー別バナーを設置する手順

はじめに

WordPressを使っていると、「特定のカテゴリーごとに異なるバナーを表示したい」と思うことはありませんか？この記事では、初心者でも簡単にカテゴリー別のバナーを設置する方法をわかりやすく解説します。コードを使った方法とプラグインを活用する方法の両方をご紹介します。

カテゴリー別バナーを設置する方法：コード編

1. 子テーマを作成しよう（推奨）

カスタマイズを安全に行うために、子テーマを作成して作業しましょう。

子テーマの作り方

1. wp-content/themesフォルダに新しいフォルダを作成（例: your-theme-child）。
2. style.cssとfunctions.phpを作成し、以下のコードを記述。

style.css:

/*
Theme Name: Your Theme Child
Template: your-theme
*/

functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

2. single.phpを編集する

カテゴリー別バナーを表示するために、single.phpにコードを追加します。

コード例

<?php
// 現在の投稿のカテゴリーを取得
$categories = get_the_category();

if ( ! empty( $categories ) ) {
    $category = $categories[0]->slug; // 最初のカテゴリーのスラッグを取得

    // カテゴリーごとに異なるバナーを表示
    if ( $category == 'category-slug-1' ) {
        echo '<img src="https://example.com/banner1.jpg" alt="カテゴリー1のバナー">';
    } elseif ( $category == 'category-slug-2' ) {
        echo '<img src="https://example.com/banner2.jpg" alt="カテゴリー2のバナー">';
    } else {
        echo '<img src="https://example.com/default-banner.jpg" alt="デフォルトバナー">';
    }
}
?>

• category-slug-1を表示したいカテゴリーのスラッグに置き換えます。
• バナー画像のURLも適切なものに変更してください。

カテゴリー別バナーを設置する方法：プラグイン編

1. プラグインをインストール

Advanced AdsやConditional Widgetsを使えば、コード不要で簡単にカテゴリーごとにバナーを設置できます。

おすすめプラグイン

• Advanced Ads: 広告管理プラグイン。カテゴリー別にバナーを設定可能。
• Widget Options: ウィジェットの表示条件を細かく設定できるプラグイン。

2. Advanced Adsの設定手順

1. インストール: WordPress管理画面からプラグインを検索してインストール＆有効化。
2. 広告を作成: プラグインの「Ads」メニューで新しい広告（バナー）を作成。
3. 表示条件を設定: 「Display Conditions」で特定のカテゴリーだけに表示する設定を行う。

カテゴリー別バナーを設置する方法：ウィジェット編

① カテゴリーごとにバナー画像を用意する

まず、カテゴリー別に使用するバナー画像を準備しましょう。画像のサイズは、表示する場所（サイドバーや記事上など）に合わせて適宜調整してください。

② バナー画像をメディアライブラリにアップロード

1. WordPressの管理画面にログイン
2. 「メディア」 → 「新規追加」 をクリック
3. バナー画像をアップロードし、それぞれの画像URLを控えておく

③ カテゴリーごとにバナーを表示するコードを追加

方法①：ウィジェットで設置（プラグイン不要）

1. 「外観」→「ウィジェット」を開く
2. 「カスタムHTML」ウィジェットを追加
3. 下記のようなHTMLコードを記入

<?php if (is_category('news')) : ?>
    <img src="https://example.com/banner-news.jpg" alt="ニュースカテゴリのバナー">
<?php elseif (is_category('event')) : ?>
    <img src="https://example.com/banner-event.jpg" alt="イベントカテゴリのバナー">
<?php else : ?>
    <img src="https://example.com/banner-default.jpg" alt="デフォルトバナー">
<?php endif; ?>

※ is_category('news') の ‘news’ はカテゴリーのスラッグに変更してください。

方法②：functions.phpで条件分岐（カスタマイズ向け）

1. WordPressの管理画面で「外観」→「テーマエディター」を開く
2. functions.php に以下のコードを追加

function category_banner() {
    if (is_category('news')) {
        echo '<img src="https://example.com/banner-news.jpg" alt="ニュースカテゴリのバナー">';
    } elseif (is_category('event')) {
        echo '<img src="https://example.com/banner-event.jpg" alt="イベントカテゴリのバナー">';
    } else {
        echo '<img src="https://example.com/banner-default.jpg" alt="デフォルトバナー">';
    }
}

3. バナーを表示したいテンプレート（例： sidebar.php）に、以下のコードを挿入

<?php category_banner(); ?>

④ 動作確認

ブラウザでカテゴリーのページを開き、それぞれのバナーが正しく表示されているか確認しましょう。

注意点とヒント

1. バナー画像は軽量化する：ページの読み込み速度を最適化するために、画像を圧縮してアップロードしましょう。
2. デザインを整える：CSSを使って、バナーの位置やサイズを調整することで見栄えを良くします。

まとめ

この記事では、WordPressでカテゴリー別にバナーを設置する手順を2つの方法（コードとプラグイン）で解説しました。コードに慣れている人も、初心者の方も、ぜひ試してみてください。バナーを工夫することで、サイトの魅力をさらにアップできます！