- 2,587 بازدید
- بدون نظر
رفتن به ابتدای صفحه در وردپرس این امکان را به بازدیدکنندگان می‌دهد تا در صفحاتی که محتوای طولانی دارد و لازم است تا اقدام به اسکرول در صفحه کنند تا به ابتدای صفحه هدایت شوند می‌توانند به راحتی با کلیک بر روی دکمه ساخته شده به ابتدای صفحه هدایت شوند.
در این مقاله از ایکس اسکریپت قصد دارم تا با استفاده از جاوا اسکریپت نحوه ساخت دکمه بالارونده و رفتن به ابتدای صفحه در وردپرس را با کدهایی که در ادامه قرار خواهم داد آموزش دهم.
رفتن به ابتدای صفحه در وردپرس
برای شروع کار ابتدا لازم است تا کتابخانه جی‌کوئری را به سایت خود اضافه کنید، برای این منظور فایل header.php قالب خود را باز کرده و کد زیر را در مکان مناسبی بین کد </head><head> قرار دهید.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/۱.۴.۳/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() > ۱۰۰۰) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to ۰px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: ۰
}, ۸۰۰);
return false;
});
});
});
//]]>
</script>
در مرحله بعد لازم است تا تغییرات مربوط به استایل را برای دکمه بالا رفتن در وردپرس اعمال کنید، برای این منظور فایل style.css را در قالب خود باز کرده و کدهای زیر را در آن قرار دهید.
#back-top {
position: fixed;
bottom: ۱۰px;
margin-left: -۱۵۰px;
}
#back-top a {
width: ۱۰۸px;
display: block;
text-align: center;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: ۱s;
-moz-transition: ۱s;
transition: ۱s;
}
#back-top a:hover {
color: #۰۰۰;
}
/* arrow icon (span tag) */
#back-top span {
width: ۱۰۸px;
height: ۱۰۸px;
display: block;
margin-bottom: ۷px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: ۱۵px;
-moz-border-radius: ۱۵px;
border-radius: ۱۵px;
/* background color transition */
-webkit-transition: ۱s;
-moz-transition: ۱s;
transition: ۱s;
}
#back-top a:hover span {
background-color: #۷۷۷;
}
همانطور که در خط ۲۶ این کد مشاهده می‌کنید آدرس یک تصویر که مربوط به ایکن بالا رفتن در وردپرس می‌باشد قرار دارد، یک آیکون مناسب برای آن را نیز در پوشه اصلی قالب خود آپلود کرده و نام و فرمت آن را وارد کنید.
حال مجددا فایل header.php را باز کرده و کد زیر را بعد از تگ <body> در بالاترین بخش از آن قرار دهید.
<div id="top"></div>
در نهایت در انتهای همین فایل درست قبل از کد </body> قطعه کد زیر را برای نمایش دکمه بالا رفتن به ابتدای صفحه در وردپرس را قرار دهید.
<p style="display:block;" id="back-top"> <a href="#top"><span></span>رفتن به بالا</a> </p>
پس از ذخیره فایل در نهایت دکمه‌ای در صفحات سایت برای بالارفتن در وردپرس نمایش داده خواهد شد.
درباره نویسنده : Mahdi
اگر زمین می خوری به این معنا نیست که شکست خوردی.
اگر زمین خوردی و بلند نشدی شکست خورده ای!!