wordpress カスタムメニューを活用しよう

第 18 回松戸 WordPress 部勉強会

はじめてのカスタマイズ２

2015/06/24 　松戸 Banana Cluster

川路正樹 from トリックスタジオ

Session1

WordPressカスタムメニューを

活用しよう

自己紹介

川路　正樹（かわじ　まさき）

● 株式会社トリックスタジオ

●デザイナー／アートディレクター

＜経歴＞

・建築設計　 3 年

・個人事務所や制作会社で DTP ・印刷物

・ジョブダイレクトなどで WEB デザイン

・現在に至る

テンプレートタグ /wp nav menu を用いて表示するナビゲーションメニューのことです。

管理画面からメニュー項目の追加や削除がかんたんに行えます。

カスタムメニューとは

とても便利なのでぜひ活用しましょう！

今日はテーマ

「 Twenty Twelve 」を使って説明してきます

メニューの表示場所

カスタムメニューが表示されています

メニューの管理画面

管理画面のメニュー項目を確認しましょう

外観＞メニュー

ここにあります

管理画面はこんな感じ

「リンクターゲット」や「 CSS クラス」など使える詳細設定が、チェックされずに隠れています。

メニューの表示オプション

すべてのチェックをオンにすると、こんな感じです。

「 Twenty Twelve 」のコードを確認してみよう

カスタムメニューを有効にする関数

カスタムメニューを利用するには function.php に次の関数を記述します。

◆ メニューを 1 つだけ表示する場合

register_nav_menu ()

◆ メニューを複数表示する場合

register_nav_menus ()

function.php に記述する内容

function.php に記述されているコードを確認します。デフォルトでメニューは 1 つだけを表示となっています。

＜ Twenty Twelve / function.php 　 63 行目＞

// This theme uses wp_nav_menu() in one location.register_nav_menu (

'primary', __( 'Primary Menu', 'twentytwelve' ));

※ 改行を加えています

ちょっと解説

register_nav_menu ('primary', __( 'Primary Menu', 'twentytwelve' ));

管理画面上の表記表示したい場所

カスタムメニューを表示する関数

カスタムメニューを表示するにはテンプレート php に次の関数を記述します。

wp_nav_menu()＜ wp_nav_menu() の記述例＞

<?php wp_nav_menu ( array('theme_location' => 'primary'));

?>

表示場所を明示します

テンプレート php に記述する内容

headre.php に記述されているコードを確認します。

＜ Twenty Twelve / header.php 　 45 行目＞

<?php wp_nav_menu( array('theme_location' => 'primary','menu_class' => 'nav-menu') );

?>

※ 改行を加えています

パラメータでカスタマイズできます！（それは後ほど）

ヘッダーとフッターにメニューを追加してみよう

function.php の記述を変更する

function.php の記述を編集して、メニューを複数表示できるようにします。

※Twenty Twelve / function.php のコードを変更していきます。

１： register_nav_menu() を　　　 register_nav_menus() 　に変更

２： array( ) を追加→ register_nav_menus( array( )); 　

これで複数設置する準備が整いましいた。

function.php の記述を変更する

表示したいメニューを設定します。ヘッダー用とフッター用、メインメニューとします。

＜ Twenty Twelve / function.php 　のコードを変更します＞

register_nav_menus ( array('primary' => ' メインメニュー ','header' => ' ヘッダメニュー ',

'footer' => ' フッタメニュー ', ) );

これで３つのメニューを表示することができます。

テンプレート php に記述を追加する

headre.php 、 footer.php に必要な関数を追加します。＜ Twenty Twelve / header.php 　 40 行目に挿入＞

<?phpwp_nav_menu( array('theme_location' => 'header' )); ?>

＜ Twenty Twelve / footer.php 　 14 行目に挿入＞

<?phpwp_nav_menu( array('theme_location' => 'footer' )); ?>

管理画面で新規メニューを作成します

新規メニューから、ヘッダー用、フッター用のメニューを新たに作成します。メインメニューは既存メニューを編集します。

管理画面はこう変化しています

位置を指定するチェックボックスが追加されます。

該当する場所にチェックを入れます。

管理画面はこう変化しています

メニューの位置指定はタブからもできます。

画面表示はこうなります

追加した “ header” メニュー

既存の “ primary” メニュー

画面表示はこうなります

追加した “ footer” メニュー

3 つのメニューは管理画面で自由に内容を変更できます。・項目の増減、順番入替えなど。・固定ページ、投稿ページ、カテゴリ、タグ、外部リンクなどの設置が可能です。

wp_nav_menu() のパラメータを活用しよう

パラメータを活用しよう

wp_nav_menu() はパラメータを使いカスタマイズすることができます。

詳細は WordPress Codex 日本語版テンプレートタグ/wp nav menu　をご覧ください。

それでは直ぐに使えるパラメータをご紹介します

http://goo.gl/M3obBm






パラメータ 'container'

パラメータ 'container' は、<ul> を囲う要素を指定できます。初期値は div です。HTML5 なら、 nav 　の指定をお薦めします。

そして'container_class' でクラス名を'container_id' で ID を適用します。

パラメータの指定例

<?php wp_nav_menu( array('theme_location' => 'header','container' 　　　　　 => 'nav','container_class' => 'nav-style1','container_id' 　　　 => 'header-nav') );

?>

パラメータの HTML

<nav id=“header-nav” class=“nav-style1”>

<ul><li> ………… </li>

</ul></nav>

パラメータ 'menu_class' 、 'menu_id '

パラメータ 'menu_class' は、メニューを構成する <ul> に CSS クラス名を適用します。そして 'menu_id' は ID を適用します。


<?php wp_nav_menu( array('theme_location' => 'header','menu_class' => 'menu-style1','menu_id' => 'header-menu') );

?>

パラメータ 'items_wrap'

パラメータ‘ items_wrap’ は、メニューのフォーマットを指定できます。

初期値： <ul id=“%1$s” class=“%2$s”>%3$s</ul>

%1$s には‘ menu_id’ の値が入ります。%2$s には‘ menu_class’ の値が入ります。

%3$s を消してしまうと、メニューが表示されなくなるので注意して下さい。


<?php wp_nav_menu( array('theme_location' => 'header','items_wrap' => '<nav id=“header-

nav” class=“nav-style1”><ul 　id=“header-menu” class=“menu-style1”>%3$s</ul></nav>'

) ); ?>

極端な例ですが、こんな指定をすれば'container' や 'menu_class' は不要です。

パラメータ 'before' 、 'after '

パラメータ 'before' は、リンクの前に' after' はリンクの後に挿入されます。

HTML タグも記述できるので、アイコンや矢印など画像やテキストを追加できます。


<?php wp_nav_menu( array('theme_location' => 'header',‘before' => '<span class="glyphicon

glyphicon-menu-right"></span>',‘after’ => ‘ のリンクです ') );

?>

リンクの前に Bootstrap3 のアイコンフォントを設定


<ul><li><span class=“glyphicon glyphicon-menu-right”></span><a href=“/” >ホーム</a> のリンクです </li></ul>

パラメータ 'link_before' 、 'link_after '

パラメータ 'link_before' は、リンクテキストの前に' link_after' はリンクテキストの後に挿入されます。

HTML タグも記述できるので、これを利用するとメニューを画像リンクにすることも可能です。


‘link_before’ には画像までの URL を指定します。‘ link_after’ には <img> の閉じタグを入れます。

<?php wp_nav_menu( array('theme_location' => 'header','link_brfore' => '<img src="/images/’,'link_after' => ‘">') );

?>

管理画面では画像ファイル名を入れる

管理画面のメニューでは、ナビゲーションラベルを画像ファイル名に、title属性にリンクタイトルを指定します。

<li> をスッキリさせよう

たくさんの class が設定されています

カスタムメニューで生成されるナビゲーションメニューには、デフォルトでたくさんの class が設定されいます。そのまま有効活用する手もありますが、実際には不要な方のほうが多いのではないでしょうか。

<ul id="primary-menu" class="nav-menu"><li id="menu-item-359" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-359"><a href="/">ホーム </a></li></ul>

function.php に追加

次のコードを function.php に記述することで、<li> の id と class がキレイサッパリとなくなります。

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);function my_css_attributes_filter($var) {return is_array($var) ? array_intersect($var, array('current-menu-item','menu-item-home')) : ''; }

注意点

ただし！管理画面で個別に設定した class も消えてしまいます！表示させたい class 名は、黄色部分に追加することで回避できます。

function my_css_attributes_filter($var) {return is_array($var) ? array_intersect($var, array('current-menu-item','menu-item-home','link-style')) : ''; }

まとめ

・カスタムメニューを使えば、　項目の変更は管理画面で簡単に行えます。

・パラメータの設定を組み合わせれば　大抵のデザインコーディングが反映できます。

・ナビゲーションを修正するために　テンプレート php に手を加える必要がなくなります。

ご清聴ありがとうございました

wordpress カスタムメニューを 活用しよう

Design

wordpress カスタムメニューを活用しよう