simplecoreな毎日

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

2017.11.20

【WordPress】シンプルなオリジナルテーマの作り方(2)~ナビゲーション~

WordPress

読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月28日です。

さて、前回に引き続きシンプルなWordPressのオリジナルテーマ作成を進めていきます。今回はナビゲーション部分を作ってみようと思います。ちなみに前回の”準備編”はこちら。

【WordPress】シンプルなオリジナルテーマの作り方(1)
読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月28日です。WordPressには既に...

ナビゲーション部分はメニューのメンテナンス性を考慮して、WordPressのカスタムメニューをつかいたいと思います。これでカテゴリーや固定ページの増減にも簡単に対応することが出来ます。

似たような記事は以前も書いていますが、前回はbootstrap3、今回はbootstrap4をつかうのでHTMLのクラスやCSS等細かいところが少し変わります。

bootstrapで作ったWordPressテーマにドロップダウン式のカスタムメニューを実装する
この記事は2017年11月20日に内容を更新しました。bootstrapを利用してWordPressのテーマをよく作ります。メディアクエリのブレークポイントを考えたり、レスポンシブ用...

bootstrapをつかえるようにする

全編を通しての構成を見直したため、この部分については「シンプルなオリジナルテーマの作り方(1)」でも同じ内容を書いています。

手っ取り早くそれなりのサイトを作れるようにbootstrapも利用していきます。「bootstrapは重たくなる・・・」なんて話もちらほら見かけますが、個人的にはそんなに気になる事はありません。今のところ。ただ、いずれは他のフレームワークも使ってみたいとは思っていますが。

header.php

header.phpではbootstrapのCSSを読み込みます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

footer.php

footer.phpではbootstrapのjavascriptを。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

いずれもCDN配信されているので便利です。とりあえずこれでbootstrapをつかう準備は整いました。

ナビゲーションには”Navbar”をつかう

今日の本題でもあるナビゲーション部分には、bootstrapのNavbarをつかいます。

Navbar
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, incl...

このページにある色々なサンプルの中でも今回は最もベーシックな形(一番最初に書かれているヤツ)のナビゲーションを実装します。下記をheader.phpにコピペしてみてください。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

この時点で下記のようになるはずです。

ただ、もちろんこのままではWordPressのカスタムメニューは表示されませんので、後ほどカスタムメニューを反映するようにいじってみます。

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

ナビゲーションにカスタムメニューを、とは言っても、現在のままではカスタムメニューをつかうことは出来ません。なので、カスタムメニューをつかえるようにします。

functions.php

functions.phpには下記を記述します。

register_nav_menus( array(
    'nav_menu' => 'ナビゲーションメニュー'
) );

「nav_menu」というのがこのメニューのロケーション名になります。

カスタムメニューの出力方法

カスタムメニューを表示させたい場所に下記を記述します。

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

今回はナビゲーションメニューとしてカスタムメニューをつかうので、先ほどのbootstrapのNavbarの中にこれを組み込みます。

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

を下記と差し替えます。

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

カスタムメニューを作る

この作業についてはこちらに詳しくまとめています。

なお、今回は

  • カテゴリー1
  • カテゴリー1-1(カテゴリー1の子カテゴリー)
  • カテゴリー1-2(カテゴリー1の子カテゴリー)
  • カテゴリー2

を作っています。この時点では下の画像のようになっているかと思います。

ナビゲーションメニューにドロップダウンを実装し、見た目を整える

次にドロップダウンの実装と見た目を整えるためのCSSを作りますが、最初に書いたように今回はbootstrap4を使っているのでCSSの部分が少し変わっています。

jQueryとjavascriptを記述

この部分は変わりません。footer.phpに下記を記述します。

<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>

fontawesomeを読み込む

全編を通しての構成を見直したため、この部分については「シンプルなオリジナルテーマの作り方(1)」でも同じ内容を書いています。

子階層のあるカテゴリーには階層があることをわかりやすくするために「▼」のアイコンを付けます。なるべく画像はつかいたくないので、ここはWEBフォントを。また、ウィンドウ幅を縮めたときのトグルボタンにもつかいます。デフォルトは画像(恐らく)なので色や大きさが変えられません。ということでfontawesomeを読み込むためにheader.phpに下記の一文を記述します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

なお、fontawesomeの詳細については下記で触れています。

【初心者必見】WEBフォントFont Awesomeの使い方
WEBフォントつかっていますか?最近では様々なWEBフォントが出てきて、シンプルなものであれば、サイトのロゴなんかも割りと自由に表現出来ます。特にちょっとしたアク...

bootstrapのデフォルトの配色を解除する

まず、bootstrapのサンプルからコピーしてきたHTMLの

<nav class="navbar navbar-expand-lg navbar-light bg-light">

となっているところを

<nav class="navbar navbar-expand-lg">

とします。

CSS

CSSは下記を記述します。

.navbar {
border-bottom: #ccc solid 1px;
}
#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: #666; 
} 
#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: #fff;
min-width: 100%;
border: #ccc solid 1px;
margin: 8px 0 0 0;
} 
.sub-menu li{
width: 100%;
display: block; 
}
.sub-menu li a{ 
display: block; 
white-space: nowrap; 
background: #fff; 
} 
.sub-menu li a:hover{ 
background: #fff; 
} 
.sub-menu li a:after{ 
content: none; 
}
.navbar-toggler {
border: 1px solid #ccc;
position: relative;
}
.navbar-toggler-icon { 
background-image: none;
} 
.navbar-toggler-icon:before{ 
color:#ccc;
position: absolute; 
content:'\f0c9';
font-family: FontAwesome; 
top: 9px;
left: 19px;
}
@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; 
border: none;
margin: 0 0 0 0;
} 
.sub-menu li a:before{ 
content: "-"; 
margin: 0 5px 0 0; 
} 
}

ここまでで現在の様子はこんな感じになっているかと思います。ウィンドウ幅が769px以上のとき。

ウィンドウ幅が768px以下のとき。

なお、検索フォームは後ほどウィジェットの検索機能を付けるので、この時点ではいじりません。

とりあえず、ナビゲーション部分については一旦作業は終わりです。後はCSSで好きなように色を付けちゃってください。

【WordPress】シンプルなオリジナルテーマの作り方(2)~ナビゲーション~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(2)~ナビゲーション~

「マタ旅」なる言葉があるようですが

THOUGHT

「マタ旅」なる言葉があるようですが

無料の画像編集ツールCanvaがなかなか便利

WEB

無料の画像編集ツールCanvaがなかなか便利

テレビスターの悲劇~Regulation Killed the TV Star~

THOUGHT

テレビスターの悲劇~Regulation Killed the TV Star~

プロレスについて考えること

THOUGHT

プロレスについて考えること

はてなブログからWordPressに引っ越した理由

WEB

はてなブログからWordPressに引っ越した理由

乳幼児を連れて免許更新。一人は厳しいかも

LIFE

乳幼児を連れて免許更新。一人は厳しいかも

【WordPress】シンプルなオリジナルテーマの作り方(6)~アーカイブページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(6)~アーカイブページ~