WordPress Popular Posts の見た目をLuxeritasテーマと馴染ませる

人気の記事を一覧にしてくれるWordPressプラグイン、それがWordPress Popular Postsです。

集計期間の設定などなど色々できて、とっても便利。大人気というか大定番のプラグインです。

でもそのままではどうも見た目がいただけない。

そこで皆さん様々なカスタマイズをしていらっしゃるのですが、私は、現在このサイトで使用しているテーマであるLuxeritasに自然に溶け込むようにカスタマイズしてみました。

Luxeritasのご紹介はこちら。

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ

Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に表示するための仕組みを満載した、無料の WordPress テーマです。

仕上がりはこんな感じ。

Luxeritas標準の新着記事がこちら。

いい感じに馴染んでいると思うのですが、いかがでしょうか。

さて手順です。

まず、「WordPress Popular Posts」のウィジェットを以下のように設定します。

「HTML マークアップ設定」の「カスタム HTML マークアップを使う」にチェックを入れる。
「投稿の前 / 後:」の左側の枠に以下のように記入する。

<ul id="popular-posts" class="wpp-list">

「投稿の HTML マークアップ: 」に以下のように記入する。

<li>
{thumb} 
{stats}
<div class="wpp-post-title">{title}</div> 
<div class="wpp-excerpt">{excerpt}</div>
</li>
<hr>

次に、Luxeritasの子テーマのスタイルシート style.css に以下を追記します。

ul#popular-posts.wpp-list li img {
    border-radius: 5px 5px 5px 5px;
        border: 1px solid #989898;
    padding: 1px;
    margin-bottom: 1em;

}

.wpp-post-title {
 font-size: 100%;
 font-weight: bold;
}

.wpp-excerpt {
 font-size: 90%;
}

順位を表示させたい場合はさらに以下を追記します。

ul#popular-posts.wpp-list {
    counter-reset: pupular-ranking;
}
 
ul#popular-posts.wpp-list li {
    position: relative;
}
 
ul#popular-posts.wpp-list li:before {
    background: none repeat scroll 0 0 #FE642E;
    color: #fff;
    content: counter(pupular-ranking, decimal);
    counter-increment: pupular-ranking;
    font-size: 100%;
    left: 0;
    top: 0;
    line-height: 1;
    padding: 4px 7px;
    position: absolute;
    z-index: 1;
    opacity: .9;
    border-radius: 0;

}

以上です。

なお、このカスタマイズにあたり、以下の記事を参考にさせていただきました。ありがとうございます。