固定ページや特定のカテゴリーページのヘッダーロゴを変える!《cocoon》

今回は、固定ページに新しく子サイトを作成するイメージで、ガラッと印象を変えたページを作成してみたのですが、ヘッダーの変更など、割と手間取ったので記録しておきたいと思います。

 

こんな人にオススメ・トップページと固定ページのヘッダーロゴを分けたい
・カテゴリーページのヘッダー画像をそれぞれ違う画像で設定したい…など

 

いろいろ試してみた結果なので、使用しているテーマによってクラス名など変わるところがあると思いますがご了承ください。

このサイトは無料テーマのcocoonを利用しています。

 

カスタマイズは子テーマですることをおすすめします。
失敗しても元に戻せるようにバックアップを取っておくと安心ですよ。
スポンサーリンク

固定ページやカテゴリーページのヘッダーロゴの切り替え方

PHPファイルを編集…す…る…

ヘッダーの変更をする方法を探していると、PHPファイルのheader.phpを編集する方法を紹介しているサイト様にはたくさん出会いました。
そちらの方が簡単なのかな?

ただ、PHPを触るたびにエラーを出すPHP恐怖症の私には到底理解できるものではないので、ここでは全力でスルーしたいと思います。(笑)

気になる方はググってみてください。

 

画像をアップロードする

トップページのヘッダーロゴはダッシュボードの外観でセットしたものになりますよね。
トップページには設定しているヘッダーロゴをそのまま使い、固定ページやカテゴリーページではヘッダーロゴを変える場合のカスタマイズです。

追加のヘッダーロゴはメディアで画像をアップロードしておきましょう。
使用したい画像の画像URLを取得しておきます。

画像URLの取得方法

  1.  ヘッダーロゴをワードプレスのメディアにアップロード
  2. ダッシュボードのメディアから、ヘッダーロゴに使用したい画像をクリック
  3. ファイルのURLをコピーする

画像URLをCSS中の(”画像URL”)の中にコピペします。
画像URLの文字を消してURLを入力してください。

headerの設定方法については下記記事でも掲載しています。

ヘッダーロゴの画像がスマホで見ると崩れている現象を解決!と、設定の仕方
設定したヘッダーロゴの画像が、パソコンやタブレットではきれいに表示されているのに、スマホでは伸びたり縮んだりと表示が崩れてしまうことがあります。 私が現在作成しているサイトでもヘッダーロゴの画像が縮...

 

CSS追加方法ダッシュボード『外観→カスタマイズ→追加CSS』
または、『外観→テーマエディター→スタイルシート』にCSSコードをコピペしていきます。

 

全ての固定ページでヘッダーロゴを変える

全ての固定ページに適用されます。
使用したい画像のURLをbackgroundの(”画像URL”)に入力します。

.page .logo > a img {
visibility: hidden;
}

.page .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

 

 

指定した固定ページのみヘッダーロゴを変える

特定のページだけヘッダーロゴを変更したい場合などに使えます。
.page-id-●●●の●●●部分にページIDの数字を入力して指定します。
画像URLの入力も忘れずに。

.page-id-●●● .logo > a img {
visibility: hidden;
}
.page-id-●●● .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

ページIDは、固定ページの編集から取得します。
固定ページによってIDが異なるので、変更したい固定ページのIDを確認してみてください。

《wpカスタマイズ》各ページのIDやカテゴリーIDを確認する!
ワードプレスでサイトのカスタマイズをしているときに、何かと必要になってくるページのID。特定のカテゴリーやタグページで表示の切り替えをしたり、各ページの表示をなんやかんやしたり、このIDが分かると細かなカスタマイズが出来るようになります。全

 

全てのカテゴリーページでヘッダーロゴを変える

カテゴリーをクリックしたときに表示されるカテゴリーページのヘッダーロゴが変わります。

.category .logo > a img {
visibility: hidden;
}
.category .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

 

指定したカテゴリーページのみヘッダーロゴを変える

IDで指定した特定のカテゴリーだけページのヘッダーロゴが変更します。
一部のカテゴリだけジャンルがガラッと変わる場合にオススメです。

.category-●● .logo > a img {
visibility: hidden;
}
.category-●● .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

 

特定のカテゴリーに属する記事のヘッダーロゴを変える

こちらは●●にカテゴリーIDを入力すると、指定したカテゴリーに属する記事のヘッダーロゴが全て変更されます。

.categoryid-●● .logo > a img {
visibility: hidden;
}
.categoryid-●● .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

全てのタグページでヘッダーロゴを変える

タグをクリックしたら表示されるタグページのヘッダーロゴが全て変わります。

.tag .logo > a img {
visibility: hidden;
}
.tag .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

 

指定したタグページのみヘッダーロゴを変える

IDを指定すると特定のタグページのみヘッダーロゴを変更することができます。

.tag-●● .logo > a img {
visibility: hidden;
}
.tag-●● .logo > a .site-name-text {
display: inline-block;
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}

 

グローバルナビを特定のページで非表示にする

大体のヘッダーにはロゴとナビバーが設定されていると思います。
トップページではグローバルナビを表示したいけど、特定のページでは非表示にしたい場合

.page nav{
display:none;
}

 

ナビバーをカテゴリーページや特定のページで非表示にする場合は、IDで設定します。

●●に入るIDを変更して、必要なコードだけコピペしてください。
.page nav{ display:none; } /*全ての固定ページ*/
.page-id-●● nav{ display:none; } /*指定の固定ページ*/
.category nav{ display:none; } /*全てのカテゴリーページ*/
.category-●● nav{ display:none; } /*指定のカテゴリーページ*/
.categoryid-●● nav{ display:none; } /*指定したカテゴリーに属する記事*/
.tag nav{ display:none; } /*全てのタグページ*/
.tag-●● nav{ display:none; } /*指定のタグページ*/

 

ヘッダーの背景画像を変更する

今回はヘッダーロゴの変更の仕方を紹介しましたが、
同様にヘッダーの背景画像も変更することが出来ます。

ページごとにヘッダー全体を変更するならこちらもご参考下さい。

ページごとにヘッダーの背景画像を変更する方法《cocoon》
以前、固定ページやカテゴリーページなど特定のページごとにヘッダーロゴを変更するカスタマイズを行いました。 今回は、ヘッダーの背景画像の変更方法についてです。 同じヘッダー内のカスタマイズなので『記事その①その②(続編)』とし...

 

おわり

ここまで書いてきましたが、これはcocoonを使用している場合のセレクタになります。

編集したい箇所のクラス名が分からない場合は、デベロッパーツールなどで調べることが出来るので活用してみてください。

そして、この記事で書いたCSSよりも簡単なものがあるかもしれません。
むしろあると思います!

そんな場合は、ぜひ私にも教えてください:-P

 

《wpカスタマイズ》各ページのIDやカテゴリーIDを確認する!
WordPressで導入するべき無料テーマ『cocoon』をインストールする方法

タイトルとURLをコピーしました