WordPress 離脱防止ポップアップ＋カウントダウンタイマー

PHP(functuon.php)

function popup($atts, $content){ //パラメータ初期化 extract(shortcode_atts(array( 'enabled' => 1, 'modal_id' => 'ss-popup-banner', 'init_display' => 1, 'banner_url' => '', 'link_url' => '', 'modal_option' => '{escapeClose: true, clickClose: true, showClose: true,}', 'onpopup' => '', 'onclick' => '', ), $atts)); * 入力パラメータチェック if($content == null && $banner_url == null){ return null; } if($enabled == 0){ return null; } if($init_display != 1){ $init_display = 0; }else{ $init_display = 1; } * 囲みの中の文字列があればテキスト型。そのテキストをポップアップに。 * なければ画像型。引数で指定されたURLを使う $content_check = trim(strip_tags($content)); //囲みテキストからタグを除く。コメントアウトされていれば空になり無効になる if($content_check != null){ //囲みテキストが空じゃない $popup_html =<<<EOF <!-- ポップアップバナー(囲みテキスト) --> <div id="{$modal_id}" class="modal ss-popup-banner-text"> {$content} </div> <!-- /ポップアップバナー --> EOF; }else{ $link_url = replace_req_params(array("encode" => "urlencode"), $link_url); //リンクURLパラメータ変換 $banner_url = replace_req_params(array("encode" => "urlencode"), $banner_url); //バナーURL変換 $popup_html =<<<EOF <!-- ポップアップバナー(画像型) --> <div id="{$modal_id}" class="modal ss-popup-banner-image"> <a style="display: block; margin: auto;" href="{$link_url}" target="_blank" onClick="{$onclick}"> <img style=" width: 100%; margin: 0; max-width: 500px;" src="{$banner_url}" /> </a> </div> <!-- /ポップアップバナー(画像型) --> EOF; } * 出力するHTMLを設定 $html =<<<EOF <style> .modal{ z-index: 3; padding: 0; border-radius: 0; display: none; /* width: initial; */ } .modal.ss-popup-banner-image{ /* width: auto; */ } .modal.ss-popup-banner-text{ } .modal img, modal a{ display: block; } .blocker{ z-index: 2; } .modal a.close-modal{ width: 2.4rem; height: 2.4rem; opacity: 0.5; top: -2rem; right: -2rem; z-index: -1; } </style> <script> load_count = 0; // ライブラリを読み込んだ回数。グローバル jQuery(function(){ var init_display = $init_display; /* ============================================== * 外部ライブラリjquery.modalを動的にロード * ============================================== */ if(typeof jQuery.modal != "function" && load_count == 0){ /* 初回のみライブラリを読み込む */ ++load_count; var src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js'; var script = jQuery('<script>').attr({ 'type': 'text/javascript', 'src': src, }); jQuery('head')[0].appendChild(script[0]); console.log("load " + src); var link = jQuery('<link>').attr({ 'rel': 'stylesheet', 'href': 'https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css', }); jQuery('head')[0].appendChild(link[0]); } var count = 0; /* ============================================== * 外部ライブラリが実行されている時だけ一度実行するようインターバル実行 * ============================================== */ var timer = setInterval(function(){ ++count; if(typeof jQuery.modal == "function"){ //console.log("■開始 count=" + count + "回目 ----------------------------------------------"); clearInterval(timer); /* 最初の実行したらインターバル実行キャンセル */ var modal_option = {$modal_option}; if(init_display == 1){ console.log("init_display=1"); jQuery("#{$modal_id}").modal(modal_option); {$onpopup}; } } }, 100); }); </script> {$popup_html}EOF; $html = do_shortcode($html); //ショートコードの中のショートコードを展開 return $html; }add_shortcode('popup', 'popup'); /* * ********************************** * 離脱防止ポップアップのトリガー設置 * ********************************** */ function popup_stop_exit($atts, $content){ //パラメータ初期化 $new_atts = shortcode_atts(array( 'enabled' => 1, 'modal_id' => 'ss-popup-banner', 'init_display' => 0, 'banner_url' => '', 'link_url' => '', 'modal_option' => '{escapeClose: true, clickClose: false, showClose: true,}', 'onpopup' => '', 'onclick' => '', 'popup_after_sec' => 0, 'popup_slidein_selector' => '', 'popup_cursorout' => 0, 'popup_background' => 1, 'popup_browserback' => 1, 'popup_page_trans' => 1, 'page_trans_through_links' => '', ), $atts); extract($new_atts); * 入力パラメータチェック if($enabled == "0"){ return null; } //ポップアップ本体のショートコードを実行してHTML取得 $popup_html = popup($new_atts, $content); if($popup_html == null){ //popup自体が無効なら終了 return null; } //popup_after_secが数字でないなら無効 if(is_numeric($popup_after_sec) == false){ $popup_after_sec = 0; } if($popup_cursorout != 1){ $popup_cursorout = 0; } if($popup_background != 1){ $popup_background = 0; } if($popup_browserback != 1){ $popup_browserback = 0; } if($popup_page_trans != 1){ $popup_page_trans = 0; } //page_trans_through_links_selectorで指定された除外パスをjqueryセレクタに変換 $page_trans_through_links_selector = ""; if($popup_page_trans == 1) { $links = explode(",", $page_trans_through_links); $i = 0; foreach ($links as $loop_link) { if ($i > 0) { $page_trans_through_links_selector .= ","; } $page_trans_through_links_selector .= "a[href*=\"{$loop_link}\"]"; ++$i; } } * 出力するHTMLを設定 $html =<<<EOF {$popup_html}<script> //ブラウザの履歴を仮想的に操作 function addHistory(){ let hash = location.hash; if(hash != '#back') { history.pushState(null,null,location.href); history.replaceState(null,null,'#back'); } } $(function(){ var modal_option = $modal_option; var popup_cursorout = {$popup_cursorout}; var popup_background = {$popup_background}; var popup_browserback = {$popup_browserback}; var popup_page_trans = {$popup_page_trans}; var popup_after_sec = {$popup_after_sec}; var popup_slidein_selector = "{$popup_slidein_selector}"; //「画面からフォーカスが外れた(バックグラウンドになった)らポップアップ」の処理 if(popup_background == 1){ $(window).on("blur", function() { console.log("blur"); jQuery("#{$modal_id}").modal(modal_option); {$onpopup}; }); } //「ブラウザバックしたらポップアップ」の処理 if(popup_browserback == 1){ addHistory(); /* 履歴を追加 */ /* 戻るを押したら(設定した履歴が消えたら)実行する */ $(window).on("popstate", function() { console.log("history.popstate"); if(location.hash != "#back"){ jQuery("#{$modal_id}").modal(modal_option); {$onpopup}; } }); } //「リンクのクリックによる移動や画面を閉じる等でブラウザアラートを出す」処理 ※ポップアップは「キャンセル」選択後 if(popup_page_trans == 1){ /* 目的の遷移の場合はbeforeunloadをオフに */ $('{$page_trans_through_links_selector},a[href=""],a[href^="#"]').on('click', function(e) { console.log("beforeunload off!!!"); $(window).off('beforeunload'); }); /* リンクによるページの移動やウィンドウタブを閉じる場合ブラウザ警告を出す */ $(window).on("beforeunload", function() { console.log("beforeunload"); jQuery("#{$modal_id}").modal(modal_option); {$onpopup}; return "このページから移動してよろしいですか？"; /* 空でないreturn必要 */ }); } }); </script> EOF; return $html; }add_shortcode('popup_stop_exit', 'popup_stop_exit');