[wp + js]content内の見出しタグにspanを自動挿入

あんまり使わないけども。

どういうあれか

投稿なり固定ページなりで見出しタグを作るとする。

装飾したいから見出しタグの中を<span>で囲いたい。

そういう機能はないのでどうにかしなきゃだけど、コンテンツをテーマに直接書くと管理画面での編集がだるくなるしそもそもページ単位でテーマを作らなきゃいけなくなってよくない。なので、自動挿入するやつを組み込みたい。

こうしない

functions.php側でできたはずなんだけど、なんか上手くいかなかった。

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);

以前はできたはずなんだけどエラーを吐いてしまう。

目的は装飾だからまあ、アプローチはこれに限らずともいいわけで。

こうする

こんな感じだったとして。

<article>
<?php the_content(); ?>
</article>

こう。

$(function(){
    $('article').find('h2,h3,h4,h5,h6').each(function(){
        $(this).wrapInner("<span></span>");
    })
})

article内にある全ての見出しタグ（h2～h6）を対象にspanをやっていく内容。

注意

ラッピング要素を含めて指定するってルールにしないと、単純に見出しタグを指定するとページ内の全てに掛かってしまうので注意。

あとは、jsでの装飾だから反映にディレイが掛かる。必要経費です。頑張って高速化させるなり諦めるなりしましょう。