WordPressでページ離脱時にアラートを出す方法【jQuery】

フォームの入力途中でページ離脱時にアラートを表示するのはユーザーの利便性を高めるのに必要です。

間違ってページを離脱されてしまい、面倒だからやめとこうとなるとサイト運営側も損失なので防がなくてはなりません。

ここではWordPressでページ離脱時にアラートを出す方法について解説します。

Scripts n Stylesプラグインの導入

まずWordPressの個別ページや固定ページなどではjQueryなどのスクリプトは直接編集画面には書けません。

もし編集画面に直接スクリプトを入力し、ビジュアルエディターを開いた後にもう一度HTMLエディターに戻ると自動補完で不要なタグなどが挿入されてしまいます。

そこで各ページの編集画面でスクリプトを扱うために「Scripts n Styles」というプラグインをインストールします。

「プラグイン」ー＞「新規追加」と進んでプラグイン名で検索すると検索結果に次のようなプラグインが出てくると思うので「今すぐインストール」をクリックしてインストールしてください。

以下のURLからダウンロードして使うことも可能です。

https://ja.wordpress.org/plugins/scripts-n-styles/

インストールして有効化すると各ページの編集画面の下に次のようなスクリプトの入力欄が現れます。

スクリプトを入力できる箇所は次の２か所です。

• headタグ内
• bodyタグ内

なるべく記事の内容とは関係ないスクリプトは本文とは切り離した方が良いので基本的にスクリプトはheadタグ内に書くのが良いと思います。

スクリプトを入力して「Update Scripts」ボタンを押すとスクリプトが保存され、headタグ内で実行することができます。

このプラグインを使えばjQueryが使えるのですが１つ注意点があります。

それはWordPressでjQueryで使う場合は次のように$(ドル)記号は使えないということです。

$(function(){
  $(".btn").on("click", function(){
    alert("clicked!");
  });
});

この$記号はjQuery関数の呼び出しを省略しているだけなので「$(".btn")」と「jQUery(".btn")」は同じ意味になります。

しかしWordPressではこの$記号は使えないので次のように省略せずに書く必要があります。

jQuery(function(){
  jQuery(".btn").on("click", function(){
    alert("clicked!");
  });
});

ページ離脱アラートを表示するには

ページ離脱アラートを表示するにはウィンドウで「beforeunload」というイベントが起こった時にイベント処理を追加する次のようなコードを書きます。

jQuery(function(){
  jQuery(window).on('beforeunload', function(){
    return "";
  });
});

このスクリプトを実行した状態で他のページに行こうとしたりウィンドウを閉じようとすると次のようなアラートダイアログが表示されます。(Chromeの場合)

使用が変わる前は次のようにアラートに表示するメッセージを指定することも出来たようです。

jQuery(window).on('beforeunload', function(){
  return "このページを離れてもいいですね？";
});

しかし今はIEでしかオリジナルメッセージが表示できず、その他のブラウザでは固定のメッセージダイアログが表示されるようです。

入力途中の離脱でアラートを表示するには

フォームの入力途中でユーザーがページを離れようとした場合にアラートを表示するかどうかはフラグ(真偽値)で管理します。

例えば次のようなフォームがあるとします。

<form>
  <input type="text" placeholder="何か入力"><br />
  <button type="submit">送信</button><br />
</form>

そしてページ離脱時にアラートを表示するために次のようなスクリプトを書きます。

jQuery(function(){
  var isChanged = false;
	
  jQuery(window).on('beforeunload', function(){
    if(isChanged){
      return "";
    }
  });
	
  jQuery("form input, form textarea, form select").change(function(){
    isChanged = true;
  });
  jQuery("button[type=submit]").on("click", function(){
    isChanged = false;
  });
});

このスクリプトでは「isChanged」というフラグ変数でフォームへの入力があったかどうか判断します。

まずフォームの中のinput要素(１行テキストやチェックボックス)、textarea要素、select要素(セレクトボックス)がユーザーの操作で変化したときにフラグをtrueにしています。

jQuery("form input, form textarea, form select").change(function(){
    isChanged = true; 
});

ただこれだと送信ボタンを押したときもアラートが表示されてしまうので「type="submit"」を指定してあるボタンがクリックされた場合は次のようにフラグをfalseにしています。

jQuery("button[type=submit]").on("click", function(){
    isChanged = false;
});

実際にどのように動作するかは以下のフォームに何か入力してリロードなどすると分かると思います。

以上WordPressでページ離脱時にアラートを出す方法について解説しました。フォームを作るときなどに役立つと思います。