WordPressをCMS利用する時とかで、トップページだけちょっとデザインが異なるためにメニューのデザインを変更したいけど、別にメニューの内容自体に変更はない、そんな時はテンプレートタグをちょっと修正すれば簡単に対応できるようになりますよ、というメモです。
といってもやりかたは非常に簡単で、WordPressのテーマをいじれるくらいのPHPの知識があれば多分思いつくとは思いますからわざわざ書くまでもないのかもしれませんが、ネタがないのでど忘れした時のために書いておきます。
通常WordPressのテンプレート内でメニューを表示する場合、
|
1 2 3 4 5 6 7 8 9 |
wp_nav_menu(array( 'container' => 'nav', 'container_class' => 'gNav', 'theme_location' => 'NAV_mainNav', 'menu_id' => 'NAV_mainNav', 'menu_class' => 'cf', 'before' => '<div>', 'after' => '</div>' )); |
といった具合で呼び出すと思います。
で、今回やりたいことは、メニューの構造はそのままで、見た目（CSS）だけを変更したいので、クラスを変更してあげれば良さそうです。
ナビゲーションのクラスは配列中の container_class で指定しています。
なのでここを現在のページに応じて書き換えてあげればOKです。
やり方としては、大きく2つのパターンがあります。
１つは条件分岐させて、変化させたいパターン分 wp_nav_menu を呼び出す方法です。
|
1 2 3 4 5 6 7 8 9 |
if (is_home()) { wp_nav_menu(array( （中略） )); } else { wp_nav_menu(array( （中略） )); } |
変化させたい部分が多い場合はこれが一番いいかもしれませんが、コードが長くなるし共通部分が多い場合はなんか無駄が多いようにも感じます。
できれば指定配列の一部だけを変更したいですね。
ということでもう1つのパターンでは、先ほどのメニュー呼び出し部分をこんな風に書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if (is_home()) { $c_class = 'gNav index'; } else { $c_class = 'gNav'; } wp_nav_menu(array( 'container' => 'nav', 'container_class' => $c_class 'theme_location' => 'NAV_mainNav', 'menu_id' => 'NAV_mainNav', 'menu_class' => 'cf', 'before' => '<div>', 'after' => '</div>', )); |
事前に現在のページに応じてメニュークラスに入れたいクラス名を変数に格納しておいて、それを指定しながらメニューを呼び出す感じです。
また、別の書き方もできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$args = array( 'container' => 'nav', 'theme_location' => 'NAV_mainNav', 'menu_id' => 'NAV_mainNav', 'menu_class' => 'cf', 'before' => '<div>', 'after' => '</div>', ); if (is_home()) { $args['container_class'] = 'gNav index'; } else { $args['container_class'] = 'gNav'; } wp_nav_menu($args); |
メニューを呼び出すときに指定する配列を別の配列に分割しておいて、状況に応じて配列にパラメータを追記していく方法です。
お好きな方法で実装すればいいのではないかなと思います
コメントする