WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

自由なタイミングでポップアップ画面を表示できるプラグイン「Call To Action Popup」

公開日:2017年2月10日 アフィリエイト コンテンツ追加


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

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

  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のプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

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

を参照ください

有効化すると、ダッシュボードに「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を記述する   }
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


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

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

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

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

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

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

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

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

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです
参考価格:1,738
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】