STINGER7：スマホ用ナビゲーションを横スクロールメニューに変える方法

先日紹介した「レスポンシブな横スクロールメニュー」をSTINGER7に設置してみたいと思います。

三本線のハンバーガーメニューは、ネットに慣れている人ならメニューだと分かるしクリックもするのですが、その三本線の先に情報があるということに気付かない、またはクリックしてわざわざ確認しないという人も少なくはないようです。

STINGERをお使いの方で、スマホでもメニューを常に表示するようにしたい！という方は参考にしてみてください。

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

スマホ用のハンバーガーメニューを消す場合

まずはウィンドウ幅が小さくなると表示される「ハンバーガーメニュー」を消す場合の作業です。
「header.php」にある以下のコードを削除しちゃいます↓

<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i></span></p>
</dt>
<dd class="acordion_tree">
<?php
$defaults = array(
'theme_location' => 'primary-menu',
);
?>
<?php wp_nav_menu( $defaults ); ?>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->

「アコーディオン」で囲われている部分ですね。
これでウィンドウ幅を狭くしてもハンバーガーメニューが表示されなくなりました。

新しくメニューを設置する

次に新しいメニューを設置します。
「st-header-menu.php」の中身を全て削除して、こちらのコードに置き換えてください↓

<div class="nav-wrap">
  <div class="scroll-nav">
    <ul>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー1</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー2</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー3</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー4</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー5</a></li>
    </ul>
  </div>
  <div class="next-btn">＞</div>
</div>

前回の記事では7つのメニューでしたが、今回は5つにしてみました。

「<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>“>」の赤字の部分がリンク先で、これはトップページへのリンクになっています。

メニュー1、メニュー2・・・となっているところが実際に表示される部分です。

例えば当ブログの「wordpress」のカテゴリだとURLは「https://web-ashibi.net//archives/category/wordpress」なので、このように編集します↓

<li><a href="<?php echo esc_url( home_url( '/archives/category/wordpress' ) ); ?>">WordPress</a></li>

このように必要なメニューの分だけ編集してください。

CSSで見た目を調整

最後にCSSで見た目を調整します。
以下のコードを「style.css」に追加してください↓

.nav-wrap {
  position: relative;
}
.scroll-nav {
  width: 100%;
  background: #555; /* メニューの背景色 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
  max-width: 1060px; /* メニューの最大幅 */
  min-width: 750px; /* メニューの最小幅 */
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  list-style: none;
  padding-right: 25px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li {
  float: left;
  width: 150px; /* メニューの個別の幅 */
  text-align: center;
}
.scroll-nav ul li:hover {
  background: #222; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
  display: inline-block;
  color: #fff; /* メニューの文字色 */
  text-decoration: none;
}
.next-btn { /* 右側に固定する部分 */
  position: absolute;
  top: 0;
  right: 0;
  width: 25px; /* 固定部分の幅 */
  height: 40px; /* メニューの高さに合わせる */
  line-height: 40px;
  background: #fff;
  color: #555;
}
@media only screen and (min-width: 771px) { /* PCサイズでの指定 */
.scroll-nav ul {
  padding: 0;
}
.scroll-nav ul li {
  width: 20%; /* メニューの個別の幅 */
}
.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}
}

上記は5項目のメニュー用のCSSです。

メニューの数によって変える必要があるのは、下から6行目のPC用の指定の部分↓

width: 20%; /* メニューの個別の幅 */

これがメニュー4つなら25%、6つなら16.66%っていう感じです。

あとは背景や文字の色など、サイトに合わせて調整してくださいね！

まとめ

今回のやつは初心者の方には少し難易度が高いかもしれませんが、良かったら挑戦してみてください。
分からない部分などあればコメントかメッセージくださいね。

ではまた〜♪