ナビゲーションの設定 – 「超」初心者のためのワードプレス基礎講座

グローバルナビゲーションを、スマホとPCに振り分けます。

今回は、font-awesome を利用して、ボタンを作成してみましょう。下記のCDNをheader.phpにペーストし、利用可能にします。

<!-------- fontawesome ---------------------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />

1 2	<!-------- fontawesome ----------------------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />

font-awesomeは、ウェブフォントで表現できるアイコンです。

FontAwesome5バージョン
https://fontawesome.com/icons

Contents

1 メニューを作る
2 javascriptでオープン

メニューを作る

ナビゲーションメニューを作ります。外観→ メニューでメニューを作成し、header.phpに書き込むことで、メニューが出現します。

<!----------- header.phpにナビゲーション ---------------->
<nav id="gnav">
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'nav-menu' 
  ) ); 
?></nav>

<?php

wp_nav_menu( array(

'theme_location' => 'nav-menu'

) );

?></nav>

ハンバーガーメニュー(3本ラインを作成します。)i classは、font-awesomeでの読み込みです。

<!--スマホ用メニューボタン-->
<button type="button" id="navbutton" >
  <i class="fas fa-bars"></i>
</button>

</button>

上記のコードを入れることで、以下のバーが出現します。▶ 公式サイトで見る

javascriptでオープン

jQueryが使えるようにCDNを読み込みます。(header.php/</header内>に記述しましょう。)

<!------------ jQueryCDN---------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

1 2	<!------------ jQueryCDN----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<script>
	$(function() {
  $("#navbutton").click(function() {
    $("#gnav").slideToggle();
  });
});
</script>

$(function() {

$("#navbutton").click(function() {

$("#gnav").slideToggle();

});

</script>