WordPressで簡単にモーダルウインドウにカレンダーを設置する。（中編）

投稿にクリックイベントを設定する

プラグイン「Popup Maker」のインストール方法などについては、こちらを参照願います。

今回は投稿にクリックイベントを作成したいと思います。
左メニュー「投稿」から「新規作成」を行いますと、ビジュアルエディタに「Popup Maker」のアイコンが増えています。
アイコンからもモーダルウインドウや、トリガーを作成することが可能です。


早速、作っていきましょう。
作成したテストポップアップ「test」を選択します。


オプションを設定します。
デフォルトの「HTML Tag」は「span」タグですが、今回は「button」を設定しました。
下の「CSS Class」でCSSのclassを設定することも可能ですが、今回は省略致します。


以下のようにショートコードが作成されます。


保存してプレビューしますと、ボタンが設置されています。


ボタンを押下すると、作成したテストポップアップが表示されるようになりました。


このような形でクリックイベントで表示することも簡単にできます。
クリックイベントで今回は表示しましたが、イベントそのものも上記のアイコンから可能です。
「Auto Open」イベントでも公開範囲やCookieで毎回開かない設定などもできるのですが、今回は省略したいと思います。

テンプレートに組み込む

テンプレートに組み込む方法について記述致します。
今回は「固定ページ」に組み込んでみます。
固定ページにテストポップアップページを作成しました。


単純にpage.phpに、先程、ビジュアルエディタで作成されたショートコードを埋め込んでみました。
IDやタグなどは、生成されたショートコードを記述して下さい。

<?php echo do_shortcode( '[popup_trigger id="000" tag="button"]サーバル[/popup_trigger]' ); ?	>

固定ページに先程のボタンが表示されています。


ボタンを押下すると正常に表示されました。


このような形にテンプレートにも反映が可能です。

次回は？

「Exit Intent」や「Scroll Triggers」は別途有料プラグインになるので、今回は説明を致しませんが、必要であれば購入を検討してもいいかと思います。
次回はカレンダーの組み込みについて説明したいと思います。