サイドバーにおすすめ記事一覧をサムネイル付きで表示させる

Recent Posts Widget Extended, おすすめ, ウィジェット, サイドバー

前回のサムネイル付き新着記事一覧をサイドバーに表示させるという記事は ルクセリタス > ウィジェットというカテゴリに入れましたが
今回の記事は WordPress > プラグインです。
一つの記事にカテゴリーは一つだけ！という自分なりのルールがあるので、こんな時、迷います。

ま、そこはタグでカバーするしか ないのかもしれません。

サムネイル付きおすすめ記事一覧を表示させる方法

おすすめの記事用に専用のタグをつくる

新規タグの追加画面で、名前：おすすめ　スラッグ：recommend　などと入力して新規タグを追加します。
tag

おすすめ記事に「おすすめ(recommend)」タグをつける

記事の一覧から、おすすめにしたい記事を選んで「おすすめ(recommend)」タグをつけます。
recommend tag

Recent Posts Widget Extended をインストールする

プラグインの新規追加からRecent Posts Widget Extended をインストールし有効化します。
Recent Posts Widget Extended

ウィジェットをサイドバーに追加する

「外観」「ウィジェット」を開いて「Recent Posts Extended」をサイドバーの表示したい位置に追加します。
Recent Posts Widget

ウィジェットの設定をする

Recent Posts Extended

  1. Title：タイトルを入力します
  2. Post Types：表示したい投稿にチェックを入れます
  3. Post Status：Publish（公開）を選択します
  4. Order：Descending（降順）を選択します
  5. Orderby：Date（日付）を選択します
  6. Limit to tag：一覧に「おすすめ」があればチェックをつけます
  7. Limit to taxonomy：上の一覧に「おすすめ」がなかった場合、「post_tag=149」などと記入します。詳細は後述。
  8. Number of posts to show：一覧に表示する記事数を選びます
  9. Display Thumbnail にチェックを入れてサムネイルサイズは100×100 Leftとします
  10. Display Excerpt にチェックを入れExcerpt Length（抜粋の長さ）は40とします
  11. すべてのチェックを外します
  12. Use Default Styles のチェックを外します
  13. Custom CSS 欄に入力されている内容はすべて削除して、子テーマのCSSの一番下に以下を追記します。
    注意新着記事一覧表示のCSSと同じですので、すでに追加済みの方は必要ありません。

    2018.06.24｜CSSの内容を更新しました

    CSS
    /* サイドバーRPWE新着記事一覧 */
#side .rpwe-block ul{
	list-style: none ;
	margin-left: 0 ;
	padding-left: 0 ;
}
#side .rpwe-block li{
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-bottom: 10px;
	list-style-type: none;
}
#side h3.rpwe-title{
	background:none; /* サイドバーのh3タイトルに背景色を設定している場合 */
	border:none; /* サイドバーのh3タイトルに枠線を設定している場合 */
	box-shadow: none; /* サイドバーのh3タイトルにシャドーを設定している場合 */
	line-height: 1.2em;
	font-size: 14px;
	margin: 0;
}
.rpwe-thumb{
	border: 1px solid #ddd;
	margin: 2px 10px 2px 0;
	padding: 3px ;
	box-shadow: 0 0 2px 1px rgba(255,255,255,1) inset;
}
.rpwe-summary{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4;
}
.rpwe-alignleft{
	display: inline;
	float: left;
}
.rpwe-clearfix:before,
.rpwe-clearfix:after{
	content: "";
	display: table ;
}
.rpwe-clearfix:after{
	clear: both;
}
.rpwe-time{
	color: gray;
	font-size: 13px;
	line-height: 1.4;
}
  14. 最後に保存します。
詳細タグのIDを調べるには、調べたいタグの上にマウスポインタを重ねて、ステータスバーに表示されている番号を確認します。
tag_02
tag_01

サイドバーに表示されている一覧を確認する

無事に自分が選んだ記事の一覧が表示されているでしょうか？
できるだけ、Luxeritas(ルクセリタス)のオリジナル新着表示と似せたつもりですが、このプラグインでは、画像のサイズを横長にするなど、自由に調整することも可能ですし、画像をタイトルの右側に表示させることも可能です。ただし、その際はCSSの調整が必要になってきますのでご注意ください。
Recommended articles

あとがき

Orderby：のところで Random を選択すると、ページがリロードされるたびに、おすすめタグをつけた記事の中からランダムで表示されるようになります。
タグを上手く使うと、自分で表示させる記事をコントロールできるので便利ですよ♪
このサイトでは、トップページに設置しています。（今のところ）

関連トップページは、プラグインを使用して作成しています。

プラグイン

Posted by どらみ