jQuery Kullanarak WordPress'e Üst Kısma Kaydırma Efekti Ekleme

Telefonunuzda uzun bir WordPress blog gönderisini veya ürün sayfasını kaydırdınız ve menüyü bulmak için tüm yolu yukarı kaydırmanız gerektiğini fark ettiniz mi? Ziyaretçileriniz de aynı şeyi hissedebilir.

Uzun sayfalarda, bu küçük rahatsızlık hızla hayal kırıklığına dönüşebilir. Ve bazıları geri gezinmek yerine WordPress sitenizden ayrılabilir.

Sorunsuz bir yukarı kaydırma düğmesi bunu anında düzeltmenize yardımcı olabilir. Bu özellik, okuyuculara geri dönmek için hızlı bir yol sunar, bu da onları meşgul tutabilir ve sitenizi daha fazla keşfetmeye teşvik edebilir.

Bu kılavuzda, jQuery kullanarak WordPress'e nasıl pürüzsüz bir yukarı kaydırma efekti ekleyeceğinizi tam olarak paylaşacağız. Merak etmeyin, düşündüğünüzden daha basit! 💡

Smooth Scroll Nedir ve Ne Zaman Kullanılmalıdır?

Düzgün kaydırma, sayfayı anında bir bölüme atlamak yerine sabit, akıcı bir hareketle yukarı veya aşağı hareket ettiren bir gezinme efektidir. Özellikle "yukarı dön" düğmeleri gibi özellikler için kullanıcılara daha az rahatsız edici bir gezinme yolu vermek istediğinizde bunu kullanmalısınız.

Site yapışkan bir üst menüye sahip olmadıkça, uzun bir WordPress gönderisinin veya sayfasının altına kayan kullanıcılar, siteye göz atmak için manuel olarak yukarı kaydırmak veya kaydırmak zorunda kalırlar.

Bu gerçek bir rahatsızlık olabilir ve çoğu zaman kullanıcılar sadece geri düğmesine basıp ayrılırlar. Bu yüzden kullanıcıları hızlı bir şekilde yazının veya sayfanın başına göndermek için bir düğmeye ihtiyacınız var.

Genellikle, bu işlevselliği jQuery kullanmadan basit bir metin bağlantısı olarak ekleyebilirsiniz, şöyle:

<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 yarar, ancak yolun ortasında bir tümseğe çarpmış gibi sarsıcı bir etki yaratabilir.

Sorunsuz bir kaydırma bunun tam tersidir. Kullanıcıyı görsel olarak hoş bir efektle sayfanın en üstüne geri kaydıracaktır. Bunun gibi öğeleri kullanmak, sitenizdeki kullanıcı deneyimini önemli ölçüde iyileştirebilir.

Bunu akılda tutarak, WordPress sitenize bir eklenti ve jQuery kullanarak sorunsuz bir yukarı kaydırma efekti eklemek için iki yöntem paylaşacağız. İşte bu kılavuzda ele alacağımız tüm şeylere hızlı bir genel bakış:

• İpucu 1: WordPress Eklentisi Kullanarak Sorunsuz Yukarı Kaydırma Efekti Ekleme (Kolay)
• İpucu 2: WordPress'te jQuery ile Sorunsuz Yukarı Kaydırma Efekti Ekleme (Gelişmiş)
• Bonus İpucu: Ziyaretçileri Etkileşimde Tutmak İçin Diğer İnce Animasyon Efektleri
• SSS: WordPress'te jQuery Kullanarak Yukarı Kaydırma Efekti Ekleme
• Daha Fazla Okuma: WordPress Temaları Hakkında Daha Fazla Kaynak

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

WordPress Eklentisi ile Akıcı Bir Sayfa Başına 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 eklemenizi sağlar.

Yapmanız gereken ilk şey WPFront Scroll Top eklentisini kurmak ve etkinleştirmektir. Yardıma ihtiyacınız olursa, lütfen WordPress eklentisi nasıl kurulur rehberimize bakın.

Upon activation, you can go to Settings » Scroll Top from your WordPress dashboard. Here, you can configure the plugin and customize the smooth scroll effect.

Buradan yapmanız gereken ilk şey, sitenizde kaydırma üstü düğmesini etkinleştirmek için 'Etkin' onay kutusunu tıklamaktır. Ardından, kaydırma ofseti, düğme boyutu, opaklık, solma süresi, kaydırma süresi ve daha fazlasını düzenlemek için seçenekler göreceksiniz.

Aşağı kaydırdığınızda, otomatik gizlenme süresini düzenleme ve küçük cihazlarda veya wp-admin ekranında düğmeyi 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ır, ancak bunu gönderide belirli bir öğeye kaydırmak veya hatta bir sayfaya bağlamak için değiştirebilirsiniz.

Ek olarak, düğmenin konumunu 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, kaydırma üstü düğmesini yalnızca seçili 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 kaydırma efektinin nereye görüntülenmesini istediğinizi seçebilirsiniz.

Eklenti ayrıca önceden oluşturulmuş düğme tasarımları sunar. Sitenize uygun bir tasarım bulabilmelisiniz.

Hazır bir görsel düğme bulamazsanız, WordPress medya kütüphanesinden özel bir görsel yükleme seçeneğiniz vardır.

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

You can now visit your WordPress website to see the scroll-to-top button in action.

WordPress'te jQuery ile Yukarı 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üzenlemeye alışkın kişiler için uygundur.

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

İlk olarak, Not Defteri gibi bir metin düzenleyici açalım ve bir dosya oluşturalım. Bunu smoothscroll.js olarak kaydedin.

Ardından, bu kodu dosyaya kopyalayıp 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ılara sayfanın en üstüne götüren bir düğmeye yumuşak kaydırma efekti ekleyecek olan jQuery betiğidir.

Bundan sonra, dosyayı kaydedebilir ve WordPress tema dizininizdeki /js/ klasörüne yükleyebilirsiniz.

Daha fazla ayrıntı için, 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ı oraya 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, smoothscroll.js dosyasını temanızda yüklemektir.

Bunu yapmak için, bu kodu temanızın functions.php dosyasına kopyalayıp yapıştırarak betiği WordPress'e ekleyeceğiz.

Ancak, tema dosyalarını doğrudan düzenlemenizi önermiyoruz çünkü en ufak bir hata sitenizi bozabilir.

Bunun yerine, WordPress için en iyi kod parçacığı eklentisi olan WPCode gibi bir eklenti kullanabilir ve WordPress'te özel kod parçacıkları ekleme konusundaki eğitimimizi takip edebilirsiniz: WordPress'te özel kod parçacıkları ekleme:

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

Yukarıdaki kod, eklentimizin onlara bağlı olduğu için betiğimizi ve jQuery kütüphanesini yüklemesi için WordPress'e söyler.

Artık jQuery'yi eklediğimize göre, kullanıcıları başa döndüren gerçek bir bağlantıyı WordPress sitemize ekleyelim.

Bunu yapmak için, WPCode kullanarak bu HTML'yi temanızın footer.php dosyasına yapıştırmanız yeterlidir.

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

If you need help, please see our tutorial on how to add header and footer code in WordPress

You may have noticed that the HTML code includes a link but no anchor text. That’s because we will use an image icon with an up arrow to display a back-to-top button.

Bu örnekte 40x40 piksel 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, bir kullanıcı fare imlecini ü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 resmin URL'sini değiştirdiğinizden emin olun.

WordPress medya yükleyicisini kullanarak kendi resim simgenizi yükleyebilir, resim URL'sini kopyalayabilir ve ardından kodu yapıştırabilirsiniz.

Ve temelde hepsi bu!

Bonus İpucu: Ziyaretçileri Etkileşimde Tutmak İçin Diğer İnce Animasyon Efektleri

Sorunsuz bir şekilde yukarı kaydırma düğmesi, sitenizi daha kullanıcı dostu hale getirmenin yalnızca bir yoludur. Dikkatleri nazikçe yönlendirmek ve sitenizde gezinmeyi zahmetsiz hale getirmek için ekleyebileceğiniz pek çok başka küçük animasyon efekti vardır.

Örneğin, bir paralaks efekti, arka plan resimlerinin içeriğinizden farklı bir hızda hareket etmesini sağlayarak derinlik ve hareket hissi yaratır.

Sayfalarınızı daha canlı hissettirmenin basit bir yoludur. Adım adım talimatlar için, paralaks efekti ekleme kılavuzumuza bakın.

Bir arama geçiş efekti, yalnızca biri simgeye tıkladığında arama çubuğunu göstererek işleri temiz tutar. Bu, tasarımınızın daha az karmaşık görünmesine yardımcı olurken, ziyaretçilerin ihtiyaç duydukları şeyi bulmalarını kolaylaştırır.

Temanızda bu yerleşik olarak yoksa, WPCode gibi eklentiler yardımcı olabilir. Ayrıntılar için, WordPress'te arama geçiş efekti ekleme kılavuzumuza göz atın: WordPress'te arama geçiş efekti ekleme.

Ve eğer bir resim galeriniz varsa, bir lightbox efekti, kişilerin sayfadan ayrılmadan fotoğrafları daha büyük, dikkat dağıtmayan bir açılır pencerede görüntülemesine olanak tanır. Küçük bir detaydır, ancak görsellerinizi keşfetmeyi seven herkes için büyük bir fark yaratır.

Ayrıca, Envira Gallery gibi galeri eklentileri bu özelliği eklemeyi kolaylaştırır. Bunu yapmak için, WordPress'e ışık kutusu efektiyle galeri ekleme kılavuzumuza başvurabilirsiniz.

Bu dokunuşlar sadece "olsa iyi olur" değil; ziyaretçilere deneyimlerini düşündüğünüzü gösterir. Bu, etrafta kalma ve keşfetme olasılıklarını artırabilir. 🕵️

SSS: jQuery Kullanarak WordPress'e Sayfanın En Üstüne Kaydırma Efekti Ekleme

Kapatmadan önce, okuyucuların WordPress'e bir yukarı kaydırma düğmesi ekleme hakkında sıkça sorduğu bazı soruları aşağıda bulabilirsiniz.

Her web sitesi için sayfa başına kaydırma düğmesi gerekli midir?

Her zaman değil. Ancak çok fazla içeriğe sahip sayfalar için akıllıca bir eklemedir. Uzun blog yazılarında veya öğreticilerde, ziyaretçilerin tekrar yukarı kaydırma zahmetinden kurtarır, bu da gezinme deneyimlerini daha keyifli hale getirir.

Sayfanın en üstüne kaydırma düğmesi eklemek sitemi yavaşlatır mı?

It shouldn’t. The plugin method is lightweight and optimized for performance, and the jQuery code snippet is tiny. So, it won’t have any noticeable impact on your site speed.

Sayfanın en üstüne kaydırma düğmesini yerleştirmek için en iyi yer neresidir?

Çoğu site bunu ekranın sağ alt köşesine yerleştirir. Bu konum, ana içerikten uzaklaşmadan görünür ve kolayca erişilebilir olmasını sağlar.

Can I use a text link instead of an image for my button?

Absolutely. Both the plugin and custom code methods can be set up with a simple “Back to Top” text link instead of an icon. The plugin offers this option out of the box, and with the code method, you just tweak the HTML and CSS to match your style.

Daha Fazla Okuma: WordPress Temaları Hakkında Daha Fazla Kaynak

Umarım bu makale, jQuery kullanarak sitenize sorunsuz bir yukarı kaydırma efekti eklemenize yardımcı olmuştur. WordPress temaları hakkında daha derinlemesine bilgi edinmek ister misiniz? Bu kaynaklar size yardımcı olacaktır:

• En Popüler ve En İyi WordPress Temaları
• WordPress Temanızı Değiştirdiğinizde Ne Olur?
• WordPress Temalarını Değiştirmeden Önce Yapmanız Gerekenler
• WordPress Tema İskeleti Nedir ve En İyi Tema İskeletleri Hangileridir?
• WordPress Temanızı Nasıl Özelleştirirsiniz
• WordPress Temasında Hangi Dosyaların Düzenleneceğini Bulma
• WordPress Tema Özelleştiricisini Profesyonel Gibi Kullanma
• A Complete Beginner’s Guide to WordPress Full Site Editing

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