WordPressのバージョンが4.8になってから、ウィジェットで設定していたものの一部の表示が崩れているという症状が多発しているようです。
実際に当サイトでも、記事下に配置しているGoogle AdSense広告の表示が少し崩れていました。
今回は、この解決法を解説します。
解決法として、functions.phpを編集して修正する方法と、プラグインを使用して修正する方法の2つの方法がありますので、それぞれについて解説していきます。
Click or Tap で見たい項目にワープ！
ウィジェットの表示が崩れる原因
ウィジェットの表示が崩れる原因は、WordPressのバージョンアップによるものでした。
WordPressのバージョンが4.8になったことで、テキストウィジェットの仕様が変更されました。
記事投稿画面と同じように、ビジュアルエディタとテキストエディタが実装されたのです。
そして詳しく見ていくと、pタグやbrタグが自動挿入されていることがわかりました。
これはWordPressの「auto paragragh」という機能によるものであり、テキストエディタで1回改行するとbrタグが、2回改行するとpタグが自動挿入されるというものです。
WordPress4.8にバージョンアップしてから、ウィジェットのテキストウィジェットが投稿編集画面のようになったことにより、「auto paragragh」機能が自動的に適用されたのです。そして、一部表示が崩れる箇所が出てきているのです。
では、原因がわかったところで対処法を見ていきましょう。
表示崩れを直す方法
冒頭でもお伝えしたように、この表示崩れを直す方法はいろいろとあるのですが、その中でも最も良い方法を2つご紹介します。
- functions.phpを編集して修正する方法
- プラグインを使用して修正する方法
基本的には前者（funcitons.phpを編集する方法）をおすすめします。しかし、もし「functions.phpを触るのが怖い」、「いち早く簡単に対処したい」などという場合はプラグインを使用しても良いです。
プラグインを使用することにより、
- 重くなりやすい
- 他のプラグインと干渉して不具合が起きる可能性がある
- 長い間更新されないプラグインは脆弱性を突かれてハッキングされやすくなる
といったデメリットがあるため、基本的にはfunctions.phpを編集して修正する方法をおすすめしています。
対処法1. functions.phpを編集して修正する方法
手順1. 「functions.php」の編集ページを開く
まずは、WordPress管理画面から、「外観 > テーマの編集」から、「functions.php」を開きます。
念のため「functions.php」のバックアップを取っておきましょう。
手順2. コードを追加する
以下のコードを、functions.phpに追記して、保存しましょう。
手順3. 確認
では、表示崩れが修正されたか確認しましょう。
実際の表示画面を確認してみると、無事に修正されていますね。
HTMLコードを確認してみても、余計なpタグやbrタグが消えていますね。
手順4. 他の箇所も確認
ただし、この方法ではウィジェット全体の仕様が変更されるので、他のウィジェットの表示も確認する必要があります。特に、テキストウィジェットを確認すると良いでしょう。
例えば、サイドバーのプロフィールはテキストウィジェットで作成しているのですが、もともと左の画像のような表示でした。
しかし、functions.phpを編集したことにより、右の画像のように改行や段落分け（brタグやpタグ）が全くない状態になってしまいました。
そのため、自分でpタグやbrタグを追加する必要があります。
こうして、すべての表示崩れを修正したら完了です。
対処法2. プラグインを使用して修正する方法
プラグインを使用して修正する方法では、「Classic Text Widget」というWordPressプラグインを使用していきます。
このプラグインがどのようなものか簡単に説明すると、その名の通りWordPress4.8より前のバージョンで使われていたテキストウィジェットを使えるようにするプラグインです。
画像のように、「Classic Text Widget」というウィジェットを使用することで、WordPress4.8より前のバージョンで使用されていたテキストウィジェットが使えるのです。
手順1. 「Classic Text Widget」をインストール＆有効化
WordPress管理画面「プラグイン > 新規追加」より、「Classic Text Widget」を検索してインストール＆有効化します。
手順2. 「Classic Text Widget」ウィジェットを設置して編集
WordPress管理画面「外観 > ウィジェット」を開き、任意の位置に「Classic Text Widget」ウィジェットを設置します。
そして、これまでのテキストウィジェットのように編集して保存すれば完了です。
最後に
WordPressのバージョンが4.8になってから生じたウィジェットの表示不具合の原因と、2つのおすすめ対処法について解説しました。
基本的にはfunctions.phpを編集して修正する方法をおすすめしますが、もし「functions.phpを編集するのが怖い」「いち早く対処したい」という場合はプラグインを使用する修正方法でも構いません。
ただし、長期的に考えるとfunctions.phpをちょっと編集するくらい（自分でコードを書けるようになれということではない）はできるようになったほうが絶対に良いので、出来る限りfunctions.phpを編集して修正する方法を試してみてくださいね。
もし「ここをもう少し詳しく教えて！」「ここ間違ってますよ！」などありましたら、ページ下のコメント欄からお気軽にお送りください。
もちろん、感想などちょっとしたことでも、お送りいただけるととても嬉しいのでお待ちしてます！