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

   

eye_stinger7

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

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

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

スポンサーリンク

子テーマの使用方法

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSで見た目を調整

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

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

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

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

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

まとめ

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

ではまた〜♪

スポンサーリンク

この記事をシェアする!

 - WordPress