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行目に挿入＞
<?php
wp_nav_menu( array('theme_location' => 'header' ));
?>
＜ Twenty Twelve / footer.php 14行目に挿入＞
<?php
wp_nav_menu( array('theme_location' => 'footer' ));
?>

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

管理画面はこう変化しています
位置を指定する
チェックボックスが
追加されます。
該当する場所に
チェックを入れます。

管理画面はこう変化しています
メニューの位置指定はタブからもできます。

画面表示はこうなります
追加した “header” メニュー
既存の “primary” メニュー

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

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

パラメータを活用しよう
wp_nav_menu()は
パラメータを使いカスタマイズすることができます。
詳細はWordPress Codex 日本語版
テンプレートタグ/wp nav menu
をご覧ください。
それでは直ぐに使えるパラメータをご紹介します

パラメータ'container'
パラメータ'container'は、
<ul>を囲う要素を指定できます。
初期値はdivです。
HTML5なら、nav の指定をお薦めします。
そして
'container_class'でクラス名を
'container_id'で IDを適用します。

パラメータの指定例
'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を適用します。

'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を消してしまうと、メニューが表示されなくなるので
注意して下さい。

'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タグも記述できるので、
アイコンや矢印など画像やテキストを追加できます。

‘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>の閉じタグを入れます。
'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 カスタムメニューを活用しよう

Recommended

Recommended

More Related Content

More from Kawaji Masaki

More from Kawaji Masaki (8)