WordPresse 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 Yukarı Çık Butonu Eklentisi 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.
Dosyayı indirin ve zip içerisinden çıkarın.
Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,
WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.
Download Adresi : Yukarı Çık Butonu Eklentisi
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.
Bir önceki yazımız olan Siteniz Scroll Aşağı İndirildikçe Yükselsin başlıklı makalemizde scroll ve siteniz scroll ile rahat kullanımı hakkında bilgi sağlamaktadır.
[…] önceki yazımız olan WordPresse Yukarı Çık Butonu Ekleyin başlıklı makalemizde wordpress yukarı çık butonu ve wordpress sitenize yukarı çık butonu […]