サイドバーにカスタム投稿を含む新着記事一覧をサムネイルつきで表示する

Recent Posts Widget Extended, サイドバー, プラグイン, 新着記事一覧

こちらのサイトでは、通常の投稿とは分けてカスタム投稿でも記事を書いています。
そこで今までは、サイドバーに通常の新着記事と、カスタム投稿の新着記事という形で、別々に一覧表示していたのですが、先日トップページのためにインストールしたプラグインを使えば、すべての記事の一覧が簡単にサイドバーに設置できることに気づきました。

そこで、忘れないうちに記事にしておきたいと思います。

サイドバーに新着記事一覧をサムネイルつきで表示する方法

Luxeritas(ルクセリタス)オリジナル

ルクセリタスには、あらかじめオリジナルの新着記事ウィジェットが備わっています。
そのウィジェットを使用して、サイドバーに新着記事の一覧をサムネイル付きで表示させるのはいとも簡単です。
Luxeritas original New Articles

これまでのカスタム投稿記事一覧

カスタム投稿の一覧表示には対応していなかったので、分けて表示していました。
Custom Posts New Articles

すべての記事一覧

プラグインを使用して、サイト内のすべての記事一覧をサムネイルつきで表示させてみました。
New Articles all
では、順を追って説明してまいります。

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

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

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

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

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

サイドバーにウィジェットを追加すると、下のような画面が表示されます。
Recent Posts Widget Extended-2

  1. Title：タイトルを入力します
  2. Post Types：表示したい投稿にチェックを入れます
  3. Post Status：Publish（公開）を選択します
  4. Order：Descending（降順）を選択します
  5. Orderby：Date（日付）を選択します
  6. Number of posts to show：一覧に表示する記事数を選びます
  7. Display Thumbnail にチェックを入れてサムネイルサイズは100×100 Leftとします
  8. Display Excerpt にチェックを入れExcerpt Length（抜粋の長さ）は40とします
  9. Display Readmore のチェックを外します
  10. すべてのチェックを外します
  11. Use Default Styles のチェックを外します
  12. Custom CSS 欄に入力されている内容はすべて削除して、子テーマのCSSに以下を追記します。

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

    13. 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;
}
  13. 保存します

以上で表示されるはずですので、サイドバーを確認してくださいね！
New Articles all

あとがき

Exclude current post にチェックが入っていると、現在表示させているページは「サイドバーの記事一覧」に表示されないようになります。

ということで、非常に使い道の多いプラグインだと思います！
次回は、このプラグインを使って自分が選んだおすすめ記事の一覧を表示する方法をご案内したいと思います。
え？
もうわかるからいらないって言いましたかぁ？
まぁまぁそう言わずw

5

ウィジェット

Posted by どらみ