WordPress Popular Postsをアップデートしたら表示が崩れた!

WordPress Popular Postsのバージョン5.0.0が来ていたので更新したところ、Simplicity2上で人気記事のウィジェット表示が崩れてしまいました。

サムネイルの左側にドットが表示されているし、タイトル部分に重なるように次の記事のサムネイルが表示されてジグザグ階段状になっているし、どういうこと?!

ちなみに、Sinplicity2以外の環境では起きていないので、「人気記事リストを表示するSimplicityウィジェット」でのみ起きている現象っぽい。

スポンサーリンク

とりあえず表示をなおす

スタイルシートを使って、とりあえず表示をなおしてしまいましょう。

まずは、Wordpressの「設定」→「Wordpress Popular Posts」を開いて、「その他」項目の「プラグインのスタイルシートを使う」を無効にします。

次に、以下の4行を「外観」→「テーマエディター」のスタイルシートに追加。

#popular_ranking-3 { list-style-type: none; }
#popular_ranking-3 li { display: flex; margin-top: 10px; }
#popular_ranking-3 li > a:nth-child(1) { display: block; width: 90px; }
#popular_ranking-3 li > a:nth-child(2) { display: block; width: 240px; }

これで、とりあえず表示崩れは回避できます。

決め打ちでスタイルを指定しているので、それぞれの環境に合わせて、適宜変更した方がよいと思われます。

初稿:2019年10月25日