2016-10-03 7 views
-3

私はPHPコーダーではありませんが、私はいくつかの助けを借りて(Adam Burkenpasのチュートリアル)私の第1のWordpressのテーマを作成しました。これは静的なページ(フロントページ)とブログです。ブログページには問題があります。ブログ用とフロントページ用の2​​種類のスタイルがあります。いくつかのクラス(bodyのような)は同じ名前を持っていて、functions.phpでブログのCSSを読み込むと、フロントページ(間違ったフォント、間違ったフォントの色)で混乱してしまいます。私は「によってHTMLにクラスを追加「blog.body」にブログのCSSに体の名前を変更しましたが、助けにはならなかった。それを修正するには?Wordpressと2つのスタイル

CSSコード

http://jsbin.com/xaredeneru

+0

2つの異なるページ(フロントページとホーム(自宅は投稿ページです))で2種類のスタイルを達成しようとしていますか? –

+0

そうですね。 –

+0

さて、私は言うつもりでしたが、人々はすでにそれを言っていました。'body_class'を使うことができ、' body.home .myclass {} 'を使うことができ、' body.blog .myclass {} 'を使うことができるブログリストページを目指すために(フロントページ)を目指すことができます。 –

答えて

0

あなたの場合あなたがページをチェックして、そのページの特定の身体クラスを追加できることに基づいて、https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class を見てみることとは異なるボディクラスを指定したい 今CSSであなただけのような親の依存関係とスタイルを与えることができます:。

body.myclass .mytext{color:#000;} 

と2ページ目:

body.someotherclass .mytext{color:#000;} 

乾杯!

0

CSSでセレクタを組み合わせることができます。通常、<body>タグは、Wordpressによって自動的に1つ以上の一意のクラスが割り当てられます。pageまたはsingle-postのようなクラスも自動的に割り当てられます。生成されたページをbowserの開発者ツールで調べると、これらが表示されます。

たとえば、body.page {...}を使用して本文ページのルールを定義し、アーカイブページの本文にbody.archive {...}を指定することができます。

.page .nav {...}を使用して.navクラスエレメントのスタイルをページにすることもできます。以下のように... @デン・パットと@johannes同様

0

は言った...

あなたがbody_class()機能とワードプレスを使用することができますしたい場合は、自動的に、あなたのためのいくつかの体のクラスを設定しますが何であるかを知っていますクラスが表示されたら、take a look hereとすることができます。

しかし、フロントページのCSSクラス.homeで、ブログのCSSクラス(ポスト一覧ページは)あなたの現在のbodyタグのコード

<body class="blog"> 

を置き換えることができます.blog

です

<body body_class() > 

とCSSセレクタを使用してスタイルを区切ります

body.home { // aim for front-page template 
background: #ccc; 
} 

body.blog { // aim for blog template 
background: #666; 
} 

ボディクラスを動的に設定する場合は、body_classフィルタフックについて読む価値があります。

関連する問題