Bir sayfayı yanlışlıkla doldurulmuş formunuzu göndermeden kapatmak can sıkıcıdır. Kısa süre önce, kullanıcılarımızdan biri bize formlarda kullanıcı eylemini onaylayan bir açılır pencere görüntülemenin mümkün olup olmadığını sordu. Bu küçük küçük, kullanıcıları uyarır ve sayfaları yanlışlıkla doldurulmuş formlarla kapatmalarını önler.

Bu öğreticide, formlarınız için bir kapatma eylemi onay penceresinin nasıl görüntüleneceğini göstereceğiz. WordPress blog.

Göz atma onayı açılır penceresi nedir

Bir kullanıcının blogunuza yorum yazdığını varsayalım. zaten epeyce satır yazmış ama dikkatleri dağılıyor ve yorumu göndermeyi unutuyorlar. Şimdi, örneğin bir bağlantıya tıklandığında yazmaya başladığı tüm içerik kaybolacak.

Göz atma onayı, onlara yorumlarını tamamlama şansı verir.

Bu özelliği makale / sayfa düzenleyici arayüzünden görebilirsiniz. Kaydedilmemiş değişiklikleriniz varsa ve sayfadan çıkmaya veya tarayıcıyı kapatmaya çalışırsanız, bir açılır pencere uyarısı görürsünüz.

Blogunuzdaki WordPress yorumlarına ve diğer formlara bu uyarı özelliğini nasıl ekleyebileceğimizi görelim.

WordPress'te gönderilmemiş formlarda bir onay açılır penceresi nasıl görüntülenir

Bu eğitim için, edeceğiz özel bir eklenti oluştur. nasıl oluşturulacağını zaten gösterdik. WordPress Plugin çabuk.

Başlayalım.

Öncelikle bilgisayarınızda yeni bir klasör oluşturmanız ve bunu "onayla-eylem" olarak adlandırmanız gerekir. Bu klasörde başka bir klasör oluşturmanız ve onu js olarak adlandırmanız gerekir.

Şimdi Not Defteri gibi bir metin düzenleyici açın ve yeni bir dosya oluşturun. İçine, aşağıdaki kodu yapıştırmanız yeterlidir:

<?php
/**
 * Eylemi Onayla
 * Eklenti Adı: Eylemi Onayla
 * Eklenti URI'si: https://blogpascher.com
 * Açıklama: Bu eklenti, kullanıcılara yorum formundaki gönder düğmesine basmayı unuttuklarında bir uyarı gösterir.
 * Sürüm: 1.0.0
 * Yazar: Adınız
 * Yazar URI'si: https://blogpascher.com
 * Lisans: GPL-2.0+
 * Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_confirm_leaving_js() {

     wp_enqueue_script('Ayrılmayı Onayla',plugins_url('js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Bu php işlevi, web sitenizin ön ucuna bir javascript dosyası ekler.

Devam edin ve bu dosyayı "onayla-eylem" olarak kaydedin.php" klasörde eylemi onaylamak "(Eklentinizin kökü).

Şimdi bu eklentinin yükleyeceği JavaScript dosyasını oluşturmamız gerekiyor. Yeni bir dosya oluşturun ve bu kodu içine yapıştırın:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); işlev askConfirm () {if (needToConfirm) {// koy senin özel Mesaj burada "kaydedilmemiş veriler kaybolacaktır." return;}} $ ( "# CommentForm") değişimi (function () {needToConfirm = true;}).})

Bu dosyayı yeniden adlandır -Leaving.js onaylamak"," Alt klasöre "taşı js "Tabii" eylemi onaylamak".

Bu JavaScript kodu, kullanıcının yorum formunda kaydedilmemiş değişiklikleri olup olmadığını algılar. Kullanıcı sayfadan çıkmaya çalışırsa, bir pop-up uyarısı gösterecektir.

Şimdi tek yapmanız gereken, istemcinizi kullanarak dosyanızı sunucunuza yüklemek. FTP sık. Bundan sonra tek yapmanız gereken, eklentiyi kontrol panelinizden etkinleştirmek.

Bu kadar. Artık web sitenizdeki bir makaleyi ziyaret edebilir, bir yorum yazmayı deneyebilir ve ardından bir bağlantıya tıklayabilirsiniz, buna benzer bir açılır pencere göreceksiniz.

Diğer WordPress formlarına uyarı eklenmesi

WordPress sitenizdeki tüm formları hedeflemek için aynı kodu kullanabilirsiniz. Burada size bir örnek göstereceğiz İletişim formu.

Bu örnekte eklentiyi kullanıyoruz WPForms Oluşturmak için İletişim formu. Başka bir tane kullanırsanız talimatlar aynı olacaktır. iletişim formu eklentisi Sitenizde.

Eklediğiniz sayfaya gidin İletişim formu. Fareyi iletişim formundaki ilk alanın üzerine getirin, sağ tıklayın ve ardından “ denetlemek", Kaynak koduna erişmek için.

etiketi ile başlayan satırı bulun <form>. Form etiketinde kimlik özniteliğini bulacaksınız. Bu örnekte, formumuzun kimliği formulaire . Kimlik özelliğini kopyalamanız gerekir.

Şimdi düzenle confirmer-leaving.js dosyalayın ve ID özniteliğini " #commentform Bir virgülle ayrılmış.

Kodunuz şöyle görünmelidir:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); işlev askConfirm () {if (needToConfirm) {// koy senin özel Mesaj burada "kaydedilmemiş veriler kaybolacaktır." return;}} $ ( "# CommentForm, biçim #") değişimi (function () {needToConfirm = true;}).})

Yaptığınız değişiklikleri kaydedin ve WordPress blogunuzda eklentiyi yükleyin.

Bu eğitim için bu kadar. Umarım blogunuza açılır bir onay penceresi eklemenize yardımcı olur. Bir noktayı anlamadıysanız soru sormaktan çekinmeyin.