この記事を要約すると・・。
普通の記事ではいつものヘッダーロゴ画像ですが・・・。
特定のカテゴリのみ、ヘッダーの画像を変更します。
カテゴリーごとにヘッダーロゴ画像を変更したい!
これがショープラのヘッダーです。とっても気に入っています。
ただ、あまりに雑記ブログのため「シゲキとオシャレとオカネのこと」というサブテーマにそぐわない記事も出てきています。
例えば、私はうつ病についての記事も書いています。
ただ、そこに来た人が仮にいい記事だったとしても
う~ん、お金やおしゃれ?
本当にうつのことわかっているのかしら?
と思ってしまっても仕方ありません。というわけで、この悩みを解決するために、
【カテゴリごとでヘッダーを変える】チャレンジをしたいと思います。
調べるのはすごく時間がかかったけど、意外と簡単だからみんなやってみよう!
カテゴリごとにヘッダーを変える方法
こちらのサイトを参考にさせてもらいました。
工程1 ヘッダーを作る
私はここで作成しています。(もちろん別の方法で作っても構いませんよ。)
うんうん、いい感じでできました。サイトにアップロードしましょう。
工程2 アップロードしたURLをコピー
ワードプレスに戻って、【メディア】➡【新規追加】➡【ファイルを選択】でアップロードします。
編集をクリックして
【ファイルのURL】をどこかにコピペしておきましょう。これで下準備は完成です。
工程3 Header Footer Code Manager ダウンロード
詳しい人は元のPHPをいじって編集できると思いますが、ほぼPHPのことが分からないので、プラグインを利用します。
【プラグイン】 ➡ 【新規追加】で 「Header Footer Code Manager」を検索。
カテゴリや記事ごとにスクリプトを変更するためのプラグインです。
見つかったのでダウンロード・有効化しましょう。
ダウンロード・有効化が完了すると、左のところに【HFCM】というところが出てきます。「Add New Script」をクリックします。
工程4 スクリプトを打ち込む
すると設定画面がでてきます。Site Displayの欄を【Specific Categories】に。私はカテゴリごとに変更しましたが、特定の記事で画像を変えたいときには【Specific Post】を選択しましょう。
そして Category List で自分の記事の中でヘッダー画像を変更したいカテゴリを選択します。
その下にスクリプトを入力する欄があるので、こんな感じで入れていきます。
(素人に毛が生えたようなものなので、すごく汚いコードだと思います。もっとよくできる人いたらコメントください・・。)
以下コードですが、【img src】以降は先ほど作った画像のURL。
【alt】以降は適当に打ち込んでください。
” ”(ダブルコーテーション)は2つとも消しちゃだめですよ。
<style type="text/css">
.logo-header {
display: none;
}
</style>
<header>
<div class="head-logo"><img src="https://〇〇〇.png" alt=" ショープラ うつ病との付き合い方(ここはヘッダー画像のタイトル的なものだと思ってください。)"></div>
</header>
<style type="text/css">
.head-logo{
text-align: center;
}
</style>
ヘッダーロゴの画像が変わった!
やったぞー!
苦節10時間・・・。長かった・・・。
ブログ人気関連記事はこちら