WordPress

  (最終更新日:2013.01.28)

Newpost Catchを使って『最近の投稿』にサムネイル画像を表示させる方法(修正2013-01-28)

CSSの記載方法を少し修正しました!(2013/01/28)

まだまだガシガシとWordpressをカスタム中ですよ、のいつきです。こんにちは。


さて今回は、ウィジェット「最近の投稿」にサムネイルを表示させてくれるプラグイン『Newpost Catch』を導入させていただいたのでその簡単な手順と、カスタムしておいた方がいいよのポイントをご紹介です。


まずは『Newpost Catch』を検索してインストールします。管理画面からできるなんてWordpress便利すな~。


続いてウィジェットを追加します。

『タイトル』、『サムネイルのサイズ』、『投稿件数』を入力します。僕は投稿日も表示させたかったので『投稿日(チェックすると表示)』にもチェックを入れました。
全て入力し終わったら『保存』をクリックすれば完了です。


このような感じで無事にサムネイル画像(アイキャッチ画像)が表示されるようになりました!


けどなんだかタイトルが変なところで改行されていて見た目が悪い・・・・。おまけに日付もリンク対象から外したいなぁ・・・・。
というわけでスクリプトとスタイルシートを修正させて頂きます。


まずはスタイルシートのファイル(style.css)を修正します。
titleクラスの幅サイズを適宜修正してください。スキコミの場合は200pxが程良い感じでした。

#npcatch li {
	clear      : both;
	margin     : 2px;
	overflow   : hidden;
    list-style : none;
}
#npcatch img {
	float : left;
}
#npcatch .title{
	width   : 200px;
	float   : left;
	padding : 5px 5px 5px 5px;
}
#npcatch .date{
	font-size   : 8px;
	font-weight : bold;
}


最後にPHPファイルを修正します。
class.phpの日付表記箇所を下記のような感じに変更しました。

<span class="title"><a href="<?php esc_attr( the_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><?php esc_html( the_title() ); ?>
</a>
<?php if ( $instance['date']['active'] ) { ?>
<span class="date"> posted on <?php esc_html( the_time('Y/m/d' , '' , '' ) ); ?></span>
<?php } ?>
</span>


こうすることで下図のような状態になってキレイに表示されるようになりました。


プラグイン、便利ですねぇ。
今回ご紹介したプラグイン『Newpost Catch』の詳しい情報は作者様のWebサイトをご覧ください。


では。

関連記事

  1. WordPress

    WordPressのSharebarにPocketのボタンを追加する方法

    ちょっと「後で読みたい」と思ったサイトを簡単に登録してくれるPocke…

  2. WordPress

    【WordPressプラグイン】WordPress Visual Icon Fontsを入れるとアイ…

    いろいろなマークのアイコンって便利ですよね!ただ、いざWo…

  3. WordPress

    【WordPress】ブログのコメント欄でアバター画像を表示する方法。ブロガーさんは必須やで

    Wordpressで作られた自分や他人のブログのコメント欄にアバター画…

  4. WordPress

    【WordPress】Simple Image Sizesのアップデート後にsyntax error…

    WordPressのプラグイン『Simple Image Sizes』…

コメント

  1. 初心者です。
    幾つものサイトを参考にしてもなかなか出来かったのですが、
    こちらの記事を参考にしましたら、
    おかげさまで、日付を見栄え良く入れることができました!
    有益な情報をありがとうございました。

      • いつきぞら
      • 2015年 12月 02日

      >>むーちさん

      お役に立てて良かったです!
      共にブログライフを楽しみましょー。

最近の記事

Twitter

  1. iPhoneグッズ

    【購入レビュー】パワーサポートのエアージャケットセット・クリアマットの装着感がか…
  2. comm

    commのデスクトップアプリが1.1.3.0へバージョンアップ
  3. おすすめアイテム

    KURE 5-56はドアの開閉時に鳴るキーキー音を一発解消してくれる素人最強のア…
  4. デジタル機器

    アルミ削り出しボディが際立つ。ASUSから液晶一体型のPC「Zen AiO」が発…
  5. LINE

    いつの間に‥。PC版LINEがプロキシに対応していた件と設定方法
PAGE TOP