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

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

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


関連記事

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

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

完成図

このブログでいうと、こういう感じでしょうか(サムネイルもつけてみました)。フッターとかサイドバーに有りそうな感じ?カテゴリ毎の新着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;
	}

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

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

公開日:2013/07/24

2件のコメント

  1. 伊藤 より:

    いつも、役立つ情報をいただきありがとうございます。
    カテゴリごとにタブで区切って表示させるためにこちらのサイトで勉強させていただいています。
    今回、https://news.mynavi.jp/
    のようなニュースサイトによくある、タブ切り替え(カテゴリー)の記事一覧に、そのタブ(カテゴリー)の最新の投稿記事のアイキャッチ画像だけを右側に一つ表示したいのですが、phpがよくわからず、悩んでおります。
    できましたら、ご教授いただければ幸いです。

    • *you より:

      伊藤さん、コメントありがとうございます。

      だいぶ古い記事なのでいまどきタブ切り替えはjQueryじゃなくてCSSとかでやるのがいいんじゃないかと思うので、そちらはモダンなやり方にしてもらうとして、指定カテゴリの、最新n件のテキストリンクと最新1件のサムネイルを出力するという内容で作ってみました。

      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 );
      	$thumflg = false;
      	$output = "<ul>\n";
      	foreach( $myposts as $post ) {
      		setup_postdata($post);
      		$permalink = esc_url( apply_filters( 'the_permalink', get_permalink($post) ) ); //パーマリンク取得
      		$title = get_the_title(); //タイトル取得
      		if( $thumflg == false && has_post_thumbnail( $post->ID ) ){
      			$thumimg = get_the_post_thumbnail( $post->ID, array( 100, 100 ), array( 'alt' => $title ) ); //1つめだけサムネイル取得
      			$thumflg = true;
      		}
      		$output .= "\t".'<li><a href="'.$permalink.'">'.$title.'</a></li>'."\n";
      	}
      	$output .= "</ul>\n";
      	echo $output; //リンク出力
      	if( $thumflg ){ echo '<div class="hogeimg">'.$thumimg.'</div>'; } //サムネイル出力
      	wp_reset_postdata();
      }
      

      任意の場所で以下のように件数、カテゴリIDの順番で指定して呼び出すと(以下はカテゴリID1に該当する記事を5件)、

      <?php cat_post_list( 5, 3 ); ?>
      

      以下のような形で出力されます。

      <ul>
      	<li><a href="url1">title1</a></li>
      	<li><a href="url2">title2</a></li>
      	<li><a href="url3">title3</a></li>
      	<li><a href="url4">title4</a></li>
      	<li><a href="url5">title5</a></li>
      </ul>
      <div class="hogeimg"><img width="100" height="100" src="img_url" class="hoge" alt="title" /></div>
      

      最新5件の記事リンクと、一番最初に見つかったサムネイルを1件出力します。CSSなどで動きや装飾は別途つけ加えてみてください。こんなかんじでいかがでしょうか。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)