cssまわりでちょっと時間がかかってしまったのでメモメモ。
これをするには
1.まずfunction.phpに定義を追加
2.メニューを挿入したい場所にコードを追加
3.cssの調整
の3ステップで、私はさらにこれをドロップダウンメニューにしたかったのでここで時間がかかった。。
PixoPoint Menu Plugin とかのプラグインを使えば一撃でできるんだけど、細かい設定ができず、今回は断念。
なので、まずはfunction.phpに下記のコードを追加。
/** * add global navigation. */ add_theme_support( 'menus' );/** * これを追加するとadminのメニューで選択できるようになる */ function mytheme_addmenus() { register_nav_menus( array( 'main_nav' => 'The Main Menu', ) ); } add_action( 'init', 'mytheme_addmenus' ); function mytheme_nav() { if ( function_exists( 'wp_nav_menu' ) ) wp_nav_menu( 'menu=main_nav&container_class=pagemenu&fallback_cb=mytheme_nav_fallback' ); else mytheme_nav_fallback(); } function mytheme_nav_fallback() { wp_page_menu( 'show_home=Start&menu_class=pagemenu' ); }
そして、テンプレートの挿入したい場所に下記のコードを追加。
<?php wp_nav_menu(); ?>
あとはCSSを好きに調整すればテーマにメニューを対応することができました。
で、ここからが長かった。
もともとのメニューにかかっているCSSを修正してドロップダウンにすればいいはずなのに、何故かうまくいかず、、ここは手を抜くためにjQueryで切り抜けることにしちゃいました。
使ったのはこれ。
» droppy – Nested drop down menus
ヘッダでcssとjavascriptを読み込ませて、cssの名前を変更すればどうにか動きました。
動いた結果はサイトがオープンしてからということで・・。