WordPress Popular Postsをカスタマイズして見た目を格好良く見せる

投稿日:2017年4月12日 更新日:

どうも『ぽよまる』です。

多くのワードプレスで使われている『WordPress Popular Posts』なんですが、正直言ってデフォルトの状態だと見た目を整えるのが物凄く面倒です。

特にレスポンシブに対応しているサイトでは表示方法に苦労している場合も多いのでは無いかなと思うので、自分なりにCSSを改造して他の場所と同様の見た目に改善してみようと思います。

スポンサーリンク

WordPress Popular Postsのプラグインの中身を確認する

まず最初にすることはこれです。
プラグインにどんな記述がされているのか確認して、“style.css” に記述を追加していきます。

プラグイン本体を編集してしまってもよいのですが、バージョンアップされたりしたときなど改変箇所も書き換えられてしまうのでやめておきましょう。

とりあえずソースを見て見る限りでは、

<ul class="wpp-list">
<li><a href="#"><img scr="#"></a><a href="#">タイトル</a>
<span class="post-stats"><span class="wpp-views">? views</span></span></li>
</ul>

このような感じで構成されており、私の使用しているアフィンガーのように<dl>で囲って、その中に<dt>や<dd>を配置するスタイルではないことがわかります。

正直、面倒ですね(;´Д`)

プラグイン本体を弄くり回したくなります。

ですが、ここは我慢してプラグイン本体をいじらなくても済むようにやっていきましょう。

WordPress Popular PostsのUse custom HTML Markupを使用する

※ここから先はアフィンガーを使っている人用のカスタム方法です。他のテーマを使っている人は自分のテーマに合わせた変更を行ってください。

外観 > ウィジェットから『WordPress Popular Posts』の項目を開き、“Use custom HTML Markup”の部分にチェックを付けてください。

そして、以下のように中身を変更します。こうするだけで、先程上で掲載していたコードがこんな感じに変わります。

<div class="kanren">
<dl class="clearfix">
<dt><a href="#"><img scr="#"></dt>
<dd><a href="#">タイトル</a><span class="wpp-views">? views</span></dd>
</dl>
</div>

このままでもアイキャッチのサイズがデフォルトのアフィンガーであれば問題はありません。ですが、私の場合はアイキャッチのサイズをレスポンシブに対応して拡大縮小するように変更しているので見た目の統一感もなくダサいです。

ですので、アイキャッチのサイズを他の一覧表示と同じになるように調整しなくてはいけません。

アイキャッチサイズの調整

ここまで来て、ようやくCSSを変更するのかと思った人……申し訳ありません。

CSSは一切弄らなくても見た目の調節が出来てしまいます。

ウィジェット内の項目にある “Display post thumbnail” で “Use predefined size” にチェックを入れ “medium(300 * 300 , soft crop)” に設定してください。

それだけでこのような見た目になります。

これで終わっても良いのですが、よく見るとリンクの形式が違います。

これはどうしてかというと、上記の“Use custom HTML Markup”で設定を書き込んだ部分。これにアフィンガーで一覧などを表示させたときに出力される<h5>タグを入れていないからです。

なので、それを追加します。

<dl class="clearfix">
<dt>{thumb}</dt>
<dd><h5 class="kanren-msize">{title}</h5> {stats}</dd>
</dl>

これで見た目がおなじになり、レスポンシブにも対応した形になります。

さて、ここで思い出してほしい。
私が冒頭でなんと言っていたのか……

プラグインにどんな記述がされているのか確認して、“style.css” に記述を追加していきます。

一切記述していません。
CSSに何か追加しないといけないのかーと用意していた方、申し訳ありません。

スポンサーリンク

-AFFINGER
-, , ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.