ワードプレス

WordPressで、タグやカテゴリーのリストをドロップダウンメニュー化する方法です。

タグやカテゴリーのリストをドロップダウンメニュー化することで、ユーザーにとって見やすく、選択しやすいデザインを提供できます。
この方法は特に多くのタグやカテゴリがある場合に便利です。
以下に、簡単に実装できるコード例を紹介します。

タグをドロップダウンメニューにする

以下のコードをテーマファイルの functions.php またはテンプレートファイルに追加することで、タグをドロップダウンメニュー化することができます。
ユーザーがドロップダウンからタグを選択すると、そのタグのアーカイブページに移動する仕様です。

<?php $tags = get_tags(); if ( $tags ) : ?>
		<select onchange="document.location.href=this.options[this.selectedIndex].value;">
			<option value="" selected="selected">タグドロップダウンメニュー</option>
<?php foreach ( $tags as $tag ): ?>
			<option value="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>"><?php echo esc_html( $tag->name ); ?></option>
<?php endforeach; ?>
		</select>
<?php endif; ?>

ポイント：

  • esc_url()とesc_html()関数を使用して、URLとタグ名を適切にエスケープしています。これは、セキュリティの観点からも重要です。
  • get_tag_link()関数を使って、タグのリンクを取得しています。

カテゴリーをドロップダウンメニューにする場合

タグではなくカテゴリーをドロップダウン化したい場合は、以下のコードを使用してください。

<?php
$categories = get_categories( array(
	'orderby' => 'name',
	'order'   => 'ASC',
) );
if ( $categories ) : ?>
	<select name="category-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
		<option value="" selected="selected">カテゴリーを選択</option>
		<?php foreach ( $categories as $category ): ?>
			<option value="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>">
				<?php echo esc_html( $category->name ); ?> （<?php echo $category->count; ?>）
			</option>
		<?php endforeach; ?>
	</select>
<?php endif; ?>

ポイント：

  • get_categories()ですべてのカテゴリーを取得し、名前順に並べています。
  • タグのドロップダウンと同様に、select要素のonchange属性を使用して、ユーザーが選択したときにすぐにページが遷移するように設定しています。
  • セキュリティ対策として、esc_url()とesc_html()を使ってURLとカテゴリー名を適切にエスケープしています。
  • 「カテゴリー名 （投稿数）」の形式で表示され、ユーザーに投稿数の目安も伝えることができます。

これでタグのドロップダウンメニューと同じように動作するカテゴリーのドロップダウンメニューを実現できます。
盲目的にコピペして使用して大丈夫です。わかってしまえば簡単ですね。

追加の質問やカスタマイズの希望があれば、ぜひお知らせください。