WordPressのwpautop()自動整形で</p>が余計に入るバグ回避方法

WordPressのwpautop()自動整形で</p><noscript><img decoding=

自作のCitron WP Shortcodeを作成している時に、どうも wpautop() を通すとレイアウト崩れが起こる。正常に表示されないと言ったバグに遭遇し…。

解決方法を探すためにあれやこれやと試行錯誤し、無駄な時間を過ごしたので簡単にですが遭遇する記載例と、その回避策を併せて紹介したいと思います。

もくじ［］

wpautop()
バグが出る記載例
バグの解説
回避策
Gutenbergでの注意点
当サイトで配布のショートコード使用について
おわりに
まとめ

wpautop()

関数名を読み解くとwp auto pWordPress(wp)に自動的(auto)にPタグ(p)を付与。って感じでしょうか。

関数リファレンスの説明でも、二行以上にわたる改行があれば<p>…</p>タグでくくると書かれており、自動的に適応されるコンテンツは、投稿や固定ページの本文と抜粋などです。

参照：関数リファレンス/wpautop

Gutenbergに変わる前のクラシックエディターでのビジュアルとHTMLの切り替えで wpautop() が悪さをし、レイアウトが崩れる。HTMLタグが勝手に消えるなどでfunction.phpに機能を停止するコードを書き込んだ方も少なからず居るのではないでしょうか。

今回は wpautop() を有効にしている際に起きるバグ的なものを一つ紹介します。

バグが出る記載例

まずはバグが出る記述例を見てみましょう。

バグ例1

<!-- wpautop前 -->
 <div>
     <div>バグ有り</div>
 </div>

<!-- wpautop後 -->
<div>
<div>バグ有り</div>
</p></div>

バグ例2

<!-- wpautop前 -->
	<div>
		<div>バグ有り2</div>
	</div>

<!-- wpautop後 -->
<div>
<div>バグ有り2</div>
</p></div>

wpautop() を使う前のHTMLタグの記入例としては何もおかしい所はありませんよね？

でも wpautop() を通すと何故か余計な</p>タグが挿入されるだけでなく、綺麗に<p></p>のセットで記載されていないため構文エラーにもなっています。

レイアウトの観点からですと余計な改行が一つ最後に入る感じになります。

バグの解説

結論から言えば

</div>タグの閉じタグが連続で2回続く場合、その間に半角スペースやタブ(\t)を入れると</p>が挿入されます。

分かりやすく一行で記入してみます。

バグの解説

<!-- バグが出る -->
<div><div>バグ有り</div> </div>
<div><div>バグ有り</div>	</div>

<!-- バグが出ない -->
<div><div>バグ無し</div></div>
<div><div>バグ無し</div></div>

この現象に合う方はコードをインデントで見やすく整形している人でしょう。
私もその例に漏れずインデントしながらコードを記載していたため遭遇しました。

インデントしている例

<div class="a">
    <div class="b">
        <div class="c">バグ有り</div>
    </div>
</div>

忘れた頃に見ても理解しやすいように、コードを分かりやすく書く上で欠かせないインデントなんですが、wpautopを使う場面では思わぬ落とし穴に落ちてしまいます。

またこの現象は半角スペースやタブ(\t)のみで全角スペースや改行などでは起きません。

以下の例は全て問題なく wpautop() が適応されます。

問題ない記載例

<!-----------------------------
  半角スペース＋文字
  ----------------------------->
<div><div>綺麗にPタグで閉じられる</div> あ</div>

<!-- wpautop()後 -->
<div>
<div>綺麗にPタグで閉じられる</div>
<p> あ</p></div>


<!-----------------------------
  全角スペース
  ----------------------------->
<div><div>綺麗にPタグで閉じられる</div>　</div>

<!-- wpautop()後 -->
<div>
<div>綺麗にPタグで閉じられる</div>
<p>　</p></div>


<!-----------------------------
  半角スペース＋全角スペース
  ----------------------------->
<div><div>綺麗にPタグで閉じられる</div> 　</div>

<!-- wpautop()後 -->
<div>
<div>綺麗にPタグで閉じられる</div>
<p> 　</p></div>


<!-----------------------------
  spanに空白スペース
  ----------------------------->
<div><span><span>spanは関係ない</span> </span></div>

<!-- wpautop()後 -->
<div><span><span>spanは関係ない</span> </span></div>


<!-----------------------------
  改行のみを複数入れた場合
  ----------------------------->
<div><div>/p タグは入らない</div>



</div>

<!-- wpautop()後 -->
<div>
<div>/p タグは入らない</div>
</div>

インデントを行う方はタブ(\t)で行うか、半角スペース4つで行うケースが多く。
コードを綺麗に書く人を狙い撃ちしたかのようなバグなんですよね、これ…。