［WP/JS覚書］カスタムメニューの子ページをJQueryでドロップダウン（アコーディオン）構造にしたい場合のtips
カスタムメニューのプラグインやカスタマイズで探してもなかなか出てこなくて、
最終的にこちらのページリストのカスタマイズ方法を説明されてるページが大変参考になりました。
こちらのスクリプト記述を利用させてもらいました。
ありがとうございます。
WordPress 階層構造のページリストをドロップダウンメニューにする | hijiriworld Web
カスタムメニュー用にfunctions.jsを変更
参考元のページは、固定ページのリスト（wp list pages）をナビゲーションにしているので、これをカスタムメニューにしたときとの違いを照合しました。
hogehoge.comにてドロップダウンしたいとこだけ抜き出したが、こんな感じ。
<ul id="menu-mainnavi" class="menu"> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://hogehoge.com/wp/menu/">Menu</a> <ul class="sub-menu"> <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://hogehoge.com/wp/menu/food/">Food</a></li> <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://hogehoge.com/wp/menu/drink/">drink</a></li> </ul> </ul>
見比べると、以下のクラス名が対応してることがわかりました。（アンダーバーとハイフンの違いにも注目！！）
page_item ⇔ menu-item
children ⇔ sub-menu
current_page_item ⇔ current-menu-item
これを元に紹介ページのfunctions.jsを以下のように書き換えました。
$(document).ready(function(){
$("ul.sub-menu").hide();
$("li.menu-item").hover(function() {
$("ul.sub-menu",this).slideDown("fast");
},
function() {
$("ul.sub-menu",this).slideUp("fast");
});
});
このfunctions.jsを任意の場所にアップします。
Jqueryは恐らく他の仕様で既に入ってる場合が多いと思うのですが、これがないと動かないですぞ！
念のため下記の記述にはJqueryのリンクも入れておきます。
wp_enqueue_script関数でスクリプトタグの仕込み
20130513追記
最初はwp_enqueue_script関数で、function.jsに書いたほうがスマートと思ってたのですが、考えてみると他のscriptで直書きにしているものもあるので、競合の調整を考えると、最初の導入時はヘッダーに素直に直書きの方がいいんじゃないかと今は考えています。
ある程度テンプレートや使うJSが固まって、それを一気にfunction.jsに記述するというのが最終形態と考えます。
下の記述をheader.phpかfunction.phpに記述しますが、3.2.1以前ですとwp_enqueue_script関数は
＜php wp_head(); ?＞より前に記述しないと出力されないので注意。
◯function.phpに記述する場合
wp_enqueue_script('jquery.min.js', get_bloginfo('template_url').'/js/jquery.min.js');
wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js');
◯header.phpに記述する場合
Wordpressフォルダ内にJSフォルダを置く場合
<script src="<?php bloginfo('template_url'); ?>/js/function.js"></script>
vicunaのvegaスタイルのJSフォルダに入れる場合（自分用）
<script src="<?php bloginfo('template_url'); ?>/style-vega/js/function.js"></script>
以下はwp_enqueue_scriptを使った場合
<?php wp_enqueue_script('jquery.min.js', get_bloginfo('template_url').'/js/jquery.min.js'); ?>
<?php wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js'); ?>
※Jqueryのバージョン1.6.1と1.6.2→1.6.1で動くことを確認しています。
どこまでバージョン落としても大丈夫なのかはわからんです。
実際のソースには、以下のように出力されてます。
<script type='text/javascript' src='https://hogehoge.com/wp/wp-content/themes/wp.vicuna.exc/js/jquery-1.6.1.min.js?ver=3.3.2'></script> <script type='text/javascript' src='https://hogehoge.com/wp/wp-content/themes/wp.vicuna.exc/js/functions.js?ver=3.3.2'></script>
参考
wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話 | マイペースクリエイターの覚え書き
3.3以降から出力位置は＜/body＞の直前にも出力できるようになったそうです。
WordPress で jQuery などの外部ファイルを読み込む wp_enqueue_script() | ウェブル
wp_enqueue_script(‘jquery’);でWordpressが元々梱包しているjqueryを呼び出してくれるとのことだったのだが、今回のはちゃんとjqueryを指定しないとうまくいかなかったです。
最終形態
２回めに設置したときに改めて、wp_enqueue_scriptについて調べ直しました。
最終的にはjsフォルダは直下として、function.phpに