WordPressでカテゴリごとの新着記事をタブ切り替えして表示する

「wordpress 新着記事 カテゴリごと タブで表示」みたいなキーワードで訪れてくれる方がいらっしゃるみたいなんですが、残念ながら当ブログでは該当する記事が存在しなかったので、書いてみることにしました。

関連記事

冒頭の検索結果で、おそらくこちらにたどり着いてしまうと思うんです。

• WordPressの新着・ランダム記事などをタブ切り替えで表示する

ちげーよ！カテゴリ毎が欲しいんだよ((└(:3」┌)┘)) と、残念な思いをしている方がいらっしゃるのかしら…と思って作ってみます。

完成図

• Web
• Adobe
• 運営

このブログでいうと、こういう感じでしょうか（サムネイルもつけてみました）。フッターとかサイドバーに有りそうな感じ？カテゴリ毎の新着5件が表示されていて、上の見出しクリックで切り替わります。

指定したカテゴリの新着記事を表示

任意のphpファイル

<ul>
	<?php
	global $post;
	$args = array( 'posts_per_page' => 5, 'cat' => 1 );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) {
		setup_postdata($post);
		?>
		<li>
			<?php the_post_thumbnail( array( 100, 100 ), array( 'alt' => get_the_title() ) ); ?>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</li>
		<?php
	}
	wp_reset_postdata();
	?>
</ul>

カテゴリIDが1の記事を5件、リスト形式で表示します。この条件は4行目の数値で変更できます。

サムネイルの大きさを変えたい場合は10行目のarray内の数値にて（長辺がこの大きさになります）。サムネイル自体不要の場合は10行目を削除してください。

ただ、ひとつだけ出力するならばともかく、複数のカテゴリ毎に4行目だけ変えたこのコードを何度も書くのはちょっと面倒ですよね。

【改】指定したカテゴリの新着記事を表示

functions.php

// カテゴリ別新着
function cat_post_list( $show_num, $cat_id ) {
	global $post;
	$args = array( 'posts_per_page' => $show_num, 'cat' => $cat_id );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) {
		setup_postdata($post);
		?>
		<li>
			<?php the_post_thumbnail( array( 100, 100 ), array( 'alt' => get_the_title() ) ); ?>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</li>
	<?php
	}
	wp_reset_postdata();
}

件数とカテゴリIDを引数にして簡単に呼び出せるように関数化してみます。

任意のphpファイル

<ul>
	<?php cat_post_list( 5, 1 ); ?>
</ul>

そしたら、ひとつめの引数に件数、ふたつめの引数にカテゴリIDを指定してさっきの関数を呼び出してやれば、省コードで先ほどと同じ結果が得られます。

タブ切り替えさせる

任意のphpファイル

<ul class="tab">
	<li><a href="#tab1"><?php echo get_cat_name(1); ?></a></li>
	<li><a href="#tab2"><?php echo get_cat_name(2); ?></a></li>
	<li><a href="#tab3"><?php echo get_cat_name(3); ?></a></li>
</ul>
<div class="tab_content">
	<div class="tab_area" id="tab1">
		<ul>
			<?php cat_post_list( 5, 1 ); ?>
		</ul>
	</div>
	<div class="tab_area" id="tab2">
		<ul>
			<?php cat_post_list( 5, 2 ); ?>
		</ul>
	</div>
	<div class="tab_area" id="tab3">
		<ul>
			<?php cat_post_list( 5, 3 ); ?>
		</ul>
	</div>
</div>

上記のコードを使ってタブ切り替え用のhtmlを書きます。2～4行目は直接カテゴリ名を書いても良いと思うんですが、IDからカテゴリ名を出力してくれるっていうの書いてみました。カテゴリ名を変えたとき便利ですかね。

jQuery

<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$('.tab_area:first').show();
		$('.tab li:first').addClass('active');

		$('.tab li').click(function() {
			$('.tab li').removeClass('active');
			$(this).addClass('active');
			$('.tab_area').hide();

			$(jQuery(this).find('a').attr('href')).fadeIn();
			return false;
		});
	});
})(jQuery);
</script>

このあたりは前も書いたことありますが、一応。

スムーズスクロール系と一緒にするとうまく動かないという方は、こちらの記事もご参照ください。

:firstなどのjQuery独自フィルターは処理が遅いので、CSSのセレクタで書いたほうがいいかも、というアドバイスを頂きましたー！また勉強して追記できたらと思います、ありがとうございます！

css

ul.tab li{ /*タブ部分*/
	float: left;
	margin-right: 10px;
	}
ul.tab li.active a{ /*選択中のタブ*/
	color: #333;
	font-weight: bold;
	}
.tab_area{ /*切り替え部分非表示*/
	display: none;
	}
.tab_content{ /*内容*/
	width: 300px; /*幅*/
	clear: both;
	overflow: hidden;
	}
.tab_content ul li{ /*内容のリスト表示*/
	clear: both; /*画像有りの場合*/
	}
.tab_content ul li img{ /*リスト内画像*/
	float: left;
	margin: 0 10px 10px 0;
	}

あんまり装飾してないので、タブ部分はアイコンとかつけたほうが分かりやすいと思います。

以上です。どなたかのお役に立てたら幸いです！