WordPress’te Formlar için Gezinmeyi Onayla Açılır Penceresi Nasıl Gösterilir

Bir sayfayı yorumunuzu göndermeden veya yarım doldurulmuş bir formla yanlışlıkla kapatmak can sıkıcıdır. Son zamanlarda, kullanıcılarımızdan biri bize okuyucularına bir gezinme onayı açılır penceresi göstermenin mümkün olup olmadığını sordu.

Bu küçük açılır pencere kullanıcıları uyarır ve yanlışlıkla yarım doldurulmuş ve gönderilmemiş formları bırakmalarını önler. Kullanıcı deneyimini iyileştirmek ve ziyaretçilerin bir şeye sıfırdan başlamak zorunda kalmasını önlemek için iyi bir yoldur.

Bu makalede, WordPress formları için gezinme açılır penceresini nasıl onaylayacağınızı göstereceğiz.

Gezinmeyi Onayla Açılır Penceresi Nedir?

Bir kullanıcının blogunuza yorum yazdığını varsayalım. Zaten birkaç satır yazdılar, ancak dikkatleri dağıldı ve yorum göndermeyi unuttular. Şimdi, eğer tarayıcılarını kapatırlarsa, yorum kaybolacaktır.

Gezinmeyi onayla açılır penceresi onlara yorumlarını tamamlama şansı verir.

Bu özelliği WordPress yazı editörü ekranında çalışırken görebilirsiniz. Kaydedilmemiş değişiklikleriniz varsa ve sayfadan çıkmaya veya tarayıcıyı kapatmaya çalışırsanız, bir uyarı açılır penceresi görürsünüz.

Bu uyarı özelliğini WordPress yorumlarına ve sitenizdeki diğer formlara nasıl ekleyebileceğimizi görelim:

WordPress’te Gönderilmemiş Formlar için Gezinmeyi Onayla açılır penceresini göster

Bu eğitim için özel bir eklenti oluşturacağız, ancak endişelenmeyin, web sitenize yüklemek için bu eğitimin sonunda eklentiyi de indirebilirsiniz.

Ancak, kodu daha iyi anlamak için kendi eklentinizi oluşturmayı denemenizi isteyeceğiz. Bunu önce yerel bir kurulumda veya bir hazırlık sitesinde yapabilirsiniz.

Hadi başlayalım.

Öncelikle, bilgisayarınızda yeni bir klasör oluşturmanız ve adını confirm-leaving koymanız gerekir. confirm-leaving klasörünün içinde başka bir klasör oluşturmanız ve adını js koymanız gerekir.

Şimdi Notepad gibi bir düz metin düzenleyicisi açın ve yeni bir dosya oluşturun. İçine aşağıdaki kodu yapıştırın:

[php]
<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.wpbeginner.com
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
 * Version:     1.0.0
 * Author:      WPBeginner
 * Author URI:  https://www.wpbeginner.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

function wpb_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', 'wpb_confirm_leaving_js');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/php]

Bu PHP işlevi, web sitenizin ön ucuna basitçe bir JavaScript dosyası ekler.

Devam edin ve bu confirm-leaving.php dosyasını ana confirm-leaving klasörünün içine kaydedin.

Şimdi, bu eklentinin yüklediği JavaScript dosyasını oluşturmamız gerekiyor.

Yeni bir dosya oluşturun ve bu kodu içine yapıştırın:

[javascript]
jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}

$("#commentform").change(function() {
    needToConfirm = true;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Bu JavaScript kodu, kullanıcının yorum formunda kaydedilmemiş değişiklikleri olup olmadığını algılar. Kullanıcı sayfadan uzaklaşmaya veya pencereyi kapatmaya çalışırsa, bir uyarı açılır penceresi gösterecektir.

Bu dosyayı js klasörünün içine confirm-leaving.js olarak kaydetmeniz gerekir.

Her iki dosyayı da kaydettikten sonra, klasör yapınız bu şekilde görünmelidir:

Şimdi, bir FTP istemcisi kullanarak WordPress sitenize bağlanmanız gerekir. WordPress dosyalarını yüklemek için FTP’nin nasıl kullanılacağına ilişkin kılavuzumuza bakın.

Bağlandıktan sonra, confirm-leaving klasörünü web sitenizdeki /wp-contents/plugins/ klasörüne yüklemeniz gerekir.

Bundan sonra, WordPress yönetici alanına giriş yapmanız ve Eklentinin sayfasını ziyaret etmeniz gerekir.

Yüklü eklentiler listesinde ‘Confirm Leaving’ eklentisini bulun ve altındaki ‘etkinleştir’ bağlantısına tıklayın.

Hepsi bu kadar. Artık web sitenizdeki herhangi bir gönderiyi ziyaret edebilir, yorum formunun herhangi bir alanına bir metin yazabilir ve ardından göndermeden sayfadan ayrılmayı deneyebilirsiniz.

Kaydedilmemiş değişikliklerin bulunduğu bir sayfadan ayrılmak üzere olduğunuzu bildiren bir açılır pencere görüntülenir.

WordPress’te Diğer Formlara Uyarı Ekleme

WordPress sitenizdeki herhangi bir formu hedeflemek için aynı kod tabanını kullanabilirsiniz. Burada, size bir iletişim formunu hedeflemek için kullanmanın bir örneğini göstereceğiz.

Bu örnekte, bir iletişim formu oluşturmak için WPForms eklentisini kullanıyoruz. Web sitenizde farklı bir iletişim formu ek lentisi kullanıyorsanız talimatlar aynı olacaktır.

İletişim formunuzu eklediğiniz sayfaya gidin. Fareyi iletişim formunuzdaki ilk alanın üzerine getirin, sağ tıklayın ve ardından tarayıcı menüsünden ‘İncele’yi seçin.

<form> etiketi ile başlayan satırı bulun. Form etiketinde ID niteliğini bulacaksınız.

Bu örnekte, formumuzun ID’si wpforms-form-170‘tir. ID özelliğini kopyalamanız gerekir.

Şimdi confirm-leaving.js dosyasını düzenleyin ve #commentform‘dan sonra ID niteliğini ekleyin.

Formunuzun kimliğini #commentform olarak virgülle ayırdığınızdan emin olun. Ayrıca formunuzun ID özelliğine önek olarak bir # işareti eklemeniz gerekecektir.

Kodunuz şimdi şöyle görünecektir:

[javascript]
jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}

$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Değişikliklerinizi kaydedin ve dosyayı web sitenize geri yükleyin.

Şimdi, iletişim formunuzun herhangi bir alanına herhangi bir metin girebilir ve ardından formu göndermeden sayfadan ayrılmayı deneyebilirsiniz. Kaydedilmemiş değişiklikleriniz olduğuna dair bir uyarı içeren bir açılır pencere görünecektir.

Ayrılmayı onayla eklentisini buradan indirebilirsiniz. Yalnızca yorum formunu hedeflemektedir, ancak eklentiyi diğer formları hedefleyecek şekilde düzenlemekten çekinmeyin.

Hepsi bu kadar; umarız bu makale WordPress formları için gezinme açılır penceresini onaylamanıza yardımcı olmuştur. Ayrıca iş siteleri için olmazsa olmaz WordPress eklentileri ve araçları yazımıza göz atmak veya blog trafiğinizi nasıl artıracağınıza dair nihai kılavuzumuzu okumak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.