
Ziyaretcilerinize, sitenizde daha kolay gezinme imkanı tanımak istiyorsanız Yukarı cık buttonu olmazsa olmaz. Ozellikle yukselik değeri fazla olan web sayfalarında ziyaretcinin hızlıca sitenin ust kısmına donmesini sağlarsınız. jQuery desteği olmadan bu işlemi yaptığımızda gecişler daha keskin olabiliyor. Bu yuzden makalemizin devamında jQuery de yazılımımıza katkı sağlayacak.
Nasıl yapılır?
Yumuşak Yukarı Cık buttonunu ister eklentiyle isterseniz de manuel yontemle kurabilirsiniz. Tercih sizin. Adobewordpress olarak iki yolu da detaylandıracağız.
Eklenti ile yapımı
Bildiğiniz gibi WordPress buyuk bir eklenti arşivine sahip. Gittikce buyuyen bu arşiv size herşeyin kısayolunu sunuyor. Eğer makalemizin devamında kod satırları size yabancıysa Smooth page scroll to top isimli eklentiyi kurarak bu işlemi yapabilirsiniz.
Fakat WordPress uzerine kafa patlatan bir cok takipcimiz eklentilerden ziyade manuel yolu tercih ediyor.
Kurulum
Eklenti tamamıyla ucretsiz.
WordPresse eklentilerin nasıl kurulduğunu kısaca hatırlayalım.
Dosyayı indirin ve zip icerisinden cıkarın. Eklenti klasorunu FTP aracılığıyla /wp-content/plugins/ dizinine upload edin, WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin. Download Adresi : Smooth page scroll to top
Manuel yol ile yapımı
Yapmamız gereken işlemler gayet basit. Birkac satır JavaScript, HTML ve CSS kodu işlemi tamamlayacak.
HTML
Temanızın bulunduğu dizine gidin ve footer.phpyi acın. Dosyanın icerisindeki tanımlamasından oncesine aşağıdaki tek satırlık kodu yapıştırın.
HTML:
Şimdi de aynı dizindeki function.phpyi acıyoruz ve aşağıdaki PHP kodunu ekliyoruz. Boylece script sadece ihtiyac dahilinde calışıyor.
PHP:
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/smoothscroll.js', array( 'jquery' ), '', true );
JavaScript
Şimdi aşağıdaki kodlardan yeni bir .js dosyası yaratıyoruz ve adını smoothscrool.js olarak tanımlıyoruz.
Kod:
jQuery(document).ready(function($) else }); $('#yukari-cik').on('click', function(), 'fast'); return false; }); });
Bu dosyayı da ana dizinimize, yani function.php dosyasının olduğu dizine atalım.
CSS
Sıra geldi bu buttonun tasarımını oluşturmaya. CSS dosyamıza aşağıdaki kodları ekliyoruz.
HTML:
#yukari-cik #yukari-cik:hover background: url('') no-repeat;}
Gorduğunuz gibi yukari.png isimli bir gorsel kullandık.
Kapanış
Yumuşak gecişli Yukarı cık buttonunun nasıl yapılacağına dair iki adet yontem sunduk. Aslına bakarsanız yukarıdaki kucuk kodlamaları yerlerine yerleştirmeniz eklentiyi kurmanızdan daha kısa surede yapılabilir. Dolayısıyla hem performans acısından, hem de kurulum işlemi acısından sizlere Manuel yolu oneriyoruz.
Bizden şimdilik bu kadar. Hoşcakalın.
Kaynak : http://www.adobewordpress.com/wordpresse-yumusak-gecisli-yukari-cik-butonu-ekleyin