SWELL│トップページのh1をdivに変更するカスタマイズ

SWELLでサイトロゴを設定するとトップページのh1が空白になってしまいます。

Chromeの拡張機能「SEO META in 1 CLICK」でページ構造を確認しています。

サイトロゴを使用している大手サイトのトップページでも同様の設定なので、SEO的には問題ありません

しかし一部のサイトSEO診断でこのSWELLのh1が指摘されます。

Ubersuggestのサイト監査

結果、空白は気になるので自分で意図したh1を入れたいという要望があるので、本記事では以下のカスタマイズ方法を紹介いたします。

SWELLカスタマイズの目的
  1. SWELLのトップページのh1(サイトロゴ画像・空白)をdivに変更する
  2. 新しくh1を自作して、h1にテキストを挿入する

カスタマイズ後はサイトロゴを表示させつつ、h1にサイト名のテキスト等を入れることができます。

是非、参考にしてみてください。

目次

SWELLトップページのh1をdivに変更するカスタマイズ

SWELLのトップページのサイトロゴのh1をdivに変更する方法はfunctions.phpをコードを挿入するだけです。

swell_parts_head_logoというフックを使用しています。

最後にh1のテキストを自作しましょう。

以下、詳しく解説いたします。

functions.phpにコードを挿入する

コードを記述する場所は下記になります。

WordPressの管理画面 > 外観 > テーマファイルエディター > functions.php

functions.phpに下記のコードを挿入してください。

function motoki_swell_change_h1_to_div( $return ) {
		if ( \SWELL_Theme::site_data( 'logo_id' ) || \SWELL_Theme::site_data( 'logo_url' ) ) {
			$logo = \SWELL_Theme::get_pluggable_parts( 'head_logo' );
			$logo_class = '-img';
		} else {
			$logo = \SWELL_Theme::site_data( 'title' );
			$logo_class = '-txt';
		}
		$tag = 'div';
		$return = '<'. $tag .' class="c-headLogo '. $logo_class .'">'.
					'<a href="'. \SWELL_Theme::site_data( 'home' ) .'" title="'. \SWELL_Theme::site_data( 'title' ) .'" class="c-headLogo__link" rel="home">'. $logo .'</a>'.
				'</'. $tag .'>';
		return $return;
}
add_filter( 'swell_parts_head_logo', 'motoki_swell_change_h1_to_div' );

9行目、SWELL_PARTS.phpの記述の一部のh1の記述をdivに変更したものになります。

h1のタイトルを作成する

キャッシュクリア後、SWELLのトップページにあるサイトロゴのh1がdivに変更されます。

しかしこのままだとトップページにh1がなくなってしまいます。

ですのでトップページのコンテンツ(記事編集)に見出し、h1を作成しましょう。

キャッシュクリアして確認する

WordPressの上部メニューからキャッシュをクリアしましょう。

SWELL設定 > キャッシュクリア(コンテンツ)

以上でデータ構造が改善されます。

最後に、ページの構造が確認できるChromeの拡張機能「SEO META in 1 CLICK」で確認してみましょう。

作成したh1(テキスト)だけがしっかり表示されています。

もちろんヘッダーはサイトロゴ(div)の表示のままです。

以上で、カスタマイズは終了です。

まとめ

本記事ではSWELLトップページのh1をdivに変更するカスタマイズを紹介いたしました。

小さなカスタマイズではありますが、トップページのh1が空白ではなくテキストをいれることによって、見た目の階層構造の並びが整理することができます。

after

ぜひ本記事を参考にしてカスタマイズしてみてください。

ちなみに会社名の部分はカスタム書式を使って非表示にしています。

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる