WordPress 4.8のテキストウィジェットの自動整形機能を無効化する方法

WordPress4.8の新機能

2017年6月8日に、WordPress の新バージョン 4.8 がリリースされました。主な新機能は以下の通りです。

• 新しい３つのウィジット（動画、画像、音声）
• テキストウィジットの仕様変更（ビジュアルエディターの標準装備）
• 新しいリンク境界機能（リンクの編集機能向上）
• 近隣の WordPress イベント
• 開発者向け機能

早速、WordPress4.8にバージョンアップしましたが、新しくテキストウィジェットに標準装備されたビジュアルエディターは、強制的に「自動的に段落追加する」仕様になっていて、Google アドセンスの広告表示などをテキストウィジットで行っている場合、下記ソースや画面表示のように、勝手に「段落」や「改行」タグが挿入され、余分なスペースが入ったり、レイアウトが崩れたりします。

• JavaScriptが含まれる場合に <script>タグを包むように段落タグ（<p>）が入る。
• 入って欲しくない不要な改行タグ（<br />）が追加される。

<p><script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script><br />
<ins class=”adsbygoogle” style=”display: inline-block; width: 300px; height: 250px;” data-ad-client=”ca-pub-xxxxxxxxxxxxxx” data-ad-slot=”xxxxxxxxxx”></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>

（注）段落タグ（<p>）や改行タグ（<br />）が入っても広告表示には問題ありません。

【WordPress4.8 デフォルトの表示画面】

【function.phpによる自動整形無効化後の表示画面】
段落や改行による余白がなくなり、レイアウトも4.7の状態にもどりました。

ビジュアルエディターの自動整形機能

WordPressのビジュアルエディターには、元々投稿や固定ページを自動的に整形して出力する機能(wpautop)があり、デフォルトの状態だと、先頭のスペースを削除したり、段落や改行に<p>、<br />タグを挿入したりといった、自動整形機能が備わっています。

WordPressの記事投稿の際には、下のどちらかのエディターをタブで選択して記事作成を行うと思います。ビジュアルエディターの自動整形機能自体は便利な機能だとは思うのですが、時に自動整形が邪魔して思った通りにページが作成できないことがあります。

• ビジュアルエディター
• テキスト（HTML）エディター

ビジュアルエディターは、HTMLに不慣れなユーザーにとっては、手軽に記事作成を行えるメリットがありますが、HTMLコードを入力することに慣れているユーザーにとっては、思ったように記述できなかったり、うっかりテキストエディターからビジュアルエディターに切り替えて、HTMLが改変されてしまったりと、厄介なものでした。

テキストウィジェットの場合、以前のバージョンではチェックボックスで自動整形機能の選択できたのですが、4.8 の仕様変更でチェック項目のオプションがなくなりました。

自動整形機能を無効化する方法

記事投稿ページのビジュアルエディターを非表示にする方法

記事投稿ページのビジュアルエディターの自動整形機能を無効・解除にするには、

1. ダッシュボードの「ユーザー」→「あなたのプロフィール」を開く
2. 個人設定の「ビジュアルリッチエディターを使用しない」にチェックを入れる

でビジュアルエディターが非表示になり、テキストエディターのみの使用となります。これにより、タブの切り替えによる自動整形がなくなります。

しかしこの方法では、テキストウィジェットのビジュアルエディターを無効にできません。

テキストウィジェットのビジュアルエディターを無効にするには、次に述べる「テキストウィジェットのビジュアルエディターを無効にする方法」を適用します。

テキストウィジェットのビジュアルエディターを無効にする方法

function.phpによる自動整形を無効にする方法です。整形タグが入ってしまうのを回避するには、テーマまたは子テーマの「functions.php」に下記のコードを追加します。このコードで、テキストウィジェットでwpautopフィルタを取り除くことができ、自動整形を無効にすることができます。

///////////////////////////////////////////////////
//テキストウィジェットのビジュアルエディターの自動整形機能を無効化する
///////////////////////////////////////////////////
remove_filter('widget_text_content', 'wpautop');

参考 「functions.php」にコードを追加する方法はこちらを参照してください。子テーマの「functions.php」にコードを追加すると、親テーマのバージョンアップなどの影響を受けずに管理ができ、便利です。