WordPress個別サポート

WordPressサイトでコンテンツをクリックしたときにポップアップ表示させたいことがあります。たとえば、商品やサービスを一覧表示しておき「詳しくはこちら」をクリックしたタイミングで詳しい内容をポップアップ表示したい場合などです。

クリック時に詳しい内容をポップアップ表示する

クリック時に詳しい内容をポップアップ表示する

Popup Builderプラグインを使うと、ショートコードを使ってポップアップコンテンツを表示することができます。以下、使い方を説明します。

スポンサーリンク

Popup Builderプラグインのインストール

「プラグイン」‐「新規追加」メニューからPopup Builderプラグインをインストール、有効化します。

Popup Builderプラグインのインストール

Popup Builderプラグインのインストール

「Popup Builder」‐「Add New」メニューを開いて「HTML」をクリックします。

Popup Builderメニューを開く

Popup Builderメニューを開く

ポップアップする内容の作成

ポップアップコンテンツのタイトル(1)、内容(2)を入力します。ポップアップされるのは内容の部分です。ポップアップウィンドウのサイズ(3)も設定できますが必須ではないので、テスト表示した結果を見て微調整してもよいでしょう。完成したら「Save Changes」ボタン(4)をクリックすると設定完了です。

ポップアップコンテンツの作成

ポップアップコンテンツの作成

ポップアップの設置

作成したポップアップを表示する投稿または固定ページの編集画面を開いてポップアップを設置する場所(1)にカーソルを置き、「Insert popup」(2)をクリックします。

ポップアップの設置

ポップアップの設置

ポップアップの設定

ポップアップするコンテンツを「Select Popup」(1)で選択、ポップアップするタイミングを「Select Event」(2)で選択します。ここではクリック時にポップアップするため「Click」を選択しました。

ポップアップコンテンツの設定

ポップアップコンテンツの設定

ポップアップのショートコードの設定

上記の「Insert」ボタン(3)をクリックするとポップアップのショートコードが追加されます。

追加されたショートコード

追加されたショートコード

ショートコードの開始・終了タグの間にポップアップのラベルを入力(ここでは「詳しくはこちら」)します。

ポップアップのラベルを入力

ポップアップのラベルを入力

ポップアップの表示確認

サイトを表示してポップアップのラベルをクリックしてみましょう。

ポップアップのラベルをクリック

ポップアップのラベルをクリック

設定したコンテンツがポップアップします。

コンテンツがポップアップする

コンテンツがポップアップする

以上、Popup Builderプラグインの簡単な使い方を説明しました。「Popup Builder」メニューではポップアップコンテンツのテーマなども設定できるので、テスト表示のイメージを見て、いろいろと設定してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズ・トラブル対応でお急ぎのときは
「カスタマイズがうまくいかない」「突然トラブルが発生した!」などでお急ぎのときはWordPressメールサポートで対応します。ご活用ください。
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク