先日、animatedModal.jsというjQueryプラグインを知りました。
animatedModal.jsは、とても気持ち良い操作性の、フルスクリーンモーダルウィンドウを手軽につくれるようになるプラグインです。
こんな感じで、アニメーションを利用して画面いっぱいにウィンドウが広がります。
今回はこのモーダルウィンドウ機能をWordpressのグローバルナビのメニュー表示機能として利用する方法を紹介したいと思います。
パソコンなどでは、メニュー表示ウィンドウは必要ないかと思いますが、モバイルのメニュー表示機能として結構使えるのではないかと思います。
まず最初に、実際の動作を確かめるには以下のボタンを押してみてください。
（スタイルが崩れる場合はリロードしてください）
目次
主な手順
animatedModal.jsをWordpressのグローバルメニュー表示ウィンドウとして利用するには、以下の手順が必要です。
- animatedModal.jsのダウンロードと設置
- ヘッダーでCSSファイルの呼び出し
- フッター部分にJSファイル呼び出し、ウィンドウとなるHTML、jQueryコードの記入
- スタイルシートで見た目を整える
- モーダルウィンドウの呼び出しボタンを書く
モーダルウィンドウとなるHTMLを書かなくてはいけないので、コードは多少長くなりますが、やることはそう多くはありません。
ダウンロードと設置
まずはanimatedModal.jsからファイルをダウンロードします。
「animatedModal.js-master.zip」というファイルがダウンロードされるので、中にある「demo」フォルダの中から、「css」フォルダと、「js」フォルダを、テーマ内にコピーして設置します。
今回は、子テーマに設置する例を紹介します。
ヘッダーでCSSの呼び出し
まず、ヘッダーでCSSを呼び出します。
特に難しいことはする必要がなく、<head></head>内で以下のように呼び出します。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/normalize.min.css"> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/animate.min.css">
親テーマそのもので利用する場合は、get_stylesheet_directory_uri()部分をget_template_directory_uri()にしてください。
フッターでファイルとコードの呼び出し
次に、フッター部分（</body>手前）で以下のコードを書く必要があります。
- モーダルウィンドウとなるHTML
- スクリプトファイルの呼び出し
- プラグインを実行するjQueryコード
このように、いろいろあるのですが、まとめて書くと以下のようになります。
<!--DEMO01ボタンで呼び出される-->
<div id="animatedModal">
<!--以下の要素はモーダルウィンドウを閉じるのに必要です。クラスを「class="close-animatedModal"」とする必要があります。 -->
<div id="btn-close-modal" class="close-animatedModal">
<a href="#" class="close-button">CLOSE</a>
</div>
<div class="modal-content">
<!--ここにモーダルウィンドウのコンテンツを書く（今回はWordpressのグローバルナビ）-->
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
</div>
</div>
<!--新しいjQueryを呼ばないと動作しないっぽい-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/animatedModal.min.js"></script>
<script>
//demo 01
jQuery("#demo01").animatedModal({
animatedIn: 'bounceIn', //開くとき
animatedOut: 'bounceOut', //閉じるとき
});
</script>
モーダルウィンドウとなるHTML
ウィンドウとなるHTML部分は以下になります。
<!--DEMO01ボタンで呼び出される-->
<div id="animatedModal">
<!--以下の要素はモーダルウィンドウを閉じるのに必要です。クラスを「class="close-animatedModal"」とする必要があります。 -->
<div id="btn-close-modal" class="close-animatedModal">
<a href="#" class="close-button">CLOSE</a>
</div>
<div class="modal-content">
<!--ここにモーダルウィンドウのコンテンツを書く（今回はWordpressのグローバルナビ）-->
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
</div>
</div>
閉じるボタンを書かないと、モーダルウィンドウを閉じることができなくなるので注意が必要です。
コンテツ部分で、Wordpressのグローバルナビを呼び出しています。
スクリプトファイルの呼び出し
ファイルの呼び出し部分は以下。
<!--新しいjQueryを呼ばないと動作しないっぽい--> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/animatedModal.min.js"></script>
jQueryは、Wordpressで呼ばれていれば必要ないかもしれませんが、一応書いておきました。
僕の環境では、新しいjQueryでないと動作しなかったので、あえて呼び出して利用しています。
プラグインを実行するjQueryコード
実行コードは以下になります。
<script>
//demo 01
jQuery("#demo01").animatedModal({
animatedIn: 'bounceIn', //開くとき
animatedOut: 'bounceOut', //閉じるとき
});
</script>
モーダルウィンドウの呼び出しコードは、バウンドして開いたり閉じたりできるように呼び出しています。
オプションは以下のようなものを選択できます。
| 変数 | デフォルト値 | オプション | 説明 |
|---|---|---|---|
| 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などで表示を綺麗に整えると、より利便性が上がるかもしれません。
以下では、ある程度見た目を整えるために、最低限のスタイルしか書いてありません。
/*animatedModal.jsでグローバルな量表示するスタイル*/
#animatedModal a{
color: #fff;
font-weight: bold;
text-decoration: none;
}
.close-animatedModal{
margin-top: 50px;
text-align: center;
}
.modal-content{
max-width: 600px;
width: auto;
margin: auto;
}
今回は、リストスタイルのままとなっていますが、スマホなどで呼び出しやすいボタンスタイルなどに変えると、より利便性が高まるのではないかと思います。
呼び出しボタンを書く
最後に、以下のような呼び出しボタンをテンプレートなどに書き込みます。
<button id="demo01" href="#animatedModal">デモボタン</button>
このような、実行コードで設定したidと、「#animatedModal」というhrefでHTML要素を設定するとモーダルウィンドウを呼び出すことができます。
A要素などで呼び出してもOKです。
動作確認
で、実際の動作が以下のようになります。
ボタンをクリックすることで、以下のようなモーダルウィンドウがアニメーションつきで表示されます。
スマホなどの大きさだと、以下のようになります。
アニメーションの選択次第では、とても気持ちの良い操作性になると思います。
まとめ
このように、コードのコピペのみならば、4回で手軽にWordpressにもモーダルウィンドウメニューを作成することができます。
今回は、サンプル例として、最低限のスタイルしか設定しませんでしたが、メニュー部分などのスタイルをもっと作り込めば、より訪問者にも使いやすいインターフェースも作れると思います。
WordPressテーマをカスタマイズしていて、「メニューは、普通のグローバルナビで良いけど、スマホのメニューをどうしよう？」なんて悩んでいる場合は、モーダルウィンドウというのも選択肢の1つに入れていいかもしれません。
マウスオーバー時の色って変えれないんですかね?
調べても出てこない・・・
何か良い案があれば教えてください m(_ _)m