WordPressで月別や年別にアーカイブをドロップダウンで並べ替える方法【超簡単】

Web制作

月別 年別 アーカイブ ドロップダウン 切り替える 並べ替える 方法 ワードプレス

ワードプレスでドロップダウン(プルダウン)を使ったりして自由に月別や年別に並べ替えたい!って思うことって結構ありますよね。

並べ替えを簡単にできる方法があるので、ご紹介します。

ちなみに、このソースはCodexから。

wp get archives /WordPress Codex

これだと結構読みにくいと思うので、かみ砕いて説明したいと思います。

Contents

WordPressで月別や年別にアーカイブをドロップダウンで並べ替える方法

月別 年別 アーカイブ ドロップダウン 切り替える 並べ替える 方法 ワードプレス

ぶっちゃけ、これ貼るだけでwordpressで月別、もしくは年別などのアーカイブの並べ替えを、ドロップダウンでできてしまいます!!
直で貼ると大体だめですが、これは直ではってドロップダウンでアーカイブを並べ替えられます。

<select name=”archive-dropdown” onChange=’document.location.href=this.options[this.selectedIndex].value;’>

<option value=””><?php echo attribute_escape(__(‘Select Month’)); ?></option>

<?php wp_get_archives( ‘type=monthly&format=option&show_post_count=1’ ); ?>

</select>

codexに書いてある通り、これでもいけます。

<select name=”archive-dropdown” onchange=”document.location.href=this.options[this.selectedIndex].value;”>

<option value=””><?php echo esc_attr( __( ‘Select Month’ ) ); ?></option>

<?php wp_get_archives( array( ‘type’ => ‘monthly’, ‘format’ => ‘option’, ‘show_post_count’ => 1 ) ); ?>

</select>

大した変わりはありません。
無事にアーカイブの月別、年別の並べ替えができたでしょうか?

ちなみに、その下にアーカイブを作っておかないと意味がないので作っておきましょう。

<?php echo attribute_escape(__(‘Select Month’)); ?> や <?php echo esc_attr( __( ‘Select Month’ ) ); ?> 内のselect monthを書き換えることで、ドロップダウンの最初の文字列を変更することができます。(月別、年別など書いておきましょう)

カテゴリーページのドロップダウンでの並べ替える方法は?

年別や月別のアーカイブページのドロップダウン並べ替えに関して調べた方は、カテゴリーページも同様にドロップダウンで並べ替えたい方が多いのではないかと思いますので、同じように載せておきます。

こちらのwp dropdown categoriesを用いると、簡単にできます。

wp dropdown categories/Codex

記載方法はこちらです。これを埋め込むだけ!

<li id=”categories”>

<h2><?php _e( ‘Posts by Category’ ); ?></h2>

<?php wp_dropdown_categories( ‘show_option_none=Select category’ ); ?>

<script type=”text/javascript”>
<!– var dropdown = document.getElementById(“cat”); function onCatChange() { if ( dropdown.options[dropdown.selectedIndex].value > 0 ) { location.href = “<?php echo esc_url( home_url( ‘/’ ) ); ?>?cat=”+dropdown.options[dropdown.selectedIndex].value; } } dropdown.onchange = onCatChange; –>

</script>

</li>

こちらはJavaScriptを使った方法を用いているようです。

ちなみに、JavaScriptを用いずに行う方法はこちら。

<li id="categories">
	<h2><?php _e( 'Categories:' ); ?></h2>
	<form id="category-select" class="category-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
		<?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?>
		<input type="submit" name="submit" value="view" />
	</form>
</li>


めちゃめちゃ簡単にドロップダウンでのカテゴリーの並べ替えができるようになりました!

他にも、並べ替えの方法はたくさん!

WordPressを使うに当たって並べ替えはたくさんやっていくと思います。
他にも、ボタンを押して並べ替える方法について詳しく解説している記事がありましたので、是非参考にしてみてください!

めちゃくちゃ丁寧に書いているので、僕も非常に参考になりました。