サイドバーウィジェットにサムネイル付きの「最新の投稿」を表示させるプラグイン【Recent Post Plus】

sponsored link

もはや定番となっている、サイドバーにサムネイル付きで人気記事などのメニューを表示させるデザイン。

人気記事のサムネイル付き表示は【Wordpress Popular Posts】で行うことができますが、それと同じようなことを「最新の投稿」で行うことができるのが【Recent Post Plus】です。

使用しているテーマにデフォルトでこのような機能が付いていれば不要です。

ワードプレス公式テーマの「Twenty Twelve」なんかではテキストのみですので、プラグインを導入してしまうのが手っ取り早い実現手段となります。

「WordPress Popular Posts」についての説明は以下の記事
サイドバーウィジェットにサムネイル付きの「人気の記事」を表示させるプラグイン【WordPress Popular Posts】

インストールと使い方

WordPressの管理画面から、「プラグイン」>「新規追加」>「検索」で【Recent Posts Plus】を検索してプラグインをインストールします。

「概観」>「ウィジェット」に「Recent Posts Plus」が追加されているので任意の場所に設置。クリックすると出る設定バーから詳細設定を行います。

設定項目

recent_posts_plus

項目 説明
タイトル タイトルを任意に設定可能
表示する投稿数 表示する投稿数を設定可能
Include post thumbnail サムネイルの表示・非表示
Include post excerpt 記事の抜粋の表示・非表示
Show expert options チェックでオプション設定項目を表示
Limit post title タイトルの文字数
Limit post excerpt 抜粋の文字数
Limit ellipsis 制限を越えた文字の表示方法
Post date format 投稿日のフォーマット
Thumbnail size (WxH) サムネイルサイズ(幅×高さ)
WP_Query Options クエリオプション
Widget Output Template テンプレートオプション

基本設定

わざわざ日本語にするほどでもなく、ほとんど見た通りに設定するだけです。

サムネイルはせっかくプラグインを導入するのだから表示しましょう。記事抜粋の表示は好みで。メニューが縦長になるのでちょっとごちゃつきます。

詳細設定

「Show expert options」にチェックを入れると項目が増え、タイトルや抜粋記事の文字数の設定、サムネイルの表示サイズ変更などが行えます。

「Widget Output Template 」を利用するとCSSでデザインのカスタマイズが行えます。

デザインのカスタマイズ

いざ導入してみたら、なんと… デザインがぐちゃぐちゃorz

まぁ、個人的なテンプレの問題かもしれません。

いちいち修正するのもめんどうだったのでどうしようかと思っていたら、ちょうどいい記事があったのでそのまま利用させて頂きました。

自分でCSSをカスタマイズできる人は適当にやって問題ありません。

参考にさせて頂いたサイト様
Recent Posts Plusのstyle.css 設定

Recent Post Plusの設定項目にある「Widget Output Template」と「style.css」の2箇所の修正を行います。

Widget Output Template

「Widget Output Template」に以下のコードを入力します。


<div class="widget_recent_entries clearfix">
  <div class="widget_recent_post-image">
        <a title="{TITLE_RAW}" href="{PERMALINK}" >{THUMBNAIL}</a>
  </div>
  <div class="widget_recent_entry_title">
        <a title="{TITLE_RAW}" href="{PERMALINK}" >{TITLE}</a>{EXCERPT}</div><div class="widget_recent_border">
  </div>
</div>

Style.cssの設定

「Style.css」に以下のコードを追加。


/* clearfix */
.clearfix:after {
content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
 
.clearfix {
  min-height: 1px;
}
 
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
 
/* Recent Posts Plus */
.widget_recent_border {
    border-bottom-color: #EDEDED;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    max-width: 100%;
 
}
.widget_recent_entries {
        padding-top: 0.714285714rem;
        margin 0 auto;
        max-width: 100%;
}
 
.widget_recent_post-image {
        width: 16.255206745%;
        float: left;
        margin-top: 0.714285714rem;
}
.widget_recent_post-image img {
        max-width: 100%;
        height: auto;
        width: auto;
}
.widget_recent_entry_title {
        width: 80.493751904%;
        margin-top: 0.714285714rem;
        float: right;
        font-size: 0.857142857rem;
        line-height: 1.6;
}

説明

画面幅に応じて変わるレスポンシブデザイン対応。固定の場合は「%」「rem」を「px」に変更。

中央揃えで、コンテンツの幅は以下のようになっているので好みの大きさに修正します。

  • widthのベース幅:「320PX」
  • サムネイルの幅:「50px」
  • タイトルの幅:「260px」
sponsored link

コメントを残す

メールアドレスが公開されることはありません。