JQuery Kullanarak WordPress'te En İyi Efekte Düzgün Kaydırma Nasıl Eklenir

WordPress web sitenizde sayfanın en üstüne yumuşak bir kaydırma efekti eklemek ister misiniz?

Uzun bir sayfanız olduğunda ve kullanıcılarınıza en başa dönmeleri için kolay bir yol sağlamak istediğinizde, en üste kaydırma efekti harikadır. Web sitenizin kullanıcı deneyimini iyileştirmeye yardımcı olur.

Bu yazıda, jQuery ve bir eklenti kullanarak WordPress'te nasıl düzgün bir kaydırma efekti ekleyeceğinizi göstereceğiz.

Smooth Scroll Nedir ve Ne Zaman Kullanmalısınız?

Sitede yapışkan bir başlık menüsü yoksa, uzun bir WordPress sayfasının veya gönderisinin altına kaydıran kullanıcıların sitede gezinmek için manuel olarak kaydırması veya en üste geri kaydırması gerekir.

Bu gerçek bir sıkıntı olabilir ve kullanıcılar genellikle geri düğmesine basar ve ayrılır. Bu yüzden kullanıcıları hızlı bir şekilde sayfanın en üstüne gönderecek bir düğmeye ihtiyacınız var.

Bu işlevi, jQuery kullanmadan aşağıdaki gibi basit bir metin bağlantısı olarak ekleyebilirsiniz:

<a href="#" title="Back to top">^Top</a>

Bu, tüm sayfayı milisaniyeler içinde kaydırarak kullanıcıları en üste gönderecektir. Çalışır, ancak etkisi sarsıcı olabilir, tıpkı yolda bir tümseğe çarptığınızda olduğu gibi.

Düzgün kaydırma bunun tam tersidir. Kullanıcıyı görsel olarak hoş bir efektle en üste kaydırır. Bunun gibi öğeleri kullanmak, sitenizdeki kullanıcı deneyimini büyük ölçüde iyileştirebilir.

Bununla birlikte, bir WordPress eklentisi ve jQuery kullanarak en iyi efekte nasıl düzgün bir kaydırma ekleyebileceğinizi görelim.

Bir WordPress Eklentisi Kullanarak Düzgün Bir Kaydırma Efekti Nasıl Eklenir

Tek bir kod satırına dokunmadan bir WordPress web sitesine kaydırma efekti ekleyebileceğiniz için bu yöntem yeni başlayanlar için önerilir.

Yapmanız gereken ilk şey, WPFront Scroll Top eklentisini kurmak ve etkinleştirmektir. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress kontrol panelinizden Ayarlar » Yukarı Kaydır'a gidebilirsiniz. Burada eklentiyi yapılandırabilir ve yumuşak kaydırma efektini özelleştirebilirsiniz.

İlk olarak, sitenizde yukarı kaydır düğmesini etkinleştirmek için 'Etkin' onay kutusunu tıklamanız gerekir. Ardından, kaydırma ofsetini, düğme boyutunu, opaklığı, solma süresini, kaydırma süresini ve daha fazlasını düzenleme seçeneklerini göreceksiniz.

Aşağı kaydırırsanız, otomatik gizleme süresini düzenleme, küçük cihazlarda düğmeyi gizleme seçeneğini etkinleştirme ve wp-admin ekranında gizleme gibi daha fazla seçenek bulacaksınız.

Düğmeye tıkladığınızda ne yapacağını da düzenleyebilirsiniz. Varsayılan olarak, sayfanın en üstüne kaydırılır, ancak bunu gönderideki belirli bir öğeye kaydırmak veya hatta bir sayfaya bağlantı vermek için değiştirebilirsiniz.

Düğmenin yerini değiştirme seçeneği de vardır. Varsayılan olarak ekranın sağ alt köşesinde görünecektir, ancak onu diğer köşelerden herhangi birine taşımayı da seçebilirsiniz.

WPFront Scroll Top eklentisi, yalnızca seçilen sayfalarda yukarı kaydır düğmesini göstermek için filtreler de sunar.

Normalde, WordPress blogunuzdaki tüm sayfalarda görünecektir. Ancak, 'Sayfalarda Görüntüle' bölümüne gidebilir ve en üstteki efekte kaydırmayı nerede görüntülemek istediğinizi seçebilirsiniz.

Eklenti ayrıca aralarından seçim yapabileceğiniz önceden oluşturulmuş düğme tasarımları sunar. Sitenize uygun bir tasarımı kolayca bulabilmelisiniz.

Sizin için çalışan önceden oluşturulmuş bir resim düğmesi bulamazsanız, WordPress medya kitaplığından özel bir resim yükleme seçeneği vardır.

İşiniz bittiğinde, 'Değişiklikleri Kaydet' düğmesini tıklamanız yeterlidir.

Yukarı kaydır düğmesini çalışırken görmek için artık web sitenizi ziyaret edebilirsiniz.

WordPress'te jQuery ile En İyi Etkiye Düzgün Kaydırma Ekleme

Bu yöntem yeni başlayanlar için önerilmez. Web sitenize kod eklemeyi içerdiğinden, tema düzenleme konusunda rahat olan kişiler için uygundur.

Düzgün kaydırmalı üst efekti eklemek için WordPress temanızda jQuery, biraz CSS ve tek bir HTML kodu satırı kullanacağız.

Öncelikle Not Defteri gibi bir metin düzenleyici açın ve bir dosya oluşturun. Devam edin ve onu smoothscroll.js olarak kaydedin.

Ardından, bu kodu kopyalayıp dosyaya yapıştırmanız gerekecek:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Bundan sonra dosyayı kaydedebilir ve WordPress tema dizininizdeki /js/ klasörüne yükleyebilirsiniz. Daha fazla ayrıntı için lütfen WordPress'e dosya yüklemek için FTP'nin nasıl kullanılacağına ilişkin kılavuzumuza bakın.

Temanızın bir /js/ dizini yoksa, bir tane oluşturabilir ve buna smoothscroll.js yükleyebilirsiniz. Daha fazla bilgi için WordPress dosyaları ve dizin yapısı hakkındaki kılavuzumuza da bakabilirsiniz.

Bu kod, kullanıcıları sayfanın en üstüne götüren bir düğmeye düzgün kaydırma efekti ekleyecek olan jQuery betiğidir.

Yapmanız gereken bir sonraki şey, smoothscroll.js dosyasını temanıza yüklemek. Bunu yapmak için, betiği WordPress'te sıralayacağız.

Bundan sonra, bu kodu kopyalayıp temanızın functions.php dosyasına yapıştırmanız yeterlidir. En ufak bir hata sitenizi bozabileceğinden tema dosyalarını doğrudan düzenlemenizi önermiyoruz. Bunun yerine, WPCode gibi bir eklenti kullanabilir ve WordPress'te özel kod parçacıklarının nasıl ekleneceğine ilişkin eğiticimizi takip edebilirsiniz.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

Yukarıdaki kodda, WordPress'e komut dosyamızı yüklemesini ve ayrıca eklentimiz buna bağlı olduğundan jQuery kitaplığını yüklemesini söyledik.

Artık jQuery bölümünü eklediğimize göre, WordPress sitemize kullanıcıları en üste götüren gerçek bir bağlantı ekleyelim. Bu HTML'yi temanızın footer.php dosyasındaki herhangi bir yere yapıştırmanız yeterlidir. Yardıma ihtiyacınız varsa, lütfen WordPress'te üstbilgi ve altbilgi kodunun nasıl ekleneceğine ilişkin eğiticimize bakın.

<a href="#top" id="smoothup" title="Back to top"></a>

HTML kodunun bir bağlantı içerdiğini ancak bağlantı metni içermediğini fark etmiş olabilirsiniz. Bunun nedeni, başa dön düğmesini görüntülemek için yukarı oklu bir görüntü simgesi kullanacağımızdır.

Bu örnekte, 40x40 piksellik bir simge kullanıyoruz. Aşağıdaki özel CSS'yi temanızın stil sayfasına eklemeniz yeterlidir.

Bu kodda, düğmenin arka plan görüntüsü olarak bir görüntü simgesi kullanıyoruz ve onu sabit bir konuma ayarlıyoruz. Ayrıca, kullanıcı faresini üzerine getirdiğinde düğmeyi döndüren küçük bir CSS animasyonu ekledik.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

Yukarıdaki CSS'de, kullanmak istediğiniz resim URL'sini https://www.example.com/wp-content/uploads/2013/07/top_icon.png ile değiştirdiğinizden emin olun. WordPress medya yükleyiciyi kullanarak kendi resim simgenizi yükleyebilir, resim URL'sini kopyalayabilir ve ardından koda yapıştırabilirsiniz.

Bu makalenin, jQuery kullanarak sitenize sorunsuz bir kaydırma efekti eklemenize yardımcı olduğunu umuyoruz. Ayrıca, küçük işletmeler için en iyi WordPress eklentilerinden oluşan uzman seçimimizi ve çevrimiçi mağaza açma konusunda adım adım kılavuzumuzu görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.