【WP】サムネ付きで新着記事を表示したいね

2018年5月8日WordPressCSS,Plug-in,Recent Posts Widget Extended,サムネイル,ワードプレス,新着記事WordPress,CSS,Plug-in,Recent Posts Widget Extended,サムネイル,ワードプレス,新着記事

着々とブログが…というよりWPのプラグインが充実してきましたが、、、今回はサムネ付きの「新着記事」をサイドバーに追加してみようと思い、「Recent Posts Widget Extended」というプラグインを追加してみます。

「Better Recent Posts Widgets」はどんなプラグイン?

Recent Posts Widget Extended
Recent Posts Widget Extended

え~、噂によると…、ウィジェット形式で新着記事を表示できるとかなんとか…?さらにカスタマイズも結構できるそうな…?

ということで聞きかじった情報しかまだ持ってませんので、早速インストールしてみます。

はじめの一歩のインストール

いつもどおり管理ツールからインストールしていきます。

Recent Posts Widget Extended のインストール
Recent Posts Widget Extended のインストール

ウィジェットを追加する

続いてはウィジェットの編集でサイドバーに「Recent Posts Extended」を追加します。

ヴィジェットの編集
ヴィジェットの編集

「Recent Posts Widget Extended」の設定

ウィジェットを追加すると下図のような設定項目が表示されますので必要に応じて変更します。

Recent Posts Widget Extended の設定
Recent Posts Widget Extended の設定
設定項目説明
Titleウィジェットのタイトル
Title URLタイトルのリンク先
CSS IDウィジェットに適用する任意のIDを指定
CSS Classウィジェットに適用する任意のクラスを指定
HTML or text before the recent posts一覧の前に表示するHTMLもしくはテキスト
HTML or text after the recent posts一覧の後に表示するHTMLまたはテキスト
Ignore sticky posts固定投稿(Sticky posts)を無視するか
Exclude current post現在の投稿を除外するか
Post Types表示対象にする投稿の種類(通常の投稿、固定ページ、メディア)
Post Status表示対象にする投稿の状態(公開、下書き、非公開など)
Order並び順(昇順、降順)
Order by並び順の基準とする項目(日付、投稿者、タイトル、ランダムなど)
Limit to Category表示対象にするカテゴリーを指定
Limit to Tag表示対象にするタグのIDを指定
Limit to Taxonomy表示対象にするタクソノミー(カスタム分類)のIDを指定
Number of posts to show一覧表示する投稿の数
Offset何番目の投稿から表示を開始するか
※例えば、「2」とした場合…
1、2番めの投稿を飛ばして一覧表示を開始するってこと
Display Thumbnailサムネイル(アイキャッチ)を表示するか
Thumbnail(height,width,align)サムネイル(アイキャッチ)のサイズと配置の指定
Default Thumbnailデフォルトで表示するサムネイルの指定
Display Excerpt投稿冒頭のテキストを表示するか
Exerpt Length何文字まで表示するかの指定
Display Readmore「続きを読む」を表示するか
※Display Excerptが無効だと表示されないっぽい
Readmore Test「続きを読む」に使用するテキスト
Display Comment Countコメントの数を表示するか
Display Date投稿日を表示するか
Display Modification Date更新日を表示するか
※Display Date が有効だと表示されないっぽい
Use Relative Date eg: 5 days ago日付を相対表示(○○日前など)にするか
※だけど実際は「○○日 ago」と表示される…
Use Default Stylesデフォルトスタイルを使うか
※カスタマイズする場合はチェックを外す

ちなみに私はこんな感じにしてみました。赤枠が変更箇所です。

うしぶろの設定内容
うしぶろの設定内容

CSSはサンプルをもとに少し変更してみました。
これはプラグインの設定ではなく子テーマのstyle.cssに追記しています。

/*
 * Recent posts Widget Extended
 */

/* ウィジェットタイトル → プロフィールに合わせる */

/* 一覧レイアウト ul li */
.rpwe-block ul {
  list-style: none!important;
  margin: 0;
  padding: 0;
}
.rpwe-block li {
  margin: 0 0 .4em 0!important;
  padding: 0 0 2px 0!important;
  border-top: none!important;
  border-bottom: solid 1px #ddd!important;
}

/* 投稿タイトル */
.rpwe-block h3 {
  clear: none;
  margin: 0 0 .2em 0;
  padding: 0;
  font-size: .9em;
}

/* サムネイル(アイキャッチ) */
.rpwe-thumb {
  margin: 0 .6em 0 0;
  padding: 0;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-right: solid 2px #999;
  border-bottom: solid 2px #999;
  border-radius: 10px;
}

/* 投稿記事 */
.rpwe-summary {
  font-size: 12px;
}

/* 日時 */
.rpwe-time {
  color: #999;
  font-size: .6em;
}

/* コメント */
.rpwe-comment {
  color: #bbb;
  font-size: 11px;
  padding-left: 5px;
}

/* 左回り込み */
.rpwe-alignleft {
  display: inline;
  float: left;
}

/* 右回り込み */
.rpwe-alignright {
  display: inline;
  float: right;
}

/* 中央 */
.rpwe-aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.rpwe-clearfix:before, .rpwe-clearfix:after {
  content: "";
  display: table!important;
}

.rpwe-clearfix:after {
  clear: both;
}

.rpwe-clearfix {
  zoom: 1;
}

表示してみる

実際に表示するとこんな雰囲気です。

うしぶろの最新記事一覧
うしぶろの最新記事一覧

というわけで完了!

英語に若干苦しめられましたが、それ以外はそれほど難しくもなく設置できました。

CSSとかもっと上手く使えれば良くなるんでしょうけど、今のところはこのぐらいで我慢します。_(┐「ε:)_