【WordPress】自動挿入されるpタグとbrタグを削除する方法｜ブロックエディタでは適用範囲が異なる点に注意

2024.08.21

WordPressでは、投稿や固定ページのテキストに自動的に<p>タグや<br>タグが挿入されることがあります。これにより、意図しない改行や段落が生じ、特定のレイアウトやデザインを実現する際に不便に感じることがあります。この記事では、この自動挿入を防ぐ方法を解説します。

この記事でわかること

  • wpautopフィルターを無効化する方法
  • ショートコード内での自動タグ挿入を防ぐ方法
  • TinyMCE向けの設定はブロックエディタには効かないという注意点
スポンサーリンク

functions.phpにコードを追加して自動タグ挿入を無効化

WordPressで自動挿入されるpタグやbrタグを無効にする最も一般的な方法は、テーマのfunctions.phpファイルに以下のコードを追加することです。

functions.php：wpautopフィルターを除去
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

このコードは、WordPressが自動的にpタグやbrタグを挿入するために使用するwpautop関数を無効化し、テキストがそのままの状態で表示されるようにします。wpautopは既定の優先度（10）で登録されているため、remove_filter()も優先度を省略すれば正しく一致し、確実に無効化できます。

ショートコード内での自動タグ挿入を防ぐ

本文を囲むタイプのカスタムショートコード（[my_shortcode]内容[/my_shortcode]）を使用する際、wpautopはthe_contentフィルター内でdo_shortcodeより先に実行されるため、ショートコードのコールバック関数が受け取る$contentには、すでに余分なpタグが挿入されていることがあります。この問題を回避するために、コールバック関数内でshortcode_unautop()関数を使用します。

functions.php：ショートコード内の余分なpタグを除去
function my_custom_shortcode( $atts, $content = null ) {
    $content = do_shortcode( shortcode_unautop( $content ) );
    return $content;
}
add_shortcode( 'my_shortcode', 'my_custom_shortcode' );

これにより、ショートコード内のテキストに余分なpタグが混入するのを防ぎます。

ビジュアルエディタでの自動タグ挿入を無効化（クラシックエディタ限定）

クラシックエディタ（TinyMCE）を使用している場合、tiny_mce_before_initフィルターを使って、エディタの自動整形機能を無効化することができます。

functions.php：TinyMCEの自動整形を無効化
add_filter( 'tiny_mce_before_init', 'disable_autop_in_tinymce' );

function disable_autop_in_tinymce( $init ) {
    $init['wpautop'] = false;
    $init['apply_source_formatting'] = true;
    return $init;
}
この設定はブロックエディタ（Gutenberg）には効果がありません
WordPress 5.0以降の標準エディタであるブロックエディタは、通常の段落ブロックの編集にTinyMCEを使用していません（独自のリッチテキストコンポーネントで動作しています）。tiny_mce_before_initフィルターは、「クラシックエディタ」プラグインを有効化している場合や、ブロックエディタ内の「クラシック」ブロックを使っている場合にのみ効果があります。標準のブロックエディタで編集している場合、このコードを追加してもエディタ画面上の見た目には変化がありません（フロントエンド表示側のwpautop制御は前述のthe_contentフィルターの方が有効です）。

プラグインを使って簡単に管理する方法

プログラムの編集に慣れていない場合や、簡単に管理したい場合には、プラグインを使用する方法もあります。例えば、TinyMCE Advancedプラグインを使うことで、クラシックエディタの設定を細かくカスタマイズでき、自動的に挿入されるp・brタグを制御することが可能です。ただしこちらもクラシックエディタ環境が前提である点にご注意ください。

関連する自動挿入タグの対処

Contact Form 7のフォーム内だけに限定して対処したい場合はContact Form 7でpタグとbrタグの自動挿入を削除する方法を参照してください。

よくある質問（FAQ）

QWordPressが自動挿入するpタグを無効にするには？
Aremove_filter(‘the_content’, ‘wpautop’)でwpautopフィルターを除去します。ただしこれは全記事のpタグ自動挿入が無効になるため、特定の投稿タイプのみに適用したい場合は条件分岐が必要です。
Q特定のカスタム投稿タイプだけpタグ自動挿入を無効にするには？
Athe_contentフィルター内でget_post_type()を確認し、対象の投稿タイプの場合にのみ処理をスキップする条件分岐を書きます。
Qショートコードの前後にpタグが挿入される問題の対処法は？
Ashortcode_unautop()がWordPressのショートコード処理に組み込まれていますが、改行の位置によってはpタグが残ることがあります。ショートコード前後に空行を入れずに記述するか、wptexturize等のフィルターも確認してください。

まとめ

  • フロントエンド表示：remove_filter('the_content', 'wpautop')
  • ショートコード内：shortcode_unautop()
  • 注意：tiny_mce_before_initはクラシックエディタ限定でブロックエディタには無効

これらの手順を実践することで、より自由にHTMLを制御し、意図したレイアウトやデザインを実現できるようになります。