Newpost Catch で最近の投稿にサムネイルを付けて表示する

Newpost Catchは、サムネイル付の最近の投稿を作成できるウィジェットプラグインです。

Newpost Catchは、使い方は簡単で、プラグインをインストールして有効化することで、ウィジェット作成画面で追加されます。

Newpost Catch

Thumbnails in new articles setting widget.

Newpost Catchプラグインを利用すると以下のメリットがあります。

サムネイル付の最近の投稿を作成できる。
利用しているテーマに合わせて簡単にカスタマイズが可能である。
複数ウィジェットを設置可能である。

Newpost Catchのインストール

管理画面から検索してインストール、または、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

管理画面から検索してインストール

WordPress管理画面＞プラグイン＞新規追加＞「Newpost Catch」で検索
WordPress.org からダウンロード
「今すぐインストール」をクリック
プラグインを有効化する

WordPress.org からインストール

WordPress.orgから、「Newpost Catch」のzipファイルをダウンロード
ダウンロードしたファイルを解凍
FTPソフトなどで、WordPressの「plugin」フォルダ内にアップロード
WordPressの管理画面から「プラグイン」を選択
プラグインを有効化する

Newpost Catchの設定

管理画面の場所

WordPress管理画面＞外観＞ウィジェット

ウィジェット作成画面で追加できるようになります。

Newpost Catchの設定項目

タイトル

ウィジェットのタイトルを入力します。

サムネイルのサイズ

表示させるサムネイルの幅、高さを指定します。

投稿件数

投稿件数を指定します。

投稿日

「投稿日」にチェックを入れると、記事を公開した日が「設定」→「一般」の日付フォーマットに準じて表示されます。

先頭に固定表示している投稿の表示/非表示

新しく投稿した記事により表示される記事が入れ換わるので、先頭に固定したい投稿を指定することができます。

固定記事は複数指定できますが、「投稿件数」で指定した件数にプラス表示されるので、トータル件数を考慮しないといけません。

プラグインフォルダ内のデフォルトCSSファイル「style.css」の適用の有無

チェック「する」「しない」で読み込むCSSを切り替えられます。

チェックする場合

「Newpost Catch」プラグインフォルダにある「style.css」を読み込みます。

チェックしない場合

「newpost-catch.css」ファイルが存在していれば、優先して読み込みます。（設置場所：テーマフォルダ/css/newpost-catch.css）

ファイルが存在していない場合は、何も読み込みません。テーマで使用しているCSSファイルなどにスタイルを記述します。

カテゴリ別最新記事

カテゴリーIDを指定することで、表示したい新着記事だけ表示させます。デフォルトは空欄ですべての新着記事が表示されます。

ショートコード機能

「Newpost Catch」プラグインをインストールすると、プラグイン専用のショートコードを使うことができます。

[[npc]]とコードを単純に入れるだけで、サムネイル付き最新記事が表示されますが、ショートコードが反映される箇所は主に3つです。

投稿本文中で使う

[[npc]]のコードを本文中に入れる。

テキストウィジェット内で使う

テーマフォルダ内の「functions.php」に以下のコードがあるかどうか確認し、コードが無ければファイルの最後尾などに追記します。

add_filter(‘widget_text’, ‘do_shortcode’);

テーマファイル内で使う

テーマフォルダ内の「single.php」にショートコードを追記します。ファイル中にショートコードを書く場合は、以下のように書きます。

<?php echo do_shortcode( ‘[[npc]]’ ); ?>

ショートコードに利用できる属性一覧

id(string) – ulエレメントのid名(default:npcatch)
cat(int) – カテゴリID(default:NULL)
width(int) – サムネイルのwidth値(default:10)
height(int) – サムネイルのheight値(default:10)
posts_per_page(int) – 表示件数(default:5)
sticky(boolean) – 先頭に固定表示の記事を表示するかどうか(on:1 off:0 default:0)
offset(int) – 先頭からx番目の記事から表示(default:0)
orderby(string) – 記事の並び方(default:date)
order(string) – orderbyで並べた記事を昇順か降順で表示(降順：DESC 昇順：ASC default:DESC)
date(boolean) – 記事の公開日の表示有無(on:1 off:0 default:0)
dynamic(boolean) – 同じカテゴリの最新記事を動的に表示する。（カテゴリIDを指定している場合は、こちらの値が優先されます）また、投稿タイプが「post」の時のみ設定が有効になります。「post」以外のページを表示している場合はカテゴリIDの値を優先します。(on:1 off:0 default:0)

アイキャッチ一括設定

アイキャッチ画像が未設定の投稿について「投稿内にある1枚目の画像を自動でサムネイルとして表示」できます。

Newpost Catchのカスタマイズ

使用するテーマによっては、ウィジェットのサイズが小さくてサムネイルとテキストが綺麗に表示されない場合があります。

そのような時は、「Newpost Catch」のCSSを簡単にカスタマイズして適用します。

「Newpost Catch」プラグインフォルダにある「style.css」の内容をコピーし、テーマの「style.css」内に追記します。

/*　サンプルCSS　*/

#npcatch{
	margin:0px;
}

#npcatch li{
	font-size:12px;
	overflow:hidden;
	clear:both;
	margin:0px 0px 5px;
	vertical-align:top;
}

#npcatch img{
/*サムネイルのスタイル*/
	float:left;
	padding:0px;
	box-shadow:0px 0px 7px #bbb;
}

#npcatch .title{
/*記事タイトルのスタイル*/
	width:170px;
	float:right;
	padding:0px;
}

テーマの「style.css」に追記したCSSを変更します。

「Newpost Catch」の設定項目、「デフォルトCSS適用の有無」のチェックをはずします。