横浜で目標達成に本気な
ホームページ制作会社

senoteWEB担当者のためのスキルアップノート

【WordPress】記事ページで自動挿入される＜p＞タグや＜br＞タグを無効化する方法

公開日：

更新日：2020.11.10

WEB制作全般

WordPressでは、テーマファイル内に<p>タグや<br>タグが自動挿入されるのをご存じでしょうか。

これは「自動整形表示」といって、WordPressにデフォルトで備わっている機能。

たとえば投稿ページで記事を作成する際、

  • 段落機能を追加すると、自動的にテキストを<p>～</p>で囲んでくれる
  • 段落内で改行をすると自動的に<br>を追加してくれる

といったような役割があります。

「自動でテキストを綺麗に整えてくれるってすごい便利！」と感じるかもしれませんが、反面注意しなければいけない点もあります。

テーマファイルの記述やCSSで細かくスタイル指定したホームページやブログなどを作成した際は、ソース内容やCSSのスタイルとぶつかってしまい思わぬ表示崩れを招いてしまうこともあるからです。

この自動整形の機能が逆にレイアウト崩れの原因になってしまうのは厄介ですよね。
「いっそ自動形成を無効化して自分で書いた場所にだけ<p>タグを反映させたい」といったような場面も出てくるかと思います。

そこで今回は、テーマファイル全体、あるいは記事ページなど特定のページでこの「自動整形表示」を無効化したい場合の方法についてご紹介します。

自動整形を無効化するにはfunctions.phpに記述する

functions.phpに次の形式で記述することで、自動整形を無効化することができます。 

<?php
　 // 記事の自動整形を無効化
    remove_filter('the_content', 'wpautop');
　// 抜粋の自動整形を無効化
    remove_filter('the_excerpt', 'wpautop'); 
?>

これで、テーマファイル内の”the_contetnt”、”the_excerpt”にあたる部分すべての自動整形が無効化されます。

部分的に自動整形を無効化・有効化することも可能

例えば、テーマファイル全体に適応させたいけど記事全体ではなく、「タイトルだけ無効化したい」「本文エリアだけ無効化したい」といったような場合はこちらの書き方で解決。 

<?php
  // タイトルの自動整形を無効化
　remouve_filter('the_title', 'wpautop');  
　
　//本文エリアの自動整形を無効化
    remove_filter('the_content', 'wpautop'); 

　//コメント欄の自動整形を無効化
    remove_filter('comment_text', 'wpautop'); 

　//抜粋欄の自動整形を無効化
    remove_filter('the_excerpt', 'wpautop'); 
?>

また、「固定ページだけ自動整形を無効化したい」などページごとに制限をかけたい場合はこちら。 

<?php
    function wpautop_disable_ispage() {
         //固定ページだけ自動整形を無効化
        if(is_page(){ 
                 // タイトルの自動整形を無効化
　　　　　remouve_filter('the_title', 'wpautop');  　
　　　　//本文エリアの自動整形を無効化
    　　　remove_filter('the_content', 'wpautop'); 
         }
    }
    add_action('wp','wpautop_disable_ispage');
?>

逆に、固定ページだけは自動整形を有効化したい場合は、 上記コードの4行目、11行目の部分を変更。 

<?php
    function wpautop_disable_ispage() {
         //固定ページ以外のページの自動整形を無効化
        if(!is_page(){ 
                 // タイトルの自動整形を無効化
　　　　　remouve_filter('the_title', 'wpautop');  　
　　　　//本文エリアの自動整形を無効化
    　　　remove_filter('the_content', 'wpautop'); 
         },
         //詳細ページ以外のページの自動整形を無効化
        if(!is_single(){ 
                 // タイトルの自動整形を無効化
　　　　　remouve_filter('the_title', 'wpautop');  　
　　　　//本文エリアの自動整形を無効化
    　　　remove_filter('the_content', 'wpautop'); 
         }
    }
    add_action('wp','wpautop_disable_ispage');
?>

「！（＝エクスクラメーション・マーク）」を付けることで、“それ以外”という意味合いになります。

それぞれ「固定ページ以外のページで自動形成を無効化（＝固定ページだけ有効化する）」、「詳細ページ以外のページで自動形成を無効化（＝詳細ページだけ有効化する）」という条件に変わりました。

まとめ

今回は「自動整形表示」の機能を無効化する方法をご紹介しましたが、これを活かす前提でテーマファイルを作成するのもひとつの手。

WordPressのデフォルト機能を理解した上で、メリット・デメリットを生かしてテーマファイルに取り入れていきましょう。