Hayırlı sabahlar ,
Uzun bir aradan sonra sizlerle tekrar buluşmak güzel arkadaşlar, bugün sizler için benimde sitem de kullandığım " Yukarı Çık Butonu " nun nasıl yapıldığını göstereceğim. Peki bu ne işimize yarar diyebilirsiniz ? haklısınız da... Şunu bilmelisiniz ki bugün bir çok websitesin'de kullanılan bu buton sayfanızda dolaşan kullanıcı için o kadar pratik bir araç ki .
Örneğin : mynet bir haber sitesi o bile sitesinde bu butonu kullanıyor , neden ? çünkü ana sayfası o kadar çok içerik içeriyor ki kullanıcı en aşağından yukarı çıkması zulüm . Bu işe , çözüm ; tam bu nokta da başlıyor diyebilirim ve sözü fazla uzatmadan hemen işe koyulalım. Yine çok konuşturdunuz beni
Sayın az olsa da öz olan takipçilerim Allah sizlerden bin kere razı olsun. Sa olun takip ediyorsunuz , yorum yazıyorsunuz bende sizlerin bu emeğine karşılık vermek için daha çok şey bulup paylaşmaya çalışacağım bizlerden ayrı kalmayın , kalanları da bir an evvel getirin ... Ne olursan ol yine gel demiş Muhammed Celâleddin-i Rûmî ( Mevlana ) ...
Arkadaşlar yapacağımız işlemler gerçekten çok basit, bir kaç satır JavaScript, HTML ve CSS kodu ile uygulamamız 4/4'lük olacak ve işlemizi tamamlayacağız.
WordPress Scroll Up Butonu Yapımı
Yapmamız gerekenlerden :
Temamızın içinde footer.php'yi açın ve aşağıdaki kodu yapıştırın. Not : </body> tanımlamasından öncesine aşağıdaki tek satırlık kodu yapıştırın eğer footer.php dosyasında bu kapanış tagı yoksa eğer header.php veya index.php ye bakın <body> tagının hemen altına kodu yapıştırın.
Daha sonra temamızın içindeki function.php dosyasını açarak aşağıdaki kodları ekliyoruz . Bunu bu şekilde yapmamızın tek sebebi uygulamamız ihtiyaç halinde çalışsın, gerek olmadığı halde çalışmasını istemediğimiz için.
Şimdi ise scroolup.js adında bir dosya oluşturup aşağıdaki kodları içine ekliyoruz. Daha sonra bu dosyamızı header.php veya index.php dosyamıza include ediyoruz yani Türkçe anlamıyla dosyamızı sayfaya çağırıyoruz.
Son olarak ta .css kodlarımızı ekleyerek uygulamamızı çalışır hale getiriyoruz.
WordPress Scroll Up Butonu Yapımı
Arkadaşlar uygulamamız burada son buluyor sizler için yukarıda uygulama için bir adet buton paylaşıyorum Allah'a emanet olun , sağlıcakla kalın. İnşallah yararlı bir makale olmuştur ... Yorumlarınızı bekliyorum
Uzun bir aradan sonra sizlerle tekrar buluşmak güzel arkadaşlar, bugün sizler için benimde sitem de kullandığım " Yukarı Çık Butonu " nun nasıl yapıldığını göstereceğim. Peki bu ne işimize yarar diyebilirsiniz ? haklısınız da... Şunu bilmelisiniz ki bugün bir çok websitesin'de kullanılan bu buton sayfanızda dolaşan kullanıcı için o kadar pratik bir araç ki .
Örneğin : mynet bir haber sitesi o bile sitesinde bu butonu kullanıyor , neden ? çünkü ana sayfası o kadar çok içerik içeriyor ki kullanıcı en aşağından yukarı çıkması zulüm . Bu işe , çözüm ; tam bu nokta da başlıyor diyebilirim ve sözü fazla uzatmadan hemen işe koyulalım. Yine çok konuşturdunuz beni
Sayın az olsa da öz olan takipçilerim Allah sizlerden bin kere razı olsun. Sa olun takip ediyorsunuz , yorum yazıyorsunuz bende sizlerin bu emeğine karşılık vermek için daha çok şey bulup paylaşmaya çalışacağım bizlerden ayrı kalmayın , kalanları da bir an evvel getirin ... Ne olursan ol yine gel demiş Muhammed Celâleddin-i Rûmî ( Mevlana ) ...
Arkadaşlar yapacağımız işlemler gerçekten çok basit, bir kaç satır JavaScript, HTML ve CSS kodu ile uygulamamız 4/4'lük olacak ve işlemizi tamamlayacağız.
WordPress Scroll Up Butonu Yapımı
Yapmamız gerekenlerden :
Temamızın içinde footer.php'yi açın ve aşağıdaki kodu yapıştırın. Not : </body> tanımlamasından öncesine aşağıdaki tek satırlık kodu yapıştırın eğer footer.php dosyasında bu kapanış tagı yoksa eğer header.php veya index.php ye bakın <body> tagının hemen altına kodu yapıştırın.
HTML:
<a href="#top" id="yukari-cik" title="Yukarı çık"></a>Daha sonra temamızın içindeki function.php dosyasını açarak aşağıdaki kodları ekliyoruz . Bunu bu şekilde yapmamızın tek sebebi uygulamamız ihtiyaç halinde çalışsın, gerek olmadığı halde çalışmasını istemediğimiz için.
PHP:
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/smoothscroll.js', array( 'jquery' ), '', true );Şimdi ise scroolup.js adında bir dosya oluşturup aşağıdaki kodları içine ekliyoruz. Daha sonra bu dosyamızı header.php veya index.php dosyamıza include ediyoruz yani Türkçe anlamıyla dosyamızı sayfaya çağırıyoruz.
PHP:
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;
});
});Son olarak ta .css kodlarımızı ekleyerek uygulamamızı çalışır hale getiriyoruz.
HTML:
#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;}WordPress Scroll Up Butonu Yapımı
Arkadaşlar uygulamamız burada son buluyor sizler için yukarıda uygulama için bir adet buton paylaşıyorum Allah'a emanet olun , sağlıcakla kalın. İnşallah yararlı bir makale olmuştur ... Yorumlarınızı bekliyorum