今回は、固定ページに新しく子サイトを作成するイメージで、ガラッと印象を変えたページを作成してみたのですが、ヘッダーの変更など、割と手間取ったので記録しておきたいと思います。
- トップページと固定ページのヘッダーロゴを分けたい
- カテゴリーページのヘッダー画像をそれぞれ違う画像で設定したい…など
いろいろ試してみた結果なので、使用しているテーマによってクラス名など変わるところがあると思いますがご了承ください。
このサイトは無料テーマのcocoonを利用しています。
スキンは『カスタマイズ』です。
失敗しても元に戻せるようにバックアップを取っておくと安心ですよ。
固定ページやカテゴリーページのヘッダーロゴの切り替え方
PHPファイルを編集…す…る…
ヘッダーの変更をする方法を探していると、PHPファイルのheader.phpを編集する方法を紹介しているサイト様にはたくさん出会いました。
そちらの方が簡単なのかな？
ただ、PHPを触るたびにエラーを出すPHP恐怖症の私には到底理解できるものではないので、ここでは全力でスルーしたいと思います。(笑)
気になる方はググってみてください。
画像をアップロードする
トップページのヘッダーロゴはダッシュボードの外観でセットしたものになりますよね。
トップページには設定しているヘッダーロゴをそのまま使い、固定ページやカテゴリーページではヘッダーロゴを変える場合のカスタマイズです。
追加のヘッダーロゴはメディアで画像をアップロードしておきましょう。
使用したい画像の画像URLを取得しておきます。
画像URLの取得方法
- ヘッダーロゴをワードプレスのメディアにアップロード
- ダッシュボードのメディアから、ヘッダーロゴに使用したい画像をクリック
- ファイルのURLをコピーする
画像URLをCSS中の（”画像URL”）の中にコピペします。
画像URLの文字を消してURLを入力してください。
headerの設定方法については下記記事でも掲載しています。
見てみてねー
- ダッシュボード『外観→カスタマイズ→追加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を確認してみてください。
全てのカテゴリーページでヘッダーロゴを変える
カテゴリーをクリックしたときに表示されるカテゴリーページのヘッダーロゴが変わります。
.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で設定します。
ヘッダーの背景画像を変更する
今回はヘッダーロゴの変更の仕方を紹介しましたが、
同様にヘッダーの背景画像も変更することが出来ます。
ページごとにヘッダー全体を変更するならこちらもご参考下さい。
おわり
ここまで書いてきましたが、これはcocoonを使用している場合のセレクタになります。
編集したい箇所のクラス名が分からない場合は、デベロッパーツールなどで調べることが出来るので活用してみてください。
そして、この記事で書いたCSSよりも簡単なものがあるかもしれません。
むしろあると思います！
そんな場合は、ぜひ私にも教えてください:-P
