يعد إغلاق الصفحة عن طريق الخطأ دون إرسال النموذج نصف المملوء أمرًا مزعجًا. سألنا أحد مستخدمينا مؤخرًا عما إذا كان من الممكن عرض نافذة منبثقة تؤكد إجراء المستخدم على النماذج؟ هذا التنبيه الصغير جدًا للمستخدمين ويمنعهم من إغلاق الصفحات بطريق الخطأ بنماذج نصف مملوءة.

في هذا البرنامج التعليمي ، سنوضح لك كيفية عرض نافذة تأكيد إغلاق الإجراء لنماذجك. بلوق وورد.

ما هي نافذة منبثقة لتأكيد التصفح

افترض أن أحد المستخدمين يكتب تعليقًا على مدونتك. لقد كتب بالفعل الكثير من السطور ، لكنهم يتشتت انتباههم وينسون إرسال التعليق. الآن ، بالنقر فوق ارتباط على سبيل المثال ، سيتم فقد كل المحتوى الذي بدأ في كتابته.

يمنحهم تأكيد التصفح فرصة لإكمال تعليقهم.

يمكنك رؤية هذه الميزة من واجهة محرر المقالة / الصفحة. إذا كان لديك أي تغييرات غير محفوظة ، وحاولت الخروج من الصفحة أو إغلاق المتصفح ، فسترى تحذيرًا منبثقًا.

دعونا نرى كيف يمكننا إضافة ميزة التحذير هذه على تعليقات WordPress وغيرها من النماذج على مدونتك.

كيفية عرض نافذة منبثقة للتأكيد على النماذج التي لم يتم تقديمها في WordPress

لهذا البرنامج التعليمي، ونحن سوف إنشاء ملحق مخصص. لقد أوضحنا لك بالفعل كيفية إنشاء ملف وورد البرنامج المساعد بسرعة.

دعونا نبدأ.

تحتاج أولاً إلى إنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك وتسميته "تأكيد الإجراء". في هذا المجلد ، تحتاج إلى إنشاء مجلد آخر وتسميته js.

افتح الآن محرر نصوص مثل Notepad وأنشئ ملفًا جديدًا. في الداخل ، فقط الصق الكود التالي:

<?php
/**
 * تأكيد الإجراء
 * اسم البرنامج المساعد: تأكيد الإجراء
 * عنوان URI للمكوّن الإضافي: https://blogpascher.com
 * الوصف: يعرض هذا البرنامج المساعد تحذيرًا للمستخدمين عند محاولتهم نسيان الضغط على زر الإرسال في نموذج التعليق.
 * الإصدار: 1.0.0
 * المؤلف: اسمك
 * عنوان URI للمؤلف: https://blogpascher.com
 * الترخيص: GPL-2.0+
 * عنوان URI للترخيص: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
الدالة bpc_confirm_leaving_js() {

     wp_enqueue_script( 'تأكيد المغادرة', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

تضيف وظيفة php هذه ببساطة ملف جافا سكريبت إلى الواجهة الأمامية لموقع الويب الخاص بك.

انطلق واحفظ هذا الملف باسم "تأكيد الإجراء.php" في المجلد تأكيد العمل "(جذر البرنامج المساعد الخاص بك).

نحتاج الآن إلى إنشاء ملف JavaScript الذي سيتم تحميل هذا المكون الإضافي. أنشئ ملفًا جديدًا والصق هذا الرمز بداخله:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false؛ window.onbeforeunload = askConfirm؛})؛ function askConfirm () {if (needToConfirm) {// ضع تغيير الرسالة (function () {needToConfirm = true؛})؛}) ("# commentform").

إعادة تسمية هذا الملف تأكيد، leaving.js"، انقله إلى" المجلد الفرعي " js "من" تأكيد العمل".

يكتشف كود JavaScript هذا ما إذا كان المستخدم لديه تغييرات غير محفوظة في نموذج التعليقات. إذا حاول المستخدم الخروج من الصفحة ، فسيعرض تحذيرًا منبثقًا.

كل ما عليك فعله الآن هو تحميل ملفك إلى خادمك باستخدام عميلك FTP المفضلة. بعد ذلك ، كل ما عليك فعله هو تنشيط المكون الإضافي من لوحة القيادة.

هذا كل شيئ. يمكنك الآن زيارة مقال على موقع الويب الخاص بك ، حاول كتابة تعليق ثم النقر فوق ارتباط ، ستلاحظ نافذة منبثقة مشابهة لهذه.

إضافة تحذير على نماذج ووردبريس الأخرى

يمكنك استخدام نفس الرمز لاستهداف جميع النماذج على موقع WordPress الخاص بك. هنا سوف نعرض لك مثالاً على ملف نموذج الاتصال.

في هذا المثال ، نستخدم المكون الإضافي WPForms لخلق نموذج الاتصال. ستكون التعليمات هي نفسها إذا استخدمت أخرى نموذج الاتصال المساعد على موقع الويب الخاص بك.

انتقل إلى الصفحة التي قمت بإضافة الخاص بك نموذج الاتصال. حرك الماوس فوق الحقل الأول في نموذج الاتصال الخاص بك، وانقر بزر الماوس الأيمن، ثم حدد " فحص، للوصول إلى شفرة المصدر.

العثور على السطر الذي يبدأ ب علامة <form>. في علامة النموذج ستجد سمة المعرف. في هذا المثال ، المعرف الخاص بنموذجنا هو formulaire . يجب عليك نسخ سمة المعرف.

الآن ، تحرير confirmer-leaving.js ملف وإضافة سمة المعرف بعد " #commentform مفصولة بفاصلة.

يجب أن يبدو الرمز الخاص بك كما يلي:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false؛ window.onbeforeunload = askConfirm؛})؛ function askConfirm () {if (needToConfirm) {// ضع $ message ("# commentform، # form"). change (function () {needToConfirm = true؛})؛})

حفظ التغييرات و تثبيت البرنامج المساعد الخاص بك على وورد بلوق.

هذا كل شيء في هذا البرنامج التعليمي. آمل أن يساعدك في إضافة نافذة تأكيد منبثقة إلى مدونتك. لا تتردد في طرح الأسئلة إذا لم تفهم نقطة ما.