クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【WordPress】PopularPostsのサムネ表示が崩れる時の対処法

f:id:clrmemory:20171119165924j:plain

こんにちはクリアメモリです!

先日紹介した「WordPress Popular Posts」ですが、初期設定のままだとサムネイルの表示がおかしくなっていました。

 

今回はそういった時の対処法と、WordPress Popular Postsの表示をカスタマイズする方法を紹介します。

 

 

はじめに

 

「WordPress Popular Posts」とは人気のある記事を順位ごとに表示できるプラグインです。前回の記事で詳しく説明しているので、まだ確認していない人はよければ目を通してみてください。

 

www.clrmemory.com

  

この記事でも軽く説明しましたが、私のテーマ(Twenty Ten)だとサムネイルが正しく表示されませんでした。

(私のカスタマイズがよくなかったのかもしれません)

  

具体的には

 

「タイトルの前半部分がサムネイル画像の上に」「後半部分がサムネの下に」

 

表示されてしまいました。さらにサムネイルの大きさも記事によってまちまちでした。

さすがにこの状態では使い物にならなかったので、WordPress Popular Postsのスタイルシートを編集してみました。

 

スタイルシートを編集

 

まずは「Cyber Duck」などのFTPソフトを用意してください。

直接サーバーにアクセスできたら plugins / wordpress-popular-posts / style / wpp.cssをダウンロードしてください。

※ここからコードを編集していきます。今回の作業は全て自己責任で行ってください。

(警告はしましたが、プラグインの編集なので多少安心して作業しても大丈夫です)

 

 wpp.cssを開くと、このプラグインの表示を構成するコードが表示されるのですが、ここを編集していきます。

使用しているテーマや既に行っているカスタマイズの状況によって編集する箇所が変わってくるので「要素の検証」などを使って変更したい箇所を確認しておきましょう。

 

要素の検証についてはこちらの記事で軽く触れているので確認してみてください。

 

www.clrmemory.com

 

私の場合、サムネイル画像のfloat : leftを外したり、widthとheightで横幅と縦幅を調整しました。他にもpaddingを使って余白を作成したり、borderで枠に色をつけたりしました。

 

スクリーンショット 2016-02-22 4.13.33

 

 

普段のカスタマイズと同じようにできるので、少しずつ変更を加えたらアップロードし確認。不備があったら再度編集するというように繰り返したら初心者でも簡単にカスタマイズすることができると思います。

※必ずテキストを保存した後でアップロードしましょう。

 

変更が完了したら最後に注意点です。

 

注意点

 

今回の方法ではwpp.cssを直接編集しているので、このプラグインのアップデートが来た場合変更点が上書きされてしまう可能性があります。

 念のため変更した箇所をメモし、現在のwpp.cssを誤って削除しない場所に保存しておきましょう。

 

まとめ

 

今回の方法を使えば簡単にプラグインをカスタマイズすることができます。

WordPress Popular Postsだけに限らず、プラグインを使った表示がうまくいかなかった場合は編集してみてください。

  

そういった時は先ほど説明した注意点があることを頭に入れておきましょう。

このプラグインはとても便利なので、サムネイルをきれいに表示することができて満足しました。

 

ではまた。

新着記事