به قالبتون دکمه برو به بالا اضافه کنید

خب حتما در سایتایی دید که وقتی شروع می کنید به پایین رفتن یک دکمه ای در پایین صفحه ظاهر میشه . وقتی روی دکمه کلیک کنید شما رو به اول صفحه می بره . وقتی مطالب طولانی باشن قابلیت واقعا کاربردی هستش . در این آموزش قص داریم یک عدد دکمه برو به بالا درست کنیم .

۱- عکس دکمه

ابتدا باید عکس دکمه رو درست کنیم .با استفاده از نرم افزارهای گرافیکی مثل فتوشاپ و گیمپ می تونید به راحتی این کار رو انجام بدید . یا این در اینترنت جستجو کنید و دکمه مورد نظرتون رو پیدا کنید .

بعد اون رو روی هاست خودتون آپلود کنید و آدرسش رو کپی کنید .

۲-کد jquery

برای اینکه زحمتتون رو کمتر کنیم یه کد آماده در زیر هستش که می تونید ازش استفاده کنید .

کد رو در آدرس زیر در پرونده پوسته خودتون کپی کنید .

wp-content > themes > your-theme > js

jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(duration);
} else {
$('.topbutton') .fadeIn(duration);
}
});
$('.topbutton').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});

 

۳-کد استایل

کد استایل رو در قالبتون کپی کنید. دقت کنید که آدرس بک گراند همون آدرس عکسی هستش که آپلود کردین . لطفا اصلاحش کنید .

.topbutton {
height:50px;
width:50px;
position:fixed;
right:5px;
bottom:5px;
z-index:1;
background-image: url("http://example.com/wp-content/uploads/2015/01/topbutton.png");
background-repeat:no-repeat;
display:none;
}

۴-کد function

خب حالا کد زیر رو در functions.php قرار بدید .

function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

۵-کد footer

حالا کد لینک زیر رو در هر جایی که می خواید کپی کنید . بهتره که توی فایل footer.php قالبتون کپی کنید .

<a href="#" class="topbutton"></a>

 در آخر

امیدوارم که این آموزش براتون مفید بوده باشه . در صورتی که حوصله ندارین یا اینکه به هر دلیلی  نمی خواید تو قالبتون دست ببرید می تونید از افزونه زیر هم استفاده کنید

افزونه برو به بالا

 

منبع