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

2012/05/07
2014/02/26
Web
jQuery, WordPress

タブメニュー実装にチャレンジしてみました。jQuery-UIなんて素敵なものもあるのですが、サイトに合うようにカスタマイズするのであれば自分で組むのが一番かなと思いまして。

完成図

クリックするとフェイドしながら切り替わります。フッターにありますので、実際の動きは触って確かめてみてください。

新着記事とランダム記事を関数として定義

functions.php

// 新着記事
function new_post_list($show_num) {
	query_posts('showposts=' . $show_num . '"');
	if(have_posts()) {
		while(have_posts()) {
			the_post();
			echo '<li>';
			echo '<a href="';
			the_permalink();
			echo '">';
			the_title();
			echo '</a></li>';
		}
	}
	wp_reset_query();
}
// ランダム記事
function random_post_list($show_num) {
	query_posts('posts_per_page=' . $show_num . '&orderby=rand');
	if(have_posts()) {
		while(have_posts()) {
			the_post();
			echo '<li><a href="';
			the_permalink();
			echo '">';
			the_title();
			echo '</a></li>';
		}
	}
	wp_reset_query();
}

どちらもbl6さんの記事を参考にさせて頂きました。functions.phpに書いちゃうことで、htmlがスッキリして超素敵です。

追記：get_postsで書いてみる

とってもメジャーだったquery_postsという方法、今後はあまりお勧めされなくなってくるとのことですので、サブクエリ発行に適しているというget_postsで書いてみました。

// 新着記事
function new_post_list($show_num) {
	global $post;
	$args = array( 'posts_per_page' => $show_num );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) {
		setup_postdata($post);
		?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		<?php
	}
	wp_reset_postdata();
}
// ランダム記事
function random_post_list($show_num) {
	global $post;
	$args = array( 'posts_per_page' => $show_num, 'orderby' => 'rand' );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) {
		setup_postdata($post);
		?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		<?php
	}
	wp_reset_postdata();
}

（追記日：2013年7月24日）

タブメニューをつくる

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>

jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる -かちびと.net

jQueryでこんなことしたいなーとか思って探してみると、だいたいコードが載ってるという…。いつもながら凄すぎる…！

私はEasy Smooth Scroll Linksというプラグインを入れていたのですが、スムーズスクロール系は相性が悪いみたいです。バッティングしない方法は、こちらの記事をご参照ください。

html

<ul class="tab">
	<li><a href="#tab1">ランダム</a></li>
	<li><a href="#tab2">新着記事</a></li>
	<li><a href="#tab3">カテゴリ</a></li>
</ul>
<div class="tab_content">
	<div class="tab_area" id="tab1">
		<ul>
			<?php random_post_list(7); ?>
		</ul>
	</div>
	<div class="tab_area" id="tab2">
		<ul>
			<?php new_post_list(7); ?>
		</ul>
	</div>
	<div class="tab_area" id="tab3">
		<ul>
			<?php wp_list_categories('title_li='); ?>
		</ul>
	</div>
</div>

先ほど定義した関数をタブのエリア内に読み込みます。かっこ内の数字が件数になっています。カテゴリはテンプレートタグでそのままいけます。

css

cssはこのサイト用のものなのであんまり参考にならないと思いますが、一応。

.tab, .tab ul{
	background: url(images/bottom_line.png) no-repeat; /*見出し画像*/
	padding:2px 0 0 15px;
	height: 25px;
	margin-bottom:5px;
	}
.tab li { /*タブ部分*/
	float: left;
	margin-right:10px;
	padding-bottom:3px;
	background: url(images/tab.gif) no-repeat right bottom; /*タブ画像*/
	}
.tab li.active a{ /*選択中のタブ*/
	color:#333;
	font-weight:bold;
	}
.tab_area { /*切り替え部分非表示*/
	display: none;
	}
.tab_content { /*内容*/
	clear: both;
	overflow: hidden;
	width: 220px;
	}
.tab_content ul li{ /*内容のリスト表示*/
	background: url(images/list.png) no-repeat left 2px; /*リスト画像*/
	padding-left:20px;
	line-height:15px;
	margin-top:10px;
	}

あんまりタブっぽいデザインにならなかったので分かりにくいかな…と思ってアイコンとか入れてみたんですが…。どうかな…。。

自分で書くことは、何より勉強になる

とはいえ、ゼロからjQueryを書けるほど私もまだ分かっていないので、いつもいろんなサイトから勉強させて頂いているのですが、少なくともプラグインを入れて有効化しておしまい、ていうよりは自分の糧になっている気がします。

どこかのサイトさんのコードを拝借しても、環境が違うので一発で動く！っていうことは少ない気がします。検証して、動かなくてw、悩んで解決するという過程が非常に重要なのだと。そしてそれをブログの記事としてまとめてみると、あ、こんなに時間かかったのに文字にするとこれだけなんだな、ということにも気づけたりするんですが、何気にこの“まとめる”という作業が重要なんじゃないでしょうか。

「自分でもよく分かってないけどとりあえず動いた」で終わりにしちゃうことも出来るけど、記事にしようとするなら、他人に分かりやすくするために動いたコードの整理整頓をしなきゃいけないし、そうこうしているうちに曖昧だった部分がクリアになってきます。

アウトプットって、大事なんですね。

公開日：2012/05/07

更新日：2014/02/26