تصادفی بستن یک صفحه بدون ارسال نظر خود یا با فرم پر از نیمه ، آزار دهنده است. اخیراً ، یکی از کاربران ما از ما پرسیده است که آیا امکان نمایش یک پنجره ناوبری تأیید شده به خوانندگان آنها وجود دارد؟ این پنجره کوچک کوچک به کاربران هشدار می دهد و از ترک تصادفی نیمه پر و بدون فرم ارسالی آنها جلوگیری می کند. در این مقاله ، ما به شما نشان خواهیم داد که چگونه پنجره ناوبری تأیید شده را برای فرم های وردپرس نشان دهید.
پنجره تأیید پیمایش چیست؟ h4>
فرض کنیم یک کاربر در حال نوشتن نظر درباره وبلاگ شما است. آنها قبلاً چند سطر نوشته اند ، اما حواسشان پرت می شود و فراموش می کنند که نظر بدهند. اگر آنها مرورگر خود را ببندند ، نظر از بین می رود.
پنجره ناوبری تأیید به آنها این فرصت را می دهد تا نظر خود را به پایان برسانند.
این ویژگی را می توانید در صفحه ویرایشگر پست وردپرس مشاهده کنید. اگر تغییرات ذخیره نشده دارید و می خواهید صفحه را ترک کنید یا مرورگر را ببندید ، یک پنجره هشدار مشاهده خواهید کرد.
بیایید ببینیم که چگونه می توانیم این ویژگی هشدار را به نظرات وردپرس و سایر فرم های سایت شما اضافه کنیم.
نمایش پنجره تأیید پیمایش برای فرمهای ارسال نشده در وردپرس h4>
برای این آموزش ، ما یک پلاگین سفارشی ایجاد خواهیم کرد ، اما نگران نباشید ، می توانید افزونه را در انتهای این آموزش بارگیری کنید تا در وب سایت خود نصب کنید.
با این حال ، برای درک بهتر کد ، از شما می خواهیم که پلاگین خود را ایجاد کنید. می توانید این کار را در نصب محلی یا سایت صحنه سازی .
شروع کنیم
ابتدا باید یک پوشه جدید در رایانه خود ایجاد کنید و نام آن را تأیید خروج بگذارید. در داخل پوشه تأیید خروج ، باید پوشه دیگری ایجاد کنید و نام آن را js بگذارید.
اکنون یک ویرایشگر متن ساده مانند Notepad باز کرده و یک فایل جدید ایجاد کنید. در داخل ، کد زیر را به راحتی وارد کنید:
این عملکرد php به سادگی یک فایل JavaScript را به قسمت جلوی وب سایت شما اضافه می کند.
پیش بروید و این پرونده را به عنوان
تأیید-خروج. php
در داخل پوشه اصلی تأیید خروج ذخیره کنید.اکنون باید پرونده JavaScript را که این پلاگین بارگیری می کند ایجاد کنیم.
یک فایل جدید ایجاد کنید و این کد را درون آن جای گذاری کنید:
jQuery (سند). آماده (تابع ($) { $ (سند). آماده (تابع () { needToConfirm = false؛ window.onbeforeunload = askConfirm؛ }) تابع askConfirm () { اگر (needToConfirm) { // پیام سفارشی خود را اینجا قرار دهید Return "داده های ذخیره نشده شما از بین می روند."؛ } } $ ("# commentform"). تغییر (تابع () { needToConfirm = درست است؛ }) })این کد جاوا اسکریپت تشخیص می دهد که کاربر تغییرات ذخیره نشده ای در فرم نظر داشته باشد. اگر کاربری بخواهد از صفحه دور شود یا پنجره را ببندد ، یک پنجره هشدار دهنده نشان داده می شود.
شما باید این پرونده را به عنوان
تأیید-خروج.js
در داخل پوشه js ذخیره کنید.پس از ذخیره هر دو فایل ، ساختار پوشه شما به این شکل است:
اکنون شما باید با استفاده از سرویس گیرنده FTP . به راهنمای ما در نحوه استفاده از FTP برای بارگذاری پرونده های وردپرس .
پس از اتصال ، باید پوشه
تأیید-خروج را در پوشه
/ wp-περιεχόμενο / پلاگین /
در وب سایت خود بارگذاری کنید.
بعد از آن باید وارد وردپرس شوید منطقه مدیریت و از صفحه افزونه ها بازدید کنید. پلاگین «تأیید ترک» را در لیست افزونه های نصب شده پیدا کنید و روی پیوند «فعال کردن» در زیر آن کلیک کنید.
این همه است. اکنون می توانید به هر پستی در وب سایت خود سر بزنید ، در هر قسمت از فرم نظر متن را بنویسید و سپس بدون ارسال مطلب صفحه را ترک کنید. یک پنجره ظاهر می شود ، به شما هشدار می دهد که می خواهید صفحه ای را با تغییرات ذخیره نشده ترک کنید.
افزودن هشدار به سایر اشکال در وردپرس h4>
برای هدف قرار دادن هر فرم در سایت وردپرس خود می توانید از همان کد کد استفاده کنید. در اینجا ما نمونه ای از استفاده از آن را برای هدف قرار دادن فرم تماس به شما نشان خواهیم داد.
در این مثال ، ما از پلاگین WPForms برای ایجاد فرم تماس استفاده می کنیم. اگر از پلاگین فرم تماس در وب سایت شما.
به صفحه ای که فرم تماس خود را در آن اضافه کرده اید بروید. ماوس را به قسمت اول فرم تماس خود ببرید ، کلیک راست کرده و سپس از فهرست مرورگر Inspect را انتخاب کنید.
خطی را که با برچسب
شروع می شود ، پیدا کنید. در برچسب فرم ، ویژگی 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/.