رفتن به ابتدای صفحه در وردپرس با جاوا اسکریپت
رفتن به ابتدای صفحه در وردپرس این امکان را به بازدیدکنندگان می‌دهد تا در صفحاتی که محتوای طولانی دارد و لازم است تا اقدام به اسکرول در صفحه کنند تا به ابتدای صفحه هدایت شوند می‌توانند به راحتی با کلیک بر روی دکمه ساخته شده به ابتدای صفحه هدایت شوند.
در این مقاله از دکتر وردپرس قصد دارم تا با استفاده از جاوا اسکریپت نحوه ساخت دکمه بالارونده و رفتن به ابتدای صفحه در وردپرس را با کدهایی که در ادامه قرار خواهم داد آموزش دهم.
رفتن به ابتدای صفحه در وردپرس
برای شروع کار ابتدا لازم است تا کتابخانه جی‌کوئری را به سایت خود اضافه کنید، برای این منظور فایل header.php قالب خود را باز کرده و کد زیر را در مکان مناسبی بین کد </head><head> قرار دهید.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
سپس پس از کد فوق قطعه کدهای زیر را نیز قرار داده و فایل را ذخیره کنید.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, ۸۰۰);
return false;
});
});
});
//]]>
</script>
در مرحله بعد لازم است تا تغییرات مربوط به استایل را برای دکمه بالا رفتن در وردپرس اعمال کنید، برای این منظور فایل style.css را در قالب خود باز کرده و کدهای زیر را در آن قرار دهید.
#back-top {
position: fixed;
bottom: 10px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
همانطور که در خط 26 این کد مشاهده می‌کنید آدرس یک تصویر که مربوط به ایکن بالا رفتن در وردپرس می‌باشد قرار دارد، یک آیکون مناسب برای آن را نیز در پوشه اصلی قالب خود آپلود کرده و نام و فرمت آن را وارد کنید.
حال مجددا فایل header.php را باز کرده و کد زیر را بعد از تگ <body> در بالاترین بخش از آن قرار دهید.
<div id="top"></div>
در نهایت در انتهای همین فایل درست قبل از کد </body> قطعه کد زیر را برای نمایش دکمه بالا رفتن به ابتدای صفحه در وردپرس را قرار دهید.
<p style="display:block;" id="back-top"> <a href="#top"><span></span>رفتن به بالا</a> </p>
پس از ذخیره فایل در نهایت دکمه‌ای در صفحات سایت برای بالارفتن در وردپرس نمایش داده خواهد شد.
