![](https://cxg-design.jp/wp-content/uploads/2024/06/wpp_ranktumb01-1.png)
WPPで、人気記事のサムネイルにランキングアイコンを表示
前回は、WPPで、人気記事一覧を表示する方法を紹介しました。今回は、前回の応用で、WPPで、人気記事のサムネイルにランキングアイコンを表示する方法を紹介します。
今回のDEMOは、DEMOのランキングです。
サムネイルの左上に、1、2、3のランキングが表示されています。
コード
ランキングを表示したい場所に、下記コードを入力します。
<div class="blog-container">
<?php
if (function_exists('wpp_get_mostpopular')) {
$arg = array (
'range' => 'weekly',//集計する期間 {daily(1日), weekly(1週間), monthly(1ヶ月), all(全期間)}
'order_by' => 'views',//表示順{views(閲覧数),comments(コメント数),avg(1日の平均)}
'post_type' => 'all_demos',//ポストタイプを指定 {post, page, カスタムポスト名}
'stats_date' => 1,//日付を表示 { 1(表示), 0(非表示) }
'stats_date_format' => 'Y.m.d',//日付表示フォーマット
'limit' => 4, //表示数
'post_html' => '<li"><article class="rank">
<div class="blog-grid">
<div class="blog-i">
<div class="blog-icon zoomIn">
{thumb}
</div>
<div class="wpp_rank">
{item_position}
</div>
</div>
<div class="blog-article">
<h4 class="title">{title}</h4>
<div class="time2">{date}</div>
</div>
</div>
</article></li>'//表示されるhtmlの設定
);
//ランキングを表示
wpp_get_mostpopular($arg);//リストの出力
}
?>
</div>
CSSで、スタイルを整えます。
.blog-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1em;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
border-bottom: 1px solid #ccc;
padding-bottom:1em;
}
.blog-icon {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
margin-right: 1.5em;
object-position: 50% 50%;
margin-bottom: 12px;
border-radius: 5px;
}
.blog-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.title {
text-align: left;
font-size: 1.3em;
}
@media screen and (min-width: 740px) {
.blog-container {
grid-template-columns: repeat(4, 1fr);
}
.blog-grid {
grid-template-columns: repeat(1, 1fr);
border-bottom: none;
padding-bottom:0;
}
}
/* ランキング */
.blog-i {
position: relative;
}
.wpp_rank {
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
z-index: 99;
top: -7px;
left: -7px;
text-align: center;
font-size: 2rem;
line-height: 40px;
font-weight: 400;
color: #fff;
}
.blog-container li:first-child .wpp_rank {
background: #9B7D02;
}
.blog-container li:nth-child(2) .wpp_rank {
background: #828282;
}
.blog-container li:nth-child(3) .wpp_rank {
background: #873800;
}
.blog-container li:nth-child(4) .wpp_rank {
display: none;
}
@media screen and (min-width: 1250px) {
.wpp_rank{
width: 50px;
height: 50px;
border-radius: 25px;
top: -10px;
left: -10px;
text-align: center;
vertical-align: middle;
font-size: 2.5rem;
line-height: 50px;
}
}
以上で、今回の説明は終了です。今回は、円でしたが、サイトのデザインに合わせて、アイコンを作成して表示することもできます。