ブログ記事を書いている時、<br>で改行したつもりが、なぜか勝手に段落<p>になってしまった経験はありませんか？ WordPressで<br>タグを2つ以上使うと、 自動的に<p>タグに変換されてしまう現象について、その理由と解決策を解説します。
なぜ<br>が<p>に変換されるの？
WordPressには、ユーザーが入力したテキストを自動的に整形する機能があります。
この機能は、意図しないHTML構造になるのを防ぎ、より読みやすいコンテンツを作成するために実装されています。
具体的には、WordPressは連続する改行（<br><br>)を段落の区切りと判断し、 <p>タグで囲むことで段落を表現します。これにより、見た目上は空白行となり、 コンテンツが構造的に分かりやすくなるというメリットがあります。
しかし、この自動変換機能が、以下のような場合には不都合となることがあります。
・<br>タグで細かく行を分けたい場合
・独自のHTML構造を維持したい場合
このような場合に、<p>タグへの自動変換を回避する方法をいくつかご紹介します。
<p>タグへの自動変換を回避する方法
それではここからは実際に自動変換を回避する方法を3つご紹介していきます。
カスタムHTMLブロックを活用する
WordPressのブロックエディター（Gutenberg）の、「カスタムHTML」ブロックを使って自動変換を回避できます。
このブロック内にHTMLコードを直接記述することで、自動変換を回避できます。
Classic Editorプラグインを使用する
WordPressの旧エディターである「Classic Editor」プラグインをインストールすると、
自動整形機能が一部無効になります。これにより、<br>タグが<p>タグに変換されにくくなります。
ただ、Gutenbergエディターのブロック機能が利用できなったり、プラグイン自体のサポートや保守がなくなる恐れもあることがデメリットです。
WordPress チームがメンテナンスしている公式プラグインなのでその面は安心ですね。
wpautop関数の無効化 (上級者向け)
WordPressの自動整形機能は、wpautop関数によって実現されています。
このwpautop関数を無効化することで、<p>タグへの自動変換を完全に防ぐことができます。
ただし、この方法ではテキストの自動整形が一切行われなくなるため、
文章構造が崩れたりする可能性があるのでテーマファイルの修正やCSSの調整なども必要な場合があります。
テーマのfunctions.phpファイルに以下のコードを追加します。
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
コードの役割と概要
これらのコードは、WordPressのフィルターフックという仕組みを利用して、特定の関数を無効化するためのものです。
・remove_filter(): WordPressの関数で、指定したフィルターフックから、特定の関数を削除（無効化）します。
・’the_content’: 投稿コンテンツ（本文）を表示する際に実行されるフィルターフックの名前です。
・’the_excerpt’: 投稿の抜粋（概要）を表示する際に実行されるフィルターフックの名前です。
・’wpautop’: WordPressの関数で、テキストの自動整形（改行を<br>タグや<p>タグに変換）を行うものです。
つまり、この2行のコードは、
投稿コンテンツ(‘the_content’)の表示時に、’wpautop’関数が実行されるのを停止させる。
投稿の抜粋(‘the_excerpt’)の表示時に、’wpautop’関数が実行されるのを停止させる。
という処理を行っています。
フィルターフックとは？
WordPressのフィルターフックは、
特定の処理の前後に、ユーザーが独自の処理を追加したり、既存の処理を変更したりするための仕組みです。
フィルターフックは、WordPressの多くの処理で利用されており、プラグインやテーマの開発において重要な役割を果たします。
remove_filter()関数は、このフィルターフックから、特定の関数を取り除くために使用します。
wpautop関数とは？
wpautop関数は、WordPressのコア機能の一部で、以下のような処理を行います。
・テキスト中の連続する改行を<p>タグで囲み、段落を表現する。
・単一の改行を<br>タグに変換する。
・いくつかの特殊文字をHTMLエンティティに変換する。（例：> を > に変換）
この関数は、ユーザーがHTMLタグを知らなくても、ある程度整形されたコンテンツを生成できるようにするために用意されています。
wpautop関数を無効化するメリット
前述の通り、wpautop関数は便利な機能ですが、以下のような場合に便利です
・<br>タグを細かく制御したい場合。
・HTML構造を厳密に制御したい場合。
・独自のコンテンツ表示方法を実装したい場合
このような場合に、wpautop関数を無効化することで、WordPressの自動整形機能の影響を受けずに、自由なコンテンツ作成が可能になります。
wpautop関数を無効化するデメリット
wpautop関数を無効化すると、テキストの自動整形が一切行われなくなるため、以下のような点に注意が必要です。
・テーマやプラグインとの相性問題が発生する可能性がある。
テーマやプラグインが正しく動作しなくなる可能性があります。
・HTML・CSSでの入力が必要になる。
これらの点を考慮し、wpautop関数を無効化する際は、テキスト構造やHTMLタグを適切に記述する必要があります。
まとめ
WordPressで
タグを2つ以上使うと、自動的に<p>タグに変換されてしまう現象について、その理由と解決策を解説しました。
どの方法を選ぶかは、あなたのスキルレベルや目的に応じて検討してみてください。
まずはカスタムHTMLブロックの使用や、<br>を2つ使用するのではなくCSSで余白を調整してみるのもいいと思います。
この記事が、あなたのWordPressでの快適な記事作成のお役に立てれば幸いです。
