• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › WordPress › 特定のカテゴリに個別のCSSを適応させる

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

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

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

1
2
3
4
5
6
7
<?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 } ?>

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

functions.phpで振り分ける方法

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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');

is_home()、is_category()、is_single()、is_page() など詳しく知りたい人はこちら。

タグ: CSS, カテゴリ
カテゴリー: WordPress, カテゴリ

コメントを残す コメントをキャンセル

関連記事
カテゴリ別に違うカテゴリ(テンプレート)を表示
記事に登録したカテゴリの一括変更
個別にJavaScriptを振り分ける
カテゴリの表示順を並べ替えてくれる
記事ごとに個別のCSSやJavaScriptを追加
カテゴリに別々のアイコンを表示
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
コメントに画像を挿入できるようにする
最新記事を自動でスライドショー
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
カテゴリ別に違うカテゴリ(テンプレート)を表示
画像や動画をポップアップし再生
Contact Form7の送信完了画面をカスタマイズ
タイトルや本文からタグを自動生成
phpMyAdminのユーザー名とパスワードの確認方法
非表示、置換テクニック
カテゴリー別に違うサイドバーを出す
CSS3のみで画面外からメニューをスライド表示
CSSやJavaScriptのハンドル名(id)を確認
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
カテゴリに別々のアイコンを表示
ページごとに違うヘッダーを読み込む
背景をスライドショーにする
CSS3 角を丸くする
レスポンシブなLightbox jQuery プラグイン Strip
コメントのメールアドレス入力覧を消す
記事をランダムに表示させる
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
ショートコードを追加するプラグイン
Contact Form7に画像認証機能を追加
リンクの表示順を並べ替える
サイト全体のサムネイルサイズを変更
JavaScriptで画面外からメニューをスライド表示
指定した日付や時間を基準に振り分け
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress