WordPressでページ別・カテゴリー別にCSSを切り替える！【初心者完全ガイド】

WordPressサイトを運営していると、ページごとやカテゴリーごとに異なるデザインを適用したくなることがあります。

例えば、特定の固定ページだけ背景色を変えたり、カテゴリーごとに異なるフォントを設定したりする場合です。

本記事では、WordPressでページやカテゴリーごとに異なるCSSを適用する方法を初心者向けにわかりやすく解説します。

CSSやJavaScriptの正しい読み込みかたはこちらの記事で詳しく解説しています。

ページやカテゴリーごとにCSSを変更する基本の考え方

WordPressでは、特定のページやカテゴリーごとに異なるCSSを適用するために「条件分岐タグ」と「wp_enqueue_style」を活用できます。

WordPressの条件分岐タグを活用する

WordPressには、特定のページやカテゴリーを判別できる「条件分岐タグ」が用意されています。

例えば、is_page() や is_category() を使うことで、それぞれのページやカテゴリーを判別可能です。

wp_enqueue_style で特定のページ・カテゴリーにCSSを適用

wp_enqueue_style を使うことで、必要なCSSファイルを適切に読み込むことができます。

特定のページやカテゴリーのみで読み込むように設定することで、不要なCSSの読み込みを防ぎ、サイトのパフォーマンスを向上させることができます。

CSSやJavaScriptの正しい読み込みかたはこちらの記事で詳しく解説しています。

ページごとに異なるCSSを読み込む方法

特定の固定ページだけにCSSを適用する方法

特定の固定ページにのみCSSを適用したい場合、is_page() を利用します。

function add_ccs_js() {
    if (is_page('contact')) { // 固定ページ「お問い合わせ」に適用
        wp_enqueue_style('contact-style', get_template_directory_uri() . '/css/contact.css');
    }
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

投稿ページ（シングルページ）ごとにCSSを変更する方法

投稿ページごとに異なるCSSを適用する場合は、is_single() を使用します。

function add_ccs_js() {
    if (is_single('123')) { // 投稿IDが123の場合
        wp_enqueue_style('single-post-style', get_template_directory_uri() . '/css/single-123.css');
    }
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

カテゴリーごとにCSSを変更する方法

is_category() を使ってカテゴリー別にCSSを適用

カテゴリーごとに異なるCSSを適用する場合、is_category() を使います。

function add_ccs_js() {
    if (is_category('news')) { // カテゴリー「news」に適用
        wp_enqueue_style('news-category-style', get_template_directory_uri() . '/css/category-news.css');
    }
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

子テーマの category-スラッグ.css を活用する

テーマの category-スラッグ.css を自動的に読み込む方法もあります。

function add_ccs_js() {
    if (is_category()) {
        $category = get_queried_object();
        wp_enqueue_style('category-style', get_template_directory_uri() . '/css/category-' . $category->slug . '.css');
    }
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

その他の便利なカスタマイズ方法

投稿タイプ（カスタム投稿）ごとにCSSを切り替える

カスタム投稿タイプごとに異なるCSSを適用する場合、is_singular('custom_post_type') を使用します。

function add_ccs_js() {
    if (is_singular('portfolio')) { // カスタム投稿タイプ「portfolio」に適用
        wp_enqueue_style('portfolio-style', get_template_directory_uri() . '/css/portfolio.css');
    }
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

特定のユーザーやログイン状態でCSSを変える

管理者のみ異なるCSSを適用する場合は is_user_logged_in() を使います。

function add_ccs_js() {
    if (current_user_can('administrator')) {
        wp_enqueue_style('admin-style', get_template_directory_uri() . '/css/admin.css');
    }
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

まとめ

ページやカテゴリーごとに適切なCSSを読み込むことで、より柔軟なデザイン変更が可能になります。

ポイントまとめ

• 固定ページごとにCSSを適用 → is_page()
• 投稿ページごとにCSSを適用 → is_single()
• カテゴリーごとにCSSを適用 → is_category()
• カスタム投稿タイプごとにCSSを適用 → is_singular()
• 特定のユーザーに適用 → current_user_can()

適切な方法を選んで、効率よくWordPressのデザインをカスタマイズしましょう！