web-dev-qa-db-ja.com

ホームページと他のページで異なるヘッダースタイル

異なるサイトヘッダーとメニュースタイルを追加して、それらを特定のページに割り当てるのはかなり簡単でしょうか。私はCSSとphpがどのように機能するのかについて非常に基本的な理解を持っていて、テーマをカスタマイズすることができましたが、これは私の能力を超える方法です。どこにコードを追加すればよいのか教えてもらえれば、ヘッダーとメインメニューが表示されます。

  1. hOME - 白い背景のタイトル、説明と黒の背景のメニュー
  2. 他のページに - 黒のサイトのタイトル、説明、白い背景の上のメニュー？
menustitleheadersdescription
1
el Huzar

これを実現するには複数の方法があります。 固有のページテンプレート 、 を作成するためのスタイルシート を作成することもできます。ホームページ、またはホームページ上のユニークなクラスを使用してください。

これはおそらく最も簡単です。

ブラウザでホームページを調べ（f12を押して）本文タグを見ると、WordPressが.homeクラスを追加していることがわかります。あなたはこれを使用して、ホームページ上のものにのみ影響を与えるさまざまなスタイルを適用することができます。

ここにあなたが求めていたものに基づくいくつかの例があります。

.home .site-branding {
    background-color: #000;
}

.home .site-title a, 
.home .site-description {
    color: #fff;
}

上記の例のように、他のすべてのページを好きなようにスタイル設定してから、.homeクラスを使用してホームページの内容を変更することをお勧めします。しかし、あなたは反対のことをすることができ、ボディに.homeクラスがないページをターゲットにすることができます。

例えば...

body:not(.home) .site-branding {
    background-color: #fff;
}

注：さまざまなページの本体クラスを見てみましょう。WPは、ページ、投稿、テンプレートなどに固有のクラスを追加して、このようにします。簡単です。

1
RiddleMeThis