waka8*stakes

〜馬絵+林檎+Wordpress〜

WordPressの投稿で勝手に入った空のpタグを消したい

bye2emptyp

WordPressでブログを書いてたら、おかしなところに空のpタグが入ってることがあります。私はHTMLモードで自分で段落にはpタグを挿入してるのですが、改行タグもpタグも入れた覚えがないのに変なところに改行が入っていたことがあります。

CSSでマージンやパディングを取りすぎたかなと思ってそれらの数値を小さくしてみても隙間が収まらなくて困ってて、Chromeの『要素を検証』でHTMLを調べてみたら変なところに『<p></p>』と空のタグが入ってました。投稿を送信したときに入ってしまったのかと思い、これを消そうと編集画面に戻ってみたらそんなものはいっさいありませんでした。おそらくアレが悪さしてる、そう思いました。

それはきっと、wpautopのしわざぢゃ〜!

WordPressには、投稿を2つ改行すると勝手にpを挿入するwpautopという、ブログにHTMLタグを付けない人にとっては便利なものがあるのですが、HTMLの知識があって、記事にHTMLタグを付けて書く人に取っては迷惑な機能でもあります。そもそもWordpress使ってる時点でHTMLに詳しいブロガーである可能性は高いからwpautopは邪魔な存在だと感じる人が多そうです。Google先生に『wpautop』と言うと『無効化』に関する記事を沢山教えてくれます。

pタグが全部消えてしまった

プラグインを使ったり、functions.phpにコードを追加したりしてwpautopを無効にすることが出来る事がわかったので早速試してみました。簡単なコードを書くだけなんでプラグインではなくいろんなブログ記事で紹介されているfunctions.phpにコードを書き足す方をやってみました。

/*wpautopを無効化する*/
remove_filter('the_content', 'wpautop');

functions.phpに記述

たったこれだけです。でもこれだと自分で書いた<p></p>も消えてしまい、表示が崩れてしまいます。もうどうにもなりません。『気にしたら負け』と諦めるしかないと思ってました。

しかし諦めきれずにもっと具体的に、wordpress 空のpタグとGoogle先生に質問してみたら最善の方法を紹介してる記事を教えてくれました。

最強の呪文はPHPではなくjavascriptだった

テーマ内の記事が入るところ(single.phpの<?php the_content();?>)の後にjs(jQuery)を追加すると空のpタグがきれいさっぱり消えてくれました。もちろん昔の記事にも反映されております。もう予期せぬ空のpタグに怯える事もありません!今まで悩んだの何やったんやろ…と思えるぐらい簡単に消えました。

<script type="text/javascript">
/*勝手に作られた空のpとspanタグを消す*/
$('span:empty').remove();
$('p:empty').remove();
</script>

single.phpの<?php the_content();?>の後に記述

[参考ページ]

こちらの記事の『jsのおまじない』をそのまま使わせて頂きました。『jsファイルに書く』と説明されてましたがsingle.php等に書いても同様に動作します。

結論

  • remove_filter('the_content', 'wpautop');では自分で書いたpタグまで消してしまう
  • 空っぽのpタグはjQueryで消す。これ最強!