賢威サイドバーの最近の投稿にサムネイルを設定する（Newpost Catch）

賢威6.1サイドバーの最近の投稿は、タイトルのみと少しさみしいので、
これにサムネイル表示するプラグインを紹介したいと思います。
開発者は日本人の今村さんです。

Newpost Catchを導入して、サイドバーの最近の投稿にサムネイルを表示する

「Newpost Catch」というプラグインを利用します。
賢威用にデザインをカスタマイズするには、スタイルを修正する必要があります。

インストール

「プラグイン > 新規追加」から「Newpost Catch」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › Newpost Catch « WordPress Plugins

「Newpost Catch」を今すぐインストールし、
インストール完了後にプラグインを有効化します。

これで、「Newpost Catch」のインストールは完了です。

ウィジェットの設定

次に、ウィジェットに「Newpost Catch」を設定します。
「外観 > ウィジェット」から「Newpost Catch」を選択し、サイドバーの好きな位置へ挿入します。

ウィジェットを開くと、「Newpost Catch」の設定ができます。
サムネイルサイズは、好きなサイズを指定してください。

また、「プラグインフォルダ内のデフォルトCSS（チェックすると適用）」は
この後、独自スタイルを設定するのでチェックを外してください。

独自スタイルの適用

「Newpost Catch」に賢威6.1にあう独自スタイルを設定します。
実際に「Newpost Catch」から出力されるHTMLは以下のとおりです。

<div class="contents widget-conts widget_newpostcatch">
<h3>最近の投稿</h3>
<ul id="npcatch" >
	<li>
		<a href="http://www.keni-customize.net/newpost-catch-736/" title="賢威サイドバーの最近の投稿にサムネイルを設定する（Newpost Catch）" >
		<img src="http://www.keni-customize.net/wp-content/uploads/2013/12/sidebar-newpost-150x150.jpg" width="80" height="80" alt="賢威サイドバーの最近の投稿にサムネイルを設定する（Newpost Catch）" title="賢威サイドバーの最近の投稿にサムネイルを設定する（Newpost Catch）"  />
		</a>
		<span class="title"><a href="http://www.keni-customize.net/newpost-catch-736/" title="賢威サイドバーの最近の投稿にサムネイルを設定する（Newpost Catch）">賢威サイドバーの最近の投稿にサムネイルを設定する（Newpost Catch）</a></span>
	</li>
	<li>
		<a href="http://www.keni-customize.net/yohaku-nobr-724/" title="WordPressで文章間の余白を改行タグの連続で調整しないで綺麗に表示する" >
		<img src="http://www.keni-customize.net/wp-content/uploads/2013/11/eye-catch006-150x150.png" width="80" height="80" alt="WordPressで文章間の余白を改行タグの連続で調整しないで綺麗に表示する" title="WordPressで文章間の余白を改行タグの連続で調整しないで綺麗に表示する"  />
		</a>
		<span class="title"><a href="http://www.keni-customize.net/yohaku-nobr-724/" title="WordPressで文章間の余白を改行タグの連続で調整しないで綺麗に表示する">WordPressで文章間の余白を改行タグの連続で調整しないで綺麗に表示する</a></span>
	</li>
	<li>
		<a href="http://www.keni-customize.net/id-kakunin-715/" title="WordPressで特定の投稿・固定・カテゴリー・タグのIDを確認する方法" >
		<img src="http://www.keni-customize.net/wp-content/uploads/2013/11/keni-customize-150x150.jpg" width="80" height="80" alt="WordPressで特定の投稿・固定・カテゴリー・タグのIDを確認する方法" title="WordPressで特定の投稿・固定・カテゴリー・タグのIDを確認する方法"  />
		</a>
		<span class="title"><a href="http://www.keni-customize.net/id-kakunin-715/" title="WordPressで特定の投稿・固定・カテゴリー・タグのIDを確認する方法">WordPressで特定の投稿・固定・カテゴリー・タグのIDを確認する方法</a></span>
	</li>
	<li>
		<a href="http://www.keni-customize.net/wordpress-popular-posts-872/" title="WordPressで人気記事をサムネイルありで表示する（WordPress Popular Posts）" >
		<img src="http://www.keni-customize.net/wp-content/uploads/2013/12/sidebar-newpost-150x150.jpg" width="80" height="80" alt="WordPressで人気記事をサムネイルありで表示する（WordPress Popular Posts）" title="WordPressで人気記事をサムネイルありで表示する（WordPress Popular Posts）"  />
		</a>
		<span class="title"><a href="http://www.keni-customize.net/wordpress-popular-posts-872/" title="WordPressで人気記事をサムネイルありで表示する（WordPress Popular Posts）">WordPressで人気記事をサムネイルありで表示する（WordPress Popular Posts）</a></span>
	</li>
	<li>
		<a href="http://www.keni-customize.net/sidebar-category-narabikae-699/" title="賢威サイドバーのカテゴリーを並び替える方法" >
		<img src="http://www.keni-customize.net/wp-content/uploads/2013/12/sidebar-newpost-150x150.jpg" width="80" height="80" alt="賢威サイドバーのカテゴリーを並び替える方法" title="賢威サイドバーのカテゴリーを並び替える方法"  />
		</a>
		<span class="title"><a href="http://www.keni-customize.net/sidebar-category-narabikae-699/" title="賢威サイドバーのカテゴリーを並び替える方法">賢威サイドバーのカテゴリーを並び替える方法</a></span>
	</li>
</ul>
</div>

次に、完成形のスタイルです。

#npcatch li{
	overflow: hidden;
	background: none;
	clear: both;
	margin: 0;
	padding: 0 0 1.0em 0;
}

#npcatch img{
	width: 30%;
	float: left;
	padding: 2px;
	border: solid 1px #ccc;
	background-color: #fff;
}

#npcatch .title{
	width: 60%;
	float: left;
	padding: 0.5em;
}

#npcatch li:hover{
}

#npcatch li:hover .title{
}

#npcatch li:hover .title a{
}

#npcatch li:hover .date{
}

「Newpost Catch」開発者である今村さんのブログでは、
独自スタイルを使用する場合は、「newpost-catch.css」を作成するとありますが、必要ありません。
Newpost Catch | 今村だけがよくわかるブログ

賢威では「外観 > テーマ編集」から「design.css」を開き、1番下に追加すればOKです。
その際、ウィジェットのチェックが外れていないと適用されないので気をつけてください。

注意点というか、1番悩みそうなのは以下の部分です。

#npcatch li{
	overflow: hidden;
	background: none;
	clear: both;
	margin: 0;
	padding: 0 0 1.0em 0;
}

3行目で「background: none;」を指定しています。
これは、賢威6.1で初期表示されるリスト画像（▶みたいなやつ）を消します。
ここで、「list-style: none;」とやりがちですが、賢威は「background」スタイルで指定しているので、
「background: none;」でスタイルを上書きしないと、リストスタイルが消えません。

他のスタイル自体はそれほど難しい指定ではありませんので、
ホバー時の動きなどを独自で指定したい場合は、「li:hover」に追加してください。
このままであれば、他のリンクタグと同じ動きになります。

サムネイルが存在しない時はデフォルトイメージ

サムネイルが存在しない場合は、画像のようなデフォルトイメージが表示されます。
プラグインフォルダの中に「no_thumb.png」というファイル名で「150 × 150」の画像があります。

これを差し替えれば、デフォルトイメージの差し替えも可能ですが、
プラグイン更新で上書きされてしまうので、今回は変更していません。