【Cocoon】ページやカテゴリーごとにヘッダーのロゴ画像や文字を変更する

こんにちは。

1つのブログ内に複数の異なるコンテンツがある場合、それぞれ別のヘッダーを表示したいことがあると思います。

「ロゴURL、ロゴテキスト(サイト名)、キャッチフレーズ、ロゴ画像」の変更を比較的簡単な方法で実現できたので、変更方法を共有します。
(functions.php に数行追加するだけです)

WordPressのテーマは「Cocoon」であることを前提とします。

手順

ロゴURLの変更

functions.php に以下を追記します。

functions.php は、WordPressのダッシュボード上で「外観 > テーマファイルエディター > 編集するテーマを選択: Cocoon Child > functions.php」と選択すれば編集できます。

//ヘッダーロゴURLを変更する
add_filter('header_site_logo_url', function ($url){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    return 'https://example.com/';
  }
  return $url;
});

header_site_logo_url フィルタフックで、カテゴリーIDが11または記事IDが222のページのロゴURLを https://example.com/ に設定しています。

カテゴリーIDは get_the_category()[0]->cat_ID で、記事IDは get_the_ID() で取得できます。

タグなど他の要素で分岐したい場合は、上記と同じようにID等を取得して判定すれば良いです。

参考
CocoonのサイトロゴURLを任意のものに変更するカスタマイズ方法
投稿のカテゴリー名・ID・スラッグを「取得」「表示」させる方法まとめ
WordPressの固定ページのIDを確認・取得する方法

ロゴテキスト(サイト名)の変更

functions.php に以下を追記します。

//ヘッダーロゴテキスト（Alt属性）を変更する
add_filter('header_site_logo_text', function ($url){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    return 'Example Site Name';
  }
  return $url;
});

header_site_logo_text フィルタフックで、カテゴリーIDが11または記事IDが222のページのロゴテキストを「Example Site Name」に設定しています。

参考: CocoonのサイトロゴURLを任意のものに変更するカスタマイズ方法

キャッチフレーズの変更

functions.php に以下を追記します。

//キャッチフレーズを変更する
add_filter('get_tagline_text', function ($phrase){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    return 'example catchphrase';
  }
  return $phrase;
});

get_tagline_text フィルタフックで、カテゴリーIDが11または記事IDが222のページのキャッチフレーズを「example catchphrase」に設定しています。

参考: フックの追加要望

ロゴ画像の変更

functions.php 内のどこかで、ヘッダー画像URLを指定するCSSを出力します。

以下は、header_site_logo_url (最初に紹介したヘッダーロゴURLを変更するフック) 内でechoで出力する例です。(どこでも良いと思うので、今回使ったフックを適当に選びました)

//ヘッダーロゴ画像を変更する
add_filter('header_site_logo_url', function ($url){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    echo '<style>.header{background-image: url("https://example.com/image.png");}</style>';
  }
  return $url;
});

このコードでは、カテゴリーIDが11または記事IDが222のページのロゴ画像を https://example.com/image.png に設定しています。

因みに、上記フィルタフックを使った場合はヘッダーロゴのdivタグ直前にstyleタグが挿入されたため場所としては良いと思います。head内で定義したい場合は wp_head アクションフックを使えば良いです。

なお、ページごとにロゴ画像を変更するだけなら、phpに触れなくても各ページの「カスタムCSS」に以下を追記すれば変更できます。
(上記php内のechoで出力しているCSSとまったく同じ内容です)

.header{
  background-image: url("https://example.com/image.png");
}

参考: トップページと投稿ページでヘッダー画像を分けることが可能か

まとめ

以上の追記をすべて記載した functions.php は以下の通りです。

//ヘッダーロゴURLを変更する + ロゴ画像変更用のCSSを追加
add_filter('header_site_logo_url', function ($url){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    echo '<style>.header{background-image: url("https://example.com/image.png");}</style>';
    return 'https://example.com/';
  }
  return $url;
});

//ヘッダーロゴテキスト（Alt属性）を変更する
add_filter('header_site_logo_text', function ($url){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    return 'Example Site Name';
  }
  return $url;
});

//キャッチフレーズを変更する
add_filter('get_tagline_text', function ($phrase){
  $category_id = get_the_category()[0]->cat_ID;
  $page_id = get_the_ID();
  if ($category_id == 11 || $page_id == 222) {
    return 'catchphrase';
  }
  return $phrase;
});

その他の方法・フッターの変更

もう少し凝ったことをしたければ、以下の方法が一番シンプルだと思われます。

tmp-user/body-top-insert.php 内で分岐して出力する方法と、code_minify_call_back フィルタフックでヘッダーを丸ごと変更する方法です。

カテゴリーごと、テンプレートごとに独自のヘッダーを作成する場合について

また、フッターの文字やリンクを変更したい場合は、以下のフィルタフックを使えばヘッダーと同様に変更できます。

参考: CocoonのサイトロゴURLを任意のものに変更するカスタマイズ方法

最後に

ページやカテゴリーごとにヘッダーのロゴ画像や文字を変更する方法を紹介しました。

ロゴ画像は少し力技という感じがしますが、その他はフィルタフックが用意されていたおかげで簡単に実装することができました。

参考にしてみてください。

それでは、また。