今回はWordpressのプラグイン「WP Popups」を使って、記事にポップアップウィンドウを表示させる方法を説明します。
ポップアップウィンドウに関し、下記のような設定と表示の変更が可能になります
- 記事にぼかしや暗転を入れつつ手前にウィンドウ表示
- ポップアップのアニメーション変更
- ウィンドウのサイズ
- ウィンドウに表示させる内容
今回は下の動画のように、記事カラムと被らないような形でFacebookのシェアボタンをポップアップさせてみました。
カーソルを下へスクロールすると右下にウィンドウが表示されたことが分かるかと思います。
次のセクションで、プラグインの設定方法を説明していきます。
WP Popupsを設定する
プラグインにはWP Popupsというサービスを利用しています。この記事で使う範囲では無料で利用が可能です。
まだ邦訳がありませんが、さほど複雑ではありませんのでご心配は不要です。
まずはWordpressのプラグイン画面からWP Popupsをインストールしてみましょう。
新しいポップアップを作成する
インストールしたWP Popupsを開くと、下記のような画面になります。
画面の意味は下図のとおりです。今回は「Transparent」というテンプレートを選択しました。
左側ペインで「Content」を選択します。テキストモードにし、htmlコードを入力することで表示されます。できあがりのイメージはビジュアルモードに切り替えることで確認できます。
次に「Apppearance（外観）」を選択します。設定できるパラメータは
- Popup Position：表示位置
- Popup Animation：ウィンドウの出現方法
- Popup Box：ウィンドウの横幅、余白、高さの自動調整
- Backgrounds/Colors：ウィンドウを記事に重ねて表示させるか。ウィンドウの背景色
- Popup Border：ウィンドウの境界線タイプ
- Popup Shadow：ウィンドウの影。X軸Y軸のサイズと、ぼかしレベル、内向き外向きなどを設定
- Close Button：ウィンドウを閉じるための✗マークの大きさと色
- Custom CSS：自分でCSSを書きたい場合（無視でも大丈夫です。この記事ではCSSには触れていません）
次は「Display Rule」です。複数のルールの組み合わせが可能です。例えば
- “Page Type” “not equal to” “Front Page”で「トップページには表示しない」
- “Desktop” “is equal to” “True”で「PCに表示」
となります。また、この二つをAND条件で結ぶことで、「トップページ以外、かつ閲覧デバイスがPCであるときのみ表示」とフィルタを掛けることが可能です。
モバイルではポップアップさせたくない時に利用ください。
ちなみに、有料版にアップグレードすることで特定の時間帯や曜日に出し分けるロジックも追加される模様です。
最後に「Setting」です（「Email Marketing」は有料版のみの機能）。
設定できる項目は2つです。
- Triggers：どんな条件でポップアップを出すか 例）読み込み後3秒経過、ページを50％以上読み込む、など
- Cookies/Close：一度ウィンドウを消したり、コンバージョン（ページを遷移したり、リンクをクリックするなどの動作）したユーザに対し再度ウィンドウを表示させるまでの猶予
まとめ
WordPressでプラグインを使ってポップアップウィンドウを表示させる方法を説明しました。非常に簡単に実装することができたかと思います。
この記事ではFacebookのリンクを表示しましたが、オススメの記事や、ランディングページ、ダウンロードコンテンツなどユーザをコンバージョンさせたいページを設定すると効果があるかと思います。
是非いろいろなパターンを試してください。
今回は以上です。お読みいただきありがとうございました。
コメント