初心者向けにjqueryのremodalの使い方とカスタマイズ

モーダルウィンドウのjqeryのプラグインはたくさんでていて、どれを使うのか、ちょっと迷いましたが、いろいろと比較してRemodalを使うことにしました。

1 remodalを選んだわけ
2 remodalの使い方(functions.phpバージョン)
3 モーダルウィンドウ(ポップアップ)とアドセンスの利用規約

remodalを選んだわけ

決め手は次の２点です。

レスポンティブデザインに対応している
他のプラグインをダウンロードして比較すると圧倒的に容量が小さくシンプル

どうせモーダルウィンドウはちょっとしか使わないので、多機能でななくてもいいと思っていました。
それなら軽さを重視すべきだと。

remodalの使い方(functions.phpバージョン)

Remodal v1. The modal done right.

公式サイトからダウンロードすると、distのフォルダにファイルが入っているため、FTPソフトでアップロードします。場所はテーマフォルダの直下にjsとcssのフォルダを作成して、アップロードするのが一般的でしょう。

次に読みこみのコードを書きます。 header.phpの解説をしているサイトが多いですが、基本のheader.phpよりも実際はfunctions.phpに書いた方がいいと思うので、下記のような感じで追加。

function register_jQuery(){

	wp_register_style( 'remodal', get_stylesheet_directory_uri() . '/css/remodal.css');
	wp_register_style( 'remodal-default-theme', get_stylesheet_directory_uri() . '/css/remodal-default-theme.css');
	wp_enqueue_style( 'remodal');
	wp_enqueue_style( 'remodal-default-theme');

	wp_deregister_script('jquery');
	$url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
	wp_register_script('jquery', $url);
	wp_enqueue_script('jquery');

	wp_register_script('remodal', get_stylesheet_directory_uri() . '/js/remodal.min.js', array('jquery'), 1.0, true);
	wp_enqueue_script('remodal');
}
add_action('wp_enqueue_scripts', 'register_jQuery');

いろいろ解説していきます。

wp_enqueue_styleしか書いていないコードもありますが、個人的には、wp_register_style(登録)とwp_enqueue_style(待機)は分けています。 wp_enqueue_scriptは必要に応じてif文で必要な箇所のみ呼ぶように区分けしてもいいでしょう。ここではその辺は省きます。

cssです。
コードをみるとすぐわかるとおもいますが、 remodal.cssには見栄えのコードは書いていません。 remodal-default-themeも一緒に読みこまないと見栄えが確認できません。 remodal-default-themeを元に見栄えをカスタマイズして調整していくと簡単でしょう。

jqueryはGoogleのものを利用して読み込んでいるだけです。よく見かけるコードです。

ダウンロードしたファイルにmin.jsがついたものとついていないものがありましたが、
min.jsを使います。その違いは、ファイルを開くとわかりますが、
min.jsは改行コードやコメントなどがすべて省かれているため、
見にくいですが、そのぶん軽いです。実際にコードを確認したり手をいれたりする場合は
見やすい方でテストしましょう。
プログラムの基本は省けば省くほど、軽くなり、実際の運用向きです。

あとはhtmlを書くだけです。wordpressなら投稿ページに書きましょう。

<div class="remodal-bg">
<p><a href="#modal77">ここをクリックするとモーダルウィンドウが開きます。</a></p>
<div class="remodal" data-remodal-id="modal77">
    <h2>見出しです。</h2>
    <p>モーダルウィンドウが開きました。ここにサンプルテキストを書きます.</p>
    <br>
    <a class="remodal-cancel" href="#">Cancel</a>
    <a class="remodal-confirm" href="#">OK</a>
</div>
</div>

仮にmodal77と書きましたが、ここで紐付いています。

以上でモーダルウィンドウがが表示できます。

モーダルウィンドウ(ポップアップ)とアドセンスの利用規約

ブログにアドセンスを配置していると、ポップアップとアドセンスとの重なりが大丈夫なのか、が気になります。そこでアドセンスの利用規約を一応調べてみました。

ポップアップを表示するサイトでの広告掲載
ポップアップを4つ以上表示するサイトに Google 広告を掲載することはできません。

4つなんですね。念のためですが、4つ以上は4を含みます。

ポップアップウィンドウでの広告掲載
ユーザーのクリックとは関係なく開くウィンドウに Google 広告を掲載することはできません。

こちらはそんな気がしていましたが…。

https://support.google.com/adsense/answer/1346295?hl=ja#Ads_on_a_site_with_pop-ups