WordPressで作ったページに自由なタイミングでポップアップ画面を表示できるプラグイン「Call To Action Popup」

いろいろなサイトのページを見ていて、ある程度ページの下の方へ読み進めると別窓で表示される広告や文章などを見ることがよくあります。これはポップアップウインドウと呼ばれ、日本語では別窓と呼ばれます。

このコンテンツを作成するには

  1. どのタイミングで表示するか
  2. 何を表示するか

というファクターが必要になるのですが、自分で環境を一から作るとなると大変ですから、そんなときはWordpress得意のプラグインで実装したほうが手っ取り早いです。

こうしたポップアップ表示のプラグインはたくさんリリースされていますが、

  1. 1つのポップアップウインドウしか作ることができない
  2. 表示するタイミングが設定できない
  3. デザインの自由な変更ができない

というものが多かったり、これらの設定が有料版でのみ装備されていたりします。

1つのプラグインで1つのポップアップしか作れないと投稿の内容によって表示する別窓を分けることができませんし、タイミングが返れないといいところでポップアップが出てしまいますし、デザインが編集できないとサイトイメージとかけ離れたものになってしまう・・・など不都合が多いものです。

今回紹介する【Call To Action Popup】はこの点も含めて無料で使用できる便利なプラグインです。

スポンサーリンク

【Call To Action Popup】プラグインの基本的な機能・できること

  1. ページ上で設定した部分までスクロールされたとき、ポップアップ画面を表示
  2. ポップアップ画面には背景画像などいろいろな設定ができる
  3. プリセット(標準)設定以外のデザインはカスタムCSSが適用できる
  4. ポップアップ画面の大きさの設定ができる
  5. ポップアップ画面には文字の他にもいろいろなものが挿入できる
  6. ※1つのページに表示できるポップアップ画面は1つだけです
    ※テスト環境で、ポップアップの画面にはショートコードを挿入しても動作しました
    ※テスト環境で、「EXEC PHP」などのプラグインを使って本文へPHPプログラムが使える環境ではポップアップ画面中でプログラムの動作をさせることができました

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Call To Action Popup】プラグインの設定画面や表示の日本語化と翻訳

【Call To Action Popup】プラグインは言語の変更に未対応ですので表示のまま設定することになります

【Call To Action Popup】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

有効化すると、ダッシュボードに「CactusThemesPopUp」というメニューが追加されますのでそこからポップアップ画面に表示する内容の追加や編集を行います。

内容を編集する画面自体は通常の投稿編集画面と同様です。

本文編集画面下に「CactusThemesPopUp」独自の設定画面がありますので、様々な設定を行います。

  1. Offset
  2. ページの最下部からこの値まで来たときにポップアップ画面を表示します(単位はピクセルです)

  3. PopUp Width
  4. ポップアップ画面の幅を設定します(単位はピクセルです)

  5. PopUp Height
  6. ポップアップ画面の高さを設定します(単位はピクセルです)

  7. Content Padding
  8. ポップアップ画面の内側の隙間を設定します(単位はピクセルです)

  9. Popup Background
  10. 背景画像を設定します

  11. Background Repeat
  12. 背景画像がポップアップ画面よりも小さいときの表示方法を設定します

  13. Background Position
  14. 背景画像の表示位置(ポップアップ画面よりも大きいときは画像の基準点)を設定します

  15. Background Size
  16. 背景の大きさを設定します

  17. Number of hours to repeat popup
  18. ポップアップを再表示するまでの時間を時間単位で設定します。この値を1にすると、1時間内に同じ人が同じコンテンツを見たときにはポップアップが表示されなくなります。

  19. PopUp Custom CSS
  20. 上の項目で設定できない内容のデザイン設定を行います。

    .popup-body { ここにCSSを記述する   }

    コードをコピーして「ここにCSSを記述する」の部分へCSSを追記します

  21. PopUp Custom Class
  22. テーマのCSSで設定を行う場合にCSS Classを設定します。

【Call To Action Popup】プラグインの基本的な使い方

投稿や固定ページの本文へショートコードを挿入します

基本となるショートコードは[cta_popup id=””]です。

id=””の””の間に、「CactusThemesPopUp」の一覧に表示されているIDを入力します

ショートコードを挿入する場所とは関係なく、設定したタイミングになるとポップアップ(別窓)が表示されます。

共通して使用するウィジェットへショートコードを挿入すると全ての投稿や固定ページへ同じポップアップ画面を表示できます。
※前述しましたが、1つのページで表示できるポップアップ画面は1つです。複数のポップアップ設定(ショートコード)が同一ページ上にある場合、先に読み込まれたショートコードのポップアップが表示されます。

Amazonの人気商品楽天市場の人気商品
【送料無料】 WordPress 仕事の現場でサッと使える!デザイン教科書 Webデザイナー養成講座 / 中島真洋 【本】

【送料無料】 WordPress 仕事の現場でサッと使える!デザイン教科書 Webデザイナー養成講座 / 中島真洋 【本】

3,002 円 (税込) 送料込
基本情報ジャンル建築・理工フォーマット本出版社技術評論社発売日2015年06月ISBN9784774173801発売国日本サイズ・ページ366p 26cm(B5)関連キーワード 9784774173801 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
【中古】 本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 /プライム・ストラテジー株式会社(著者) 【中古..

【中古】 本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 /プライム・ストラテジー株式会社(著者) 【中古..

1,649 円 (税込)
プライム・ストラテジー株式会社(著者)販売会社/発売会社:SBクリエイティブ/ 発売年月日:2015/02/01JAN:9784797381078
WordPress Perfect GuideBook 4.x対応版 [ 佐々木恵 ]

WordPress Perfect GuideBook 4.x対応版 [ 佐々木恵 ]

1,814 円 (税込) 送料込
評価 4.5
佐々木恵 ソーテック社wordpress 4.1 4.0 4.x TwentyFifteen ワードプレス 使い方 プラグイン インストール テンプレート ワードプレス パーフェクト ガイドブック ササキ,メグミ 発行年月:2015年02月 ページ数:285p サイズ:単行本 ISBN:9784800710666 佐々木恵(ササキ..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る