【WordPress】カテゴリを判別して、最新記事をサムネイル付きで一覧表示する方法

公開: 更新:2016/10/16


WordPress
今回は、表示している記事のカテゴリを判別して、そのカテゴリの最新記事一覧をサイドバーに表示する方法をご紹介します。
しかもサムネイル画像と一緒に表示されるので、読者の目に止まりやすくなりますよ。

スポンサーリンク

最新記事一覧の動作イメージ

動作のイメージとしては、こういう感じです。

  1. 個別記事を表示している時
    その記事が属しているカテゴリの最新記事を一覧表示
  2. カテゴリ別アーカイブを表示している時
    そのカテゴリの最新記事を一覧表示
  3. それ以外(トップページなど)
    カテゴリを問わず、最新記事を一覧表示

記事のサムネイル画像とタイトルが並んで表示されます。

やり方はカンタン。下記のコードをWordPressのfunctions.phpに貼り付けるだけ。
そうすると、「RecentPost」という名前のウィジェットが新たに登録されるので、そのウィジェットをサイドバーに配置すれば完了です。
デフォルトでは、10件の記事が表示される設定になっています。
画像サイズやレイアウトなど、ご自身の環境に合わせて、カスタマイズしてお使いください。

<?php
/***************************************
サイドバーに最新記事を表示するWordPressウィジェット
***************************************/
class MyWidgetRecentPost extends WP_Widget {
function MyWidgetRecentPost() {
	parent::WP_Widget(false, $name = 'RecentPost');
}
function widget($args, $instance) {
	/* 一度に表示する記事数 */
	$num = 10;
	extract( $args );
	$title = apply_filters( 'widget_title', $instance['title'] );
	$body = apply_filters( 'widget_body', $instance['body'] );
	/* 個別記事の時は、カテゴリ別の最新記事を表示する */
	if (is_single()){
		$cat = get_the_category();
		$cat = $cat[0];
		query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$num.'&offset=0');
		echo '<h3 class="widget-title">「'.$cat->name.'」の最新記事</h3>';
	/* カテゴリ別アーカイブの時は、カテゴリ別の最新記事を表示する */
	}else if(is_category()){
		$cat = get_query_var('cat');
		$cat = get_category($cat);
		query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$num.'&offset=0');
		echo '<h3 class="widget-title">「'.$cat->name.'」の最新記事</h3>';
	/* それ以外の時は、全カテゴリの最新記事を表示する */
	}else{
		query_posts('posts_per_page='.$num.'&offset=0'); 
		echo '<h3 class="widget-title">最新記事</h3>';
	}
	if(have_posts()):while(have_posts()):the_post();?>
<div style="float:left;width:135px;margin:0 10px 5px 0;text-align:center;">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(135,135)); ?></a></div>
<div style="float:left;width:135px;margin-bottom:5px;"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></div><div style="clear:both;"></div>
<?php
	endwhile; endif; wp_reset_query();
}
function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['body'] = trim($new_instance['body']);
	return $instance;
}
function form($instance) {
	$title = esc_attr($instance['title']);
	$body = esc_attr($instance['body']);
}
}
add_action('widgets_init', create_function('', 'return register_widget("MyWidgetRecentPost");'));
?>

参考サイト

画像引用元

スポンサーリンク
スポンサーリンク
Stinger3カスタマイズ。サイトバーにカテゴリ別の最新記事を表示する。

WordPressの無料テーマ「Stinger3」で、サイドバーにカテゴリ別の最新記事を表示する方法をご紹介します。動作のイメージは、こんな...

カテゴリ別の最新記事一覧をライブドアブログのサイドバーに表示する方法

今回は、ライブドアブログのサイドバーにカテゴリ別の最新記事を一覧表示する方法をご紹介します。例えば、いま表示されている記事が料理レシピだとし...

楽天ランキング上位の商品を、全自動でアフィリエイトする方法をご紹介します。

WordPressで運用しているブログに楽天市場の人気商品を自動で貼り付ける方法を、ご紹介します。一度設定をしておけば毎日更新されるので、手...

Stinger3カスタマイズ。yet another related posts pluginで関連記事を表示する。

関連記事を表示してくれるプラグイン、YARPP(yet another related posts plugin)。このWordPressプ...

田中功起さんの美術館の備品を使ったインスタレーション&映像作品?横浜トリエンナーレ2011より?

 横浜トリエンナーレ2011のコンセプトの1つ、”美術館の所蔵品や美術館という場所に新たな視点を投げかける” を意識してのことかもしれません...