半分記入したフォームを送信せずに誤ってページを閉じるのは面倒です。 最近、あるユーザーから、フォームでのユーザーの操作を確認するポップアップウィンドウを表示できるかどうか尋ねられました。 この小さな小さなアラートは、ユーザーが半分記入されたフォームで誤ってページを閉じるのを防ぎます。

このチュートリアルでは、フォームのクローズ アクション確認ウィンドウを表示する方法を示します。 WordPressのブログ.

閲覧確認ポップアップとは

ユーザーがブログにコメントを書いているとします。 彼はすでにかなりの数の行を書いていますが、彼らは気が散ってコメントを提出するのを忘れます。 たとえば、リンクをクリックすると、彼が書き始めたすべてのコンテンツが失われます。

閲覧確認により、コメントを完了する機会が与えられます。

この機能は、記事/ページエディタのインターフェイスから確認できます。 保存されていない変更があり、ページを終了するかブラウザを閉じようとすると、ポップアップ警告が表示されます。

ブログのWordPressコメントやその他のフォームにこの警告機能を追加する方法を見てみましょう。

WordPressの未送信フォームに確認ポップアップを表示する方法

このチュートリアルでは、意志 カスタムプラグインを作成する. を作成する方法はすでに説明しました。 WordPressのプラグイン すぐに。

のは、始めましょう。

まず、コンピューター上に新しいフォルダーを作成し、「confirm-action」という名前を付ける必要があります。 このフォルダに別のフォルダを作成し、jsという名前を付ける必要があります。

次に、メモ帳などのテキストエディタを開き、新しいファイルを作成します。 内部に、次のコードを貼り付けるだけです。

<?php
/**
 * Confirmer Action
 * Plugin Name: Confirmer Action
 * Plugin URI:  https://blogpascher.com
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form. 
 * Version:     1.0.0
 * Author:      VotreNOM
 * Author URI:  https://blogpascher.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
} 
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

このphp関数は、単にjavascriptファイルをWebサイトのフロントエンドに追加します。

先に進み、このファイルを「confirm-action」として保存します.php" フォルダー内 アクションを確認 「（プラグインのルート）。

次に、このプラグインがロードするJavaScriptファイルを作成する必要があります。 新しいファイルを作成し、このコードを次の中に貼り付けます。

jQueryの（ドキュメント）.ready（関数（$）{$（ドキュメント）.ready（関数（）{needToConfirm = falseは、window.onbeforeunload = askConfirm;}）;この関数はaskConfirm（）{）needToConfirm（場合{//あなたを入れてカスタムメッセージは、ここでは、 "あなたの未保存のデータは失われます。" を返す;}} $（ "＃のCommentForm"）の交換（関数（）{needToConfirm =真;}）}）

このファイルの名前を変更します -leaving.jsを確認"、"サブフォルダ "に移動します js »から« アクションを確認"。

このJavaScriptコードは、ユーザーがコメントフォームに未保存の変更を加えたかどうかを検出します。 ユーザーがページを終了しようとすると、ポップアップ警告が表示されます。

あなたが今しなければならないのはあなたのクライアントを使ってあなたのサーバーにあなたのファイルをアップロードすることです FTPお気に入り。 その後、ダッシュボードからプラグインをアクティブ化するだけです。

それで全部です。 これで、Webサイトの記事にアクセスし、コメントを書き込んでからリンクをクリックすると、次のようなポップアップが表示されます。

他のWordPressフォームへの警告の追加

同じコードを使用して、WordPress サイトのすべてのフォームをターゲットにすることができます。 ここでは、 お問い合わせフォーム.

この例では、プラグインを使用しています WPForms を作成するには お問い合わせフォーム. 別のものを使用する場合、手順は同じです。 お問い合わせフォームプラグイン あなたのサイト上で。

を追加したページに移動します お問い合わせフォーム。 連絡先フォームの最初のフィールドにマウスを移動し、右クリックして「」を選択します。 検査「、ソースコードにアクセスします。

タグで始まる行を検索します <form>。 フォームタグには、ID属性があります。 この例では、フォームのIDは次のとおりです。 formulaire 。 ID属性をコピーする必要があります。

今、編集 confirmer-leaving.js ファイルを作成し、「」の後にID属性を追加します。 #commentform コンマで区切られます。

コードは次のようになります。

jQueryの（ドキュメント）.ready（関数（$）{$（ドキュメント）.ready（関数（）{needToConfirm = falseは、window.onbeforeunload = askConfirm;}）;この関数はaskConfirm（）{）needToConfirm（場合{//あなたを入れてカスタムメッセージここでは、 "あなたの未保存のデータは失われます。" を返す;}} $（ "＃CommentForm、フォーム＃"）の交換（関数（）{needToConfirm =真;}）}）

変更を保存し、 WordPressのブログにあなたのプラグインをインストールします.

このチュートリアルは以上です。 それがあなたのブログにポップアップ確認ウィンドウを追加するのに役立つことを願っています。 要点がわからない場合は、遠慮なく質問してください。