WordPressのブロックテーマでサイトを制作していると、ヘッダーに配置する「サイトタイトルブロック」の扱いで少し悩むことがあります。
サイトのトップページでは、サイト名そのものを h1 として扱いたい。一方で、投稿詳細ページや固定ページでは、そのページ固有のタイトルを h1 にしたい。そう考えると、ヘッダー内のサイトタイトルは p などにしておきたい場面もあります。
ただ、WordPress標準のサイトタイトルブロックでは、ブロックに設定したHTML要素が基本的にどのページでも同じように出力されます。
そこで、表示中のページに応じてサイトタイトルブロックのHTML要素を切り替えられるようにするプラグイン「OD Dynamic Site Title」を作りました。
ことの成り行きとしては、先ほど公開した OD Structured Data プラグインの動作確認等をチェッカーと AI で行っていたのですが、チャッピーから「構造化データは問題ないけど h1 タグが２つあるよ？」と言われて、このプラグインを作る重い腰を上げたところです。
OD Dynamic Site Titleでできること
OD Dynamic Site Titleは、WordPressの core/site-title ブロックが出力するHTML要素を、ページ種別ごとに切り替えるためのプラグインです。
設定できる対象は、以下の3種類です。
- フロントページ
- 投稿一覧ページ
- その他のページ
初期設定では、フロントページではサイトタイトルを h1、投稿一覧ページやその他のページでは p として扱うようになっています。
つまり、トップページではサイト名を大きな見出しとして見せつつ、投稿詳細ページや固定ページでは投稿タイトル・固定ページタイトルを h1 にしやすくなります。
どんな場面で便利か
個人的には、ブロックテーマでサイト全体のヘッダーを組んでいるときに便利だと感じています。
特に、以下のようなケースです。
- トップページではサイト名を主見出しとして扱いたい
- 下層ページではページタイトルを
h1にしたい - ヘッダー内のサイトタイトルを、ページによって
h1とpで切り替えたい - テンプレートのHTMLを直接書き換えずに調整したい
- ブロックテーマの運用に合わせて、管理画面から設定を変えたい
サイトタイトルは、見た目としては「ロゴやブランド名」に近い役割を持つこともあります。一方で、HTML上は見出し構造にも関わってきます。
このあたりは、制作時に一度決めても、サイト構成やテンプレートの作り方によって後から調整したくなることがあります。そういうときに、プラグイン側で切り替えられるようにしておくと運用しやすいかなと考えています。
設定方法
サイト共通の設定は、WordPress管理画面の以下から変更できます。
設定 > 表示設定 > Site Title Block HTML Element
ここで、フロントページ・投稿一覧ページ・その他のページごとに、p または h1 から h6 までを選択できます。
また、サイトタイトルブロックごとに動作モードを選ぶこともできます。
- WordPress標準の設定を使用する
- サイト共通設定を使用する
- このブロックだけ個別設定を使用する
たとえば、ヘッダー内のサイトタイトルブロックだけ動的に切り替えて、フッター側のサイトタイトルブロックはWordPress標準のままにする、といった使い方もできます。
保存済みのHTMLを直接書き換えない
このプラグインは、保存済みのテンプレートや投稿本文のHTMLを直接書き換えるものではありません。
レンダリング直前にサイトタイトルブロックの level 属性を調整し、最終的なHTMLの生成はWordPressコア側のサイトタイトルブロックに任せています。
そのため、既存のブロック内容を大きく変更するというよりは、表示時のHTML要素を文脈に応じて調整するためのプラグイン、と考えてもらうと近いと思います。
注意点
動的切り替えは、すべてのサイトタイトルブロックに自動で適用されるわけではありません。
対象のサイトタイトルブロックで「サイト共通設定を使用する」または「このブロックだけ個別設定を使用する」を選んだ場合に適用されます。
また、執筆時点のリポジトリ情報では、動作要件は WordPress 6.9 以上、PHP 7.2 以上です。WordPress.org公式ディレクトリではなく、GitHub Releasesから更新情報を取得する構成になっています。
まとめ
OD Dynamic Site Titleは、派手な機能を追加するプラグインではありません。
ただ、ブロックテーマでサイトを組んでいるときに、「トップページではサイトタイトルを h1 にしたいけれど、下層ページではページタイトルを h1 にしたい」という地味だけれど大事な調整をしやすくするためのものです。
ブロックテーマでの見出し構造やヘッダー設計に悩んでいる方の参考になれば嬉しいです。
