WPで対応していないテーマにメニューを対応させるおぼえがき。

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の名前を変更すればどうにか動きました。

動いた結果はサイトがオープンしてからということで・・。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です