【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");'));
?>

参考サイト

画像引用元

スポンサーリンク
スポンサーリンク