۰۱۳-۳۳۲۵۴۵۹۷

پشتیبانی و مشاوره
پشتیبان سایت و پشتیبان وردپرس

رفتن به ابتدای صفحه در وردپرس

11 آگوست 2017
آموزش وردپرس

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

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

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

رفتن به ابتدای صفحه در وردپرس

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

رفتن به ابتدای صفحه در وردپرس با استفاده از جاوا اسکریپت

در ابتدا برای شروع کار لازم است تا کتابخانه جی‌کوئری را به سایت خود اضافه کنید،برای این کار فایل header.php قالب وردپرس خود را باز کرده و کد زیر را در مکان مناسبی در بین تگ های </head> <head> قرار دهید.

<script type="text/javascript" src="https://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 ۰px on click$('#back-top a').click(function () {$('body,html').animate({scrollTop: ۰}, 800);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;
}

توجه داشته باشید در کد خط ۲۶ آدرس یک تصویر که مربوط به آیکن بالا رفتن در وردپرس می‌باشد قرار دارد ، با توجه به قالب خود یک آیکون مناسب برای آن قرار دهید.آیکون مورد نظر خود را در پوشه تصاویر بارگذاری کرده و نام آن را در کد بالا قرار دهید.

بیشتر بخوانید :  افزونه Video Gallery وردپرس

نکته: اگر با css آشنایی دارید می توانید تنظیمات ظاهری را به دلخواه خود تنظیم نمایید.

در ادامه مجددا فایل header.php قالب وردپرس خودتون را باز کرده و کد زیر را بعد از تگ <body> در بالاترین بخش آن قرار دهید.

div id="top"></div>

در قدم پایانی هم در انتهای همین فایل و قبل از کد </body> قطعه کد زیر را برای نمایش دکمه رفتن به ابتدای صفحه در وردپرس را قرار دهید.

<p style="display:block;" id="back-top">
<a href="#top"><span></span>رفتن به ابتدای صفحه</a>
</p>

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

رفتن به ابتدای صفحه در وردپرس با افزونه WPFront Scroll Top

یکی از بهترین افزونه های سفارشی برای رفتن به ابتدای صفحه در وردپرس افزونه WPFront Scroll Top است.این افزونه به کاربر اجازه می دهد تا به راحتی به بالای صفحه حرکت کند،با این افزونه می توانید امکان رفتن به بالای صفحه در وردپرس را سفارشی کنید.

افزونه WPFront Scroll Top دارای ویژگی های زیر است

  • زمانی که کاربر صفحه به پایین صفحه می رود دکمه ای را نشان می دهد
  • صفحه را با انیمیشن متحرک به بالا می برد
  • ایجاد دکمه متنی یا تصویری
  • هر تصویری را که بخواهید می توانیدتنظیم کنید
  • مخفی کردن در دستگاه های کوچک
  • پنهان کردن در iframes
  • فیلتر های مخصوص صفحات و پست ها
  • پنهان کردن خودکار
  • سازگار با جاوا اسکریپت

نصب و فعال سازی افزونه

پس از نصب و فعال سازی افزونه گزینه ای با عنوان WPFront در پیشخوان سایت وردپرسی شما افزوده خواهد شد،‌حال برای مدیریت تنظیمات افزونه به زیرمنوی Scroll Top مراجعه کنید و با توجه به نیاز خود افزونه را تنظیم نمایید.

بیشتر بخوانید :  افزایش سرعت ایندکس مطالب در گوگل

موفق باشید.

امتیاز دادن
اطلاعات دانلود افزونه
اطلاعات افزونه wpfront scroll top
دانلود افزونه صفحه افزونه
این مطلب رو به اشتراک بگذارید
آسان ترین راه ارتباطی ما با کاربران مکانیکی وردپرس :) کانال تلگرام مکانیک وردپرس
نظرات و دیدگاه ها
  • نظرات ارسال شده توسط شما، پس از تایید توسط مدیران سایت منتشر خواهد شد
  • نظراتی که حاوی تهمت یا افترا باشد منتشر نخواهد شد
  • نظراتی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سئو وردپرس
داغ ترین مطالب
    متاسفم مطلبی برای نمایش وجود ندارد

تمامی حقوق برای مکانیک وردپرس محفوظ میباشد .