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

    Can’t open file: ‘テーブル.MYI’という絶望…

    このようなブログなどを運用していると、ときどき技術的な問題にぶち当たる…

  2. WordPress

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

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

  3. WordPress

    【WordPress】SyntaxHighlighter Evolvedで上下に余白を入れる方法

    WordPressのありがたプラグイン《SyntaxHighlight…

コメント

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

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

      >>むーちさん

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

最近の記事

Twitter

  1. LINE

    【2015年10月21日】LINEで通信障害が発生
  2. iTunes 11

    未分類

    リリースが11月に延期されたiTunes11で何が変わるのか
  3. iPhoneアプリ

    ウェザーメート:個人的に予報の当たりやすさはナンバーワン。1時間間隔の予報で、過…
  4. LINE

    TVアニメ「LINE OFFLINE」の第一話がYoutubeで無料公開。見逃し…
  5. フリーソフト

    To-Do DeskList:シンプルかつオシャレ。WindowsでToDoをこ…
PAGE TOP