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

カスタマイズ

今回は、固定ページに新しく子サイトを作成するイメージで固定ページを作成してみたのですが、ヘッダーの変更など、割と手間取ったので記録しておきたいと思います。
正しいやり方なのかは分かりません!(笑)

 

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

私は無料テーマのcocoonを使用しています。

WordPressで導入するべき無料テーマ『cocoon』をインストールする方法

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

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

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

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

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

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

 

画像をアップロードする

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

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

画像URLの取得方法①ヘッダーロゴをワードプレスのメディアにアップロード
②ダッシュボードのメディアから、ヘッダーロゴに使用したい画像をクリック
③ファイルのURLをコピーする
画像URLをCSS中の(”画像URL”)の中にコピペします。
” ”は消さずに画像URLの文字を消してURLを入力してください。

 

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; } /*指定のタグページ*/

 

複数のページを指定する場合

『.クラス名-●●』で複数のページIDを指定をする場合は、カンマ(,)で区切って記載します。

記入例
.page-●●,●●,●●
.category-●●,●●,●●

 

おわり

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

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

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

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

 

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

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