WordPressの見出しブロックは、そのブロックそのものに対する装飾はできても、それ以上のことは難しいですよね？
例えば以下のように、2段にして、上には小さい文字を、下には大きい文字をとしたい場合（この機能を使用するかを決めていないので画像で入れてます）にはどうしますか？
よくある例としては、以下のような感じではないかと思います。
- 段落ブロックを追加（小さい文字部分用）
- 見出しブロックを追加（大きい文字部分用）
- 1と2をグループ化
これの1から3に対して適度なスタイルを加えて整形した上で非同期パターンなどに登録しておけば見た目は全然オーケーですね。
ただこれだと「段落タグ」＋「見出しタグ」になってしまうので、検索エンジンなどに構造や内容を正確に伝える上ではどうなの？という疑問が湧いたのです（実際にはあまり関係ないのかも知れないけど）。
そこで私がしようとしたのは、あくまでも一行目の小さい文字も見出しタグの一部にする（全部の文字列をHタグで囲む）ことです。
やってみたらできたものの、ちょっと難ありな点もあるので実装し続けることはせず一旦メモとして公開しておきます。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
1つの見出しブロック内で改行＆行ごとの文字サイズの変更を実現してみる
このカスタマイズでできること、できないことの概要
一応以下のような仕様になります。
- 見出しブロックの中で「Shift」キーを使って改行する
- 改行前の文字列はspanタグで囲む
- 2に対してスタイルコードを当て、残りは通常のスタイルにしておく
特にブロックを作るわけでもないので開発環境なども不要で、気軽に実装はできるようにはしたものの、以下のような難点が残りました。
- 2つ以上改行してしまうと動作しない（つまり動き自体は不安定なのかも．．）
- ブロックエディター側では再現されない（見出しに設定している文字サイズの行が2段表示されるだけ）
以下が一応本ページの方法で完成させた場合（上記の画像のようにした場合）のブロックエディター側の表示とフロントエンド側で実際に出力されるHTMLタグです。
<h2 class="wp-block-heading has-text-align-center is-br-microtext is-style-head-custom">＝＝ 見出しのサブ文字列 ＝＝<br>メインの見出し文字列</h2>こんな仕様でよければ、やってみる価値はあるのでは？と思います。
なお、このカスタマイズではjQueryによるタグの解析と書き換え、および、スタイルコードの適用が必要ですので、お使いのテーマにそのような環境が備わっている前提で話を進めます。
ちなみにブロックテーマを使われていて、今はそんな環境が備わっていないという方は、以下のページなど参考になるかも知れません。
具体的な実装手順
JS(jQuery)が書けるファイルへ以下を追加します。
WordPress標準のjQueryを利用してスクリプトを適用させる書き方をしていますので、WordPress標準のjQueryが読み込まれていて、それの読み込み後に以下のスクリプトが読み込まれるという状況が必要です
/* 見出しブロックの改行前の文字列を小さい文字列として表示 */
jQuery(document).ready(function($) {
$('.wp-block-heading.is-br-microtext').each(function() {
var innerHTML = $(this).html();
var breakIndex = innerHTML.indexOf('<br');
if(breakIndex !== -1){
var beforeBreak = innerHTML.substring(0, breakIndex);
var afterBreak = innerHTML.substring(breakIndex, innerHTML.length);
$(this).html('<span>' + beforeBreak + '</span>' + afterBreak);
}
});
});以下のスタイルコードをフロントエンドのスタイルが適用されるファイルへ追加します。
ここで紹介するのは1行目のテキストに対するスタイルコードのみです。あとの装飾や調整はご自身で行ってください
.is-br-microtext span {
font-size: 0.8rem;
}コードとしてはこれですべてです（え？こんだけって感じです）。
動きを平たく言うと、ページ表示後にjQueryが発火させ、Hタグ（見出しタグ）に「is-br-microtext」という追加CSSクラスがあれば、その見出しタグの中にある改行タグ(brタグ)の直前から見出しタグ内の先頭文字列までをspanタグで囲む、スタイルコードによってspanタグで囲んだ部分は文字の大きさを0.8remにするというものです。
コード類がきちんと読み込まれていれば、ブロックエディターで見出しブロックを挿入後、追加CSSクラスへ「is-br-microtext」を追加した上で、文字を小さくするテキストを入力後「Shift」＋「Enter」で改行して文字を大きくするテキストを入力するという作業で冒頭の画像のように2段＋文字サイズの異なる見出しが表示できます。
以上、どんなアイディアなんだろう？程度に考えて実装してみてもらえれば幸いです。
