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

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

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

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

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

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

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

ウィジェットを追加する

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

「Recent Posts Widget Extended」の設定

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

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

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