wordpresstr
Administrator
- 125
- 13 Kas 2020
Bir sayfa veya gönderi çok fazla içeriğe sahip olduğunda, kullanıcılar bu içeriği okumak için aşağı kaydırmaya zorlanır. Kullanıcılar aşağı kaydırdıkça, tüm gezinme bağlantılarınız yukarı çıkar. Kullanıcılar bu makaleyi okuduklarında, web sitenizde başka ne yapacaklarını görmek için yukarı kaydırmaları gerekir. Yukarı kaydır düğmesi, kullanıcıları hızlı bir şekilde sayfanın üst kısmına gönderir. Bunu jQuery kullanmadan aşağıdaki gibi bir metin bağlantısı olarak ekleyebilirsiniz:
Yalnızca kullanıcıları sayfanın en üstüne gönderir ve tüm sayfayı milisaniyeler içinde yukarı kaydırır. İşlevsel, ancak yoldaki bir çıkıntı gibi. Düzgün kaydırma bunun tam tersidir. Kullanıcıyı sorunsuz bir şekilde sayfanın başına kaydırır. Bu, hoş bir etki yaratır ve kullanıcı deneyimini iyileştirir.
WordPress'te jQuery ile En İyi Etkiye Düzgün Kaydırma Ekleme
Üst etkiye yumuşak bir kaydırma eklemek için, WordPress temanızda jQuery, biraz CSS ve tek bir HTML kodu kullanacağız. Önce Not Defteri gibi bir metin düzenleyici açın. Bir dosya oluşturun ve farklı kaydedin smoothscroll.js. Bu kodu kopyalayıp dosyaya yapıştırın:
Dosyayı kaydedin ve WordPress tema dizininizin /js/klasörüne yükleyin.
Temanızın bir /js/dizini yoksa, bir tane oluşturun ve smoothscroll.jsona yükleyin . Bu kod, kullanıcıları sayfanın en üstüne götüren bir düğmeye yumuşak kaydırma efekti ekleyen jQuery betiğidir.
Yapmanız gereken sonraki şey smoothscroll.js, temanıza eklemektir.
Bu kodu kopyalayıp temanızın functions.phpdosyasına yapıştırın .
Yukarıdaki kodda, WordPress'e betiğimizi yüklemesini ve eklentimiz buna bağlı olduğundan jQuery kitaplığını yüklemesini söyledik. Artık jQuery bölümünü eklediğimize göre, WordPress sitemize kullanıcıları en üste geri götüren gerçek bir bağlantı ekleyelim. Bu HTML'yi temanızın footer.phpdosyasında herhangi bir yere yapıştırın .
Bir bağlantı eklediğimizi ancak bunu herhangi bir metne bağlamadığımızı fark ettiğiniz gibi. Bunun nedeni, başa dön düğmesini görüntülemek için yukarı oklu bir resim simgesi kullanacağız. Bu örnekte 40x40 piksellik bir simge kullanıyoruz. Bunu temanızın stil sayfasına ekleyin.
Yukarıdaki CSS'de, resim simgemiz için sabit konum ve arka plan resmi olarak bir resim simgesi kullandık. Resim simgenizi WordPress medya yükleyiciyi kullanarak yükleyebilir ve ardından arka plan url'si olarak yapıştırmak için resim url'sini alabilirsiniz. Ayrıca, kullanıcı faresini üzerine getirdiğinde düğmeyi döndüren düğmeye küçük bir CSS animasyonu ekledik.
| 1 | <a href="#" title="Back to top">^Top</a> |
Yalnızca kullanıcıları sayfanın en üstüne gönderir ve tüm sayfayı milisaniyeler içinde yukarı kaydırır. İşlevsel, ancak yoldaki bir çıkıntı gibi. Düzgün kaydırma bunun tam tersidir. Kullanıcıyı sorunsuz bir şekilde sayfanın başına kaydırır. Bu, hoş bir etki yaratır ve kullanıcı deneyimini iyileştirir.
WordPress'te jQuery ile En İyi Etkiye Düzgün Kaydırma Ekleme
Üst etkiye yumuşak bir kaydırma eklemek için, WordPress temanızda jQuery, biraz CSS ve tek bir HTML kodu kullanacağız. Önce Not Defteri gibi bir metin düzenleyici açın. Bir dosya oluşturun ve farklı kaydedin smoothscroll.js. Bu kodu kopyalayıp dosyaya yapıştırın:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 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; }); }); |
Dosyayı kaydedin ve WordPress tema dizininizin /js/klasörüne yükleyin.
Temanızın bir /js/dizini yoksa, bir tane oluşturun ve smoothscroll.jsona yükleyin . Bu kod, kullanıcıları sayfanın en üstüne götüren bir düğmeye yumuşak kaydırma efekti ekleyen jQuery betiğidir.
Yapmanız gereken sonraki şey smoothscroll.js, temanıza eklemektir.
Bu kodu kopyalayıp temanızın functions.phpdosyasına yapıştırın .
| 1 | wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true ); |
Yukarıdaki kodda, WordPress'e betiğimizi yüklemesini ve eklentimiz buna bağlı olduğundan jQuery kitaplığını yüklemesini söyledik. Artık jQuery bölümünü eklediğimize göre, WordPress sitemize kullanıcıları en üste geri götüren gerçek bir bağlantı ekleyelim. Bu HTML'yi temanızın footer.phpdosyasında herhangi bir yere yapıştırın .
| 1 | <a href="#top" id="smoothup" title="Back to top"></a> |
Bir bağlantı eklediğimizi ancak bunu herhangi bir metne bağlamadığımızı fark ettiğiniz gibi. Bunun nedeni, başa dön düğmesini görüntülemek için yukarı oklu bir resim simgesi kullanacağız. Bu örnekte 40x40 piksellik bir simge kullanıyoruz. Bunu temanızın stil sayfasına ekleyin.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #smoothup { height: 40px; width: 40px; position:fixed; bottom:50px; right:100px; text-indent:-9999px; display:none; background: url("http://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, resim simgemiz için sabit konum ve arka plan resmi olarak bir resim simgesi kullandık. Resim simgenizi WordPress medya yükleyiciyi kullanarak yükleyebilir ve ardından arka plan url'si olarak yapıştırmak için resim url'sini alabilirsiniz. Ayrıca, kullanıcı faresini üzerine getirdiğinde düğmeyi döndüren düğmeye küçük bir CSS animasyonu ekledik.