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つです。複数のポップアップ設定(ショートコード)が同一ページ上にある場合、先に読み込まれたショートコードのポップアップが表示されます。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

2,894 円 (税込) 送料込
<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

2,570 円 (税込) 送料込
あらゆるビジネスサイトで使える企画・設計・制作・運 田中勇輔 翔泳社ウェブ タントウシャ ノ タメノ ワードプレス ガ ワカル ホン タナカ,ユウスケ 発行年月:2015年09月15日 ページ数:287p サイズ:単行本 ISBN:9784798142708 田中勇輔(タナカユウスケ) Webディレク..
楽天ウェブサービスセンター CS Shop

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

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

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

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