LoginSignup
1
1

More than 5 years have passed since last update.

カスタムメニューを使った送信ボタンの無いドロップダウンメニューで、カテゴリーページへ移動をする

Last updated at Posted at 2013-02-01

私はよくカテゴリーの並び替えをしたナビゲーションなどを、カスタムメニューを使って構成しているのですが、表示させたいカテゴリーやリンクの量が多くて見づらい!と思うこともしばしばでした。
この記事は、月別のアーカイブなどでよく見かける、ドロップダウンメニュー式のページ遷移をカスタムメニューで作成したメニューにも使ってコンパクトに表示してみたいと思ったのがきっかけです。

【要は以下の条件を満たしたカテゴリーのリンクを設置したい】
●カテゴリーを取捨選択
●しかも並べ替えしたい
●ドロップボックス表示(そして選択したら遷移)したい

ただ単に、並べ替えのしていないカテゴリーをドロップダウンメニュー表示にするなら「wp_dropdown_categories」を使えばいいと思うのですけど、これだとカテゴリの順序を入れ替えできない!

だけど、カスタムメニューで作成されたメニューのデータを取得する、「wp_get_nav_menu_items」であれば実現することができました。


以下のコードを記述する前に、
1)functions.php に、register_nav_menus()を記述してカスタムメニュー機能を有効にしておきます。
2)カスタムメニューを作成して
3)表示させたいPHPファイルの該当する箇所に以下コードを記述。

index.php
<select onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option>カテゴリーを選択</option>
<?php
$dropItems = wp_get_nav_menu_items('dropCategory');
foreach($dropItems as $item) :
  echo '<option value="' . get_category_link($item->object_id) . '">' . $item->title . '</option>';
endforeach;
?>
</select>

select要素のonChangeイベントは、選択したoptionのvalueで指定されたURLへ遷移するための記述です。

wp_get_nav_menu_items() の引数に入れている「dropCategory」は、カスタムメニューで作成したメニューの名前です。

get_category_linkの引数にカテゴリーIDを入れて、カテゴリーページへのURLをセットしています。このURLで遷移します。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1