SANGOのテーマを使い始めました。なかなか使いやすくてデザインも素敵なので、他のサイトにも使おうと思っています。
他ではモーダルウィンドウを使っているサイトがあります。現行のテーマはBootstrapなので簡単に利用できるのですがSANGOにはモーダル機能がありません。
当初はWordPressプラグインの導入も検討したのですが、なんとなく使いにくそうな感じがしたので、ModaalというjQueryのプラグインを利用することにしました。
今回、自分がSANGOの子テーマにModaalを使ってモーダルウィンドウを表示するようにした方法をご紹介します。
humaan/Modaal: An accessible dialog window library for all humans.
Modaalの使い方はこちらのサイトを参考にさせてもらいました。
【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方 – ONZE
目次
Modaalのソースをダウンロード
githubのModaalのソースをダウンロード。
humaan/Modaal: An accessible dialog window library for all humans.
その中からjsとcssのファイルをsangoの子テーマに移しました。
sango-theme-child/css/modaal.min.css
sango-theme-child/js/modaal.min.js
modaalのjsとcssファイルを読み込む
sangoで配布している子テーマでは、functions.phpに「//子テーマのCSSの読み込み」として、theme_enqueue_styles()が作られています。
ここで、modaal.min.cssとmodaal.min.jsを読み込ませます。
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('sng-stylesheet','sng-option')
);
wp_enqueue_style('modaal',
get_stylesheet_directory_uri() . '/css/modaal.min.css');
wp_enqueue_script('modaal-js',
get_stylesheet_directory_uri() . '/js/modaal.min.js',array('jquery')
);
}
このときに気をつけることは、modaalのjsはjQueryに依存しているので、jqueryの後に読み込まれるよう、array(‘jquery)と記載することです。
利用方法
モーダルウィンドウを表示させるボタンは下記のように記述します。
<a href="#modal" class="modal">Show</a>
表示させるモーダルウィンドウは下記のとおり。
<div id="modal" style="display:none;">
<p>これがモーダルウィンドウとして表示されます。</p>
</div>
[/htm]
あとは、jQueryの記述です。
とりあえず、上記HTMLの下に
<script>
jQuery('.modal').modaal();
</script>
とするかどこかに記述します。
jsを外部ファイルにする時
先程のfunction theme_enqueue_styles() に下記を追加。
wp_enqueue_script('custom-js',
get_stylesheet_directory_uri() . '/js/custom.js',array('modaal-js')
);
外部のjsファイル custom.jsはこんな感じ。
jQuery(document).ready(function(){
jQuery('.modal').modaal();
});
結果
このようにボタンを表示させ、ボタンをクリックすると
モーダルが表示されます。
まとめ
以上、自分がSANGOのテーマをカスタマイズしてjQueryプラグイン「Modaal」を使ってモーダルウィンドウを表示した方法をご紹介しました。
SANGOテーマは有料ですがなかなか良いのでおすすめです！
