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. テスト環境については文末に記載しています

【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の教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

  • 価   格:¥ 1,706
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4295000795
    インプレス

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

  • 価   格:¥ 1,685
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4797395168
    SBクリエイティブ

はじめてのブログをワードプレスで作るための本

はじめてのブログをワードプレスで作るための本

  • 価   格:¥ 1,944
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4798052817
    秀和システム

CS Shop
WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

  • 価   格:3,002 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:【ご注意:本書は固定レイアウト型の電子書籍です。ビューア機能が制限されたり、環境により表示が異なる場合があります】Webデザイナー養成講座シリーズは,プロのデザイナーとして仕事をする上で,必須のスキルを身につけるためのシリーズです。本書では,WordPressをこれ..
ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

  • 価   格:2,592 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:<p>ハイ・クオリティなビジネスサイトを作る</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>プログラミングの知識..
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

  • 価   格:3,002 円 (税込) 送料込
  • 販 売 者: 楽天ブックス
  • 評   価: 評価 5
  • 商品の概要:Webデザイナー養成講座 中島真洋著 ロクナナワークショップ監修 技術評論社WordPress シゴトノゲンバデサッ トツカエルデザインキョウカショ ナカシマ マサヒロ チョ ロクナナワークショップ カンシュウ 発行年月:2015年06月 ページ数:368p サイズ:単行本 ISBN:97847741..
楽天ウェブサービスセンター CS Shop

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

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

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

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

メニューを表示できません

ページ先頭へ