Uzun bir aradan sonra sizlerle tekrar buluşmak guzel arkadaşlar, bugun sizler icin benimde sitem de kullandığım " Yukarı Cık Butonu " nun nasıl yapıldığını gostereceğim. Peki bu ne işimize yarar diyebilirsiniz ? haklısınız da... Şunu bilmelisiniz ki bugun bir cok websitesin'de kullanılan bu buton sayfanızda dolaşan kullanıcı icin o kadar pratik bir arac ki .
Orneğin : mynet bir haber sitesi o bile sitesinde bu butonu kullanıyor , neden ? cunku ana sayfası o kadar cok icerik iceriyor ki kullanıcı en aşağından yukarı cıkması zulum . Bu işe , cozum ; tam bu nokta da başlıyor diyebilirim ve sozu fazla uzatmadan hemen işe koyulalım. Yine cok konuşturdunuz beni
Sayın az olsa da oz olan takipcilerim Allah sizlerden bin kere razı olsun. Sa olun takip ediyorsunuz , yorum yazıyorsunuz bende sizlerin bu emeğine karşılık vermek icin daha cok şey bulup paylaşmaya calış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 gercekten cok basit, bir kac satır JavaScript, HTML ve CSS kodu ile uygulamamız 4/4'luk olacak ve işlemizi tamamlayacağız.
WordPress Scroll Up Butonu Yapımı
Yapmamız gerekenlerden :
Temamızın icinde footer.php'yi acın ve aşağıdaki kodu yapıştırın. Not : tanımlamasından oncesine 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 tagının hemen altına kodu yapıştırın.
HTML:
Daha sonra temamızın icindeki function.php dosyasını acarak aşağıdaki kodları ekliyoruz . Bunu bu şekilde yapmamızın tek sebebi uygulamamız ihtiyac halinde calışsın, gerek olmadığı halde calışmasını istemediğimiz icin.
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ı icine ekliyoruz. Daha sonra bu dosyamızı header.php veya index.php dosyamıza include ediyoruz yani Turkce anlamıyla dosyamızı sayfaya cağırıyoruz.
PHP:
jQuery(document).ready(function($) else }); $('#yukari-cik').on('click', function(), 'fast'); return false; }); });
Son olarak ta .css kodlarımızı ekleyerek uygulamamızı calışır hale getiriyoruz.
HTML:
#yukari-cik #yukari-cik:hover background: url('') no-repeat;}
WordPress Scroll Up Butonu Yapımı
Arkadaşlar uygulamamız burada son buluyor sizler icin yukarıda uygulama icin 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