コンテンツとしての画像付き記事一覧を作れるNewpost Catch

99da0cd39a76eaa2a683f1d1cb7072c31.jpg

投稿内にサムネイル付き最新記事一覧を表示する

TwentyTwelveなど、フロントページがあるテーマを使用している場合で、トップページ=最初のホーム画面をインデックス(索引)化するのであれば、フロントページウィジェットエリアに「最近の投稿」などのウィジェットを設置することもできます。

デフォルトで「最近の投稿」ウィジェットを使用すると、下のようなテキストの箇条書きの表示になります。
デフォルトの最近の投稿ウィジェット

これを小さなサムネイル付き一覧にすると、下のような表示に。
Newpost-Catch最新記事一覧

やはり箇条書きで文字列だけ状態より、画像が付いている方が伝わりやすいし、画像自体もリンクなので、クリックやタップもしやすそうです。

この表示をするには、テンプレートのfront-page.phpをカスタマイズする手もあります。

でも、phpには不慣れで・・という方や、または、もっとお手軽に、時々はトップページのレイアウトも変更したい、という方におすすめなのは、プラグインで以下のことが出来るものを探す事です。

  1. サムネイル付き最新記事一覧表示ができる
  2. 生成されたimgタグにwidth、heightが含まれている
  3. ショートコードが使える

ショートコードが使えるプラグインなら、トップページはデフォルトのテンプレートを使用した、固定ページを作成し、その固定ページの投稿内に直接ショートコードを書き込むだけなので、簡単です。

※ショートコードが使えないテーマの場合には、以下の記事に方法を書きましたので、参考にして下さい。
functions.phpに加えると便利なワードプレス・コーデックス5選

この条件に当てはまり、実際に使ってみて、良いと思ったのが、Newpost Catch と Display Posts Shortcode です。

最新記事をさくさくっと表示させたいのであれば、Newpost Catchが適していますし、カテゴリー別の記事一覧や固定ページなどを表示させたいのであれば、Display Posts Shortcodeが向いていると思います。

Display Posts Shortcodeについては、以下の記事に書いていますので、参考になれば、と思います。
ショートコードだけでページ内に記事一覧!Display Posts Shortcode

このページでは、Newpost Catchの事について書いています。

ショートコード内でサムネイルのサイズ指定が可能で超便利な、Newpost Catchプラグイン

Newpost Catchの開発者、今村さんのブログで、プラグインについて内容を把握

Newpost Catchプラグインイメージ
今村だけがよくわかるブログ・WordPressのプラグイン「Newpost Catch」のページhttp://www.imamura.biz/blog/newpost-catch

【いろんなところにサムネイル付き最新記事を表示できます】WordPressプラグイン「Newpost Catch」の新機能「ショートコード」の使い方

【投稿タイプを選択できるようにしました】WordPressプラグイン「Newpost Catch」バージョンアップしました

基本的な使い方、ショートコードなどは、開発者、今村さんのプラグインページをご覧になった方が良いと思いますので、上のリンクよりご覧になってください。

※余談ですが、「今村だけがよくわかるブログ」いつも勉強させて頂いております。今村様!いつもありがとうございます<(_ _)>

ショートコードで一覧を作成する

・・・では、上のページをご覧になったことを前提に話を進めます(笑)

まず、これ以降、ショートコードをそのまま記載できませんので、[ を 【 に変更してあります。コピペする際はご注意願います<(_ _)>

下記のショートコードを

【npc posts_per_page="4" width="50" height="50"】

投稿内に下記のように入力しますと、

Npc投稿画麵

下のように表示されます。

Newpost-Catch最新記事一覧デフォルト

CSSをスタイルシートに追加して、横並びにする

これをCSSで横並びにします。

まず、ショートコードに「id=”new-post”」と書き加えます。
このidは後述のCSSを指定するものです。

【npc id="new-post" posts_per_page="4" width="50" height="50"】

CSSは次のようになります。
スタイルシートに書き加えていただけば、この投稿の上から2番目の画像の様になります。

/**Newpost-Catchを横並びにする**/
#new-post ul{
margin:0px;
}

#new-post ul li {
float: left;
margin-right: 5px;
padding: 2px;
}

#new-post li {
display: inline-block;
overflow: hidden;
clear: both;
margin:5px;
list-style: none;
vertical-align: top;
}

#new-post img{
/*サムネイルのスタイル*/
float:left;
padding:0px;
margin:5px;
border-radius: 0px;
box-shadow: none;
}

#new-post .title {
/*記事タイトルのスタイル*/
width: 135px;
float: left;
padding: 5px;
}

 アイキャッチ画像を設定していない場合のサムネイルの設定

アイキャッチ画像を設定していない投稿の場合、サムネイルはグレーの代替画像が表示されます。

Newpost Catchプラグインでは、サムネイル設定画面から、投稿本文中の画像をサムネイルとして設定して使用できます。

ダッシュボードのメニューから、設定→Newpost Catchをクリックします。
Newpost Catchサムネイル設定

サムネイル設定画面がで検索ボタンをクリック
Newpost Catchサムネイル設定画面

検索結果が表示され、OKなら、作成ボタンをクリックします。
Newpost-Catchサムネイル設定画面

いや、至れり尽くせりですね~♪(≧▽≦)

デフォルトテンプレート(サイドバーあり)の場合もやってみました!

CSSを調整し、画像サイズを100x100pxにしてみました。
ちなみに「サイドバーウィジェットで縦に並べるとこんな感じですサンプル」として、Newpost Catchで最新投稿一覧を表示させています。

Newpost-Catchアレンジ

Newpost-Catchアレンジ・スマホ画面

このパターンを、Resolution Testの320px幅にしてみたものが左画像。

スマートフォンの表示を想定しています。

周りをボーダーなどで囲ったり、背景色をつけたり、タイトルのフォントを太くしたりすると、よりスタイリッシュな感じになるかもしれませんね^^;

widthはテーマによっても違いますので、お好みでCSSを調整をしてみて下さい(^^)

ところどころ変更しましたので、こちらのCSSも丸ごと以下に上げておきます。

/**Newpost-Catchを横並びリストにする
#new-post ul{
margin:0px;
}

#new-post ul li {
float: left;
margin-right: 5px;
padding: 2px;
}

#new-post li {
display: inline-block;
overflow: hidden;
clear: both;
margin:5px;
list-style: none;
vertical-align: top;
}

#new-post img{
/*サムネイルのスタイル*/
float:left;
padding:0px;
margin:5px;
}

#new-post .title {
/*記事タイトルのスタイル*/
width: 115px;
float: left;
}

ではでは、ちょっと長くなりましたが^^;今日はココまで♪

お役に立てたのであれば、幸いです。
下記フラットボタンをぽちっとしていただいて、SNSに拡散していただけると、なおハッピーでございます(笑)

Published:2015/02/10

Written by