WordPressでさまざまなコンテンツをポップアップ表示する（Popup Builder）

WordPressでWebページを作成していて、ページ内のコンテンツをクリックしたときにオーバーレイでポップアップ表示させたいことがあります。

たとえば、商品やサービスを一覧表示しておき、クリックすると詳しい内容をポップアップ表示させたり、小さいサイズの画像をクリックするとフルサイズの画像をポップアップ表示させたりしたい場合などです。

そんなときに便利なのが、WordPressプラグイン「Popup Builder」です。ここでは「Popup Builder」の概要と使い方を紹介します。

動作環境

この記事は、以下の環境で実行した結果をもとにしています。各ソフトウェアのバージョンにより、動作結果や表示が異なる場合があることをご了承ください。

ソフトウェア（プラグイン）	バージョン
WordPress	4.9.8
Popup Builder	3.1.2

「Popup Builder」は、Webページ上のさまざまなコンテンツをショートコードによってポップアップ表示させるWordPressプラグインです。

無料版でポップアップ表示できるのは、画像やHTMLページなどと限られますが、有料のPro版を購入すれば、さまざまなコンテンツをポップアップ表示させることができます。

なお、プラグインは日本語化されていませんが、シンプルなインターフェースで扱いやすいプラグインです。

プラグインのインストール方法は、一般的なプラグインと同じなのでここでは割愛させていただきます。

例として、画像やHTMLページをポップアップ表示させる場合を紹介します。

WordPress管理画面のメニューから「Popup Builder」＞「Add New」を順にクリックし、「Image」を選択します。

コンテンツの作成画面が表示されるので、タイトルを入力し、表示させる画像を選択します。（タイトルは、管理上必要となる項目で、ポップアップ表示はされません。）

最後に「公開」ボタンをクリックし作成完了です。

基本はこれだけでOKですが、ポップアップウィンドウのデザインなど（色や透明度など）を、設定画面やCSSで調整することも可能です。

作成したポップアップコンテンツを設置するには、投稿または固定ページの編集画面を開き、ポップアップを設置する箇所を選択して「Insert popup」ボタンをクリックします。

ポップアップ表示させるコンテンツを「Select Popup」から選択し、ポップアップするタイミングを「Select Event」で選択し、最後に「Insert」ボタンをクリックします。

すると、ショートコードが挿入されます。

以上で、設置完了です。

設置が完了したら、記事をプレビューして、リンクをクリックしみてください。画像がポップアップ表示されることを確認できると思います。

以上が、画像をポップアップ表示させる基本的な手順です。

WordPress管理画面のメニューから「Popup Builder」＞「Add New」を順にクリックし、「HTML」を選択します。

コンテンツの作成画面は、投稿の編集画面とほぼ同じなので問題なく作成できると思います。

手順は、画像のときと同じでタイトルを入力し内容を入力し「公開」ボタンをクリックして完成です。

コンテンツの設置手順も画像のときと同じ手順で設置できます。

ポップアップは、以下のように表示されます。

設定でテーマを変えると、背景を暗転させないようにしたり、明るい感じで表示することもできそうです。

ページを遷移させずにコンテンツを表示させたいときに役立ちそうですね。