دوستان همیشگی وبمستر98 موضوع امروز آموزش وردپرس، رفتن به ابتدای صفحه در وردپرس به کمک جاوا اسکریپت و افزونه می باشد. همان طور که می دانید در سایت ها به دلیل ازدیاد مطالب و محتوا صفحه مرورگر اسکرول می خورد و برای دیدن تمام مطالب سایت و سایر محتوا ها باید از نوار اسکرول استفاده نماییم تا به پایین صفحه برویم. حال وقتی به انتهای مطالب در پایان صفحه رفتیم دوباره برای برگشت و رفتن به سایر صفحات باید صفحه را رو به بالا اسکرول نماییم و این به خودی خود خسته کننده و مشکل ساز می باشد. پس باید راه چاره ای برای آن اندیشید. همان طور که در مقالات قبل با استفاده از جی کوئری تکنیکی برای ایجاد اسکرول خودکار آموزش دادیم حال در این مقاله می خواهیم به کمک جاوا اسکریپت و افزونه WPFront Scroll Top طرز اسکرول خودکار را آموزش دهیم. تا پایان همراه ما باشید.
رفتن به ابتدای صفحه در وردپرس به کمک جاوا اسکریپت و افزونه
در واقع یکی از خصوصیات مهم هر سایتی استفاده راحت کاربر و دسترسی سریع به تمام قسمت های آن می باشد. شما وقتی یک مطلب طولانی در یک سایت را مطالعه می کنید اگر دکمه ای برای انتقال به ابتدای صفحه در نظر گرفته نشده باشد مجبور می شوید از اسکرول کردن صفحه استفاده نمایید. تعداد زیادی از قالب های وردپرس دارای دکمه ای در پایین صفحه خود می باشند که این امکان را برای شما فراهم می کند تا بتوانید به ابتدای وبالای صفحه بروید اما خب بعضی دیگر از قالب ها این امکان را ندارند. اما نگران نباشید و همراه ما باشید.
رفتن به ابتدای صفحه در وردپرس به کمک جاوا اسکریپت و افزونه
رفتن به ابتدای صفحه در وردپرس با استفاده از جاوا اسکریپت
ابتدا کتابخانه جی کوئری را به سایت خود اضافه نمایید. برای این کار فایل 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: #۷۷۷
{
همان طور که در خط 26 قطعه کد بالا مشاهده می کنید این خط آدرس یک تصویر که مربوط به آیکون بالا رفتن در وردپرس می باشد قرار گرفته و شما باید یک آیکون مناسب برای این منظور در سایت خود قرار دهید. آیکون مورد نظر را در پوشه تصاویر بارگذاری کرده و نام آن را در کد بالا قرار دهید.
حالا فایل header.php را باز کنید و کد زیر را بعد از تگ <body> در بالاترین بخش آن قرار دهید.
<div id=”top”></div>
در انتها نیز در پایان همین فایل و قبل از تگ <body/> کد زیر را برای نمایش دکمه قرار دهید.
<“p style=”display:block;” id=”back-top>
<a/>رفتن به بالا<a href=”#top”><span></span>
<p/>
رفتن به ابتدای صفحه در وردپرس با افزونه WPFront Scroll Top
این افزونه یکی از بهترین افزونه های سفارشی برای رفتن به ابتدای صفحه در وردپرس می باشد. در واقع این افزونه به کاربر اجازه می دهدتا به راحتی به بالای صفحه برود و هم چنین رفتن به بالا صفحه را سفارشی کنید.
رفتن به ابتدای صفحه در وردپرس به کمک جاوا اسکریپت و افزونه
ویژگی های افزونه WPFront Scroll Top
- صفحه را با انیمیشن متحرک به بالا می برد
- ایجاد دکمه متنی یا تصویری
- مخفی کردن در دستگاه های کوچک
- مخفی کردن در iframes
- فیلترهای مخصوص صفحات و پست ها
- مخفی کردن خودکار
- سازگاری با جاوا اسکریپت
- و …
ابتدا افزونه WPFront Scroll Top را دانلود نموده و سپس آن را در پیشخوان قالب وردپرس خود نصب و فعال سازی نمایید. پس از فعال سازی گزینه ای به نام WPFront در پیشخوان اضافه شده است.
حالا برای انجام تنظیمات و تغییرات دلخواه خود به زیرمنوی Scroll Top بروید و آنها را اعمال نمایید.
خب دوستان این هم یک سری از آموزش های اسکرول خودکار با استفاده از جاوا اسکریپت و افزونه. امیدوارم مطالب این بخش برایتان مفید و کاربردی بوده باشد.
ممنون از همراهی شما با این بخش از آموزش وردپرس. در صورت هر گونه سوال لطفا سوال خود را در قسمت نظرات مطرح بفرمایید. همچنین اگر قصد خرید قالب وردپرس برای سایت خود از یک منبع معتبر را دارید میتوانید به دسته بندی قالب وردپرس در سایت وبمستر98 مراجعه بکنید.
