新着記事を投稿順ではなく更新順に表示する

2018.03.20CSS, Recent Posts Widget Extended, サイドバー

2018.06.24 CSSにスペルの誤りが見つかりました。コピーしてお使いの方は、修正をお願いします。

サイドバーにサイト内の新着記事の一覧を表示させるケースは比較的多くあると思います。

ルクセリタスでは、オリジナルのウィジェットが用意されていて、サムネイル付きの新着記事一覧が簡単に表示できるようになっています。

ルクセリタスの新着記事一覧

しかし、記事に書かれた内容は時の流れと共に古くなり、書き替えが必要になる場合があります。

そういった時に閲覧者が参考にするのは、投稿日ではなく更新日です。

そこで、今回はプラグインを使用して、更新された日付が新しいものから順に並ぶような記事一覧を表示してみたいと思います。

サイドバーに最近更新された記事の一覧を表示する

多くの解説は、下記の記事に記載されている内容と重複します。
もし、すでに当該プラグインを導入済みの方は、CSSの記述が重複しないようご注意ください。

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

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

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

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

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

サイドバーにウィジェットを追加すると、以下のような設定画面が表示されます。
キャプチャ画面の通りに設定してください。（対応する番号の説明は下にあります）
Recent Posts Widget Extended設定画面

  1. Title：タイトルを入力します
  2. Ignore sticky posts ：付箋を無視する（使い方がわからないのでOFF!w）
  3. Exclude current post ：現在閲覧している記事を一覧に表示しない場合はチェックします
  4. Post Types ：表示させたい投稿タイプにチェックします
  5. Post Status ：Publish（公開）を選択します
  6. Order：Descending（降順）を選択します
  7. Orderby：Modified（更新日）を選択します
  8. Limit to Category ：カテゴリーを指定する場合はチェックします
  9. Limit to Tag ：タグを指定する場合はチェックします
  10. Limit to Taxonomy ：上の一覧に「おすすめ」がなかった場合、「post_tag=149」などと記入します。詳細は後述※。
  11. Number of posts to show：一覧に表示する記事数を選びます
  12. Display Thumbnail ：チェックを入れます
  13. サムネイルサイズは100×100 Leftとします
  14. Default Thumbnail ：サムネイル画像がない場合に表示させる画像のパスを入力します
  15. Display Excerpt ：チェックを入れます
  16. Excerpt Length ：抜粋の長さは「40」とします
  17. Use Default Styles のチェックを外します
  18. Custom 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;
}
  19. 保存します

タグのIDを調べるには ※

調べたいタグの上にマウスポインタを重ねて、ステータスバーに表示されている番号を確認します。
tag_02
tag_01

ルクセリタスの記事一覧を更新日順に並べる

通常は、新着記事、カテゴリー別の記事、アーカイブ別の記事は、投稿日順で並べられて一覧に表示されます。
これを、更新日順に並べる方法が作者のるなさんのサイトで紹介されていましたので、リンク先をご紹介させていただきます。
リンクWordPress の記事一覧を更新日時順で表示する | Thought is free

Google検索エンジンに更新日を公開する

ルクセリタスでは、カスタマイズの中でGoogleに公開する日付を「投稿日」と「更新日」から選択することも可能になっています。
「Luxeritas」「カスタマイズ」「Head タグ」
ただし、ここで「更新日」を選択しても、Googleがクロールしてくれなければ、意味がない旨を作者のるなさんがLuxeritas 2.5.4 リリース へのコメント欄で書いておられました。(2018-03-17)

あとがき

当サイトでは、トップページのサイドバーに「更新日順の記事一覧」を表示してみました。
プラグインRecent Posts Widget Extendedは、カスタム投稿にも対応していますので、使い勝手がとてもよく、各所で使用させてもらっています。
この記事にも、一応サイドバー用のCSSをご紹介したのですが、ご自身のサイトに合わせて、参考程度にお使いいただければと思います。
おまけ
いつも記事を書くときにアイキャッチ画像を探すのに苦労しています。今日のイラストはなかなかのお気に入りですw

3

2018.03.20プラグイン

Posted by どらみ