Bir Geliştirici Kılavuzu JQuery kullanarak WordPress'te En İyi Efekte Düzgün Kaydırma Ekleme

Yayınlanan: 2022-06-03

WordPress'i kusursuzluğu ve konu verimli bir İçerik Yönetim Sistemi kullanmaya geldiğinde işleri çok daha kolay hale getirmesi nedeniyle seviyoruz.

Abartılı değil, ancak kolay ve erişilebilir web geliştirme, yeni web yöneticileri için bir nimettir. WordPress, çeşitli web sitesi sahiplerinin kullanıcılarına süper pürüzsüz ve etkileşimli bir arayüz sunmasına olanak tanıyan düzinelerce özelliğe sahiptir.

WordPress'te yeni olanlar, blogunuzu nasıl başlatacağınız ve yöneteceğiniz konusunda adım adım kılavuz içeren The Blog Starter gibi kaynaklarla ilgili WordPress eğitimlerine göz atabilir.

Web sitenizdeki yalnızca içeriğe odaklanıyorsanız, duyarlı ve görsel olarak çekici bir web sitesinin içerik kadar önemli olduğunu size söylemek isteriz.

Mevcut bir web siteniz varsa ve nereden başlayacağınızı bilmiyorsanız, web sitenizin görünümünü ve arayüzünü düşünmek için her gün 30 dakika ayırın ve zaman ayırın. Düzeltmeniz gereken unsurları yavaş yavaş bulacağınız için bize güvenin. Web sitenizi büyük görsel çabalarla güçlendirdiğinizde, konuşma oranları artacaktır.

Kullanıcılara web siteniz için sorunsuz bir ziyaret deneyimi sağlamaya şimdiden yatırım yapmış biriyseniz, sizi tebrik ederiz! Web sitelerinde daha keskin bir değişiklik yapmak ve web sitelerinin genel görsel performansını iyileştirmek isteyen herkes için harika bir eğitimimiz var.

Bu blog yazısında, jQuery yardımıyla WordPress'te en üstteki efekte Smooth Scroll ekleme konusunda size rehberlik edelim.

Pürüzsüz Kaydırma neden kullanılır?

Genellikle, web sitelerinde uzun makaleler olduğunda ve kullanıcı bunları gözden geçirdiğinde, web sayfasının sonuna ulaşmayı sinir bozucu bulabilirler.

Bu nedenle, web siteniz yalnızca tek bir tıklamayla en üste sorunsuz bir şekilde kaydırma sağlayabilirse, okuyucu web sitenizi kusursuz ve süper pürüzsüz bulacaktır.

Bu nedenle, bir web sitesi sahibi veya dijital pazarlamacıysanız, fırsatçı olmanız ve web sitenize ek ve organik bir kitle çekmek için gereken her şeyi yaptığınızdan emin olmanız gerekir.

WordPress'te En İyi Etkiye Düzgün Kaydırmayı Eklemenin Yolları

WordPress'te To Effect'e yumuşak bir kaydırma ekleyebilmek için aşağıdaki yollardan herhangi birini kullanabilirsiniz:

1. jQuery'de yazılmış bazı kodları kullanma

2. Bir eklenti kullanmak

Genellikle eklentiler yerine kodlamayı tercih ederiz çünkü bu, doğru şekilde yapılırsa hıçkırıklara yer bırakmaz. Eklentiler bazen web sitesinin yükleme hızını azaltabilir ancak kodlama, ilk etapta hızı etkilemeden bazı özelleştirmeler eklemenize yardımcı olabilir. Bu dersimizde özellikle kodlama sürecini anlatacağız.

Kodlama ile WordPress'te Smooth Scroll Top Effect'e Nasıl Eklenir?

WordPress web sitenize kodlama kullanarak yumuşak bir kaydırma efekti eklemek için şu dört adımı uygulamanız gerekir:

Bir “Smoothscrolleffect.js” dosyası oluşturun.
“Smoothscrolleffect.js” işlevini temanıza ekleyin.
Simgeyi temaya ekleyin
Efekti web sayfalarıyla ilişkilendirme

Bu 4 adımı tamamladığınızda, daha fazla okuyucu almaya hazırsınız. Bir programcıysanız, gereksinimlerinize göre kendi komut dosyalarınızı oluşturabilirsiniz.

Programcı olmayanlar için her adımı ayrıntılı olarak açıkladık ve gerekli kodu ekledik. Bu nedenle, adımları okumanız ve buna göre uygulamanız yeterlidir.

1. Adım: Bir "Smoothscrolleffect.js" dosyası oluşturun

Bu adım için oluşturacağınız en önemli dosya budur. Bu adımı etkili bir şekilde uygulayamazsanız, tam olarak düzgün bir kaydırma elde edemeyebilirsiniz.

Bu adımda, Top efektine düzgün kaydırma ekleyecek bir işlev içeren bir “.js” (jQuery) dosyası oluşturacağız. Bir “.js” dosyası oluşturmak için adımları izleyin ve web sitesinin dizinine yükleyin.

Sisteminizde yeni bir not defteri dosyası oluşturun.
Aşağıdaki kodu kopyalayın:

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;

});

Kodu not defteri dosyasına yapıştırın.
Herhangi bir adla kaydedin ancak uzantının “.js” olduğundan emin olun.
Web sitenizin cPanel'ine giriş yapın.
Web sitesinin “/js/” dizinine gidin

Not: Web sitenizde bir js dizini yoksa, bir tane oluşturmanız gerekir.

Sisteminizde oluşturduğunuz “.js” dosyasını dizine yükleyin.

2. Adım: Yumuşak kaydırmayı temaya ekleyin

Yukarıdaki adımda, web sitesinin dizininde bir dosya (yumuşak kaydırma işlevine sahip) oluşturduk ve bu adımda yumuşak kaydırma işlevini temamıza bağlayacağız. Bunu yapmak için aşağıdaki adımları izleyin:

WordPress Yönetici panosunda tema düzenleyicinize gidin. Düzenlemek için function.php dosyasını açın. ve içine aşağıdaki kodu yapıştırın.

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

"Değişiklikleri Kaydet"e basın.

Adım 3. Temaya simge ekleyin

Açıkçası, web sitenize, okuyucuya Yukarıya kaydırmasını önerebileceğiniz bir simge eklemek istiyorsunuz. Bunun yanı sıra, onu daha etkileşimli ve duyarlı hale getirmeniz gerekiyor. Bunu CSS yardımıyla aşağıdaki gibi yapabilirsiniz:

Tema Düzenleyici'de temanızın stylesheet.css dosyasına gidin.
Aşağıdaki kodu kopyalayın.

#smoothup {

yükseklik: 40 piksel;

genişlik: 40 piksel;

Konum:sabit;

Alt:50 piksel;

Sağ:100 piksel;

Metin girintisi:-9999px;

Görüntü yok;

Arkaplan: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;

}

Temanızın stil sayfasına yapıştırın.
"Değişiklikleri Kaydet"e basın.

Burada simgeyi ihtiyaçlarınıza göre değiştirebilirsiniz; referans kullandık. Resmi değiştirmek için web sitenize yükleyebilir ve yukarıdaki kodda bulunan Arka Plan: URL alanına yapıştırabilirsiniz.

Adım 4: Düzgün kaydırmayı web sayfalarıyla ilişkilendirme.

Artık bir “.js” dosyası oluşturduk ve onu web sitesinin dizinine yükledik, onu temayla ekledik ve efekt için bir simge oluşturduk, sıra son adıma geldi. Şimdi pürüzsüz kaydırma efektini web sitesinin tüm web sayfalarına bağlayacağız. Adımları takip et:

Footer.php'yi tema düzenleyicide açın.
Aşağıdaki kodu kopyalayın:
1. <a href=”#top” id=”smoothup” title=”Başa dön”></a>
Footer.php sayfasına yapıştırın.
"Değişiklikleri Kaydet"e basın.

Tebrikler!, jQuery kullanarak WordPress web sitenize sorunsuz kaydırma efektini başarıyla eklediniz.

Çözüm

Yukarıdaki öğreticinin, JQuery kullanarak WordPress'te 'pürüzsüz Yukarı kaydırma' efektini eklemenize ve kullanıcılarınızı harika bir web sitesi gezinme deneyimi ile etkilemenize etkili bir şekilde yardımcı olacağını umuyoruz.

Yukarıda belirtilen adımları uygularken herhangi bir sorunla karşılaşırsanız, aşağıya bir yorum bırakarak bize bildirin.