WordPress

サムネイル付きで最近の記事を表示できるWordPressプラグイン「Newpost Catch」

Newpost Catch08

WordPressにはデフォルトで最近の投稿をまとめて表示できるサイドバーのウィジェットがあります。ですが、これはテキスト表示のみでサムネイルを表示してくれません。テーマによって違うかもしれませんが。

テキストだけではなくサムネイルも一緒に表示したほうが、読者の目にも止まりやすいと思います。かといって自力でHTMLとかいじるのはメンドーです。

そこでプラグインでさくっと「サムネイル付き最新記事一覧」を表示させたい!

そんなときに使えるWordPressプラグインが「Newpost Catch」です。

インストール

  1. プラグイン項目「新規追加」を選択
  2. Newpost Catch01

  3. プラグインの検索
  4. 「Newpost Catch」で検索します。
    Newpost Catch02

  5. インストール
  6. 検索を実行すると見つかります。
    「いますぐインストール」しましょう。
    Newpost Catch03

  7. プラグインを有効化
  8. インストールが完了したら「プラグインを有効化」しましょう。
    Newpost Catch05

設定

  1. ウィジェットを追加
  2. 外観項目のウィジェットに「Newpost Catch」が追加されています。
    これを使いましょう。
    Newpost Catch06

  3. ウィジェットの設定
  4. 設定項目はたったのこれだけ。
    カンタンでいいですね♪

    せっかくだから「いいね!」しておきましょうか。
    設定したら「保存」をお忘れなく。
    Newpost Catch07

  5. CSSをいじる
  6. 設定するだけでもそれっぽく表示されますが、デザインを他と統一したいのであればプラグインのCSSを直接書き換えましょう。

    サーバーのWrodPressフォルダの以下にあるCSSをいじります。

    「plugins > newpost-catch > style.css」

    デフォルトでは以下のような設定になってます。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    
    #npcatch li{
        overflow:hidden;
        clear:both;
        margin:0px 0px 0px;
    }
     
    #npcatch img{
        float:left;
        padding:5px 10px;
    }
     
    #npcatch .title{
        width:135px;
        float:left;
        padding:5px 5px 5px 0px;
    }
     
    #npcatch li:hover{
    }
     
    #npcatch li:hover .title{
    }
     
    #npcatch li:hover .title a{
    }
     
    #npcatch li:hover .date{
    }

    もしも自分でCSSファイルを一つのファイルで管理しているのであれば、ここの設定をコメントアウトしてしまえばOK。

これだけカンタンに設定できるなんて助かりますね♪

関連記事

  1. コメント欄

    WordPress

    コメント覧とBlogのタイトル画像追加

    とりあえず今日はコメント欄をフリーのテンプレートから、シンプルなものを…

  2. 20120617121102

    WordPress

    記事でソースコードを分かりやすく表示するWPプラグイン『WP-Syntax』を導入してみた

    プログラミング系のブログならソースコードを記事内に表示したいってこと…

  3. コメント覧変更

    WordPress

    コメント覧デザイン変更

    少しだけれど変更。大きさ調整しただけだけど、、、、。まだ直す余地…

  4. themeforest0.jpg

    WordPress

    「themeforest」で初めて有料WordPressテーマを買ってみた

    ブログにはWordPressを使っていますが、この度、はじめて有料…

  5. Amazonプラグインデザイン

    WordPress

    Amazonプラグイン導入

    プラグインのデザインを整えてみた。これはAmazonの商品情報を表示…

  6. WordPressのバージョンを確認する方法

    WordPress

    WordPressのバージョンを確認する方法

    WordPressのバージョンを確認するにはダッシュボードの表示を調整…

アーカイブ

  1. LEGO CUUSOO

    日常

    探査機ブーム!?
  2. 日常

    こどものこころ
  3. 絵画が見ごたえあった「スター・ウォーズ展」

    展覧会

    絵画が見ごたえあった「スター・ウォーズ展」
  4. ついにiPhoneがFeliCa対応!!!「Apple Special Event 2016年9月」

    Appleイベント

    ついにiPhoneがFeliCa対応!!!「Apple Special Even…
  5. この夏に飲んで欲しい新定番!「ソルティライム ソーダ」

    グルメ

    この夏に飲んで欲しい新定番!「ソルティライム ソーダ」
PAGE TOP