WordPress｜4.8のウィジェットで自動追加される段落を無効にする方法

WordPressをバージョン4.8にアップデートすると「外観」＞「ウィジェット」の仕様が変更されました。

テキストウィジェットで有ったはずの「自動的に段落追加する」チェック項目のオプションがなくなり自動的に<p>や<br>の段落・改行タグが表示され余分なスペースが入るのを無効・解除にする方法を紹介します。

WordPress4.8のテキストウィジェットのスタイル

WordPress 4.8以前の場合は自動的に段落追加するチェック項目が有りましたがなくなっています。そのかわりにWordPress 4.8の場合は記事投稿・固定ページのようにビジュアルとテキストを選択できるタブが表示されています。

私的にはビジュアルエディターを使用していないので、ちょっと不便でが
ビジュアルエディターを主に使っている方には新たに追加された選択タブで便利になったかもしれませんね。

表示の崩れや余計なスペースが発生

但し、今までケースバイケースで「自動的に段落を追加する」機能を有効・無効に出来ましたが勝手に自動的で段落や改行タグが挿入されて思わぬレイアウト・表示の崩れや余計なスペースが発生する原因になります。

この下の画像はテキストエディターでコードを貼り付けた例です。このコードには<script>タグが含まれています。

自動でタグが挿入さてHTLMに出力されたコード

これは上の画像のコードがHTLMに出力された状態です。

<aside class="widget widget_text" id="text-10">
            <p> 自動挿入された段落
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />自動挿入された改行タグ
<ins class="adsbygoogle"
 style="display:block"
 data-ad-format="autorelaxed"
 data-ad-client="ca-pub-xxxxxxxxxxxxx"
 data-ad-slot="xxxxxxxxx"></ins>
  <br />自動挿入された改行タグ
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>自動挿入された段落
</aside>

ウィジェットを使用してサイドバーやフッターに「広告用のアドセンスコード」を追加したい時などで特にHTMLにJavaScriptが含まれる場合に <script>タグを包むように段落 Pタグが誤って入る。入って欲しくない不要な BRタグが追加されている。

自動的に段落・改行を無効にするコードと方法

Template Files コピー

//段落・改行を無効にするコード（その１）フィルターにフックされた関数を取り除く
remove_filter ( 'widget_text_content', 'wpautop' );

使用しているテーマやカスタマイズしている場合は状況によって、上記の無効化コードで解決しない、出来ない場合があります。下記コードを試してください。

Template Files コピー

//段落・改行を無効にするコード（その2）
function wpm_widget_display_callback( $instance, $widget, $args ) {
    $instance['filter'] = false;//HTML表示時にフィルターを解除　[false：解除/true：無解除]
    return $instance;
}
add_filter( 'widget_display_callback', 'wpm_widget_display_callback', 10, 3 );

このコードをテーマまたは子テーマの「functions.php」等に追加する事でウィジェット内の自動段落を簡単に削除できます。

自動的に段落追加するを無効にした場合は「当然」自動で何もしてくれませんので「テキストエディター」や「ビジュアルエディター」で段落・改行は手動入力になります。

この問題は次回の「バージョン4.8.1」で修正されるか、新たに「HTMLコード専用のウィジェット」が作られると思われます。参考までに

テキストウィジェットで使われているフィルターフック