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日

コメント

  1. エル より:

    こんばんわ、初めまして長野県在住のエルと申します。
    ヴェルさんのサイトとってもお勉強になります、有り難いです。

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

    の記事拝見させて頂きました、私のワードプレスでもドットが記事ランキングの左に表示されたままの同じ現象で困っています。

    以下の初歩的な事で大変申し訳ないのですが、

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

    するといいよと書いてありますが、どことどこの間?の詳しい場所教えて頂けないでしょうか。

    恐縮ですが、長野県仲間という事で思い切ってメールさせて頂きました。

    • ヴェル より:

      はじめまして。こんばんは。
      お褒めの言葉をいただきまして、ありがとうございます。
      同じ長野県仲間とのことで、不思議と親近感が沸きますね。

      さて、ご質問の件ですが、スタイルシート(style.css)の中であれば、どこに記述しても大丈夫です。
      もし不安であれば、一番最初もしくは一番最後に追記してみてはいかがでしょうか。

タイトルとURLをコピーしました