[wp]the_content();内の見出しにspanを入れる方法

functions.phpでやれる。

仕様とか導入後の活用など
やりたいこと
やる
注意点

仕様とか導入後の活用など

そもそも、コードエディターを使っていたら関係ない話。ビジュアルエディターが前提。

WPの投稿やら固定ページやら、当ブログで言えば今見ているエリアの内容はthe_content();で出力する。出力される内容はブロックの種類によって、<p>だったり<h2>だったり<ul>だったり<table>だったり<figure>だったりする。ブロックを選ぶことでこれらを変更するわけだけど、内部の構成はWPに任せっきりなので込み入ったカスタマイズはできない。classを付けるのがせいぜい。

特定要素に対して親要素で囲いたいとかそういうアレは投稿画面ではできない（コードエディターならできる）。functions.phpとかでカスタマイズが必要になる。

youtubeの埋め込みに対してレスポンシブ化のために親要素をつけたりclassを振ったりしてどうのこうのするとか、the_content();のカスタマイズは実はそんなに珍しいことじゃない。

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

サイト内に埋め込んだYOUTUBE動画をレスポンシブに対応させる方法をご紹介します。スマホでサイトを観覧した時でも、もうYOUTUBE動画が画面からはみ出すことはありません。このカスタマイズは3分間でマスターできます！

やりたいこと

記事内の見出し部分を装飾するのに見出しタグだけだとしんどいので、見出しタグの中に<span>を入れたい。

これを
<h2>見出し見出し見出し見出し</h2>

こうしたい
<h2><span>見出し見出し見出し見出し</span></h2>

やる

<h2>だけやりたいならこうする。

function the_content_after_filter($content) {
    $content = str_replace('<h2>','<h2><span>',$content);
    $content = str_replace('</h2>','</span></h2>',$content);
    return $content;
}
add_filter('the_content', 'the_content_after_filter', 10);

どうせなら他のも対応させる。

function the_content_after_filter($content) {
    $content = str_replace('<h2>','<h2><span>',$content);
    $content = str_replace('</h2>','</span></h2>',$content);
    $content = str_replace('<h3>','<h3><span>',$content);
    $content = str_replace('</h3>','</span></h3>',$content);
    $content = str_replace('<h4>','<h4><span>',$content);
    $content = str_replace('</h4>','</span></h4>',$content);
    $content = str_replace('<h5>','<h5><span>',$content);
    $content = str_replace('</h5>','</span></h5>',$content);
    $content = str_replace('<h6>','<h6><span>',$content);
    $content = str_replace('</h6>','</span></h6>',$content);
    return $content;
}
add_filter('the_content', 'the_content_after_filter', 10);

すっっごいブサイクだけどちゃんと動くからこれで。

なんかpreg_replace()とか使えば一括でやれそうなんだけど、検索はできても置換後の指定がよくわからなかった。’/<h[1-6]>(.*?)<\/h[1-6]>/’で検索掛けたあとどうしたらいいか教えてください。

注意点

プラグインやら自作で目次を突っ込んでる場合、ひょっとすると干渉しあうかもしれない。

動作確認すること。