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】SyntaxHighlighter Evolvedで上下に余白を入れる方法

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

  3. WordPress

    【WordPress】Markdown記法で投稿を楽々入力する方法

    どうも。自分のノウハウはMarkdownを使って esa.io にガシ…

  4. WordPress

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

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

  5. WordPress

    Batch Cat : WordPressでカテゴリーの一括変更を超簡単にできるプラグイン

    ちょっとWordpressで不要なカテゴリーが増えてきたなぁ と感じて…

コメント

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

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

      >>むーちさん

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

最近の記事

Twitter

  1. 赤ちゃん向けアイテム

    ほんとオススメ!! スマホ対応のベビーモニターなら断然secuOnネットワークベ…
  2. おすすめアイテム

    ノートパソコンを買い直すお金が無い? だったらモニターを買おう。(提案)
  3. ネタ

    敢えてここで紹介する。スターウォーズ旧三部作の予告編たち
  4. ライフハック

    【経験メモ】NCB EZマイカーローンの審査期間はどのくらいなのか
  5. 入園グッズ

    【入園グッズ】上履きを選ぶなら幼稚園の先生からもおすすめされた『はだしっこ』が良…
PAGE TOP