タクソノミーのタームでタブ切り替え記事一覧の関数作りました

       
タクソノミーのタームでタブ切り替え記事一覧の関数作りました

WordPressでカスタム投稿のタクソノミーを使っていて、他の固定ページやテンプレートに一覧のタブ表示をしたい・・・あ~、なんか書くと上手く説明が難しいんですけども、とにかくそういうのを作りました!




WordPressのカスタム投稿が使いやすくなってきましたね~。
さて、今回紹介するのは、こういうのです。

特定のタクソノミーに属するタームごとに記事の一覧をタブ表示!

【例】

  • カスタム投稿タイプ:講座
  • カスタムタクソノミー1:大分類 カテゴリタイプ
  • カスタムタクソノミー2:小分類 タグタイプ

【データのサンプル】

  • 初めての英会話(大分類:個別指導・小分類・英語)
  • 英語文書作成(大分類:翻訳・小分類・英語)
  • ビジネス英語入門(大分類:個別指導・小分類・英語)
  • マレー語でこんにちは(大分類:個別指導・小分類・マレー語)

例えば、
「個別指導」という固定ページで
「大分類=個別指導」
の「講座」の中から
「小分類ごとにタブ分けした記事一覧」を表示したい!
という場合です。

見た方が簡単です!これが完成形です(細かい見た目は気にしないようにお願いします)。
 
タブ分け一覧

ソースコード

function tab_portfolio_list($custom_post1, $custom_genre2, $custom_genre3, $custom_term4) {

	$cnt = 0;
	$taxonomies = get_terms($custom_genre2); 
	if( !is_wp_error($taxonomies) && count($taxonomies) ) {
?>

		<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>

		<style type="text/css">
			ul.tab li { 
				float: left;
				background: #fff;
				border: #f0f0f0 1px solid;
				color: #2c699f;
				padding: 1em;
				width: 10em;
				font-size: 1.3em;
				font-weight: bold;
			}
			ul.tab li.active { 
				background: #2c699f;
			}
			ul.tab li.active a { 
				color: #fff;
				font-weight: bold;
			}
			ul.tab li.active a:hover { 
				color: #f0f0f0;
				font-weight: bold;
			}
			ul.tab li:hover { 
				background: #2c699f;
			}
			ul.tab li:hover a { 
				color: #fff;
			}
			.tab_area{ 
				display: none;
			}
			.tab_content{ 
				width: 99%; 
				clear: both;
				overflow: hidden;
				border: #f0f0f0 1px solid;
				padding: 1em 0 0 0;
				min-height: 140px;
			}
			.tab_content ul li { 
				clear: both; 
				background: #f8f8f8;
				padding: 1em 2em 1em 2em;
				margin: 0 1em 1em 1em;
			}
			.tab_content ul li img{ 
				float: left;
				/*margin: 0 10px 10px 0;*/
			}
		</style>

		<ul class="tab">
<?php
			foreach ( $taxonomies as $taxonomy ) {
				$cnt++;
				echo '<li><a href="#tab' . $cnt . '">' . $taxonomy->name . '</a></li>';
			}
?>
		</ul>
		<div class="tab_content">
<?php
		$cnt = 0;
		foreach ($taxonomies as $taxonomy ) {
			$cnt++;
?>

			<div class="tab_area" id="tab<?php echo $cnt; ?>">

<?php
			$args = array(
				'posts_per_page' => -1,
				'post_type' => $custom_post1,
				'tax_query' => array( 
					array(
						'taxonomy' => $custom_genre2,
						'field' => 'term_id',
						'terms' => $taxonomy->term_id
						),
					array(
						'taxonomy' => $custom_genre3,
						'field' => 'slug',
						'terms' => $custom_term4
						),
					'relation' => 'AND'
				),
				'post_status' => 'publish'
			);
			query_posts( $args );

			if( have_posts() ) {
?>

				<ul>

<?php
				while( have_posts() ) {
					the_post();
					$portfolio_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'portfolio-thumb');
?>
					<li class="clearfix">

						<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="search-portfolio-thumb"><img src="<?php echo $portfolio_thumb[0]; ?>" height="<?php echo $portfolio_thumb[2]; ?>" width="<?php echo $portfolio_thumb[1]; ?>" alt="<?php echo the_title(); ?>" class="alighleft" /></a>
						<h4><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
						<p><?php the_excerpt(''); ?></p>
						<?php the_excerpt_max_charlength(50); ?><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>" class="css_btn_class"><?php _e("<!--:en-->Read More<!--:--><!--:ja-->続きを読む<!--:-->"); ?></a>

					</li>
<?php
				}
?>
				</ul>
<?php
			}

			wp_reset_query();

?>
			</div><!-- // tab_area -->
<?php
		}
?>

	</div><!-- // tab_content -->

<?php

	}

}

 

【使い方】
tab_portfolio_list(カスタム投稿のタイプ, 一覧にしたいタクソノミーのスラッグ(小分類), 対象になっているスラッグ(大分類), 対象になっているターム(大分類))
 
第四引数を$post->post_nameにできるような、固定ページのスラッグをオススメします。

改造して使いやすくしてくださーい

うーん、なんていうか、最初はですね、階層カテゴリで何とかなるかな~って軽く考えていたんですが、いや、「英語の中のサービス全体」を見たいこともあるよなぁと思って、上下関係を無くしたら何だか変になって、ごにょごにょ頭が混乱して、とにかく実装を急いでこうなってしまいました。

もっとシンプルにできるよーっという方、是非教えて下さい。お願いします。



英作文のフルーツフルイングリッシュ