Facebook
RSS Feed
Feb 28, 2017

スマホメニューでドロップダウンが使えるようにするカスタマイズ方法

レスポンシブサイトでドロップダウンメニュー(階層のあるメニュー)の場合、
スマホで見た時に、一番最初の親要素をタップするとリンク先に飛んでしまって、
子階層がタップしづらい!という事があると思います。特にAndroidで。

で、これを解決するのに簡単な方法がありまして、
「DoubleTapToGo.js」というJsを読み込むと、
親リンクタップ⇒子リンク展開⇒子リンクタップ⇒リンク先に移動、みたいな感じで
スマホでもドロップダウンメニューが使いやすくなります。

こんな具合ですね。

以下、カスタマイズ方法を解説します。

スマホメニューでドロップダウンが使えるようにするカスタマイズ方法

1)DoubleTapToGo.jsをダウンロード

Drop-Down Navigation: Responsive and Touch-Friendly — Osvaldas Valutis

上記のサイト(英語)からJsファイルのダウンロードができます。
ページ最後の方の「Touch-friendly drop-down navigation」という欄の、
DoubleTapToGo.js」っていう青いリンクから右クリックでダウンロードします。

http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.js

2)FTPでサーバーのthemesフォルダにアップロード

ダウンロードしたJsファイルをご利用のサーバーのテーマファイルの中にアップロードします。
Minimal WPのテーマの場合は、

ドメイン/wp-content/themes/テーマ名/jquery(またはjs)

上記のjquery/Jsフォルダに入れておくと分かりやすいと思います。

3)フッターで読み込みます

◎ダッシュボード>外観>テーマ編集>テーマフッター(footer.php)

テーマフッター(footer.php)を開いて、</body>の直前くらいに以下の記述を追加します。

*jqueryフォルダではなくjsフォルダに入れた場合は、2行目のjqueryをjsに置き換えてください

以上です。

*カスタマイズする時はバックアップをお忘れなく!

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Folclore」
ビジネス・企業サイト / マガジン
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト