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

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

Confirm navigation popup when user leaves a form unsubmitted

پنجره تأیید پیمایش چیست؟ h4>

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

پنجره ناوبری تأیید به آنها این فرصت را می دهد تا نظر خود را به پایان برسانند.

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

Unsaved changes warning popup in WordPress post editor

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

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

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

با این حال ، برای درک بهتر کد ، از شما می خواهیم که پلاگین خود را ایجاد کنید. می توانید این کار را در نصب محلی یا سایت صحنه سازی .

شروع کنیم

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

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


این عملکرد php به سادگی یک فایل JavaScript را به قسمت جلوی وب سایت شما اضافه می کند.

پیش بروید و این پرونده را به عنوان تأیید-خروج. php در داخل پوشه اصلی تأیید خروج ذخیره کنید.

اکنون باید پرونده JavaScript را که این پلاگین بارگیری می کند ایجاد کنیم.

یک فایل جدید ایجاد کنید و این کد را درون آن جای گذاری کنید:

jQuery (سند). آماده (تابع ($) {

$ (سند). آماده (تابع () {
    needToConfirm = false؛
    window.onbeforeunload = askConfirm؛
})

تابع askConfirm () {
    اگر (needToConfirm) {
        // پیام سفارشی خود را اینجا قرار دهید
        Return "داده های ذخیره نشده شما از بین می روند."؛
    }
}
 
$ ("# commentform"). تغییر (تابع () {
    needToConfirm = درست است؛
})

 })

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

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

پس از ذخیره هر دو فایل ، ساختار پوشه شما به این شکل است:

Plugin file structure

اکنون شما باید با استفاده از سرویس گیرنده FTP . به راهنمای ما در نحوه استفاده از FTP برای بارگذاری پرونده های وردپرس .

پس از اتصال ، باید پوشه تأیید-خروج را در پوشه / wp-περιεχόμενο / پلاگین / در وب سایت خود بارگذاری کنید.

Uploading plugin files to your WordPress site

بعد از آن باید وارد وردپرس شوید منطقه مدیریت و از صفحه افزونه ها بازدید کنید. پلاگین «تأیید ترک» را در لیست افزونه های نصب شده پیدا کنید و روی پیوند «فعال کردن» در زیر آن کلیک کنید.

Activate plugin

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

popup notification warning user about unsaved changes

افزودن هشدار به سایر اشکال در وردپرس h4>

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

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

به صفحه ای که فرم تماس خود را در آن اضافه کرده اید بروید. ماوس را به قسمت اول فرم تماس خود ببرید ، کلیک راست کرده و سپس از فهرست مرورگر Inspect را انتخاب کنید.

Finding form ID

خطی را که با برچسب

شروع می شود ، پیدا کنید. در برچسب فرم ، ویژگی ID را پیدا خواهید کرد.

در این مثال ، شناسه فرم ما wpforms-form-170 است. شما باید ویژگی ID را کپی کنید.

اکنون پرونده confirm-lënë.js را ویرایش کرده و ویژگی ID را بعد از #commentform اضافه کنید.

مطمئن شوید که #commentform و شناسه فرم خود را با کاما جدا کنید. همچنین باید علامت # را به عنوان پیشوند به مشخصه ID فرم خود اضافه کنید.

کد شما اکنون به این شکل خواهد بود:

jQuery (سند). آماده (تابع ($) {

$ (سند). آماده (تابع () {
    needToConfirm = false؛
    window.onbeforeunload = askConfirm؛
})

تابع askConfirm () {
    اگر (needToConfirm) {
        // پیام سفارشی خود را اینجا قرار دهید
        Return "داده های ذخیره نشده شما از بین می روند."؛
    }
}

$ ("# commentform، # wpforms-form-170"). تغییر (تابع () {
    needToConfirm = درست است؛
})

 })

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

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

می توانید تأیید پلاگین را از اینجا بارگیری کنید این فقط فرم نظر را هدف قرار می دهد ، اما می توانید افزونه را ویرایش کنید تا فرمهای دیگر را هدف قرار دهید.

این همه ، امیدواریم این مقاله به شما کمک کند تا پنجره ناوبری تأیید شده برای فرم های وردپرس را نشان دهید. همچنین ممکن است بخواهید این 8 بهترین آموزش jQuery برای مبتدیان وردپرس .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-show-confirm-navigation-popup-for-forms-in-wordpress/.

دیدگاهتان را بنویسید