Newpost Catchは、サムネイル画像付きの最近の投稿(新着記事)を表示できるWordPressプラグインです。
WordPressにはウィジェットで「最近の投稿」を指定する機能がありますが、サムネイル画像が付いていません。有料で販売されているテンプレートでは対応しているものと対応していないものがあります。
もし、自分が使用しているテンプレートがサムネイル画像付きの新着記事(最近の投稿)を表示する機能がなければ、このプラグインを利用すると便利です。
はじめに
このプラグインが優れている点
- 自分が使用しているテンプレートにサムネイル画像付きの最近の投稿(新着記事)を表示する機能が無くても、このプラグインを利用することで、サムネイル画像付きの最近の投稿を利用できる。
- 管理画面で画像の大きさや表示個数などを設定できます。
- ウィジェットで表示位置を指定できます。
何故このプラグインが必要?
何故このプラグインが必要かを説明すると、プログを運営している場合、検索エンジン経由のユーザー流入ページ(ランディングページ)は、トップページではなく、詳細ページの場合が多いです。
詳細ページを閲覧しているユーザーが新着記事にスムーズに流入するように、サムネイル画像付きの新着記事のリンクをサイドバー等に配置しましょう。
最近の投稿の例
当サイトでも「Newpost Catch」を実際に利用していました。(現在は利用していません)
下記はサイドバーに表示している「最近の投稿」のスクリーンショットです。
インストール方法
管理画面から検索してインストールして下さい。
もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。
- WordPress管理画面 > プラグイン > 新規追加 >「Newpost Catch」で検索
- 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コードは、あくまでもネタワンの環境の場合の見本です。あなたが利用しているテンプレートに合わせて変更して下さい。
まとめ
Newpost Catchは、サムネイル画像付きの最近の投稿(新着記事)を表示できるWordPressプラグインです。
プログを運営している場合、検索エンジン経由のユーザー流入ページ(ランディングページ)は、トップページではなく、詳細ページの場合が多いです。詳細ページを閲覧しているユーザーが新着記事にスムーズに流入するように、サムネイル画像付きの新着記事のリンクをサイドバー等に配置しましょう。そうすることで、ブログ内のページ回遊率が上がります。