BLOG

社員ブログ - 仕事から たわいの無い話まで ざっくばらんにご紹介します。

2017/03/14

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

WordPressで簡単にモーダルウインドウにカレンダーを設置する。(中編)
前回は、モーダルウインドウの設置を行いましたが、今回はビジュアルエディタに設置する方法について記述したいと思います。

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

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

テストポップアップ

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

アイコン

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

トリガー1

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

トリガー2

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

トリガー3

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

プレビュー

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

プレビュー2

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

テンプレートに組み込む

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

固定ページ

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

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

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

固定ページ

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

固定ページ

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

次回は?

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

OUR MISSION

私たちの仕事に対する思想・姿勢

「ITで人を豊かにする」

ITで人を豊かにするという信念のもと、日々新たな製品・サービスを開発・ご提供しております。最後まで誠意をもって取り組んで成果を出す。ご縁を頂いたお客様に安心と満足をご提供出来る様、誠心誠意取り組んで参ります。

CONTACT

お問い合わせはこちらから。

pageTop