WordPressを使っていると入りやすい中身のないタグ要素をjsで抹殺する方法

WordPressを使っている人には憶えがあると思うのですが、記事を書いて更新して、その後記事のソースを見てみると、入れたはずのない<p></p>や<span></span>が入っていることがあります。

なんだか気持ち悪いし、HTMLの文法上よろしくないんですよね。そんなわけで、こいつらを強制抹殺してみましょう。

なぜ勝手に空の要素が入るのか?

これはもうWordPressの仕様上、しゃあないといえばしゃあないことなのですが、主に<p></p>が入ってしまう理由は、pタグやbrタグを整頓するwpautop関数ってのが動いているため。

もちろん制御は可能なんですが、タグを整頓するかしないかの2択しかないんですよね。
そのため、仮に整頓しないように制御してしまうと、投稿画面で改行したはずのものが記事を見ると改行されなくなったり、それまで勝手に段落分けされていたものが、されなくなってしまったり。
ある程度更新を重ねてきたブログになればなるほど、かなり困ったことになりかねないという問題というか、面倒な状況を生みかねない可能性をはらんでいます。

また、記事ページで<span id="more-1111"></span>のような空の要素が入っていることもありますが、こちらはトップページやカテゴリページなどで表示されている、続きを読むリンクの残骸のようなものだったりします。

いずれも、見かけ上はこれといって問題はないんですが、さきほど言及したように何も入っていない要素があるのは気持ち悪いし、何よりHTML文法上よくないのも事実。

おまじないで空の要素とサヨナラ!

wpautop関数を制御せず、デザイン的にも問題はまず出ないように、空の要素を消し去りたい。そんな願いを叶えてくれるのがjsを使ったおまじない。

// 空のspan要素を消す
$("span:empty").remove();
// 空のp要素を消す
$("p:empty").remove();

はい、たったこれだけ。
必要に応じて消したい空の要素を変えるのもかんたんですね。

間違えてfunctions.phpに書き込まないでくださいね。エラーが出ますよ。
書き込むのはjsファイルですからね。

別にこんなことしたからといってSEOで評価が上がるとか、そんなことは一切ありませんが、wpautop関数をいじってデザインの崩れを起こしたくないけど、空の要素はどうにかしたいという人にはとてもいい方法ではないかと思うので、そういう人がいたらぜひ試してみてください。