Plus WordPress ワードプレスの基本・応用テクニックを紹介

特定のカテゴリに個別のCSSを適応させる

例）カテゴリID 20の場合、tokutei.cssを、カテゴリID 17と19の場合、tokutei2.cssが読み込まれるようにします。それ以外はデフォルトのスタイルシートが読み込まれます。

header.phpに↓を挿入します。

<?php if ( is_category('20') ) { ?>
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tokutei.css" type="text/css" media="screen" />;
  <?php } elseif (in_category(array('17','19'))) { ?>
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tokutei2.css" type="text/css" media="screen" />;
  <?php } else { ?>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  <?php } ?>

<?php if ( is_category('20') ) { ?>

<?php } elseif (in_category(array('17','19'))) { ?>

<?php } else { ?>

<?php } ?>

※デフォルトのスタイルシートが二重に読み込まれないように、デフォルトの読み込み設定をコメントアウトまたは削除してください。

functions.phpで振り分ける方法

例えばこんな感じに別々のスタイルシートを読み込ませたい場合。
全ページ共通
デフォルトのstyle.cssが読み込まれます。
トップページ
home.css
投稿ページ
single.css
カテゴリページ
category.css
固定ページ
page.css

functions.phpに↓を追加します。

function register_style() {
  wp_register_style('style', get_bloginfo('template_directory').'/style.css');
  wp_register_style('home', get_bloginfo('template_directory').'/css/home.css');
  wp_register_style('single', get_bloginfo('template_directory').'/css/single.css');
  wp_register_style('category', get_bloginfo('template_directory').'/css/category.css');
  wp_register_style('page', get_bloginfo('template_directory').'/css/page.css');
}

function plus_stylesheet() {

     register_style();          
     
     wp_enqueue_style('style');  // 全ページ共通
         
     if (is_home()){
        wp_enqueue_style('home');  // トップページ
     }          
     
     elseif (is_single()) {
        wp_enqueue_style('single'); // 投稿ページ
     }
               
     elseif (is_category()) {
        wp_enqueue_style('category'); // カテゴリページ
     }
               
     elseif (is_page()) {
        wp_enqueue_style('page'); // 固定ページ
     }
   }
add_action('wp_print_styles', 'plus_stylesheet');