WordPress4.8でウィジェットの表示が崩れる原因と対処法。Fantastech(ファンタステック)Fantastech!!WordPressGoogleアドセンスSEO対策サイトマップお仕事のご依頼WordPress4.8でウィジェットの表示が崩れる原因と対処法。シェフWordPress4.8でウィジェットが刷新されましたが、ある問題が発生しているのをご存知でしたか?これまでのウィジェットをそのまま使っている場合は問題ないんですが、新規でテキストウィジェットを追加すると表示が崩れる可能性があるんです。今回はその原因と対処法についてご紹介します。目次1ウィジェットの表示が崩れる原因2対処法3追記:HTML用のウィジェットアイテムが追加されました4まとめウィジェットの表示が崩れる原因まず、この表示崩れの原因は、テキストウィジェットに自動で挿入されるpタグとbrタグです。これまでのテキストウィジェットは、良くも悪くも「空の箱」でしたが、新しいウィジェットは多機能になりました。文字を太くするテキストリンクの追加など、普通の投稿のように文章を書くことができます。これまた良くも悪くも、普通の投稿と同じく、WordPressの機能で自動でpタグやbrタグが挿入される仕様になってしまいました。Googleアドセンスのコードを追加すると、そのコードはpタグで囲まれ、コードの中の空白はbrタグに変換されます。brは「改行」をするタグで、これがあることにより、文章や画像などの要素が途中で強制的に改行されます。20px;}のような全体に適用しているCSSがテキストウィジェットにも強制的に適用されてしまいます。「brタグで改行され、記事本文(サイト全体)に適用しているpタグのCSSがテキストウィジェットにも適用される」というのが、表示が崩れる原因です。対処法この問題への対処法は2つあります。PHPで削除する方法と、JavaScript(jQuery)&CSSで削除する方法です。PHPで削除するPHPを使う方法は、brタグやpタグを削除するというより、前のバージョンのウィジェットのように「そもそもpタグやbrタグを出力しない」ようにできます。追加するのは下記のコード。追加場所はfunctions.phpです。'wpautop');参考WordPress4.8以降のテキストウィジェットでpやbrタグの余計な余白が入るのを除去する方法jQueryとCSSで削除jQueryとCSSを使う場合は、brタグをjQueryで削除して、pタグの余白をCSSでコントロールします。PHPで削除する方法は新ウィジェットの良さが0になってしまいますが、こちらの方法はpタグを削除しないので、使い勝手の良さはそのまま残ります。下記のコードをbodyタグ内に追加。</body>タグの直前に追加するのがおすすめです。$('.textwidget').find('br').remove();});</script>もちろん、jQueryを読み込んでいないと動作しません。次に、下記のCSSをスタイルシート(style.css)に追加。0;}バランスを考えて、テキストウィジェット内の1番最後のpタグだけ、下の余白を0にしています。表示が崩れている場合PHPで削除する場合は問題ないはずですが、jQueryとCSSで削除した後に表示が崩れている場合、2つの問題が考えられます。キャッシュが残っている1つは、キャッシュが削除されていないこと。これは下記の記事を参考にキャッシュを削除してください。見るウィジェットに固有のクラス名が付いていないもう1つは、ウィジェットに「textwidget」という固有のクラス名が付いていないことです。こちらは、ウィジェットを定義しているコード(基本的にはfunctions.php内にある)を修正する必要があります。下記のように、クラス名に「%2$s」という文字列を追加すればOKです。class="%2$s">',追記:HTML用のウィジェットアイテムが追加されました新ウィジェットが不評だったのか、「カスタムHTML」という新しいウィジェットアイテムが追加されました。説明にもある通り、任意のHTMLコードを貼り付けることが可能で、pタグやbrタグなどの余計なタグは付与されなくなったので、今回ご紹介した対策は必要ありません。<amp-ad>のような特殊なタグなどが消えなくなったこと。追加したHTMLコードはそのまま出力されます。まとめウィジェットへのpタグ自動挿入は必要なのかなとも思いますが、ちょっとした文章を書く分には使い勝手が良いのかもしれませんね。́)ゞカテゴリー:カスタマイズシェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。上に表示された文字を入力してください。カスタムフィールドの設定値を確実に取得・出力する方法。テーマカスタマイザーの追加CSSの値の取得・出力方法。「ページを開けません。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。