WordPressテーマの「Simplicity」で表示されるモバイルメニューの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた

前回、「Simplicity」で表示されるPCヘッダーのスクロール時に、固定表示/非表示する動作をボタンで切り替える方法をご紹介いたしました。

WordPressテーマの「Simplicity」で表示されるPCヘッダーの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた
以前、「Simplicity」のPCヘッダーをスクロールで固定表示/非表示する方法をご紹介いたしました。 今回はそれらの動きを、ボタン...

今回はモバイルでもボタンで切り替えられるようにしてみたのでご紹介いたします。

js

下記のjsを「slide-menu.js」などとして、「Simplicity」の子テーマにアップロードします。

解説

上記「メニューバースライド切替え」部分のコードは、「.fa-arrows-v」というクラスが付いた要素がタップされた時にメニューの状態を変えるための「slide-menu」クラスをbodyに付与しています。また、同時にアイコンのカラーとメニューのキャプションが変わる「on」クラスも付与しています。「jQuery.cookie」でそれらを保持するようにしています。

「メニューバースライド切替え」の部分は以前ご紹介した時と同じコードなので、割愛します。

footer-insert.php

子テーマの「footer-insert.php」に下記の記述をします。

「is_mobile」により、モバイルにのみ「slide-menu.js」が読み込まれます。

buttons-footer-mobile.php

メニューの状態を切り替えるアイコンをメニュー内に表示させるために、Simplicityテーマ下の「buttons-footer-mobile.php」にある「<div id=”footer-mobile-buttons”>」の任意の場所に下記の記述をしました。

要素は他メニューとほぼ同じです。「.fa-arrows-v」クラスを記述することで、「Font Awesome」の上下に矢印があるアイコンを選択しています。「Simplicity」は「Font Awesome」を採用しているので、対応するクラスを記述するだけでフォントアイコンを使用することができます。

mobile.css

子テーマの「mobile.css」に下記のスタイルを記述します。

解説1

「Simplicity」のカスタマイズの項目にある「スライドイン」系で表示されるメニューは、「position: fixed;」が指定されているので、スクロール時は画面トップにメニューが追従してきます。それを解除するため、通常の状態でメニューが追従してこないように「position: absolute;」を記述します。

解説2

ボタンがタップされ、bodyに「.slide-menu」が付与された時に、「#footer-mobile-buttons」の「position: fixed;」でメニューを固定します。

解説3

「color: #808080;」で通常時のボタンのカラーを指定しています。

解説4

ボタンがタップされた時に「.on」クラスが付与され、タップ時とタップ後のアイコンのカラーのスタイルを「,(コンマ)」で同じスタイルにしています。

解説5

「.arrow .menu-caption:after」で通常のキャプションを「固定」とし、ボタンタップ時に「.on」クラスが付与された「.arrow.on .menu-caption:after」で、固定されたメニュー時のキャプションを「固定中」としています。

確認

通常時とボタンをタップした時のメニューの状態を確認します。

Simplicity ボタンタップ時にモバイルのメニューの状態が変わる
ボタンタップ時にメニューの状態が変わる

ボタンをクリックした後、上スクロールでメニューが固定表示されていることがわかります。

まとめ

  • メニューの状態を切り替えるjsを作り、子テーマにアップロードして読み込ませる。
  • メニューやボタンの状態表示用のスタイルを子テーマの「mobile.css」に記述する。
  • 変更する既存のテンプレートは「simplicity2」テーマ下にある「buttons-footer-mobile.php」のみ。

PCの時と同様、記事を読んでいる時に上スクロールとはいえ、メニューがチラチラすると気になる人がいるのではないかと思い、今回の機能を実装しました。

CSSの当たり具合など、気になる点があるので様子を見て行きたいと思います。

スポンサーリンク

シェアする

フォローする

WordPressテーマの「Simplicity」で表示されるモバイルメニューの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!