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.

WordPress’e 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.php’yi 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.php’yi 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