WordPress Popular Postsのカスタマイズ、レイアウト崩れの改善など

stop

普段からサイドバーにあるよく読まれている記事の表示には、WordPress Popular Postsを使っています。

ただ先日Ver3.02にアップロードしたところその影響でレイアウトが初期状態に戻ってしまいました。

SS 2014-06-20 23.05.23

個人的にサムネには少し間隔がほしいので修正することに。

ただ以前からWPPではCSSの変更が反映されなかったため、プラグインのPHPファイルをいじっていました。

今回も同様にソースを変更しようと思ったのですが、今回のバージョンアップでは大幅にコードに変更があり、ある程度手を加えていたのですがどれもレイアウトがグチャグチャに(笑)

SS 2014-06-20 22.59.48

コードを読むのが面倒だったのでCSSが反映されない問題の方を解決してからレイアウトを改善することにしました。

CSSが反映されない問題の解決

WordPressのプラグイン編集画面でwpp.cssを編集した後更新ボタンを押しても全く適用されません。

sSS 2014-06-20 16.51.48

こういった変更が反映されない場合、原因大半はキャッシュが定番なので
ブラウザのキャッシュをクリアしてから読み込まれているスタイルシートを確認すると…

SS 2014-06-20 23.03.34

それでも変更後のcssが読み込まれていません。

となると残っているのはCDN!!

以前ブログの高速化のためにCloudFlareというサーバーとユーザーの間に入ってキャッシュを行ってくれる高速化サービスを利用していましたが、恐らくこの部分に変更が反映されていないことが予想できます。

こちらのページを参照してCloudFlareでCSSなどをキャッシュしないように開発モードにした後、これまでのキャッシュをパージしました。ありがとうございます。
http://number333.org/2013/09/14/blog-cloudflare/

これでCSSの変更がが反映されるようになりました!

CSSの設定

CSSの問題が解決したので、次にレイアウトの設定です。

管理画面のプラグイン編集からwpp.cssを編集します。
今回のバージョンアップで li のスタイルが変更されていました。

.wpp-list li { /* LI - post container */
        /*display:inline-block;*/ /* <-- uncommenting this line is recommended when using post thumbnails */
        float:none;
        clear:left;
}

を以下のように編集しました。

.wpp-list li { /* LI - post container */
        overflow:auto;
        display:block;
        clear:both;
        margin:10px 0;
        border-bottom:1px dashed #666;
}

レイアウトに関しては以下のサイトを参照。
http://viral-community.com/wordpress/wordpress-popular-posts-845/

CSSを適用してからウィジェットでサムネイルをを有効、サイズ100×100に設定するとこんな感じ。

SS 2014-06-13 16.23.54

スポンサーリンク
スポンサーリンク