スマホメニューなどに!WordPressのグローバルナビを、操作性が良いモーダルウィンドウで利用する方法[animatedModal.js]

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

先日、animatedModal.jsというjQueryプラグインを知りました。

animatedModal.jsは、とても気持ち良い操作性の、フルスクリーンモーダルウィンドウを手軽につくれるようになるプラグインです。

こんな感じで、アニメーションを利用して画面いっぱいにウィンドウが広がります。

フルスクリーンモーダルウィンドウ

今回はこのモーダルウィンドウ機能をWordpressのグローバルナビのメニュー表示機能として利用する方法を紹介したいと思います。

パソコンなどでは、メニュー表示ウィンドウは必要ないかと思いますが、モバイルのメニュー表示機能として結構使えるのではないかと思います。

まず最初に、実際の動作を確かめるには以下のボタンを押してみてください。

(スタイルが崩れる場合はリロードしてください)

スポンサーリンク
レクタングル(大)広告

主な手順

animatedModal.js

animatedModal.jsをWordpressのグローバルメニュー表示ウィンドウとして利用するには、以下の手順が必要です。

  1. animatedModal.jsのダウンロードと設置
  2. ヘッダーでCSSファイルの呼び出し
  3. フッター部分にJSファイル呼び出し、ウィンドウとなるHTML、jQueryコードの記入
  4. スタイルシートで見た目を整える
  5. モーダルウィンドウの呼び出しボタンを書く

モーダルウィンドウとなるHTMLを書かなくてはいけないので、コードは多少長くなりますが、やることはそう多くはありません。

ダウンロードと設置

まずはanimatedModal.jsからファイルをダウンロードします。

animatedModal.jsのダウンロード

「animatedModal.js-master.zip」というファイルがダウンロードされるので、中にある「demo」フォルダの中から、「css」フォルダと、「js」フォルダを、テーマ内にコピーして設置します。

CSSとJSフォルダを設置する

今回は、子テーマに設置する例を紹介します。

ヘッダーでCSSの呼び出し

まだヘッダーでCSSを呼び出します。

特に難しいことはする必要がなく、<head></head>内で以下のように呼び出します。

親テーマそのもので利用する場合は、get_stylesheet_directory_uri()部分をget_template_directory_uri()にしてください。

フッターでファイルとコードの呼び出し

次に、フッター部分(</body>手前)で以下のコードを書く必要があります。

  1. モーダルウィンドウとなるHTML
  2. スクリプトファイルの呼び出し
  3. プラグインを実行するjQueryコード

このように、いろいろあるのですが、まとめて書くと以下のようになります。

モーダルウィンドウとなるHTML

ウィンドウとなるHTML部分は以下になります。

閉じるボタンを書かないと、モーダルウィンドウを閉じることができなくなるので注意が必要です。

コンテツ部分で、Wordpressのグローバルナビを呼び出しています。

スクリプトファイルの呼び出し

ファイルの呼び出し部分は以下。

jQueryは、Wordpressで呼ばれていれば必要ないかもしれませんが、一応書いておきました。

僕の環境では、新しいjQueryでないと動作しなかったので、あえて呼び出して利用しています。

プラグインを実行するjQueryコード

実行コードは以下になります。

モーダルウィンドウの呼び出しコードは、バウンドして開いたり閉じたりできるように呼び出しています。

オプションは以下のようなものを選択できます。

変数 デフォルト値 オプション 説明
modalTarget animatedModal target属性のカスタマイズ
color #39BEB9 HEX HSL RGB RBA 背景色
animatedIn zoomIn こちらから選択 開くときのアニメーション
animatedOut zoomOut こちらから選択 閉じる時のアニメーション
animationDuration .6s seconds アニメーション継続時間
overflow auto scroll; hidden; auto; スクロールバー表示

アニメーションは、Animate.cssで、表示を確認しながら、70種類以上の中から選べます。

CSSで表示を整える

style.cssなどで表示を綺麗に整えると、より利便性が上がるかもしれません。

以下では、ある程度見た目を整えるために、最低限のスタイルしか書いてありません。

今回は、リストスタイルのままとなっていますが、スマホなどで呼び出しやすいボタンスタイルなどに変えると、より利便性が高まるのではないかと思います。

呼び出しボタンを書く

最後に、以下のような呼び出しボタンをテンプレートなどに書き込みます。

このような、実行コードで設定したidと、「#animatedModal」というhrefでHTML要素を設定するとモーダルウィンドウを呼び出すことができます。

A要素などで呼び出してもOKです。

動作確認

で、実際の動作が以下のようになります。

ボタンをクリックすることで、以下のようなモーダルウィンドウがアニメーションつきで表示されます。

モーダルウィンドウで作成したWordpressグローバルナビメニュー

スマホなどの大きさだと、以下のようになります。

モーダルウィンドウをスマホで表示

アニメーションの選択次第では、とても気持ちの良い操作性になると思います。

まとめ

このように、コードのコピペのみならば、4回で手軽にWordpressにもモーダルウィンドウメニューを作成することができます。

今回は、サンプル例として、最低限のスタイルしか設定しませんでしたが、メニュー部分などのスタイルをもっと作り込めば、より訪問者にも使いやすいインターフェースも作れると思います。

WordPressテーマをカスタマイズしていて、「メニューは、普通のグローバルナビで良いけど、スマホのメニューをどうしよう?」なんて悩んでいる場合は、モーダルウィンドウというのも選択肢の1つに入れていいかもしれません。

『スマホメニューなどに!WordPressのグローバルナビを、操作性が良いモーダルウィンドウで利用する方法[animatedModal.js]』へのコメント

  1. 名前:みき 投稿日:2016/11/27(日) 00:28:16 ID:77d042cca

    マウスオーバー時の色って変えれないんですかね?
    調べても出てこない・・・
    何か良い案があれば教えてください m(_ _)m

  2. わいひら 名前:わいひら 投稿日:2016/11/27(日) 19:51:26 ID:a4f7fa496

    実際、サイトにどのような実装されたかがわからないので詳しくは、ソースコードを見れないと、何ともいえないかもしれません。
    ただ、優先度の高いCSSセレクタを書いてホバー設定すれば、普通にスタイルを変更できると思います。
    以下は、実装方法によっては動作しないかもしれませんが一例です。

  3. 名前:みき 投稿日:2016/11/27(日) 22:10:15 ID:77d042cca

    わいひらさん
    ありがとうございます
    教えていただいたcssでできました!!

    実際、サイトにどのような実装されたかがわからないので詳しくは、ソースコードを見れないと、何ともいえないかもしれません。

    すみません
    伝え忘れていました
    Simplicityのカスタマイズからです

    同じようなcssを書いたのに・・・
    さすがわいひらさんとしか言えないです
    本当にありがとうございました!!
    今後ともよろしくお願いします!!

  4. わいひら 名前:わいひら 投稿日:2016/11/28(月) 11:49:47 ID:c6d72d680

    ああ、Simplicityのだったんですね。
    それなら、僕の書いたコードでいけると思います。
    うまくいったようでよかったです。

CLOSE