WordPress’te jQuery Kullanarak Üste Yumuşak Kaydırma Efekti Ekleme

WordPress web sitenize sayfanın üst kısmına yumuşak bir kaydırma efekti mi eklemek istiyorsunuz?

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

Bu makalede, jQuery ve bir eklenti kullanarak WordPress’te nasıl yumuşak bir yukarı 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 yazısının en altına inen kullanıcılar sitede gezinmek için manuel olarak kaydırmak veya en başa geri dönmek zorunda kalırlar.

Bu gerçekten can sıkıcı olabilir ve çoğu zaman kullanıcılar geri düğmesine basarak sayfayı terk eder. 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, kullanıcıları milisaniyeler içinde tüm sayfayı yukarı kaydırarak en üste gönderecektir. İşe yarıyor, ancak etkisi sarsıcı olabiliyor, tıpkı yoldaki bir tümseğe çarptığınızda olduğu gibi.

Yumuşak kaydırma bunun tam tersidir. Kullanıcıyı görsel olarak hoş bir efektle en üste geri kaydırır. Bunun gibi unsurları kullanmak sitenizdeki kullanıcı deneyimini büyük ölçüde iyileştirebilir.

Bununla birlikte, bir WordPress eklentisi ve jQuery kullanarak üste yumuşak bir kaydırma efektini nasıl ekleyebileceğinizi görelim.

WordPress Eklentisi Kullanarak Üste Düzgün Kaydırma Efekti Ekleme

Bu yöntem yeni başlayanlar için önerilir, çünkü tek bir kod satırına dokunmadan bir WordPress web sitesine yukarı kaydırma efekti ekleyebilirsiniz.

Yapmanız gereken ilk şey WPFront Scroll Top eklentisini yüklemek 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 panonuzdan Ayarlar ” Üst Kay dırma bölümüne gidebilirsiniz. Burada eklentiyi yapılandırabilir ve yumuşak kaydırma efektini özelleştirebilirsiniz.

İlk olarak, sitenizde üste kaydırma 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üzenlemek için seçenekler 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.

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

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

Normalde, WordPress blogunuzdaki tüm sayfalarda görünecektir. Ancak, ‘Sayfalarda Göster’ bölümüne gidebilir ve üste kaydırma efektini 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 bulabilmeniz gerekir.

Sizin için uygun olan ö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üğmesine tıklamanız yeterlidir.

Şimdi web sitenizi ziyaret ederek üste kaydırma düğmesini çalışırken görebilirsiniz.

WordPress’te jQuery ile Üste Yumuşak Kaydırma Efekti Ekleme

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

Düzgün kaydırma üst efektini eklemek için WordPress temanızda jQuery, bazı 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 smoothscroll.js olarak kaydedin.

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

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ızda /js/ dizini yoksa bir tane oluşturabilir ve smoothscroll.js dosyasını buraya 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 yumuşak bir kaydırma efekti ekleyecek jQuery komut dosyasıdır.

Yapmanız gereken bir sonraki şey temanızdaki smoothscroll.js dosyasını yüklemektir. Bunu yapmak için, betiği WordPress’te enqueue edeceğiz.

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

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Yukarıdaki kodda, WordPress’e komut dosyamızı yüklemesini ve ayrıca eklentimiz jQuery kütüphanesine bağlı olduğu için onu yüklemesini söyledik.

Şimdi jQuery kısmını eklediğimize göre, WordPress sitemize kullanıcıları en üste geri götürecek gerçek bir bağlantı ekleyelim. Bu HTML’yi temanızın footer.php dosyasında 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ğitimimize 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, yukarı oklu bir resim simgesini kullanarak bir başa dön düğmesi görüntüleyecek olmamızdır.

Bu örnekte 40×40 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 resim simgesi kullanıyoruz ve bunu sabit bir konuma ayarlıyoruz. Ayrıca, kullanıcı faresini düğmenin ü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 https://www.example.com/wp-content/uploads/2013/07/top_icon.png yerine kullanmak istediğiniz görsel URL’sini yazdığınızdan emin olun. WordPress medya yükleyicisini kullanarak kendi görsel ikonunuzu yükleyebilir, görsel URL’sini kopyalayabilir ve ardından koda yapıştırabilirsiniz.

Umarız bu makale jQuery kullanarak sitenize yumuşak bir yukarı kaydırma efekti eklemenize yardımcı olmuştur. Ayrıca küçük işletmeler için en iyi WordPress eklentileri uzman seçimimizi ve bir çevrimiçi mağazanın nasıl başlatılacağına dair adım adım kılavuzumuzu görmek 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.