WordPress’te jQuery Kullanarak Üste Düzgün Kaydırma Efekti Ekleme

Üst efekte yumuşak bir kaydırma eklemek web sitenizin kullanıcı deneyimini geliştirebilir. Özellikle uzun bir sayfanız olduğunda kullanışlıdır ve ziyaretçilerin hızlı bir şekilde en başa dönmesine yardımcı olur.

Scroll-to-top’u kurmak göz korkutucu gelebilir, bu yüzden kendimiz denemeye karar verdik. Ve jQuery veya ücretsiz bir eklenti kullanarak WordPress web sitenize kurmanın kolay olduğunu keşfettik.

Bu makalede, WordPress’te yumuşak bir yukarı kaydırma efektinin nasıl ekleneceği konusunda size adım adım rehberlik edeceğiz.

Düzgün Kaydırma Nedir ve Ne Zaman Kullanmalısınız?

Sitede yapışkan bir başlık menüsü yoksa, uzun bir WordPress gönderisinin veya sayfası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 kullanıcılar genellikle geri düğmesine basıp giderler. Bu nedenle, kullanıcıları hızlı bir şekilde gönderinin veya sayfanın en üstüne göndermek için bir düğmeye ihtiyacınız vardır.

Tipik olarak, bu işlevi jQuery kullanmadan basit bir metin bağlantısı olarak ekleyebilirsiniz, bunun gibi:

<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. Bu gibi unsurları kullanmak sitenizdeki kullanıcı deneyimini büyük ölçüde iyileştirebilir.

Bunu akılda tutarak, WordPress sitenize bir eklenti ve jQuery kullanarak yumuşak bir yukarı kaydırma efekti eklemek için iki yöntem paylaşacağız. Tercih ettiğiniz yönteme geçmek için aşağıdaki hızlı bağlantıları kullanmaktan çekinmeyin:

Lafı daha fazla uzatmadan ilk yöntemle başlayalım.

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 eklemenize olanak tanır.

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.

Buradan yapmanız gereken ilk şey, sitenizdeki üste kaydırma düğmesini etkinleştirmek için ‘Etkin’ onay kutusunu tıklamaktır. 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 ve düğmeyi küçük cihazlarda veya wp-admin ekranında gizleme seçeneğini etkinleştirme 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 da ayarlayabilirsiniz. Genellikle ekranın sağ alt köşesinde görünse de, onu başka bir köşeye taşıma seçeneğiniz vardır.

WPFront Scroll Top eklentisi, üste kaydırma düğmesini yalnızca seçilen sayfalarda göstermek için filtreler 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 ö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

Başlamadan önce, bu yöntemin yeni başlayanlar için önerilmediğini unutmayın. 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 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çalım ve bir dosya oluşturalım. 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;
		});
});

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.

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.

Yapmanız gereken bir sonraki şey temanızdaki smoothscroll.js dosyasını yüklemektir.

Bunu yapmak için, bu kodu kopyalayıp temanızın functions.php dosyasına yapıştırarak WordPress’te komut dosyasını çağıracağız.

Ancak, 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ı ekleme eğitimimizi takip edebilirsiniz:

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

Yukarıdaki kod WordPress’e betiğimizi ve jQuery kütüphanesini yüklemesini söyler çünkü eklentimiz bunlara bağlıdır.

Şimdi jQuery’yi eklediğimize göre, WordPress sitemize kullanıcıları en üste geri götüren gerçek bir bağlantı ekleyelim.

Bunu yapmak için, WPCode kullanarak 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 resim 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.

İşte bu kadar!

Umarız bu makale jQuery kullanarak sitenize yumuşak bir yukarı kaydırma efekti eklemenize yardımcı olmuştur. WordPress temalarını değiştirmeden önce YAPMANIZ GEREKENLER ve bir WordPress temasında hangi dosyaların düzenleneceğini nasıl bulacağınıza ilişkin uzman listemizi de 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.