Cocoonでカテゴリーごとに異なるヘッダーを適用する方法

ブログ

概要

Cocoonテーマでカテゴリーごとに異なるヘッダーを表示させたい場合、テーマのコードを編集することで、実現可能です。ヘッダー画像の場合、

  • tmp/body_top.phpにカテゴリごとの分岐処理を追加し、tmp/header-container.phpをカテゴリごとに作成する
  • tmp/header-container.phpにカテゴリごとに使う画像を変えるように記述する

の2パターンで実現可能です。今回は一つ目の方法を紹介します。

基本的な編集は子テーマで行いますが、一部親テーマにしか存在しないファイルを変更する必要があるので、その部分は親テーマのファイルを子テーマにコピーして編集していきます。

親テーマと子テーマの関係については以下で説明していますので、併せて確認してみてください。

WordPressの親テーマと子テーマの関係について
WordPressの親テーマと子テーマの関係性について詳しく解説します。親テーマと子テーマの役割、使い方、利点について理解することで、カスタマイズやテーマ変更をより効果的に行うことができます。
lifetechia.com
2024.08.09

ヘッダー設定のコード

Cocoonでヘッダー設定が行われている場所は、
header-container.phpになります。
この構造は複雑なので、以下の図に概要をまとめました。

構造

  1. single.phpが呼び出される。まずはメインのphpが最初に読み込まれます。
  2. get_header()でheader.phpが読み込まれる
  3. header.phpではさらにパーツごとに様々なファイルが読み込まれるが、ヘッダーロゴ画像を指定しているのは、tmp/body-top.phpのサイトヘッダー部分です。
  4. サイドヘッダーにあたるtmp/header-container.phpが読み込まれる
    ようやくヘッダーが設定されているファイルにたどり着きました。

カスタマイズ方法

ファイルの準備

まずは、親テーマからtmp/body-top.php,tmp/header-container.phpを子テーマにコピーします。

body-top.php

body-top.phpは以下の部分を変更します。
変更前

  <?php //サイトヘッダー
  cocoon_template_part('tmp/header-container'); ?>

変更後

    <?php
    // ヘッダーの条件分岐
    if (in_category('category-slug1')) {
        cocoon_template_part('tmp/header-container-1');
    } elseif (in_category('category-slug2')) {
        cocoon_template_part('tmp/header-container-2');
    } else {
        cocoon_template_part('tmp/header-container');
    }
    ?>

今回は、category-slug1、category-slug2で３パターンに分岐します。
category-slugはカテゴリごとに決まっているスラッグで、投稿のカテゴリーから確認できます。
スラッグの確認方法

header-container.php

続いてカテゴリーごとに表示するheader-container.phpを作成します。

        <?php //ロゴタグの生成
        generate_the_site_logo_tag(); ?>

この部分でロゴ画像が設定されているので、ここを次のように変更します。

 <div class="logo logo-header logo-image"><a href="https://[ドメイン名].com/" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text"><img class="site-logo-image header-site-logo-image" src="[画像ファイルのURL]" alt=""><meta itemprop="name about" content=""></span></a></div>

例えば
header-container-1.phpは次のようになります。

<?php //ヘッダーエリア
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit; ?>

<div id="header-container" class="header-container">
  <div id="header-container-in" class="header-container-in<?php echo get_additional_header_container_classes(); ?>">
    <header id="header" class="header<?php echo get_additional_header_classes(); ?> cf" itemscope itemtype="https://schema.org/WPHeader">

    <div id="header-in" class="header-in wrap cf" itemscope="" itemtype="https://schema.org/WebSite">


        <?php //キャッチフレーズがヘッダー上部のとき
        if (is_tagline_position_header_top()) {
           cocoon_template_part('tmp/header-tagline');
        } ?>

        <?php //ロゴ前にコードを挿入するためのアクションフック
        do_action( 'wp_header_logo_before_open' ); ?>

        <div class="logo logo-header logo-image"><a href="https://[ドメイン名].com/" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text"><img class="site-logo-image header-site-logo-image" src="[画像ファイルのURL]" alt=""><meta itemprop="name about" content=""></span></a></div>


        <?php //ロゴ後にコードを挿入するためのアクションフック
        do_action( 'wp_header_logo_after_open' ); ?>

        <?php //キャッチフレーズがヘッダー下部のとき
        if (is_tagline_position_header_bottom()) {
           cocoon_template_part('tmp/header-tagline');
        } ?>




      </div>


    </header>

    <?php cocoon_template_part('tmp/navi'); ?>
  </div><!-- /.header-container-in -->
</div><!-- /.header-container -->

header-container-2.phpも同様に作成することで、ロゴ画像をカテゴリごとに変更できます。

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