simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.10.26

bootstrapで作ったWordPressテーマにドロップダウン式のカスタムメニューを実装する

WordPress

この記事は2017年11月20日に内容を更新しました。

bootstrapを利用してWordPressのテーマをよく作ります。メディアクエリのブレークポイントを考えたり、レスポンシブ用のメニューを実装したり、面倒なことをせずにパッとサイトが作れるので。

ただ、先日いつものようにテーマを作成していたら、少しつまずいた点がありました。WordPressのカスタムメニューをつかったナビゲーションとbootstrapのナビゲーションを上手く併用したい、と考えたのですが中々解決方法が見つかりませんでした。あんまりいないんですかね?bootstrapをつかってWordPressのテーマを作る人って。

で、今回僕がやりたかった事は

  • WordPressのカスタムメニューを利用して、サイトのナビゲーションを作成する
  • ナビゲーションにカテゴリーを表示し、さらに親カテゴリーに対して子カテゴリーがある場合は、ドロップダウンで表示できるようにする
  • もちろんレスポンシブ対応

となります。

いや、もっと簡単に実装方法が見つかると思ったんですけど、全然見つかりませんでした。それだけニッチな話なんですね。きっと。

カスタムメニューをつかえるようにする

functions.phpに下記を追記する。

//カスタムメニューをつかえるようにする
register_nav_menus( array(
    'nav_menu' => 'ヘッダーに表示させるメニュー'
) );

bootstrapのnavbar部分にカスタムメニューを表示させる

bootstrapの公式サイトに掲載されているnavbarの基本的なソースをつかっていると、

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
~
</ul>
</div>

という部分があると思うのですが、この

<ul class="navbar-nav mr-auto">
~
</ul>

という部分を下記のように書き換えます。

<?php wp_nav_menu( array(
    'theme_location' =>'nav_menu',
    'container'      =>'ul') );
?>

ちなみに僕の場合はヘッダー下にnavbarを置くので、上記を記述するファイルはheader.phpになります。ただ、これはサイトのレイアウトや作り方で変わるかと。

カスタムメニューを作成する

次にカスタムメニューを作ります。ここでは例として、メニュー名を「nav」とし、ナビゲーション部分には「下の階層(子カテゴリー)があるカテゴリー(親カテゴリー)」、「下の階層が無いカテゴリー(子無しカテゴリー)」、固定ページを載せるようにしています。

ちなみに、ここで決めたメニュー名(この例では「nav」)が、カスタムメニューがHTMLとして吐き出されたときのメニューを囲む<ul>タグのIDの元になってきます。

つまり、メニュー名を「○○」とすると、カスタムメニューを囲む<ul>は<ul id="menu-○○">となります。なので、例ではカスタムメニューを囲む<ul>は<ul id="menu-nav">となります。

こちらで非常にわかりやすくカスタムメニューの設定方法が解説されています。

子カテゴリーはドロップダウンで開くようにする

jQueryを読み込んでjavascriptを記述する

JQueryとjavascriptをつかって実装するので、</body>の直前などに下記を追記します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    jQuery.noConflict();
    (function($) {
        $(function(){
            $('.menu-item-has-children').each(function(){
                $(this).find('a').first().on('click', function() {
                    $(this).next().slideToggle(100);
                    $(this).toggleClass('current');
                    return false;
                });
            });
        });
    })(jQuery);
</script>

なお、javasscript内に書かれている「menu-item-has-children」というクラス名は、カスタムメニューが吐き出されたとき、下の階層のメニュー(例では子カテゴリー)をもつ<li>(例では親カテゴリー)に自動的に付与されるクラス名になります。

CSSで見た目を整える

CSSに下記を記述します。

/* 
navbar 
*/ 
.bg-inverse { 
    background-color: #ddd!important; /*ナビゲーション部分の背景色*/ 
} 
.navbar-inverse .navbar-brand { 
    color: #333; /*サイトタイトルの文字色*/ 
} 
.navbar-inverse .navbar-brand:hover { 
    color: #000; /*サイトタイトルの文字色(hover時)*/ 
} 
.navbar-inverse .navbar-nav .active>.nav-link, .navbar-inverse .navbar-nav .nav-link.active, .navbar-inverse .navbar-nav .nav-link.open, .navbar-inverse .navbar-nav .open>.nav-link { 
    color: #000; /*ナビゲーションメニューのアクティブ時の文字色*/ 
} 
.navbar-inverse .navbar-nav .nav-link { 
    color: #666; /*ナビゲーションメニューの文字色(クリック可能)*/ 
    padding: 1rem 0.5rem; /*ナビゲーションメニューのボタンの高さ(paddingで調整)*/ 
} 
.navbar-inverse .navbar-nav .nav-link:hover { 
    color: #000; /*ナビゲーションメニューの文字色(クリック可能)(hover時)*/ 
} 
.navbar-inverse .navbar-nav .nav-link.disabled { 
    color: #999; /*ナビゲーションメニューの文字色(クリック禁止)*/ 
} 
.navbar-inverse .navbar-nav .nav-link:focus{ 
    color: #000 /*ドロップダウンメニューオープン時の親メニューの文字色*/; 
} 
.form-control { 
    border:#999 solid 1px; /*フォームの枠線色*/ 
    border-radius: 0px; /*フォームの角丸*/ 
} 
.btn-outline-success { 
    color: #fff; /*ボタンの文字色*/ 
    background-color: #aaa; /*ボタンの背景色*/ 
    border: #aaa solid 1px; /*ボタンの枠線*/ 
    border-radius: 0px; /*ボタンの角丸*/ 
} 
.btn-outline-success:hover { 
    color: #fff; /*ボタンの文字色(hover時)*/ 
    background-color: #999; /*ボタンの背景色(hover時)*/ 
    border: #999 solid 1px; /*ボタンの枠線(hover時)*/ 
} 
.navbar-inverse .navbar-toggler { 
    border:#666 solid 1px; /*トグルボタンの枠線*/ 
    border-radius: 0px; /*トグルボタンの角丸*/ 
    background: #666; /*トグルボタンの背景色*/ 
} 
.navbar-inverse .navbar-toggler { 
    padding: 3px; /*トグルボタンの大きさ(パディング)*/ 
    font-size: 14px; 
} 
.navbar-inverse .navbar-toggler-icon { 
    background-image: none; /*デフォルトのアイコンを削除*/ 
} 
.navbar-inverse .navbar-toggler-icon:before{ 
    color:#fff; /*アイコンの色*/ 
    position: absolute; 
    content:'\f0c9'; /*fontawesomeのunicode*/ 
    font-family: FontAwesome; 
    top: 7px; /*アイコン、好みに応じて適宜調整*/ 
    left: 8px; /*アイコン、好みに応じて適宜調整*/ 
} 
  
/* 
カスタムメニュー 
*/ 
#menu-nav{ 
    margin-right: auto !important; 
} 
#menu-nav li{ 
    display: inline-block; 
    font-size: 14px; 
} 
#menu-nav li a{ 
    display: block; 
    padding: 1rem 0.5rem; 
    color: #333; 
} 
#menu-nav li a:hover, 
#menu-nav li a:focus{ 
    text-decoration: none; 
} 
.menu-item-has-children{ 
    position: relative; 
} 
.menu-item-has-children a:after{ 
    content: "\f0d7"; 
    font-family: FontAwesome; 
    margin: 0 0 0 5px; 
} 
.sub-menu { 
    display: none; 
    position: absolute; 
    background: #ddd; 
    width: 100%;
} 
.sub-menu li{
    width: 100%;
    display: block; 
} 
.sub-menu li a{ 
    display: block; 
    white-space: nowrap; 
    background: #ddd; 
} 
.sub-menu li a:hover{ 
    background: #eee; 
} 
.sub-menu li a:after{ 
    content: none; 
} 
@media screen and (max-width: 768px){ 
#menu-nav{ 
    margin: 10px 0 0 0; 
} 
#menu-nav li{ 
    display: block; 
} 
#menu-nav li a{ 
    padding: 1rem; 
} 
.sub-menu { 
    position: static; 
} 
.sub-menu li a:before{ 
    content: "-"; 
    margin: 0 5px 0 0; 
} 
} 

「menu-nav」というID名は、カスタムメニューを作成するときに設定したメニュー名によって変わるので、それに合わせて適宜修正してください。

うまく実装できると・・・

上手く実装できるとこんな感じになります。

bootstrapで作ったWordPressテーマにドロップダウン式のカスタムメニューを実装するデモ

デモではWordPressはつかわずにただのHTMLですが、一応WordPressでもちゃんと出来るか確認はしています。

また、ベースとなるbootstrapのソースは以前書いたこの記事で紹介しています。

bootstrap4の個人的なスターターテンプレート
この記事は2017年10月25日に内容を更新しました。レスポンシブサイトを作成するのに便利なフレームワークは色々ありますが、個人的によくつかうのはやはりbootstrapです...
AIが配色パターンを提案してくれるサービスKhroma

WEB

AIが配色パターンを提案してくれるサービスKhroma

台風クラブに思うこと

MUSIC

台風クラブに思うこと

WordPressで投稿画像に任意のclass名をつける方法

WordPress

WordPressで投稿画像に任意のclass名をつける方法

【WordPress】プラグインを使わずにURLのコピペで任意の記事を表示

WordPress

【WordPress】プラグインを使わずにURLのコピペで任意の記事を表示

【WordPress】シンプルなオリジナルテーマの作り方(5)~投稿記事ページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(5)~投稿記事ページ~

はてなブログ(無料)からWordPressへの引越し時の注意点 

WEB

はてなブログ(無料)からWordPressへの引越し時の注意点 

SNSボタンを<a>タグで簡単に実装する方法

WEB

SNSボタンを<a>タグで簡単に実装する方法

【WordPress】シンプルなオリジナルテーマの作り方(7)~固定ページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(7)~固定ページ~