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関数をいじってデザインの崩れを起こしたくないけど、空の要素はどうにかしたいという人にはとてもいい方法ではないかと思うので、そういう人がいたらぜひ試してみてください。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく