SWELLのトップページで、ロゴを囲むh1をdivに変え、本文に自分でページ見出しを置く方法です。ここでは「設定→表示設定」で固定ページをホームページに指定しているサイトを対象にします。
ロゴ画像がh1の中にあることだけを理由に、変更する必要はありません。本文側に表示する見出しを用意したい場合に使ってください。この変更による検索順位の向上は確認していません。
対象と変更しない部分
変更するのは、固定フロントページの通常ヘッダーロゴを囲むタグだけです。ロゴ画像、代替テキスト、リンク先、クラスはSWELLが出力したものを保ちます。追従ヘッダー、投稿・固定ページの個別表示、カテゴリーページ、最新の投稿を表示するトップページは変更しません。
以前掲載していた「本文へ非表示のh1を自動追加するコード」は使いません。旧コードを導入済みの場合は、motoki_swell_change_h1_to_divとmotoki_insert_hidden_h1の関数および対応するadd_filterを外してから、下のコードへ置き換えてください。複数の例を同時に登録しないでください。
先にトップページの見出しを用意する
ホームページに指定した固定ページをブロックエディターで開き、本文の内容を表す見出しブロックを追加してレベルをH1にします。読者にも見える位置へ置き、非表示にはしません。既に本文やページタイトルとして適切なh1がある場合は、追加せずその見出しを利用します。
このコードはh1を新設しません。本文側の見出しを用意しないままロゴだけをdivに変えると、ページの主見出しがなくなる場合があります。公開前にプレビューとページのHTMLを確認してください。
子テーマのfunctions.phpに追加するコード
編集前のファイルをバックアップし、子テーマ「SWELL CHILD」のfunctions.php、またはCode SnippetsのPHPスニペットのどちらか一方に追加します。既存のPHPファイルへ貼る場合は、PHP開始タグを追加しません。親テーマは編集しないでください。
add_filter( 'swell_parts_head_logo', function ( $html, $is_fixbar ) {
// 固定ページをフロントページにした場合だけ変更する。
if ( ! is_front_page() || is_home() || $is_fixbar ) {
return $html;
}
// 既存のロゴ画像・リンク・属性を維持し、外側のタグだけ変更する。
if ( ! preg_match( '/\A<h1\b([^>]*)>(.*)<\/h1>\z/s', $html, $matches ) ) {
return $html;
}
return '<div' . $matches[1] . '>' . $matches[2] . '</div>';
}, 10, 2 );
swell_parts_head_logoの2つの引数を受け取り、フロントページかどうかと追従ヘッダーかどうかを判定します。外側がh1のときだけdivへ変換し、それ以外のHTMLはそのまま返します。SWELLのロゴを組み直さないため、画像やリンク属性をこのコード側に複製する必要はありません。
反映後の確認と戻し方
利用しているページキャッシュをクリアして、トップページを開き直します。通常ヘッダーのロゴが表示され、ロゴのリンクがホームへ移動すること、本文のh1が読めることを確認してください。PCとスマホの両方で、ロゴの欠けや幅の変化がないか確認します。
投稿ページと追従ヘッダーも開き、元の表示が保たれていることを確認します。反映されない場合は、ホームページの指定、スニペットの有効状態、キャッシュを確認してください。テーマの内部関数を別のコードで上書きしている場合は、その競合も確認します。
元に戻すには、今回追加したフィルターを削除または無効化し、キャッシュをクリアします。本文に追加したh1を残すかどうかは、復元後のページ構造を見て判断してください。旧コードを復元して非表示のh1を増やす必要はありません。
固定フロントページの実画面
固定ページをフロントページとして表示した実SWELL 2.19.0で、ロゴの外側がdivになり、本文に読者から見えるh1が残ることを確認しました。ロゴ画像・代替テキスト・ホームリンク・クラスも保持されています。
PC幅1280pxとスマホ幅390pxで確認し、ロゴのホームリンクからTabで次のリンクへ移動できました。通常投稿のロゴは変更対象にしません。
自分のサイトでは、見た目だけで判断せず、開発者ツールで通常ヘッダーのc-headLogoと本文のh1を確認してください。元に戻すときは、このフィルターを外し、本文の見出し構成も見直します。
検証範囲
掲載コードは固定フロントページ、追従ヘッダー、最新の投稿、個別ページ相当の条件と、空文字・h1以外の入力を分けて確認しています。各サイトのヘッダー設定やプラグインとの組み合わせは異なるため、導入先の公開表示を確認してから運用してください。
関連記事：SWELLのフック一覧と使い方。旧GitHubサンプルと本文のコードが異なる場合は、本記事の対象条件と掲載コードを確認してください。
よくある質問：SWELLでトップページのh1をdivに変更するとき
ロゴがh1の中にあるだけで、変更する必要はありますか？
記事では、ロゴ画像がh1の中にあることだけを理由に、変更する必要はなく、本文側に表示する見出しを用意したい場合に使うとされています。この変更による検索順位の向上は確認していません。
どのページが対象ですか？
「設定→表示設定」で固定ページをホームページに指定しているサイトの、固定フロントページの通常ヘッダーロゴを囲むタグだけです。記事によると、追従ヘッダー、投稿・固定ページの個別表示、カテゴリーページ、最新の投稿を表示するトップページは変更しません。
コードを入れる前に、何を用意しますか？
ホームページに指定した固定ページをブロックエディターで開き、本文の内容を表す見出しブロックを追加してレベルをH1にします。読者にも見える位置へ置き、非表示にはしません。既に適切なh1がある場合は、追加せずその見出しを利用します。
このコードは、h1を新しく作りますか？
作りません。記事では、このコードはh1を新設しないため、本文側の見出しを用意しないままロゴだけをdivに変えると、ページの主見出しがなくなる場合があります。公開前にプレビューとページのHTMLを確認してください。
以前の「非表示のh1を自動追加するコード」は、どうしますか？
使いません。記事では、旧コードを導入済みの場合は、motoki_swell_change_h1_to_divとmotoki_insert_hidden_h1の関数および対応するadd_filterを外してから、記事のコードへ置き換えます。複数の例を同時に登録しないでください。
反映後は、何を確認しますか？
ページキャッシュをクリアしてトップページを開き直し、通常ヘッダーのロゴが表示され、ロゴのリンクがホームへ移動すること、本文のh1が読めることを確認します。PCとスマホの両方でロゴの欠けや幅の変化がないか確認し、投稿ページと追従ヘッダーの元の表示も確認します。開発者ツールで、通常ヘッダーのc-headLogoと本文のh1も確認してください。
反映されないときは、どうしますか？
記事では、ホームページの指定、スニペットの有効状態、キャッシュを確認します。テーマの内部関数を別のコードで上書きしている場合は、その競合も確認します。
元に戻すには、どうしますか？
今回追加したフィルターを削除または無効化し、キャッシュをクリアします。本文に追加したh1を残すかどうかは、復元後のページ構造を見て判断してください。旧コードを復元して非表示のh1を増やす必要はありません。
どこまで動作確認されていますか？
記事では、固定ページをフロントページとして表示した実SWELL 2.19.0で、ロゴの外側がdivになり、本文に読者から見えるh1が残ることをPC幅1280pxとスマホ幅390pxで確認したとされています。各サイトのヘッダー設定やプラグインとの組み合わせは異なるため、導入先の公開表示を確認してから運用してください。
