BLOG

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

2017/02/20

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

WordPressで簡単にモーダルウインドウにカレンダーを設置する。(前編)
最近、WordPressでモーダルウインドウにカレンダーを設置とのご依頼があったので簡単に作成する方法のメモです。

モーダルウインドウのインストール

左メニューから、「プラグイン」→「新規追加」→「プラグインの検索」から「Popup Maker」で検索し、

プラグイン

上記のプラグインをインストール及び有効化します。

すると、左メニューに「Popup Maker」のメニューが出ますので、

ポップアップメーカーがFreemiusでいくつかの使用データを収集して、プラグインをさらにすばらしいものにすることを許可します。
と、英語で表記されるので、これをスキップします。


メニュー

すると、上記のように、左メニューに「Popup Maker」が出ますので、新規追加していきます。

モーダルウインドウの設定

本来は色々設定できるのですが、まず、
タイトルとモーダルウインドウのタイトル、ビジュアルエディタに内容を記述します。

編集

トリガーを設定します。

編集2

今回は自動で開く設定にする為、「Auto Open」で「500ms」(0.5秒)にします。

トリガー設定


トリガー設定2

すると、トリガーが追加されます。

トリガー設定3

クローズ設定します。
オーバーレイ部分をクリックしてもモーダルウインドウがクローズする設定にチェックを入れます。

クローズ設定

「更新」して保存し、「View Popup」をクリックすると、モーダルウインドウが表示されます。

保存

このように表示されました。

表示

モーダルウインドウのデザイン設定方法

簡単な変更方法を紹介します。
「Popup Themes」→「Dfault Theme」を今回は選択します。

デザイン編集1

以下のように変更できますが、今回は説明を省きます。

デザイン編集2

折角なので編集して表示させてみました。

デザイン変更表示

次回は?

今回はインストールから簡単な表示方法を記述していきましたが、
次回はビジュアルエディタに設置する方法を説明したいと思います。

OUR MISSION

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

「ITで人を豊かにする」

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

CONTACT

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

pageTop