【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法

【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法Wordpress
スポンサーリンク

この記事を要約すると・・。

 

【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法

 普通の記事ではいつものヘッダーロゴ画像ですが・・・。

 

【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法

 

特定のカテゴリのみ、ヘッダーの画像を変更します。

 

カテゴリーごとにヘッダーロゴ画像を変更したい!

  

カテゴリーごとにヘッダーロゴ画像を変更したい!

 

これがショープラのヘッダーです。とっても気に入っています。

 

ただ、あまりに雑記ブログのため「シゲキとオシャレとオカネのこと」というサブテーマにそぐわない記事も出てきています。

 

例えば、私はうつ病についての記事も書いています。

ただ、そこに来た人が仮にいい記事だったとしても

 

う~ん、お金やおしゃれ?

本当にうつのことわかっているのかしら?

 

と思ってしまっても仕方ありません。というわけで、この悩みを解決するために、

カテゴリごとでヘッダーを変える】チャレンジをしたいと思います。

 

ミッツ
ミッツ

調べるのはすごく時間がかかったけど、意外と簡単だからみんなやってみよう!

 

カテゴリごとにヘッダーを変える方法

  

特定の記事やページのヘッダやフッターにコードを挿入!プラグインを使えば簡単にできる
特定の記事やページのヘッダーやフッターだけにコードを挿入したい、という場合、phpの知識があれば「テーマのための関数」(functions.php)や「テーマヘッダー」(header.php)、「テーマフッター」(footer.php)にサクっとコードを追加したりすれば良いですが、それは面倒、というか怖いし分からない。...

 

こちらのサイトを参考にさせてもらいました。

 

工程1 ヘッダーを作る

 

Just a moment...

 

私はここで作成しています。(もちろん別の方法で作っても構いませんよ。)

 

ヘッダーロゴ画像を変える方法 工程1 ヘッダーを作る

  

うんうん、いい感じでできました。サイトにアップロードしましょう。

 

ヘッダーロゴ画像を変える方法 工程1 ヘッダーを作る

 

工程2 アップロードしたURLをコピー

 

ワードプレスに戻って、【メディア】➡【新規追加】➡【ファイルを選択】でアップロードします。

 

カテゴリごとにヘッダーを変える方法 工程2 アップロードしたURLをコピー

  

編集をクリックして

 

カテゴリごとにヘッダーを変える方法 工程2 アップロードしたURLをコピー

 

【ファイルのURL】をどこかにコピペしておきましょう。これで下準備は完成です。

  

工程3 Header Footer Code Manager ダウンロード

   

詳しい人は元のPHPをいじって編集できると思いますが、ほぼPHPのことが分からないので、プラグインを利用します。

 

【プラグイン】 ➡ 【新規追加】で 「Header Footer Code Manager」を検索。

  

Header Footer Code Manager ダウンロード 使い方

 

カテゴリや記事ごとにスクリプトを変更するためのプラグインです。

見つかったのでダウンロード・有効化しましょう。

 

 

ダウンロード・有効化が完了すると、左のところに【HFCM】というところが出てきます。「Add New Script」をクリックします。

 

Header Footer Code Manager ダウンロード 使い方

 

工程4 スクリプトを打ち込む

 

すると設定画面がでてきます。Site Displayの欄を【Specific Categories】に。私はカテゴリごとに変更しましたが、特定の記事で画像を変えたいときには【Specific Post】を選択しましょう。

 

そして Category List で自分の記事の中でヘッダー画像を変更したいカテゴリを選択します。

 

Header Footer Code Manager ダウンロード 使い方

 

その下にスクリプトを入力する欄があるので、こんな感じで入れていきます。

(素人に毛が生えたようなものなので、すごく汚いコードだと思います。もっとよくできる人いたらコメントください・・。)

 

Header Footer Code Manager ダウンロード 使い方

 

以下コードですが、【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時間・・・。長かった・・・。

 

ブログ人気関連記事はこちら

 

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