En İyi Ücretsiz WordPress Pürüzsüz Kaydırma Eklentileri 2022
Yayınlanan: 2021-11-09
Bir web sitesi oluşturduysanız, ancak web sitesinin içeriği çok uzun ve bu durumda anlaşılması zorsa, WordPress Smooth Scroll Eklentilerinden yararlanabilirsiniz.
WordPress Pürüzsüz kaydırma eklentileri, web sitesini çok sorunsuz bir şekilde yukarı ve aşağı kaydırmanıza yardımcı olur. Yalnızca web sitesi kullanıcı deneyiminizi iyileştirmekle kalmayacak, aynı zamanda dönüşüm oranı üzerinde de büyük bir etki yaratacaktır. Çünkü kullanıcınız web sitenizle daha uzun süre meşgul olacaktır.
JQuery kullanarak WordPress'te En İyi Efekte Pürüzsüz Kaydırma Nasıl Eklenir?
Diğer çeşitli web sitelerinin neden sayfanın en üstüne düzgün kaydırma efektine sahip olduğunu merak ediyor musunuz? Uzun bir sayfanız varsa, pürüzsüz bir kaydırma efekti eklemek için idealdir.
Bu, kullanıcılarınızın sayfanızdaki deneyimini iyileştirmeye yardımcı olur ve aynı zamanda hızlı bir şekilde en başa dönmelerini kolaylaştırır.
Şimdi soru şu ki, WordPress sitenizdeki en üstteki efekte nasıl düzgün bir kaydırma eklersiniz? Peki, jQuery kullanarak kolayca yapabilirsiniz. Burada jQuery kullanarak nasıl kolayca yapabileceğinizden bahsedeceğiz. Okumaya devam etmek:
Smooth Scroll nedir ve ne zaman kullanılır?
Bir sayfanın veya gönderinin çok fazla içeriği olması durumunda, kullanıcıların hepsini okumak için aşağı kaydırmaları gerekir. Kullanıcılar aşağı kaydırmaya başladığında, gezinme bağlantılarınız yukarı çıkmaya başlar.
Kullanıcı okumayı bitirdiğinde, kendisi için bir şey kalıp kalmadığını görmek için kaydırması gerekir. Üst düğmeye kaydırmak, okuyucunun hızlı bir şekilde çalışmasına izin verir. Bu metin bağlantısını jQuery kullanmanıza gerek kalmadan eklemeyi seçebilirsiniz.
<a href="#" title="Başa dön">^Üst</a>
Bir saniyeden kısa bir süre içinde yukarı kaydırırken okuyucuları sayfanın en üstüne gönderecek. İşlevsel olarak çalışır.
Ancak, düzgün kaydırma bunun tam tersidir. Düzgün kaydırma, kullanıcının sayfanın en üst alanına geri kaydırmasına yardımcı olur. Bu, sitenizdeki kullanıcıların deneyimini iyileştirmeye yardımcı olur.
WordPress'te jQuery ile En İyi Efekte Pürüzsüz Kaydırma Ekleme?
En üstteki efekte yumuşak bir kaydırma eklemek istiyorsanız, jQuery'yi kullanabilirsiniz. Aynı zamanda, WordPress temanızın HTML kodu için tek bir satırla birlikte biraz CSS eklemeniz gerekecek.
İlk başta onunla başlamak için Not Defteri gibi bir metin düzenleyici açmanız gerekir. Şimdi bir dosya oluşturmanız ve onu smoothscroll.js olarak kaydetmeniz gerekiyor. Şimdi dosya alanına bir kod yapıştırmanız gerekiyor:
jQuery(belge).ready(işlev($){
$(pencere).scroll(function(){
if ($(bu).scrollTop() < 200) {
$('#smoothup') .fadeOut();
}
Başka {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('tıklama', function(){
$('html, body').animate({scrollTop:0}, 'hızlı');
yanlış döndür;
});
});
Şimdi dosyayı kaydetmeniz gerekiyor. Bundan sonra WordPress tema dizininin /js /klasörüne yükleyebilirsiniz. Temanızın bir /js/ dizini yoksa, bir tane oluşturmaya başlamalısınız.
Bundan sonra smoothscroll.js dosyasını bu dizine yükleyebilirsiniz. Bu kod, düğmeye yumuşak bir kaydırma efekti ekleyecek olan jQuery betiği olarak adlandırılır. Temelde kullanıcının sayfanın en üstüne sorunsuz bir şekilde gitmesine yardımcı olacak.
Bundan sonra bu smoothscroll.js dosyasını tema alanınıza eklemeniz gerekir. Bunu yapmak istiyorsanız, WordPress'e bir komut dosyası eklemeniz gerekir. İşte temanızın function.php dosyasına yapıştırmanız gereken komut dosyası veya kod:
wp_enqueue_script('smooth up', get_template_directory_uri() .'/js/smoothscroll.js', array('jquery' ), ”, true );
Bu kod, WordPress'e komut dosyasına komut gönderir. Aynı zamanda, eklenti bağımlı olduğu için WordPress'e jQuery kitaplığını yüklemesini söyler.
jQuery bölümünü eklemeyi bitirdiğinize göre, şimdi kullanıcıyı en üst alana götürecek olan word press sitesine asıl bağlantıyı eklemeniz gerekiyor. Temanızın footer.php dosyasının herhangi bir yerine bir HTML kodu yapıştırmanız gerekir:
<a href="#top" title="Başa dön"></a>
Bu adım, dosyaya bağlantının eklenmesini içerir, ancak herhangi bir metinle bağlantılı değildir. Öyledir, çünkü yukarı ok için bir görüntü simgesi kullanmanız gerekir, bu da başa dön düğmesini görüntülemenizi sağlar.
Temanızın stil sayfasına 40x40 piksellik bir simgeyi şu şekilde ekleyebilirsiniz:
#smoothup {
yükseklik: 40 piksel;
genişlik: 40 piksel;
konum:sabit;
alt:50 piksel;
sağ:100 piksel;
metin girintisi:-9999px;
görüntü yok;
arka plan: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-geçiş-süresi: 0.4s;
-moz-geçiş-süresi: 0.4s; geçiş süresi: 0.4s;
}
#smoothup:hover {
-webkit-dönüşüm: döndürme (360 derece) }
arka plan: url('') tekrarsız;
}
Yukarıda bahsedilen CSS'de, görüntü simgesinin konumunu buzlanmayı seçtiniz. Ayrıca arka plan görüntüsü olarak bir görüntü simgesinin kullanımını da içerir. Şimdi, WordPress medya yükleyicisinin yardımıyla resim simgenizi yüklemeniz gerekiyor.
Ardından, arka plan URL'si olarak yapıştırmanız gereken resim URL'sini alabilirsiniz. Düğmeye düğmeyi döndürmeye devam eden bir CSS animasyonu eklediğinizde, kullanıcı fare imlecini düğmenin üzerinde tutar.
Şimdi, kullanıcıların en üst alana geri dönmelerini ve web sitenizde başka neler yapabileceklerini bulmalarını sağlayacak olan en üstteki etkiye gitmeniz gerekiyor.
Özellik içeriklerinin kolay görüntülenmesini sağlamak için kayan bir altbilgi de ekleyebilirsiniz. Kullanıcılarınızın makaleyi paylaşmak için en üst alana gitmesini istemiyorsanız, daha kolay yönetilebilir hale getirmek için kayan sosyal paylaşım çubuğu eklentisini kullanabilirsiniz.
2022'nin pürüzsüz kaydırma eklentileri - çok hafif ve hızlı
WordPress Smooth Scroll Eklentileri, kesinlikle diğer tüm cihazlarda ve tarayıcılarda herhangi bir zorluk yaşamadan çok daha hızlı ve etkili çalışacaktır.
Ayrıca Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, SKT sayfa oluşturucular, Visual Composer ve Elementor gibi diğer eklentilerle harika çalışır.
Blog, Portföy web sitesi, danışmanlık web sitesi, Kurumsal Web Sitesi, e-Ticaret ile ilgili web sitesi, Yaratıcı Ajans, Emlak web sitesi, Kişisel CV, Perakende Şirket web sitesi vb. gibi büyük ölçekli işletme veya küçük ölçekli işletme web siteleri. web sitesinin görünümü ve hissi.
Birçok ücretsiz WordPress Kaydırma eklentisi mevcuttur, ancak tüm ziyaretçilerinizin seveceği çoğu Smooth scroll eklentisini vurguladık. Lütfen alt kısımları kontrol ediniz.
1. Sayfayı kimliğe kaydırın:
Sayfa kaydırma kimliğe tam olarak tanımlanmış ve iyi geliştirilmiş özellikler ve işlevsellik ile sağlanan açık kaynaklı bir yazılımdır. Size pürüzsüz bir kaydırma animasyon efekti verir.
Sayfa kaydırma kimliği eklentisi ayarlanabilir. Belirtilen id ve offset yardımıyla bu eklenti sayfanın boyutunu hesaplayacak ve otomatik olarak ayarlayacaktır.
2. Kaydırmada Yapışkan Menü (veya Herhangi Bir Şey!):
Kaydırma eklentisindeki yapışkan menü (veya herhangi bir şey) ücretsiz olarak mevcuttur. bir menüyü veya herhangi bir öğeyi yapışkan hale getirmenize yardımcı olur. Yapışkan bir öğeye tıkladığınızda, sizi doğrudan sayfanın en üstüne kaydırır. Yapışkan hale getirmek istediğiniz doğru öğeyi çıkarmak için yalnızca birkaç veya temel HTML/CSS bilgisine ihtiyacınız vardı.
3. WordPress Infinite Scroll – Ajax Daha Fazlasını Yükleyin:
Ajax Daha fazla yükle, bir WordPress kullanıcısı için özel olarak oluşturulmuştur, böylece web sitesini sorunsuzca kaydırabilirler. Ajax daha fazla yükle tembel gönderiler, tek gönderiler, sayfalar ve yorum yüklemeye yardımcı olur. Bu eklentiler en çok WooCommerce gibi e-ticaret eklentileri ile tanınır.
4. Kolay Pürüzsüz Kaydırma Bağlantıları:
Kendi başınıza aşağıdan yukarıya bir özellik oluşturabilirsiniz. çünkü SEasy Smooth Scroll Links özelleştirilebilir ve çok hafif ağırlıklı bir eklentidir.
Yukarı kaydırma öğelerini ayarlamak için resimlerden herhangi birini seçmeniz yeterlidir. Ayrıca eleman konumunu sol, orta, sağ tarafa ayarlayabilirsiniz. Bu eklenti aynı zamanda açık kaynaklı bir yazılımdır.
5. MouseWheel Pürüzsüz Kaydırma:
MouseWheel Smooth Scroll eklentisi, tüm bağlantı bağlantılarını kaydırmak için çok düzgün. Genellikle sayfayı aşağıdan yukarıya kaydıracak olan sağ tarafa yerleştirilir.
Dolayısıyla bu eklenti RTL'yi destekler ve WordPress panosunda gereksiz menü öğeleri oluşturmaz.
6. WPOS ile Düzgün Kaydırma:
WPOS eklentisi ile Smooth Scroll hafif ağırlıklı olduğundan, her sayfada yukarıdan aşağıya kaydırmayı kolayca özelleştirebilirsiniz. Tek satır kod bile yazmanıza gerek yok.
Animasyon hızını, türünü, yüksekliğini, genişliğini vb. ihtiyaçlarına göre ayarlayabilirsiniz. Bu eklenti, Elementor sayfa oluşturucu ile daha iyi çalışır
7. Basit Üste Kaydır Düğmesi:
Bağlantı bağlantısına ancak aynı sayfada yumuşak bir kaydırma efekti eklenebilir. Bu efektler, tüm gönderilere ve sayfaya veya belirli gönderilere ve sayfalara uygulanabilir. Bu ayarı pano ayarı >>Basit Yukarı Kaydır Düğmesinde bulabilirsiniz.
- Tüm gönderi ve sayfa için başvurmayı seçin
– Yalnızca ana sayfayı seçin
– Yalnızca belirli sayfaları seçin
- Yalnızca belirli gönderileri seçin
- Kaydırma hızına karar verin
8. NS Pürüzsüz yukarı kaydırma:
Surbma'nın daha aktif kullanıcıları var. Bu eklenti aynı zamanda düzgün bir kaydırma olduğundan. Web sitenizdeki her bağlantı bağlantısının etkisini elde edebilirsiniz. Menüye veya herhangi bir gezinme bölümüne yumuşak kaydırma efekti eklenebilir.
Bu eklenti için herhangi bir seçenek sunulmadığından özelleştirmenize bile gerek yok. JavaScript ve WordPress programlama konusunda bilgi ve tecrübeniz varsa ihtiyacınıza göre bazı değişiklikler yapabilirsiniz. Ama yoksa dokunmamanızı öneririm. kurulumdan hemen sonra çalışmaya başlayacağından.
9. WPFront Scroll Top :
WPFront Scroll Top Plugin'i kullanarak aşağıdan yukarıya kolayca kaydırabilirsiniz. Aralarından seçim yapabileceğiniz farklı seçeneklerle tamamen özelleştirilebilir. Bazı animasyonlarla, yukarıya doğru kaydırılacaktır.
Kendi başınıza metin, resim ve düğmeler oluşturabilirsiniz. ayrıca sayfaları ve gönderileri filtreleyebilirsiniz.
10. Sonsuz Parşömeni Yakala:
Catch Infinite scroll, web sitenizdeki kullanıcı katılımını artırmanıza yardımcı olacaktır. Bunun arkasındaki ana sebep, bir Jetpack sonsuz kaydırmadır. Eklentileriniz yüklenip etkinleştirildikten sonra müşteriniz ve kullanıcınız web sitesi sayfasını kaydırabilir.
Bunların hepsi en iyi Ücretsiz WordPress Pürüzsüz Kaydırma Eklentileri 2022.