人気記事プラグインWPPで、ウィジェットに人気記事を表示
以前のBLOGで、WPPを使用して、ランキングなどを実装する方法を紹介しました。今回は、WPPでウィジェットに人気記事を表示する方法を紹介します。
設定
プラグインをインストール、有効化します。左サイドバーの外観＞ウィジェットをクリックします。ウィジェット設定画面が表示されます。
外観＞ウィジェットをクリック
ウィジェット設定画面が表示
ウィジェットに、WordPress Popular Postsブロックを挿入します。TITLEにタイトル名を入力します。LIMITに表示したい記事数を入力します。POST TYPE(S)に表示したい投稿タイプを入力します。
ウィジェットに、WordPress Popular Postsブロックを挿入
POST TYPE(S)に表示したい投稿タイプを入力
Display post thumbnailにチェックを入れ、任意のサイズを設定します。投稿日を表示するため、Display dateにチェックを入れ、DATE FORMATをWordPress Date Formatに設定します。
Display post thumbnailにチェック
Use custom HTML Markupにチェックを入れます。設定項目が表示されます。
Use custom HTML Markupにチェック
POST HTML MARKUPに下記コードを入力し、更新ボタンをクリックし保存します。
<li class="{current_class}"><div class="wpp-thumbnail-container">{thumb}</div> <div class="wpp-item-data">{title} <p class="wpp-date">{date}</p></div></li>コード
CSSに下記コードを入力します。
h2{
font-weight: 500;
font-style: italic;
text-align: center;
line-height: 1;
letter-spacing: 0.08em;
font-size: 2em;
margin-top: 1em;
margin-bottom: 1em;
}
.wpp-list{
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.5em;
padding-bottom: 1em;
}
.wpp-thumbnail-container{
width: 100%;
height: auto;
}
.wpp-thumbnail-container img{
width: 100%;
height: auto;
}
.wpp-list li{
border-bottom:1px solid #ccc;
padding-bottom:1em;
}
.wpp-post-title{
font-size: 1.2em;
font-weight: 500;
line-height: 1.4;
}
.wpp-date{
color: #aaa;
}
.wpp-post-title {
color: #272727;
}確認
プレビューを確認します。今回は、BLOGのサイドバーにウィジェットを設定しました。スタイルは、デザインに合わせて変更します。
プレビューを確認
以上で今回の説明は終了です。ウィジェットはプロフィール画像や、SNSボタンなどを設定できますが、日々更新される人気記事を設置すると目に付きますね。
