LuxeritasでWordPress Popular Postsを使うときのCSSサンプル

2017年9月25日

popular post

Luxeritasは軽量でとにかく軽いのが特徴のテーマです。

このブログのサイドバーに人気記事を入れたかったので、WordPress Popular Postsというプラグインを入れました。

WordPress Popular Postsは問題なく入ったのですが、Luxeritasの新着記事と同じデザインにしたかったので、カスタマイズしました。

LuxeritasでWordPress Popular Postsを使う手順

インストール方法は割愛させていただいて、WordPress Popular Posts の設定からです。

「外観」→「ウィジェット」で、WordPress Popular Postsをドラッグし、サイドバーの入れたい場所に入れます。

WordPress Popular Postsをクリックして、その中にある「アイキャッチ画像を表示」をクリックして保存を押すとサイズを手動で指定できます。

サイズはLuxeritasの新着記事を合わせたいので、幅・高さともに100pxにします。

popular post

その下の、「HTMLマークアップ設定」の「カスタムHTMLマークアップを使う」にチェックを入れて保存を押すと入力項目が表示されます。

popular post

投稿前

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

投稿後

</ul>

投稿のHTMLマークアップ

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

CSS

/*------------------------------------------------------------
Popular Post
-------------------------------------------------------------*/
ul#popular-posts.wpp-list li img {
border-radius: 5px 5px 5px 5px;
border: 1px solid #ddd;
padding: 1px;
margin-bottom: 1em;
}
.wpp-post-title {
font-size: 100%;
font-weight: bold;
line-height: 1.4;
}
.wpp-excerpt {
font-size: 1.2rem;
line-height: 1.4;
}
ul#popular-posts.wpp-list {
counter-reset: pupular-ranking;
}
ul#popular-posts.wpp-list li {
position: relative;
padding: 15px 0 15px 0;
border-top: 1px dotted #ccc;
}
ul#popular-posts.wpp-list li:first-child {
border-top: none;
}
ul#popular-posts.wpp-list li:before {
background: none repeat scroll 0 0 #000;
color: #fff;
content: counter(pupular-ranking, decimal);
counter-increment: pupular-ranking;
font-size: 100%;
left: 0;
top: 15px;
line-height: 1;
padding: 4px 7px;
position: absolute;
z-index: 1;
opacity: .9;
border-radius: 0;
}

参考:https://sirohigedan.xyz/wordpress/popular-post/

出来上がり
popular post

※投資についての記事も掲載しておりますが、このサイトは投資を推奨するものではありません。投資はリスクが伴いますので自己責任でお願いいたします。

スポンサーリンク

ブログ運営

Posted by myu