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 (smooth scroll), sayfayı anında bir bölüme atlamak yerine sabit, akıcı bir hareketle yukarı veya aşağı taşıyan bir gezinme efektidir.

Sitede yapışkan bir üst menü yoksa, kullanıcılar uzun bir WordPress gönderisinin veya sayfasının altına kaydırdıklarında, 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 basitçe geri düğmesine basıp ayrılırlar. Bu nedenle, kullanıcıları hızlı bir şekilde gönderinin veya sayfanın üstüne gönderecek 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.

Düzgün kaydırma bunun tersidir. Kullanıcıyı görsel olarak hoş bir efektle yukarı kaydıracaktır. Bunun gibi öğeler 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ış:

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

İpucu 1: WordPress Eklentisi Kullanarak Düzgün Bir Sayfaya Dönüş 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 varsa, bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizden Ayarlar » Scroll Top bölümüne gidebilirsiniz. Burada, eklentiyi yapılandırabilir ve düzgün kaydırma efektini özelleştirebilirsiniz.

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.

Ayrıca, düğmeye tıkladığınızda ne yapacağını da düzenleyebilirsiniz. Varsayılan olarak sayfanın üstüne kaydıracaktır, ancak gönderide belirli bir öğeye kaydırmak veya bir sayfaya bağlantı vermek 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.

İşe yarayan önceden oluşturulmuş bir düğme resmi 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.

Artık kaydırarak yukarı çıkma düğmesini görmek için WordPress web sitenizi ziyaret edebilirsiniz.

İpucu 2: WordPress'te jQuery ile Düzgün Sayfaya Dönüş Efekti Ekleme

Bu yöntemde, düzgün sayfaya dönüş efektini jQuery, bazı CSS ve tek satır HTML kodu kullanarak ekleyeceğiz. Ekibimiz, temanın işlevselliğini bozmadan çalıştığından emin olmak için bu tam kod parçasını yeni bir WordPress kurulumunda manuel olarak test etti ve doğruladı.

Bununla birlikte, birçok öğretici, düzgün bir sayfaya dönüş düğmesi eklemek için tema dosyalarınızı düzenlemenizi isteyecektir. Ancak bu, yeni başlayanlar için pek uygun değildir - en küçük bir hata bile sitenizi bozabilir.

Bu nedenle, düzgün kaydırma efekti gibi özel işlevsellik eklemek istediğinizde WPCode kullanmanızı öneririz. WordPress için en iyi kod parçacığı eklentisidir ve tema dosyalarınıza dokunmadan özel parçacıkları güvenle eklemenizi sağlar.

İş ortağı markalarımızdan bazıları özel kod parçacıklarını eklemek ve yönetmek için WPCode kullanıyor ve bu gerçekten iyi çalışıyor.

Bu konuda daha fazla bilgi edinmek için, tüm özelliklerini görmek üzere tam WPCode incelememize göz atabilirsiniz.

Öncelikle, ücretsiz WPCode eklentisini kurmanız ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız varsa, bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizden Kod Parçacıkları » + Parçacık Ekle bölümüne gidin.

Bir sonraki ekranda WPCode kod kütüphanesini göreceksiniz.

'Özel Kodunuzu Ekle (Özel Parçacık)' altındaki 'Parçacığı kullan' ı tıklayın.

Kod türünüzü sormak için bir açılır pencere görünecektir.

'JavaScript Parçacığı'nı seçtiğinizden emin olun.

Kod düzenleyicisindeyken, özel kod parçacığınıza önce net bir ad verelim. Bu yalnızca sizin referansınız içindir, ancak net, açıklayıcı bir ad kullanmanızı öneririz.

Ardından, aşağıdaki kodu 'Kod Önizleme' kutusuna yapıştırın:

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 jQuery betiği, yumuşak kaydırma efektiniz için tüm ağır işleri yapar.

İlk olarak, kullanıcı 200 piksel aşağı kayana kadar düğmeyi gizler. Kullanıcı düğmeye tıkladığında, betik sayfayı 0 piksele (en üste) sorunsuz bir şekilde animasyonla geri döndürür.

Ayrıca, varsayılan HTML bağlantı davranışını önlemek için return false; satırını ekledik; bu, kullanıcıyı anında yukarı atlayıp animasyonu bozardı.

Ekranınızda nasıl görünebileceği aşağıdadır:

Ardından, 'Ekleme' bölümüne aşağı kaydırın.

Öncelikle, ‘Otomatik Ekle’ seçeneğinin işaretli olduğundan emin olun. Bu, kod parçasının sitenizde manuel yerleştirme gerektirmeden otomatik olarak çalışmasını sağlar.

Ardından, konumu kontrol edelim.

Üstbilgi, altbilgi, gezinme menüsü ve daha fazlası dahil olmak üzere seçebileceğiniz birçok seçenek vardır. Yukarı kaydırma düğmesi için, düğmenin tüm sayfalarda kullanılabilir olmasını ve sitenizin içeriğine müdahale etmemesini sağladığı için ‘Site Geneli Altbilgi’ harika bir seçenektir.

Bu işlem tamamlandıktan sonra, betiğin sitenizde hemen çalışmaya başlaması için anahtarı ‘Etkin’ olarak değiştirebilirsiniz.

Ve bundan sonra, betiği etkinleştirmek için ‘Kod Parçasını Kaydet’ düğmesine tıklamayı unutmayın.

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 sitenizin altbilgisine eklemeniz yeterlidir.

Kod Parçacıkları » Üstbilgi ve Altbilgi bölümüne gidin ve bu parçacığı ‘Altbilgi’ alanına ekleyin:

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

İşiniz bittiğinde ‘Değişiklikleri Kaydet’e tıklamayı unutmayın. Yardıma ihtiyacınız olursa, lütfen WordPress’te üstbilgi ve altbilgi kodu ekleme eğitimimize bakın.

Sitenizi şu anda görüntülerseniz, herhangi bir düğme görmeyeceksiniz. Bunun nedeni, HTML kodumuzun bir bağlantı içermesi, ancak bağlantı metni olmamasıdır. Şu anda tamamen görünmez.

Bunu düzeltmek için, yukarı dön düğmesini göstermek üzere bir resim simgesi (yukarı ok gibi) kullanacağız. Bunun için özel CSS eklemeniz gerekecek.

CSS'yi temanızın stil sayfasında veya WPCode aracılığıyla ekleyebilirsiniz. WPCode kullanmak daha güvenlidir çünkü temanızı güncellerseniz kaybolmaz.

Kodu eklemeden önce şunları yapmanız gerekecektir:

1. WordPress Medya Kitaplığınıza bir resim simgesi (ok gibi) yükleyin. Boyut, siteniz için en uygun olanı olabilir — biz örnek olarak 40x40 piksel kullandık. Farklı bir boyut kullanırsanız, aşağıdaki CSS kodundaki yükseklik ve genişlik değerlerini değiştirdiğinizden emin olun.
2. Yüklediğiniz resmin URL'sini kopyalayın. Ardından, aşağıdaki CSS parçasındaki yer tutucu resim URL'sini (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) gerçek resim URL'nizle değiştirdiğinizden emin olun.

Bu, yukarı kaydırma düğmenizin doğru şekilde görüntülenmesini ve fareyle üzerine gelindiğinde dönme efektine sahip olmasını sağlayacaktır.

Şimdi Kod Parçacıkları » + Parçacık Ekle bölümüne gidelim.

Ardından, ‘Özel Kodunuzu Ekleyin (Özel Parçacık).’ üzerine fareyle gelebilirsiniz.

Göründüğünde ‘Parçacığı kullan’ düğmesine tıklayın.

Görünen açılır pencerede bir kod türü seçmeniz gerekecek.

'CSS Snippet'i seçelim.

Düzenleyicide, özel kod parçacığınıza kolay organizasyon için net bir ad verin.

Ardından, aşağıdaki özel CSS kodunu ‘Kod Önizleme’ kutusuna ekleyebilirsiniz:

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    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);
    transform: rotate(360deg);
}</pre>

Bu CSS, onu sabit bir simge boyutunda ve konumunda ayarlar, ayrıca düğmeyi döndüren küçük bir fareyle üzerine gelme animasyonu ekler.

Ekleme bölümünde hiçbir şeyi düzenlemeniz gerekmez. Bu, CSS'nin diğer öğeleri etkilemeden site genelinde uygulanmasını sağlar.

Son olarak, parçacığı etkinleştirmek için anahtarı çevirin ve ‘Değişiklikleri Kaydet’e basın.

Ve temelde hepsi bu!

Pürüzsüz yukarı kaydırma özelliğinizin çalıştığını görmek için şimdi web sitenizi ziyaret edebilirsiniz:

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. SeedProd gibi modern sayfa oluşturucular, bu işlevselliği yerleşik olarak sunarak kod yazmadan bu efekti oluşturmanıza olanak tanır.

Sayfalarınızın daha canlı hissetmesini sağlamanın basit bir yolu. Adım adım talimatlar için, paralaks efekti ekleme kılavuzumuza bakın.

Bir arama geçiş efekti, arama çubuğunu yalnızca biri simgeye tıkladığında göstererek işleri düzenli tutar. Bu özellik, bir kullanıcı onu ortaya çıkarmak için bir düğmeye tıklayana kadar arama giriş alanını gizler. Bu, tasarımınızın daha az karmaşık hissetmesine yardımcı olurken ziyaretçilerin ihtiyaç duydukları şeyi bulmalarını kolaylaştırır.

Temalarını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.

Ve bir resim galeriniz varsa, lightbox efekti kişilerin sayfadan ayrılmadan fotoğrafları daha büyük, dikkat dağıtmayan bir açılır pencerede görüntülemelerine olanak tanır. Bu kaplama efekti, sayfanın geri kalanını karartırken resimleri odaklanmış bir pencerede görüntüler. Küçük bir ayrıntı ama görsellerinizi keşfetmeyi seven herkes için büyük fark yaratıyor.

Ayrıca, Envira Gallery gibi galeri eklentileri bu özelliği eklemeyi kolaylaştırır. Bunu yapmak için, lightbox efektiyle WordPress’te 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 gönderilerinde 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ı?

Gerekmez. Eklenti yöntemi hafiftir ve performans için optimize edilmiştir ve jQuery kod parçacığı küçücüktür. Bu nedenle, site hızınız üzerinde herhangi bir fark edilebilir etkisi olmayacaktır.

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.

Düğmem için bir resim yerine metin bağlantısı kullanabilir miyim?

Kesinlikle. Hem eklenti hem de özel kod yöntemleri, bir simge yerine basit bir “Yukarı Dön” metin bağlantısıyla ayarlanabilir. Eklenti bu seçeneği kutudan çıktığı gibi sunar ve kod yöntemiyle, yalnızca HTML ve CSS'yi stilinize uyacak şekilde değiştirirsiniz.

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. Özellikleri bu şekilde özelleştirmek, kullanıcı dostu bir site oluşturmanın yalnızca bir adımıdır. WordPress temalarına daha derinlemesine dalmak 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
• WordPress Tam Site Düzenleme'ye Yeni Başlayanlar İçin Kapsamlı Bir Kılavuz

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.