WordPress’e yumuşak geçişli ‘Yukarı Çık’ butonu ekleyin!

Ziyaretçilerinize, sitenizde daha kolay gezinme imkanı tanımak istiyorsanız ‘Yukarı çık’ buttonu olmazsa olmaz. Özellikle yükselik değeri fazla olan web sayfalarında ziyaretçinin hızlıca sitenin üst kısmına dönmesini sağlarsınız. jQuery desteği olmadan bu işlemi yaptığımızda geçişler daha keskin olabiliyor. Bu yüzden makalemizin devamında jQuery de yazılımımıza katkı sağlayacak.

Nasıl yapılır?

Yumuşak ‘Yukarı Çık’ buttonunu ister eklentiyle isterseniz de manuel yöntemle kurabilirsiniz. Tercih sizin. Adobewordpress olarak iki yolu da detaylandıracağız.

Eklenti ile yapımı

Bildiğiniz gibi WordPress büyük bir eklenti arşivine sahip. Gittikçe büyüyen 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 üzerine kafa patlatan bir çok takipçimiz eklentilerden ziyade manuel yolu tercih ediyor.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.
2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,
3. 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. Birkaç satır JavaScript, HTML ve CSS kodu işlemi tamamlayacak.

HTML

Temanızın bulunduğu dizine gidin ve footer.php’yi açın. Dosyanın içerisindeki </body> tanımlamasından öncesine aşağıdaki tek satırlık kodu yapıştırın.

<a href="#top" id="yukari-cik" title="Yukarı çık"></a>

Şimdi de aynı dizindeki function.php’yi açıyoruz ve aşağıdaki PHP kodunu ekliyoruz. Böylece script sadece ihtiyaç dahilinde çalışıyor.

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.

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#yukari-cik') .fadeOut();
        } else {
            $('#yukari-cik') .fadeIn();
        }
    });
    $('#yukari-cik').on('click', function(){
        $('html, body').animate({scrollTop:0}, '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.

#yukari-cik {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
z-index:9999;
display:none;
background: url("yukari.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
 }

#yukari-cik:hover {-webkit-transform: rotate(360deg) }background: url('') no-repeat;}

Gördüğünüz gibi yukari.png isimli bir görsel kullandık.

Kapanış

Yumuşak geçişli ‘Yukarı çık’ buttonunun nasıl yapılacağına dair iki adet yöntem sunduk. Aslına bakarsanız yukarıdaki küçük kodlamaları yerlerine yerleştirmeniz eklentiyi kurmanızdan daha kısa sürede yapılabilir. Dolayısıyla hem performans açısından, hem de kurulum işlemi açısından sizlere ‘Manuel yolu’ öneriyoruz.

Bizden şimdilik bu kadar. Hoşçakalın.

Kaynak : http://www.adobewordpress.com/wordpr...butonu-ekleyin

Paylaşımlarınızı takipteyim, ellerinize sağlık. Her yerde olan klişe şeyler değil optimizasyon için iş görecek şeyler paylaştığınız için teşekkür ederim. Eklentisiz olması da ayrıca iyi.