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>
  <!--コンテンツ-->
</div>

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

<div>
  <!--コンテンツ-->
</p></div>

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

対処方法

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

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

//</div>に</p></div>が追加されてしまう
function p_end_tag_fix($content){
  $the_content = str_replace( '</p></div>','</div>', $content );
  return $content;
}
add_filter('the_content', 'p_end_tag_fix');

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

//</div>に</p></div>が追加されてしまう
add_filter('the_content',function($content){
 return str_replace( '</p></div>','</div>', $content );
});

参考 本日のバッドノーハウ 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.

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

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