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

افزودن دکمه بازگشت به بالا وردپرس با استفاده از یک افزونه

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

افزونه WPFront Scroll Top را نصب و فعال کنید

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

با افزونه WPFront Scroll Top دکمه بازگشت به بالا را اضافه کنید

  • فعال: با این گزینه دکمه بازگشت به بالا وردپرس فعال کردن
  • اندازه جابجایی اسکرول: تعداد پیکسل هایی که باید پیمایش کنید تا دکمه ظاهر شود.
  • جاوا اسکریپت ناهمزمان: این گزینه اجازه می دهد تا اسکرول با جاوا اسکریپت و بازگشت به بالای صفحه بهتر عمل کند.
  • اندازه دکمه ها: اندازه دکمه را بر حسب پیکسل تنظیم کنید، اگر آن را روی 0 قرار دهید، اندازه استاندارد و اندازه پیش فرض را می گیرد.
  • چه مدت دکمه پنهان است: مشخص می کند که دکمه اسکرول پس از رسیدن به بالای صفحه چه مدت پنهان می شود.
  • مدت زمان پیمایش: مدت زمان پیمایش صفحه را تنظیم کنید.
  • پنهان کردن خودکار: این گزینه به طور خودکار دکمه اسکرول را مخفی می کند.
  • عدم نمایش در دستگاه های کوچک: با این گزینه دستگاه در دستگاه هایی که عرض مشخصی دارند نمایش داده نمی شود و در گزینه بعدی عرض آنها را تعریف می کنید.
  • بدون نمایش در پنجره های کوچک: اگر اندازه مرورگر را تغییر دهید، دکمه بازگشت به بالا را برای اندازه مشخص شده نشان نمی دهد. این اندازه در گزینه “حداکثر عرض پنجره های کوچکشما مشخص خواهید کرد.
  • در WP-ADMIN نشان داده نمی شود: دکمه حالت ورود را در wp-admin پنهان می کند.
  • سبک دکمه: استایل دکمه را روی Image، Text و Fontawesome تنظیم می کنید.
  • عملکرد دکمه: با فشار دادن دکمه بازگشت به بالا که به طور پیش فرض به سمت بالا حرکت می کند، چه کاری باید انجام شود.
  • محل: محل دکمه را مشخص کنید.
  • فیلتر کنید: در تب فیلتر این را مشخص می کنید دکمه برگشت در بالای صفحه وردپرس در چه صفحاتی نمایش داده شود.

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

دکمه تصویر: در این قسمت تصویر دکمه را انتخاب کنید یا می توانید آدرس تصویر مورد نظر خود را در قسمت url وارد کنید.

ارزش جایگزین: در این قسمت از افزونه عنوان تصویر را انتخاب کنید.

با افزونه WPFront Scroll Top یک دکمه بازگشت به بالای صفحه وردپرس خود اضافه کنید

یک دکمه بازگشت به بالای صفحه وردپرس با کد اضافه کنید

راه دیگری برای اضافه کردن دکمه بازگشت به بالا وردپرس، با استفاده از کد هاست و بخش خود را وارد کنید مدیر فایل توسط بخش انجام شود public-html > wp-content < themes وارد پوشه فعال پوسته شوید. کدهای زیر را در یک فایل متنی کپی کنید و آن را به عنوان scroll.js ذخیره کنید. سپس پوشه js را باز کرده و این فایل را در آن آپلود کنید. برای تغییر کد قالب، قالب شما باید قابل ویرایش باشد و فایل تابع نباید این کد باشد. ممکن است نگهدارنده قالب یک فایل function2.php ایجاد کرده باشد که یک فایل خالی است و می توانید کدها را در آن فایل قرار دهید.

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:۰}, 'fast');
return false;
});
});

سپس فایل را وارد کنید function.php (گزینه ویرایش را کلیک کنید) و کد زیر را قبلا اضافه کنید

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/scroll.js', array( 'jquery' ), '', true );

در این بخش باید دکمه بازگشت به بالا وردپرس را در قالب نشان دهید. برای این منظور قطعه کد زیر در داشبورد وردپرس > مشاهده > ویرایشگر پوسته را وارد کنید.

<a href="#top" id="smoothup" title="Back to top"></a>
نکته: فراموش نکنید که قبل از تغییر کدهای قالب از سایت خود نسخه پشتیبان تهیه کنید.

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

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

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