WordPressでHTML5チェックしたらNo p element in scope but a p end tag seen.と出てしまった時の対処方法

先日、当サイトのとあるページをNu Html Checkerでチェックしていたら以下のようなエラーが出ました。No p element in scope but a p end tag seen

No p element in scope but a p end tag seen.

「スコープ中にp要素がないけどpエンドタグ(</p>)があります。」と出ています。なんか、</p>が余計にあるっぽいです。

で、すぐに「Wordpress投稿中に、入力し間違えたかな?」と思い、投稿欄からテキストソースを確認してみたんですが、入力間違いではないようです。

どうやら、Wordpress(もしくはプラグイン)が自動的に、</p>タグを付け加えているようです。

ということで、Wordpressで同じようなバリデーションエラーが出たときの対処方法です。

スポンサーリンク
レクタングル(大)広告

不具合発生条件

WordPress上で、今回の不具合の発生条件としては、以下のようなdiv要素でコンテンツを囲ったときに、

以下のように、</div>が自動的に</p></div>に書き換えられてしまうようです。

なぜ自動的に</p>が付け加えられてしまうのかは、ちょっと原因が分かりませんでした。プラグインが原因かとも思い停止させたりしてみたのですけど原因は特定できませんでした。

対処方法

詳しい原因はわからなかったんですが、対処する方法を以下に書いておきます。

対処するには、functions.phpに以下のコードを貼り付ければOKです。

以下のように短く書くこともできます。

参考 本日のバッドノーハウ divの入れ子に/pが付く(3.9) – WordPress Snippet

やっていることは単純で、本文中に出てくる</p></div>を</div>に置換しているだけです。

このように、やると</p>が取り払われてしまうのではないかと思われるかもしれませんが、Wordpressで自動付加するpの閉じタグは、必ず後に改行が入るので置換されることはありません。

ただし、あまりないと思うけど</p></div>と手入力している場面がある場合は、置換されるかもしれないので使用しない方がいいかもしれません。

まとめ

ということで、今回の対処方法を行ったら、HTMLチェッカーで以下のようにエラー(警告)が出ることはなくなりました。

Document checking completed. No errors or warnings to show

Document checking completed. No errors or warnings to show.

ただ、今回の方法は、あくまで対処療法なので、原因がわかる場合は、原因の根本部分を修正した方が良いです。

そして、原因がわかりましたら、コメント欄にて教えていただけると、嬉しく存じます。