![](https://cxg-design.jp/wp-content/uploads/2024/06/popular_thumb01-2.png)
人気記事プラグインWPPで、人気記事一覧をサムネイル付きで表示
BLOGページでは、最新記事の下のPOPULARで、人気記事を紹介しています。今回は、人気記事プラグインWordPress Popular Posts(WPP)で、DEMOの人気記事一覧をサムネイル付きで表示する方法を紹介します。
今回のDEMOは、DEMOの1週間の人気記事一覧です。
自動で、1週間の人気記事が表示されます。
設定
プラグインをインストールして、有効化します。左サイドバーの設定>WordPress Popular Postsをクリックします。上のメニューのツールをクリックします。設定画面が表示されるので、項目ごとに設定していきます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/94cff246ed236d3b03cc5b4150359016.png)
設定>WordPress Popular Postsをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/cf4ba9aefc1735581d66f9a6a6f73fb8.png)
ツールをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/3db2fafa8b2a984057945e004efed59e.png)
設定画面が表示
アイキャッチ画像
![](https://cxg-design.jp/wp-content/uploads/2024/06/b7efdce29ce8427df6118ba22a6615ad.png)
デフォルトのアイキャッチ画像を変更します。サムネイル変更ボタンをクリックし、メディアライブラリから画像を選択し、この画像を使用をクリックします。これで設定完了です。
画像の取得元は、アイキャッチ画像です。Lazy Loadは、はいです。適用ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/ae7ef173b13ad4fc15d5ab8a250837f4.png)
メディアライブラリから画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/6e37aa1a40fc0f86192022fcfc5ef8df.png)
アイキャッチ画像の設定完了
項目 | 設定値 |
---|---|
覧画像の取得元 | アイキャッチ画像 |
Lazy Load | はい |
データ
![](https://cxg-design.jp/wp-content/uploads/2024/06/ba08044fde64d9c9bc6a0c2946b10679.png)
閲覧を記録する対象者は、訪問者のみです。ログ上限は、データの保存期間 / 30日です。AJAX経由で人気記事リストをロードは、無効です。データキャッシュは、キャッシュしないです。データサンプリングは、無効です。適用をクリックします。
閲覧を記録する対象者について
閲覧を記録する対象者は、訪問者のみに設定しました。訪問者のみに設定すると、ログイン中のアクセスは、カウントされません。全員を設定すると、ログイン中のアクセスもカウントされます。
項目 | 設定値 |
---|---|
閲覧を記録する対象者 | 訪問者のみ |
ログ上限 | データの保存期間 / 30日 |
AJAX経由で人気記事リストをロード | 無効 |
データキャッシュ | キャッシュしない |
データサンプリング | 無効 |
その他
![](https://cxg-design.jp/wp-content/uploads/2024/06/9c0052ccbd58b3994351deeecb66cdac.png)
リンクの開き方は、現在のウィンドウです。プラグインのスタイルシートを使うは、無効です。実験的機能を有効化するは、チェック無しです。適用をクリックします。
項目 | 設定値 |
---|---|
リンクの開き方 | Google マップ |
プラグインのスタイルシートを使う | 無効 |
実験的機能を有効化する | チェック無し |
コード
表示したい箇所に、下記コードを入力します。
<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="blog-grid">
<div class="blog-icon">
{thumb}
</div>
<div class="blog-article">
<h4 class="title">{title}</h4>
<div class="time2" >{date}</div>
</div>
</article>
</li>'//表示されるhtmlの設定({thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{date}は日付)
);
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;
}
}
以上で、今回の説明は終了です。ページに人気記事が、自動的に表示されるので、便利ですね。ランキングを付けたり、サイトのデザインに合わせてカスタマイズすることが出来ます。