何故か入ってしまう空のpタグ
WordPressで投稿記事や固定ページを作成している時に、自分でHTMLを記載して投稿すると、何故か「<p></p>」といった、文章が何も書かれていないpタグが挿入されてしまう時があります。
特にインデントを付けたり、HTMLのタグの前後で改行を入れたりした時に発生しやすい現象です。
この謎のpタグが入ると、実際のページ表示上では一行分の余白が生まれてしまい、デザインがおかしくなってしまう厄介な現象です。
今回はその空のpタグが勝手に挿入されるのを防ぐ方法を紹介したいと思います。
対処法:javascriptで空のpタグを除去するコードを入れる
対象法としては、javascript(正確にはjQuery)を使用します。
使うコードは以下の通りで、「空のpタグを除去する」というプログラムが書かれています。
<script type="text/javascript"> $('p:empty').remove(); </script>
ただし、javascriptは投稿記事や固定ページの内容に直接書いても動かないので、使用しているテーマのソースファイルに追記します。
WordPressでは、投稿記事については「single.php」、固定ページについては「page.php」というソースファイルが、テンプレートとなっています。
どちらも対策したい場合は、「single.php」と「page.php」を修正すればOKです。
詳しい手順は次のとおりです。
①WordPressのダッシュボードの「外観」内にある「テーマの編集」を選択します。
②画面をスクロールし、右側のテンプレートから個別投稿ページ(page.php)を探し、選択します。
③エディタ画面の末尾に先程のjavascriptコードを貼り付け、「ファイルを更新」を押します。
④同様に、個別投稿(single.php)を見つけ出し、修正を行ってください。
以上の修正を加えることで、謎の空白pタグが消えるようになります。
WordPressで意図しないレイアウトになってしまう場合は、この謎のpタグ問題を疑ってみて、もしこの現象に当てはまるようでしたら、上記対処法を試してみてください。
なお、テーマのソースファイルを修正する際は必ずバックアップを取るようにしてください。