بستن تصادفی یک صفحه بدون ارسال فرم نیمه پر شده آزار دهنده است. اخیراً ، یکی از کاربران ما از ما پرسیده است که آیا امکان نمایش پنجره بازشو وجود دارد که عملکرد کاربر را در فرم ها تأیید می کند؟ این کاربران بسیار کوچک هشداردهنده و از بسته شدن تصادفی صفحات با فرمهای نیمه پر شده جلوگیری می کند.

در این آموزش به شما نشان خواهیم داد که چگونه یک پنجره تایید عمل بسته را برای فرم های خود نمایش دهید. وبلاگ وردپرس.

پنجره تأیید مرور چیست؟

فرض کنید یک کاربر در حال نوشتن نظر درباره وبلاگ شما است. او در حال حاضر تعداد زیادی سطر را نوشته است ، اما آنها منحرف می شوند و فراموش می کنند که نظر خود را ارسال کنند. اکنون ، برای مثال با کلیک بر روی پیوند ، تمام محتوایی که وی شروع به نوشتن کرده است از بین می رود.

تأیید مرور به آنها فرصتی می دهد تا نظر خود را تکمیل کنند.

این ویژگی را می توانید از رابط ویرایشگر مقاله / صفحه مشاهده کنید. اگر تغییرات ذخیره نشده ای دارید و می خواهید از صفحه خارج شوید یا مرورگر را ببندید ، یک هشدار پاپ آپ مشاهده خواهید کرد.

بیایید ببینیم که چگونه می توانیم این ویژگی هشدار را به نظرات وردپرس و سایر اشکال در وبلاگ شما اضافه کنیم.

نحوه نمایش پنجره تأیید در فرم های ارسال نشده در وردپرس

برای این آموزش، ما خواهیم بود یک افزونه سفارشی ایجاد کنید. ما قبلاً به شما نشان داده‌ایم که چگونه a پلاگین وردپرس به سرعت.

بیایید شروع.

ابتدا باید یک پوشه جدید در رایانه خود ایجاد کنید و نام آن را "تأیید عمل" بگذارید. در این پوشه باید پوشه دیگری ایجاد کنید و نام آن را js بگذارید.

اکنون یک ویرایشگر متن مانند Notepad باز کرده و یک فایل جدید ایجاد کنید. در داخل ، فقط کد زیر را وارد کنید:

<?php
/**
 * اقدام را تأیید کنید
 * نام پلاگین: اقدام را تأیید کنید
 * URI پلاگین: https://blogpascher.com
 * توضیحات: این افزونه هشداری را به کاربران نشان می دهد که وقتی سعی می کنند دکمه ارسال را در فرم نظر فشار دهند.
 * نسخه: 1.0.0
 * نویسنده: YourNAME
 * URI نویسنده: https://blogpascher.com
 * مجوز: GPL-2.0+
 * URI مجوز: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
تابع 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 را به قسمت جلوی وب سایت شما اضافه می کند.

پیش بروید و این پرونده را به عنوان "تأیید-اقدام" ذخیره کنید.php" در پوشه اقدام اعلام می "(ریشه پلاگین شما).

اکنون باید پرونده JavaScript را ایجاد کنیم که این پلاگین بارگیری شود. یک فایل جدید ایجاد کنید و این کد را داخل آن جای گذاری کنید:

jQuery (سند). آماده (تابع ($) {$ (سند). آماده (تابع () {needToConfirm = false؛ window.onbeforeunload = askConfirm؛})؛ عملکرد askConfirm () {if (needToConfirm) {// قرار دادن خود پیام سفارشی در اینجا برگردانده شود "داده های ذخیره نشده شما از بین می روند."؛}} $ ("# commentform"). تغییر (تابع () {needToConfirm = true؛})؛})

تغییر نام این پرونده ، leaving.js اعلام می"، آن را به" زیر پوشه "منتقل کنید js »از« اقدام اعلام می"

این کد جاوا اسکریپت تشخیص می دهد که کاربر تغییرات ذخیره نشده ای در فرم نظرات داشته است. اگر کاربر بخواهد از صفحه خارج شود ، یک هشدار پاپ آپ نمایش می دهد.

تنها کاری که شما باید انجام دهید اینست که پرونده خود را با استفاده از سرویس گیرنده خود در سرور خود بارگذاری کنید موارد دلخواه FTP. پس از آن ، تنها کاری که شما باید انجام دهید این است که افزونه را از داشبورد خود فعال کنید.

همین. اکنون می توانید از یک مقاله در وب سایت خود بازدید کنید ، سعی کنید یک نظر بنویسید و سپس روی یک لینک کلیک کنید ، یک پنجره مشابه این مورد مشاهده خواهید کرد.

افزودن هشدار در سایر فرم های وردپرس

می توانید از همان کد برای هدف قرار دادن تمام فرم های سایت وردپرس خود استفاده کنید. در اینجا مثالی را در مورد الف به شما نشان خواهیم داد فرم تماس.

در این مثال ما از افزونه استفاده می کنیم WPForms برای ایجاد a فرم تماس. اگر از دیگری استفاده کنید دستورالعمل ها یکسان خواهد بود پلاگین برای فرم تماس در سایت خود.

به صفحه ای که خود را اضافه کرده اید بروید فرم تماس. ماوس را روی اولین فیلد در فرم تماس خود حرکت دهید، کلیک راست کنید، سپس " را انتخاب کنید. بازرسی"، برای دسترسی به کد منبع.

به دنبال خطی که از برچسب شروع می شود <form>. در برچسب فرم ویژگی ID را پیدا خواهید کرد. در این مثال ، شناسه فرم ما است formulaire . شما باید ویژگی ID را کپی کنید.

اکنون ، ویرایش کنید confirmer-leaving.js پرونده را اضافه کنید و بعد از آن ویژگی ID را اضافه کنید " #commentform جدا شده توسط کاما

کد شما باید به صورت زیر باشد:

jQuery (سند). آماده (تابع ($) {$ (سند). آماده (تابع () {needToConfirm = false؛ window.onbeforeunload = askConfirm؛})؛ عملکرد askConfirm () {if (needToConfirm) {// قرار دادن خود پیام سفارشی در اینجا برگردانده شود "داده های ذخیره نشده شما از بین خواهد رفت."؛}} $ ("# commentform، # form"). تغییر (تابع () {needToConfirm = true؛})؛})

تغییرات خود را ذخیره کنید و پلاگین خود را در وبلاگ وردپرس خود نصب کنید.

این برای این آموزش است. امیدوارم به شما کمک کند یک پنجره تأیید pop up به وبلاگ خود اضافه کنید. اگر نکته ای را نمی فهمید ، از پرسیدن سوال دریغ نکنید.