CocoonでフロントページだけヘッダーロゴをH1タグにする方法

CocoonのサイトロゴをH1タグに変更する方法をご紹介します。

コードをコピペ

以下のコードをfunctions.phpにコピペで完了です。

// フロントページのヘッダーロゴをH1に変更
add_filter( 'the_site_logo_tag', function( $all_tag, $is_header ) {
  if ( is_front_page() && $is_header ) {
    $all_tag = str_replace('<div', '<h1', $all_tag);
    $all_tag = str_replace('</div>', '</h1>', $all_tag);
  }
  return $all_tag;
}, 10, 2 );

フィルターフックの利用

the_site_logo_tagフィルターで、ロゴタグのHTMLを受け取り、必要な部分だけ加工しています。

条件分岐

• is_front_page()：トップページのときだけ実行する
• $is_header：ヘッダー部分のロゴであることを確認する

この2つの条件を満たす場合にのみ、タグを書き換えます。

div → h1に置換

str_replace() を使って、開始タグ<divを<h1に、終了タグ</div>を</h1>に置き換えています。

Cocoonのロゴ出力の仕組み

Cocoonでは、header.phpの中でtmp/body-top.phpが呼び出され、さらにtmp/header-container.phpを経由してロゴ部分が生成されています。

最終的にロゴタグの生成にはgenerate_the_site_logo_tag()という関数が利用されています。

この関数はlib/html-forms.phpの394行目付近に定義されており、以下のapply_filtersを通して出力されています。

echo apply_filters(
  'the_site_logo_tag',
  $all_tag,
  $is_header,
  $home_url,
  $site_logo_text,
  $site_logo_width,
  $site_logo_height
);

つまり、このthe_site_logo_tagフィルターを利用すれば、直接テーマファイルを編集することなく、ロゴのタグを自由に変更できるというわけです。

留意点

将来的に、Cocoonのアップデートで仕様が変わった際にはうまく置換できない可能性はありますが、変わったとしても大きな問題にはならないので気にすることはないと思います。

また、ロゴタグをH1に変更したことで、ページタイトルのH1と併せて２つ存在することになりますが、H1は複数あってもSEO的に全く問題ありません。

ページタイトルの方は、固定ページ内のページ設定で「タイトルを表示しない」にチェック入れるか、CSSでdisplay:noneにすればOKです。

まとめ：正直あまり気にする必要ないかも

現在はAIや検索エンジンの進化により、見出しタグやロゴタグが（昔の）推奨通りでないからといって、SEO的に不利になる可能性は限りなく低いと考えられます。

が、クライアントの意向に合わせて実装する場面も少なくありません。

今回ご紹介した方法は、テーマを直接編集せずにカスタマイズできる安全なやり方です。

必要に応じてご活用いただければと思います。

あわせて読みたい

Cocoonでカスタム投稿タイプのパンくずリストをカスタマイズする方法 Cocoon v2.8.5でついに「カスタム投稿タイプのパンくずリスト」に正式対応しました。 あわせて、カスタムタクソノミーのカテゴリーラベル表示にも対応したようです。 カ…

カスタマイズに困ったらお気軽にご相談を！

• 「ちょっとしたCSSの調整だけお願いしたい」
• 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔