WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)WordPressのカスタムメニューを使ってナビゲーションメニューの設置方法まとめ

wp_custum_menu_top一般的な機能ですが、コレを初めて知った時は「Wordpressってホント便利!!」と思いました。
画像を使ったナビゲーションメニューでは実装は難しいのですが、WebフォントやCSSのみのメニューなら実装も簡単です。WPでサイト制作をした際はほぼ実装してる機能なので備忘録も兼ねてまとめておきます。
HTML直書きでなく、管理画面で追加・削除のメンテナンスができるので便利です。

まずfunction.phpに記述

管理画面の「外観」→「メニュー」にありますが、
自作テーマの場合まずfunction.phpに以下のコードを記述します。

<?php
// カスタムナビゲーションメニュー
register_nav_menus(array('nav' => 'ナビゲーション'));
?>

 

こちらのコードを記述すれば管理画面の外観に「メニュー」が追加されています。
しかし、上記のコードを追加しないと「メニュー」から位置の管理が表示されません。
肝は一番最後の「nav」とナビゲーションの部分です。

管理画面からメニューの作成

※キャプチャ画像のWordpressのバージョンは3.9.1です。

まずは、「外観」→「メニュー」から新規メニューを作成します。
wp_custum_menu_01

 

メニューの名前をつけて「メニューを作成」します。ここで先ほどphpを記述した「nav」と作成します。
wp_custum_menu_02

 

次に、「固定ページ」「リンク」「カテゴリ」と追加するこうもくがあるのでメニュー項目に追加したい項目を足していきます。
「テーマの位置」のところに先ほどfunction.phpに追加した項目が追加されているのがわかります。

wp_custum_menu_03

 

メニュー項目を細かく編集する

こちらのメニュー編集かなり直感的に操作できます。
メニュー項目を右にドラッグすれば、サブアイテムとして一階層下に入れることも出来ますし、上下にドラッグすれば順番も簡単に変えることが出来ます。

wp_custum_menu_04

 

また、「ナビゲーションラベル」を変更すれば、表示させるメニュー名も変更可能
「タイトルの属性」はリンクタイトル(title=””)に入るテキストです。
wp_custum_menu_05

 

実際のページにメニューを表示させる

まずは、「メニューを編集」の横に「位置の管理」とあるので、テーマの位置を設定します。
wp_custum_menu_06

 

あとは、ナビゲーションメニューなら「header.php」ですかね?
表示させたい場所に以下のコードを記述します。


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

「nav」は先ほどメニューに設定した名前です。

 

<ul>や<li>のゴチャゴチャしたクラス名を削除する方法

通常の設定で吐き出されたコードは特に<li>の部分にゴチャゴチャしたclass名が割り振られています。

以下の画像は「Firefox」で要素を調査したナビゲーションメニューです。素晴らしくごちゃってますね(・∀・)

wp_custum_menu_07

 

コレを消したい場合は、先ほどメニューを設置した場所に更に記述を追加する必要があります。

 

まずは、<nav>と<ul>についたゴチャッたclass指定を消したいと思います。

    <nav>

    <?php wp_nav_menu( array (
    'theme_location' => 'nav',
    'items_wrap' => '<ul>%3$s</ul>',
    'container' => false
    ) ); ?>
    </nav>

 

これで、<nav>と<ul>のclass名は消えました。

wp_custum_menu_08

 

次に、<li>のゴチャッたクラス名を消したいと思います。
ここからは、「function.php」に記述を追加します。



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


 

これで、完全に消えてスッキリしました。

wp_custum_menu_09

 

個別にCSSのclass設定をする場合(さっきの設定使えなくなりますが)

簡単なCSSの装飾なら、上記の設定でスッキリしたメニューの設定で吐き出された<nav><ul><li>で装飾すればいいのですが、
細かい設定をする場合は、どうしても自分でclassを個別に設定したい場合もあるかと思います。

 

そういう場合は「表示オプション」から「CSSクラス」にチェックを入れると<li>ごとにclassを設定できます。

wp_custum_menu_10

 

ですが、先ほど<li>のclass名を消去するコードを「function.php」に記述するとこのclassも消えちゃいます(*´Д`)
コレ以上の設定はレベルが高そうなので後日試してみようと思います。

 

今回参考にしたサイト様m(_ _)m

 

まとめ

初期設定のみなので、まだまだ書ききれていませんが、今度はアコーディオンメニューや個別にアイコンやWEBアイコンをつけたりする設定も試してみようと思います。
カスタムメニューは後々の管理が楽なので重宝しています。きちんと理解してスピーディに作業していきたいところですね。以上、@Kc_fujiでした。

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ