WordPress4.8でウィジェットが刷新されましたが、ある問題が発生しているのをご存知でしたか？
これまでのウィジェットをそのまま使っている場合は問題ないんですが、新規でテキストウィジェットを追加すると表示が崩れる可能性があるんです。
今回はその原因と対処法についてご紹介します。
ウィジェットの表示が崩れる原因
まず、この表示崩れの原因は、テキストウィジェットに自動で挿入されるpタグとbrタグです。
これまでのテキストウィジェットは、良くも悪くも「空の箱」でしたが、新しいウィジェットは多機能になりました。
- リスト表示
- 文字を太くする
- テキストリンクの追加
など、普通の投稿のように文章を書くことができます。
ただ、これまた良くも悪くも、普通の投稿と同じく、WordPressの機能で自動でpタグやbrタグが挿入される仕様になってしまいました。
表示が崩れる具体例
例えば、Googleアドセンスのコードを追加すると、そのコードはpタグで囲まれ、コードの中の空白はbrタグに変換されます。
brは「改行」をするタグで、これがあることにより、文章や画像などの要素が途中で強制的に改行されます。
そして、pタグで囲まれているので、
.post p {
margin-bottom: 20px;
}のような全体に適用しているCSSがテキストウィジェットにも強制的に適用されてしまいます。
つまり、「brタグで改行され、記事本文（サイト全体）に適用しているpタグのCSSがテキストウィジェットにも適用される」というのが、表示が崩れる原因です。
対処法
この問題への対処法は2つあります。PHPで削除する方法と、JavaScript（jQuery）&CSSで削除する方法です。
PHPで削除する
PHPを使う方法は、brタグやpタグを削除するというより、前のバージョンのウィジェットのように「そもそもpタグやbrタグを出力しない」ようにできます。
追加するのは下記のコード。追加場所はfunctions.phpです。
remove_filter('widget_text_content', 'wpautop');参考WordPress4.8以降のテキストウィジェットでpやbrタグの余計な余白が入るのを除去する方法
jQueryとCSSで削除
jQueryとCSSを使う場合は、brタグをjQueryで削除して、pタグの余白をCSSでコントロールします。
PHPで削除する方法は新ウィジェットの良さが0になってしまいますが、こちらの方法はpタグを削除しないので、使い勝手の良さはそのまま残ります。
まずは、下記のコードをbodyタグ内に追加。</body>タグの直前に追加するのがおすすめです。（スクリプトタグを外して既存のJSファイル内に追加してもOK）
<script>
$(function() {
$('.textwidget').find('br').remove();
});
</script>もちろん、jQueryを読み込んでいないと動作しません。
次に、下記のCSSをスタイルシート（style.css）に追加。余白を0にします。
.textwidget p:last-child {
margin-bottom: 0;
}バランスを考えて、テキストウィジェット内の1番最後のpタグだけ、下の余白を0にしています。
まだ表示が崩れている場合
PHPで削除する場合は問題ないはずですが、jQueryとCSSで削除した後に表示が崩れている場合、2つの問題が考えられます。
キャッシュが残っている
1つは、キャッシュが削除されていないこと。これは下記の記事を参考にキャッシュを削除してください。
キャッシュ削除してもJS/CSSファイルが反映されない原因 
もっと見る
ウィジェットに固有のクラス名が付いていない
もう1つは、ウィジェットに「textwidget」という固有のクラス名が付いていないことです。
こちらは、ウィジェットを定義しているコード（基本的にはfunctions.php内にある）を修正する必要があります。
下記のように、クラス名に「%2$s」という文字列を追加すればOKです。（もしくは、そのままtextwidgetと追加してもOK）
'before_widget' => '<div class="%2$s">',追記：HTML用のウィジェットアイテムが追加されました
新ウィジェットが不評だったのか、「カスタムHTML」という新しいウィジェットアイテムが追加されました。
説明にもある通り、任意のHTMLコードを貼り付けることが可能で、pタグやbrタグなどの余計なタグは付与されなくなったので、今回ご紹介した対策は必要ありません。
（ただ、手動で貼り直さないといけないので、それが面倒な方は対策してもいいかもしれません）
個人的に嬉しかったのが、 <amp-ad>のような特殊なタグなどが消えなくなったこと。追加したHTMLコードはそのまま出力されます。
まとめ
ウィジェットへのpタグ自動挿入は必要なのかなとも思いますが、ちょっとした文章を書く分には使い勝手が良いのかもしれませんね。
以上、ご参考までに！(｀･ω･´)ゞ
