Recent Posts Widget Extendedの設定と使い方:新着記事一覧をサムネ付きで表示

Recent Posts Widget Extendedの設定と使い方

プラグイン「Recent Posts Widget Extended」を追加すると、ウィジェットの新着記事一覧(最近の投稿)をカスタマイズすることができます。

WordPressの初期設定では、「表示する投稿数」と「投稿日の表示」しか変更できませんが、このプラグインを使えば「サムネイルの表示」「コメント数の表示」「抜粋表示」「特定のカテゴリ及びタグのみ表示」「更新日順に表示」のカスタマイズが可能になります。

新着記事一覧

Recent Posts Widget Extendedで表示できる新着記事一覧

設定

Recent Posts Widget Extendedを追加&有効化し、外観のウィジェット「Recent Posts Widget Extended」から各種設定を行います。

Recent Posts Widget Extendedをウィジェットに追加

Recent Posts Widget Extendedをウィジェットに追加

基本的な設定

細かい設定もできますが、下記の5つの項目は最低限設定して下さい。

Recent Posts Widget Extendedの設定

Recent Posts Widget Extendedの設定

Title ウィジェットに表示するタイトル
Title URL ウィジェットタイトルにリンクを設定(URL)
CSS ID CSSを適用させたい時のID
CSS Class CSSを適用させたい時のClass
HTML or text before the recent posts 一覧の上に表示させるHTML及びテキスト
HTML or text after the recent posts 一覧の下に表示させるHTML及びテキスト
Ignore sticky posts 固定投稿を無視
Exclude current post 現在の投稿を非表示
Post Types 表示する投稿のタイプ(投稿・固定ページ等)
Post Status 表示する投稿のステータス(下書き・未来記事等)
Order 表示順序(降順or昇順)
Orderby 表示順の基準(投稿日・更新日・ランダム等)
Limit to Category 表示するカテゴリー
Limit to Tag 表示するタグ
Limit to Taxonomy 表示するカスタム投稿
Number of posts to show 表示する投稿数
Offset スキップする投稿数
Display Thumbnail サムネイルの表示
Thumbnail(height,width,align) サムネイルの高さ・横幅・位置の指定
Default Thumbnail アイキャッチが設定されていない投稿に表示する画像
Display Excerpt 抜粋表示
Excerpt Length 抜粋表示の文字数
Display Readmore Readmore(続きを読む)の表示
Readmore Text Display Readmoreで表示させるテキスト
Display Comment Count コメント数の表示
Display Date 日付の表示
Display Modification Date 更新日の表示(Display Dateと重複不可)
Use Relative Date. eg: 5 days ago 相対日付の表示

Default Thumbnail」の高さと横幅は、できるだけThumbnailの比率に合わせることをお勧めします(比率がずれているとデザインが崩れる可能性がある)。

カスタマイズ

Use Default Styles」のチェックを外してCSSをカスタマイズすることもできます。

CSSのカスタマイズ

CSSのカスタマイズ

特に変更する必要はありませんが、記事タイトルの文字を大きくしたい時は「.rpwe-block h3」の「font-size」を変更します。画像にカーソルを乗せた際、画像を半透明にさせたい時は下記CSSを追加します。後は自由にカスタマイズして下さい。

設定が終わったら「保存」をクリックして完了です。

最後に

新着記事一覧以外にも、特定のカテゴリーのみを表示させたり、ランダムで表示させたり、更新日の新しい順に表示させたり、かなり細かいカスタマイズが可能です。

この手のプラグインはたくさんありますが、個人的には「Recent Posts Widget Extended」が一番使いやすく、カスタマイズ性にも富んでいると思います。

スポンサーリンク
スポンサーリンク

このサイトで使用しているWPテーマ
「ハミングバード」

6 件のコメント

  • Recent Posts Widget Extended を最近使いまして、わかりやすい記事をありがとうございます!お聞きしたい事がありまして、矢印の消し方なのですが、どうしたら矢印がきえますでしょうか?教えてください!

    • 矢印はどこに表示されるのでしょうか?

      恐らくRecent Posts Widget Extendedの設定ではなく、使われているテーマのCSSが影響していると思います。お役に立てず申し訳ないのですが、矢印とソースを見ない事には僕にも分かりません。

      一度、管理画面の外観「テーマ」から、他のテーマを適用orライブプレビューを覗いて、同じ様にRecent Posts Widget Extendedウィジェットを配置してみて下さい。他のテーマで矢印が表示されないのであれば、テーマのCSSが原因です。その場合、Recent Posts Widget Extendedのカスタマイズで、矢印のCSSを打ち消す方法が一番簡単だと思います。

  • 返信ありがとうございます!矢印はサイドバー人気記事一覧に二つも矢印がでます、(1つの記事に2つの矢印) テーマのCSSが原因だと思います、Recent Posts Widget Extendedでどうにかできないでしょうか? 他のプラグインでも矢印がでてましたのでテーマのCSSですか。。Recent Posts Widget ExtendedのCSSで打ち消す方法ってあるのでしょうか?

    • 恐らく、テーマの「ウィジェット見出しのCSS」「ボーダーのCSS」「リンクのCSS」あたりが影響しているのだと思います。Google Chromeの「検証」ツール等を使って、矢印を表示しているCSSの要素とプロパティを見つけ、Recent Posts Widget Extendedのカスタマイズから「border: none;」「display:none;」等で打ち消して下さい。

      ちなみに、僕が今使っているテーマ「ハミングバード」でも、テーマのCSSが影響してレイアウトが崩れるプラグインはあります。そんな時は、プラグインのカスタムCSS及びテーマのCSSから、必要ない要素を上書きしたり、打ち消しています。

  • ありがとうございます!検証ツールの記事大変参考になりました!CSSがみつけました!
    Posts Widget Extendedカスタマイズから「border: none;」「display:none;」で、どう打ち消すのでしょうか?「border: none;」「display:none;」を そのまま追加でいいんでしょうか?

    • 矢印を表示している要素とプロパティによって消す方法は異なります。

      要素名 {プロパティ名:値;}

      まずは検証ツールを使って、矢印を表示させている要素とプロパティを特定して下さい。

      1.矢印に検証ツールを使ってCSSを表示させる
      2.矢印を表示させているプロパティを特定する(分からない時は矢印が消えるまで一つずつチェックを外す・入れるを繰り返す)
      3.要素を特定する
      4.Recent Posts Widget ExtendedのCSS(クラス属性)にプロパティと値を追加して打ち消す

      例えば、上記の場合はサイドバーのh3「#sidebar h3」に「border-bottom: 1px solid #474a4d;」が定義されているため、サイドバーのh3には全て下線が表示されます。もし、Recent Posts Widget Extendedのh3(タイトル)に表示される下線だけを消したい時は、「.rpwe-block h3」に「border-bottom: none!important;」を追加します。

      僕には矢印を表示させている「要素」「プロパティ」「値」が分からないので、これ以上は説明できないのですが、プロパティさえ分かれば、無効にする値は検索して頂ければ簡単に調べることができます。

      もし無料テーマを使っているのであれば、テーマ名を教えて頂ければこちらのテストブログで調べることもできるので、どうしても分からない時は教えて下さい。

  • コメントを残す

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