TwentyTenのcssの振り分け方を教えてください

(@koaporo)

TwentyTenをカスタマイズしています。

ページによって異なるCSSを振り分けたいと思います。

header.phpに以下のように書き

<?php
	// 固定ページが表記されている時は$postから取得したスラッグ名を指定し、出力されるclassに追加			

if(is_page()) : ?>
<body <?php body_class($post->post_name . ''); ?>>

 <?php else : ?>
<body <?php body_class(); ?>>
<?php endif; ?>

htmlを見ると

<body class="home page page-id-47 page-template page-template-onecolumn-page-php logged-in admin-bar home">

とスラッグが書き出されています。

cssファイルを作ってhome.cssを入れ、

functions.phpに
// cssの振り分け
if (!is_admin()) {
 // 管理画面には適応しない
 function register_style() {
  wp_register_style('style',
  get_bloginfo('template_directory').'/style.css');
   // 全ページ共通のスタイルを読み込む
  wp_register_style('home',
  get_bloginfo('template_directory').'/css/home.css');
   // TOPページ専用のスタイルを読み込む

}
   function add_stylesheet() {
     register_style();
     // 全ページ共通
     wp_enqueue_style('style');
     // TOPページ専用
     if (is_home()){
        wp_enqueue_style('home');
     }

   }
add_action('wp_print_styles', 'add_stylesheet');
	}

と書いたのですがうまくいきません。

固定ページの
HistoryとContactも各々異なるCSSを読み込ませたいのですが、
どうしらたいいでしょうか？

http://ja.forums.wordpress.org/topic/3252?replies=9
も参考にやってみたのですがうまくいきません。

プラグインcustom-css-jsを有効化してみましたが、
管理画面にカスタムフィールドが表示されません。
WordPressもphpも初心者です。

どなたか助けて頂けないでしょうか。
どうぞよろしくお願いいたします。

10件の返信を表示中 - 1 - 10件目 (全10件中)

モデレーター gatespace
(@gatespace)

11年、 7ヶ月前
固定ページの
HistoryとContactも各々異なるCSSを読み込ませたいのですが、
どうしらたいいでしょうか？

考え方を変えて、条件分岐タグを使ってみてはどうでしょう？

一番簡単な方法として、 header.phpの
```
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
```
の後ろあたりに
```
<?php
  if ( is_home() ) { // ホームのとき
    echo '<link rel="stylesheet" type="text/css" media="all" href="'. get_stylesheet_directory_uri(). '/home.css" />';
  } elseif ( is_page( 'contact' ) )  { // contact というスラッグの固定ページのとき
    echo '<link rel="stylesheet" type="text/css" media="all" href="'. get_stylesheet_directory_uri(). '/contact.css" />';
  }
?>
```
と入れてみてください。
（コードは未検証ですのでご注意ください）

※コードを投稿されるときは、コード部分を「code」ボタンで託ってください。
トピック投稿者 koaporo
(@koaporo)

11年、 7ヶ月前

どうもありがとうございました。
やってみます。
nobita
(@nobita)

11年、 7ヶ月前
koaporoさん

動きましたよ

ただ、WordPressでインクルードしてくれる　style.css を　2重に登録するのは、？
もしかしたら、そういうことが原因かもしれないと思いますが、
私の環境では、（get_template_directory_uri()に置き換えましたが）動作しました。
```
wp_register_style('style', get_template_directory_uri().'/style.css');
```
```
get_bloginfo('template_directory')
```
get_template_directory_uri()を使ったほうがいいみたいです。
```
<body class="home page page-id-47 page-template page-template-onecolumn-page-php logged-in admin-bar home">
```
homeが2つになっていますが、同じクラスを作る必要はないですよね？

ページによって異なるCSSを振り分けたいと思います。

ということであれば、一番簡単なのは、

page-id-47とあるように、ポストタイプとページIDを組み合わせたクラスが標準で出力されているので、それを使ってスタイルルールを書くのが、簡単だと思います。
管理上の問題で、別のCSSに記述したほうがいいということならば、CSSの@importルールを使うとCSSで一本化でき、簡単なんじゃないかなと思います。
トピック投稿者 koaporo
(@koaporo)

11年、 7ヶ月前

みなさん、ありがとうございます。

gatespaceさんの方法に今挑戦中です。

nobitaさん
wordpressの本に「スラッグでCSSを管理」という項目があったので、
スラッグを書き出すようにやってみたのですが…。
確かにhomeがダブっています。

page-idでやってみます。
CSSの@importルールも教えてくださり、ありがとうございます。
トピック投稿者 koaporo
(@koaporo)

11年、 7ヶ月前
```
</head>

<body <?php body_class(); ?>
```
に戻し、
```
// cssの振り分け
if (!is_admin()) {
 // 管理画面には適応しない
 function register_style() {
 wp_register_style('style', get_template_directory_uri().'/style.css');
   // 全ページ共通のスタイルを読み込む
 wp_register_style('home', get_template_directory_uri().'/css/home.css');
   // TOPページ専用のスタイルを読み込む
 wp_register_style('style', get_template_directory_uri().'/css/contact.css');
   // Contactページ専用のスタイルを読み込む
 wp_register_style('style', get_template_directory_uri().'/css/history.css');
   // Hisoryページ専用のスタイルを読み込む
}
   function add_stylesheet() {
     register_style();
     // 全ページ共通
     wp_enqueue_style('style');
     // TOPページ専用
     if (is_home()){
        wp_enqueue_style('home');
	 }
	 // Contactページ専用
	 elseif (is_page('39')) {
        wp_enqueue_style('contact');
	 }
	 // Hisoryページ専用
	 elseif (is_page('4')) {
	    wp_enqueue_style('history');
     }
   }
add_action('wp_print_styles', 'add_stylesheet');
	}
```
と書いてみたのですがまだうまくいきません。

どこかいけないところがあるのだと思います。

ローカルホストで作業していることが関係あるのでしょうか？
トピック投稿者 koaporo
(@koaporo)

11年、 7ヶ月前
gatespaceさんへ
```
<?php
  if ( is_home() ) { // ホームのとき
    echo '<link rel="stylesheet" type="text/css" media="all" href="'. get_stylesheet_directory_uri(). '/home.css" />';
  } elseif ( is_page( 'contact' ) )  { // contact というスラッグの固定ページのとき
    echo '<link rel="stylesheet" type="text/css" media="all" href="'. get_stylesheet_directory_uri(). '/contact.css" />';
  }
  elseif ( is_page( 'history' ) )  { // history というスラッグの固定ページのとき
    echo '<link rel="stylesheet" type="text/css" media="all" href="'. get_stylesheet_directory_uri(). '/history.css" />';
  }
?>
```
<body <?php body_class($post->post_name . ''); ?>>
としてみたのですが、動きません。
私の場合だけでしょうか？
nobita
(@nobita)

11年、 7ヶ月前

koaporoさん

コードそのものは、問題ないと思います。
コピペで動作しますよ:-)

なので

プラグインなどの影響があるかもしれないので、プラグインを止めてみるか

アクションのプライオリティの設定を変更してみるとか、
add_action(‘wp_print_styles’, ‘add_stylesheet’, /*ここに、1とか9999を書いてみる*/);

でどうでしょう？

エラー出てないですよね？
出ていれば、エラーメッセージ書いてみてください

トピック投稿者 koaporo
(@koaporo)

11年、 7ヶ月前

nobitaさん

度々ありがとうございます。
気づかないうちに、何か自分で他のコードを変えてしまっているかもしれません。

もう一度子テーマを最初から作り直してから、ご相談いたします。

どうもありがとうございました。

モデレーター gatespace
(@gatespace)

11年、 7ヶ月前

子テーマであるのならば
get_stylesheet_directory_uri() を使ってみてください。
get_template_directory_uri() は「親」テーマのディレクトリーを取得します。

なお、私の提示したコードの場合の<body>タグ部分は
<body <?php body_class(); ?>>
でOKです。

確認する順番として、まず条件分岐タグを外して
echo '<link rel="stylesheet" type="text/css" media="all" href="'. get_stylesheet_directory_uri(). '/home.css" />';
だけにしてhome.cssが読み込まれていれば、条件分岐タグの何かが間違っています。
読み込まれなければ、スタイルシートへのPathが間違っていると言うことになります。

トピック投稿者 koaporo
(@koaporo)

11年、 7ヶ月前

gatespaceさんへ

versin up対応のために子テーマを作らなければならないということを、
最近まで知らなかたので、現在作り直しております。

style.css以外の外部cssのファイルの冒頭に問題があるのかもしれません。
リトライいたします。

お忙しい中どうもありがとございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)

トピック「TwentyTenのcssの振り分け方を教えてください」には新たに返信することはできません。

トピックタグ

表示