最新記事一覧をサムネイル画像付き、カテゴリー別でプラグインなしで表示する方法を紹介します。簡単なコードで実装できて、SEO対策の効果も期待できるのでおすすめです。
ゆめぴょんです。こんちはっ(^^)/
今年に入ってWordPressテーマを自作しました。今回の記事はPC版で利用している方法ですが、スマホ版やレスポンシブでも応用可能です。テーマ制作は下の記事も参考にしてください。
テーマ自作時には、軽量化・高速化も考えてWPプラグインの使用数を減らしました。「WordPressプラグインはずし特集」の第4弾です。今までの特集記事は全て下のリンクにまとめています。
今回、不要になるプラグイン
サムネイル付きで最新記事一覧を表示できるプラグイン「Newpost Catch」をはずすことができます。今までお世話になりました。便利なのでこれからの導入もおすすめです。
このプラグインは動作も軽いし、あまり不満はありませんでした。ただ記事ごとに関連カテゴリーを設定して、最新記事一覧を表示する場合などは今回のように自力で設置した方が柔軟に対応できます。
またカテゴリー別にすることにより、関連記事への内部リンクとしてSEO対策にもなるかもしれません。
設置する新着記事一覧の特徴
ただの記事一覧でいいのなら、標準のウィジェットで充分です。今回設置する新着記事一覧には、次のような機能・特徴があります。
- サムネイル画像付き
- 表示中の記事が属す全てのカテゴリーの新着を表示
- 表示中の記事を除く
- 投稿日も表示
- 表示件数は好みで変更可能（標準は5件）
サムネイル付き最新記事一覧の設置方法
設置コードはWordPressのテーマファイルに記述します。編集前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。
私のこのブログでは、サイドバーに設置しているので「sidebar.php」ファイルにコピペしています。その他の場所を希望する場合も、該当ファイルの表示部分に下コードをコピペしてください。
[html]
★新着記事（カテゴリ別）
-
term_id;
- “;
if(has_post_thumbnail()) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id(),array(60,60));
echo ““;
}
echo “{$new_title} (” . get_post_time(‘Y.m.d’) . “)
for($i=1; $i
}
$newposts = get_posts( array(
‘category’ => $cate_ids,
‘posts_per_page’ => 5,
‘exclude’ => $post_id ));
foreach( $newposts as $post ):
setup_postdata( $post );
$new_title = get_the_title();
echo “
“;
endforeach;
wp_reset_postdata();
echo ‘
‘;
?>
[/html]
カスタマイズ方法
表示件数は13行目の「’posts_per_page’ => 5」の「5」（件）で変更できます。
カテゴリー別ではなく、全カテゴリーの記事一覧を表示したい場合は、12行目の「’category’ => $cate_ids,」の行を削除すれば可能です。
サムネイル画像のサイズは20行目「array(60,60)」（60px 60px）で変更可能です。CSSの画像の「width」「height」も変更することを忘れないようにしてください。
CSS（スタイルシート）を適用すれば、好みの見栄えにすることができます。私のブログでの例は下のとおりですが、あなたのブログにあうように修正してください。
[css]
.side-new a {
display: block;
}
.side-new li {
overflow: auto;
margin: 4px;
padding: 0;
line-height: 1.5;
border-bottom: 1px dashed #999;
}
.side-new img {
float: left;
margin: 0 4px 0 0;
width: 60px;
height: 60px;
}
[/css]
まとめ：今日のゆめぴょんの知恵
プラグインを使うのも便利なのですが、これだけのコードで同じことを実現できるので自力設置もおすすめです。
最初にも書きましたが、カテゴリー別の記事を紹介するため、関連記事の内部リンクをGoogleにクロールしてもらいやすくなり、SEO効果もあるかもしれません。読者も似た記事を探しやすくなります。
ちなみに人気記事一覧をカテゴリー別にした方法は下の記事を参考にしてください。
ゆめぴょんでした。ちゃおっ！
