web-dev-qa-db-ja.com

ホームページ上でのみスタイルを設定する

私は比較的Wordpressに慣れていませんが、やりたいことをやる方法があると確信しています。

私は自分のテンプレートの中にコンテナを持っています、そして私はこの要素にわずかに異なるパディングを指定したいホームページで希望します。

私の現在のCSSは以下の通りです：

#main_content .container {
position: relative;
padding: 120px 0;
}

Homeページにいる場合は、パディングを80pxに減らしたいです。それ以外の場合は、そのままにします。

これは私がテンプレート内でやらなければならないことなのでしょうか、それとも私が現在気付いていないような気の利いた 'WordPress only' CSSトリックがありますか？

私の限られた経験では、私はページis_homeまたはそれに類似するものかどうかを指定し、ホームページのheader.phpファイルでカスタムスタイルシートを選択することができるべきだと思います。おそらく、CSSのパディング変更の後に!importantを付けます。

私はいくつかの方向性を得ることができますか？私が検索で見つけた結果は、特に私がやろうとしていることではありません。

csshomepage
6
MrS1ck

WordPress body_class($class) は、スタイルを読み込むための素晴らしい動的な方法です。具体的な本文の内容はjsです。あなたのテーマがボディクラスをサポートしていない場合は非常に簡単にそれらを追加します。

  • header.php（または<body>タグを含むテンプレート）を開きます
  • <body>タグを編集して、<body <?php body_class(); ?>>にします。これで完了です。 :)

今あなたがいるとき：

  • Homeページ、あなたのbodyタグは<body class="blog">をレンダリングします
  • Front Page、あなたのbodyタグは<body class="home">をレンダリングします
  • ブログ投稿詳細ページ（single.php）、あなたのbodyタグは<body class="single">をレンダリングします
  • ページ詳細ページ（page.php）、あなたのbodyタグは<body class="page">をレンダリングします

だから、あなたは今自由です。しかしあなたが望むスタイル。外部スタイルシートの場合、そしてホームページの場合、あなたのスタイルは（@saifurはすでに述べたように）なります。

body.home #main_content .container {
   position: relative;
   padding: 120px 0;
}

内部CSS

内部CSSの場合、WordPressには is_home() という条件付きチェッカーがあり、もう1つは is_front_page() です。この2つでは、あなたがホームページにいるのかフロントページにいるのかを確認してから、内部のCSSコードを読み込むことができます。

<?php if( is_home() || is_front_page() ) : ?>
<style id="my-internal-css">
    #main_content .container {
       position: relative;
       padding: 120px 0;
    }
</style>
<?php endif; ?>

同様に、is_single()、is_page()、is_category()、is_archive()、is_day()など... ...

7
Mayeenul Islam

Bodyタグのクラスを確認してください。ホームページにhomeというクラスがあります。次のCSSが役立つことを願っています。

.home #main_content .container {
position: relative;
padding: 120px 0;
}
1
saifur