人気記事プラグインWPPで、ウィジェットに人気記事を表示

  • Plugin

    • 以前のBLOGで、WPPを使用して、ランキングなどを実装する方法を紹介しました。今回は、WPPでウィジェットに人気記事を表示する方法を紹介します。

     出典 : WordPress Popular Posts

    設定

    プラグインをインストール、有効化します。左サイドバーの外観＞ウィジェットをクリックします。ウィジェット設定画面が表示されます。

    外観＞ウィジェットをクリック

    ウィジェット設定画面が表示

    ウィジェットに、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ボタンなどを設定できますが、日々更新される人気記事を設置すると目に付きますね。

    You may also like