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の名前を変更すればどうにか動きました。
動いた結果はサイトがオープンしてからということで・・。