Newpost Catch

Newpost Catchは、サムネイル画像付きの最近の投稿（新着記事）を表示できるプラグインです。

WordPressにはウィジェットで「最近の投稿」を指定する機能がありますが、サムネイル画像が付いていません。有料で販売されているテンプレートでは対応しているものと対応していないものがあります。

もし、自分が使用しているテンプレートがサムネイル画像付きの新着記事（最近の投稿）を表示する機能がなければ、このプラグインを利用すると便利です。

はじめに

このプラグインが優れている点

  1. 自分が使用しているテンプレートにサムネイル画像付きの最近の投稿（新着記事）を表示する機能が無くても、このプラグインを利用することで、サムネイル画像付きの最近の投稿を利用できる。
  2. 管理画面で画像の大きさや表示個数などを設定できます。
  3. ウィジェットで表示位置を指定できます。

何故このプラグインが必要？

何故このプラグインが必要かを説明すると、プログやWebサイトを運営している場合、検索エンジン経由のユーザー流入ページ（ランディングページ）は、トップページではなく、詳細ページの場合が多いです。詳細ページを閲覧しているユーザーが新着記事にスムーズに流入するように、サムネイル画像付きの新着記事のリンクをサイドバー等に配置しましょう。

最近の投稿の例

当サイトでも「Newpost Catch」を実際に利用していました。（現在は利用していません）

下記はサイドバーに表示している「最近の投稿」のスクリーンショットです。

インストール方法

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

  1. WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Newpost Catch」で検索
  2. WordPress.org からダウンロード

プラグインの設定方法

このプラグインの設定はウィジェットで行います。ウィジェットで表示位置を指定すると設定画面が表示されます。

ウィジェットの場所

管理画面は下記の場所にあります。サイドバー又はフッターにドラッグ＆ドロップして表示位置を指定して下さい。

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

ウィジェットの設定

このプラグインは、開発者が日本人なので、設定画面は全て日本語です。設定は特に難しくありません。必要に応じて設定を変更しましょう。

サムネイルのサイズ
サムネイルの画像サイズの指定です。ピクセル単位でサイズを指定して下さい。

デフォルトCSS
「プラグインフォルダ内のデフォルトCSS」はチェックを外して、直接CSSを記述した方が良いと思います。CSSファイルは下記の場所に格納されています。このCSSをコピペして使用しているCSSファイルに追加して下さい。

CSSのカスタマイズ

使用しているテンプレートによっては、表示が乱れる場合があります。あなたが使用しているテンプレートに合わせてCSSを整えましょう。

Newpost CatchのCSSの構造は、下記のようになっています。出力されるHTMLのULタグには「id=”npcatch”」が付いています。日付の表示形式は、WordPressの設定が反映されます。

CSSファイルの場所
/wp-content/plugins/newpost-catch/style.css

<ul id="npcatch">
<li><a href="リンク"><img>
<span class="title">記事タイトル</span>
<span class="date">日付</span></li>
</ul>

初期状態のCSS

#npcatch li{
	overflow:hidden;
	clear:both;
	margin:0px 0px 0px;
}
#npcatch img{
	float:left;
	padding:5px 10px;
}
#npcatch .title{
	width:135px;
	float:left;
	padding:5px 5px 5px 0px;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}

カスタマイズ例

初期設定のCSSは、サイドバーの横幅が狭いので、サイドバーの横幅が300ピクセルの場合は、幅を適度に広げましょう。下記はサムネイル画像のサイズが80ピクセルの場合です。

#npcatch li{
	overflow:hidden;
	clear:both;
	margin:0px;
}
#npcatch img{
	float:left;
	padding:5px 10px 5px 0px;
}
#npcatch .title{
	width:210px;
	float:left;
	padding:5px 0px;
	line-height:140%;
	font-size:12px;
	text-decoration:none;
}
#npcatch li a{
	text-decoration:none;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}

テンプレートのCSSが影響する場合

使用しているテンプレートによっては、LIタグに背景や余白の設定が付いている場合があります。その場合は、背景や余白を解除しましょう。下記はその例です。

ul#npcatch li { 
	padding:0px;
	backgroud:none;
}

設定完了

Newpost Catchの設定は以上です。CSSはテンプレートごとに個別に設定する必要があります。

上記のCSSコードは、あくまでもネタワンの環境の場合の見本です。あなたが利用しているテンプレートに合わせて変更して下さい。

まとめ

プログやWebサイトを運営している場合、検索エンジン経由のユーザー流入ページ（ランディングページ）は、トップページではなく、詳細ページの場合が多いです。詳細ページを閲覧しているユーザーが新着記事にスムーズに流入するように、サムネイル画像付きの新着記事のリンクをサイドバー等に配置しましょう。そうすることで、Webサイト内のページ回遊率が上がります。

スポンサーリンク