WordPressでコンテンツをポップアップ表示できるPopup Builderプラグイン
WordPressサイトでコンテンツをクリックしたときにポップアップ表示させたいことがあります。たとえば、商品やサービスを一覧表示しておき「詳しくはこちら」をクリックしたタイミングで詳しい内容をポップアップ表示したい場合などです。
![クリック時に詳しい内容をポップアップ表示する](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-29-46.jpg)
Popup Builderプラグインを使うと、ショートコードを使ってポップアップコンテンツを表示することができます。以下、使い方を説明します。
この記事の内容
Popup Builderプラグインのインストール
「プラグイン」‐「新規追加」メニューからPopup Builderプラグインをインストール、有効化します。
![Popup Builderプラグインのインストール](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-20-47-05.jpg)
「Popup Builder」‐「Add New」メニューを開いて「HTML」をクリックします。
![Popup Builderメニューを開く](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-20-50-05.jpg)
ポップアップする内容の作成
ポップアップコンテンツのタイトル(1)、内容(2)を入力します。ポップアップされるのは内容の部分です。ポップアップウィンドウのサイズ(3)も設定できますが必須ではないので、テスト表示した結果を見て微調整してもよいでしょう。完成したら「Save Changes」ボタン(4)をクリックすると設定完了です。
![ポップアップコンテンツの作成](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-22-21.jpg)
ポップアップの設置
作成したポップアップを表示する投稿または固定ページの編集画面を開いてポップアップを設置する場所(1)にカーソルを置き、「Insert popup」(2)をクリックします。
![ポップアップの設置](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-03-24.jpg)
ポップアップの設定
ポップアップするコンテンツを「Select Popup」(1)で選択、ポップアップするタイミングを「Select Event」(2)で選択します。ここではクリック時にポップアップするため「Click」を選択しました。
![ポップアップコンテンツの設定](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-06-21.jpg)
ポップアップのショートコードの設定
上記の「Insert」ボタン(3)をクリックするとポップアップのショートコードが追加されます。
![追加されたショートコード](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-11-06.jpg)
ショートコードの開始・終了タグの間にポップアップのラベルを入力(ここでは「詳しくはこちら」)します。
![ポップアップのラベルを入力](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-13-03.jpg)
ポップアップの表示確認
サイトを表示してポップアップのラベルをクリックしてみましょう。
![ポップアップのラベルをクリック](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-14-06.jpg)
設定したコンテンツがポップアップします。
![コンテンツがポップアップする](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-17-21-24-48.jpg)
以上、Popup Builderプラグインの簡単な使い方を説明しました。「Popup Builder」メニューではポップアップコンテンツのテーマなども設定できるので、テスト表示のイメージを見て、いろいろと設定してみてください。