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のテーマをSimplicity 1から2にバージョンアップしたお話し

    このスキコミでも便利に使わせてもらっているWordPressテ…

  2. WordPress

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

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

  3. WordPress

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

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

コメント

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

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

      >>むーちさん

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

最近の記事

Twitter

  1. 気になるアイテム

    【値下げ情報】アイ・オーの無線LAN中継器『WN-G300EX』が12/1から4…
  2. Microsoft

    え!?実はまだ買えたの?Windows 7がDSP版11,464円で購入可能だっ…
  3. Boy's顔文字 特殊顔文字

    iPhoneアプリ

    男がiPhoneで顔文字を使うなら『Boy’s顔文字』アプリだぜぇ!…
  4. フリーソフト

    視覚的にわかりやすく表示してくれる無料のデフラグソフト『Defraggler』の…
  5. スマートフォングッズ

    家庭での子供のビデオ撮影に最適そう。スマホでブレない映像が撮影できるDJI OS…
PAGE TOP