今回はWordPressの人気記事を抽出してくれるプラグインである「WordPress Popular Posts」の見た目をカスタムする方法を紹介します。
WordPress Popular Postsには、数種類のテンプレートデザインが用意されているので、ある程度はデザインを選べます。
しかしそのテンプレートでは、使用してるテーマのデザインとの整合性が無く、若干WordPress Popular Postsのデザインが浮いてしまうのが気になるなと思いました。
なので当サイトでは、CSSで使用テーマ（ルクセリタス）の新着記事ウィジェットのデザインに合わせてカスタムすることで違和感なく設置しています。
同じ様に思っている方は、少なからずいるかと思います。だからこの記事にたどり着いたのかと思っています。
そこで当記事では、WordPress Popular PostsをCSSで好きなデザインにする方法を紹介します。そのCSSをスタイルシートにコピペしていじってみて下さい。
WordPress Popular Postsをカスタムして綺麗に
WordPress Popular Postsをデフォルト状態では下記の様になってしまい見栄えがとても悪いです。
なのでCSSで色々とレイアウトを整えます。
とその前に、今回紹介する方法はオリジナルのCSSを追加していくのでプラグインにもともと付いているCSSは解除しておきましょう。そうする事で余計なリソースの読み込みが減りサイトのスピード改善に繋がります。
具体的には以下の設定→WordPress Popular Posts→ツール→プラグインのスタイルシートを使うを無効にすればOKです。
結論ですが、以下のCSSを使えば当サイトのサイドバーにある「Popular Articles」の部分の5つの人気記事リストの様な見た目になります。
コピペしてお使い下さい。（次に解説をします。）
/*人気記事*/
.wpp-thumbnail {
display: inline;
float: left;
margin: 0 1rem 0 0;
}
.wpp-list-with-thumbnails img {
width: 75px;
height: 75px;
border: double #ddd 3px;
border-radius: 2px;
}
.wpp-post-title {
font-weight: 700;
display:block;
line-height: 1.4;
margin-bottom: 10px;
}
.wpp-excerpt {
display: flex;
justify-content: right;
font-size: 1.2rem;
}
#side .wpp-list-with-thumbnails li {
display: block;
line-height: 1.4;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
#side .wpp-list-with-thumbnails li:last-of-type {
border:none;
padding-bottom: 0px;
}
.wpp-list li {
overflow: hidden;
float: none;
clear: both;
margin-bottom: 1rem;
}
.wpp-meta, .post-stats {
display: block;
font-size: 0.8em;
}WordPress Popular PostsのCSSクラス
次に細かく解説をしていきます。
今回のカスタムで編集するCSSクラスは以下のものです。このクラスを色々と弄れば自分好みの形にする事が出来ます。
| .wpp-thumbnail | 人気記事のサムネイル画像があるグループ |
| .wpp-list-with-thumbnails img | 人気記事のサムネイル画像 |
| .wpp-post-title | 人気記事のタイトル |
| .wpp-excerpt | 人気記事の抜粋文 |
| #side .wpp-list-with-thumbnails li | 人気記事のリスト |
| side .wpp-list-with-thumbnails li:last-of-type | 人気記事のリストの最後 |
| .wpp-list li | （調整用） |
| .wpp-meta, .post-stats | （調整用） |
まずは「.wpp-thumbnail」でサムネイルが入っているグループの位置を調整します。今回のCSSでは「float: left;」で左に寄せてます。
「.wpp-list-with-thumbnails img」で画像そのもののサイズを調整するのと、周りに囲い線を付けています。今回は75×75の正方形にしてます。
「.wpp-post-title」はタイトルの位置調整です。「display: block;」でブロック要素を作って抜粋文と区別がつく様にしてます。
「.wpp-excerpt」は抜粋文です。felxボックスと「justify-content: right;」で無理やり右に寄せてます。
「#side .wpp-list-with-thumbnails li」はリスト全体です。文字の間隔やリストの間隔を調整して、下にボーダー線を追加してます。
「side .wpp-list-with-thumbnails li:last-of-type」リスト全体の一番最後のリストです。最後のリストのみボーダー線を無しにして、下の間隔を0にしてます。
「.wpp-list li」と「.wpp-meta, .post-stats」はiPadとスマホ時の調整用です。
以上が「WordPress Popular Postsの見た目をCSSでカスタム（コピペOK）」でした。
サイドバーに入れる場合は今回のCSSをコピペすれば大概は大丈夫かと思います。
サイドバー以外やクセのあるテーマを使用している場合は若干自身での修正が必要になってきます。
その場合でも今回のCSSで微調整を少しずつしていけば解決すると思います。
