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

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

در این آموزش از وردپرس نارنجی، با کمک یکدیگر دو روش مختلف در ایجاد دکمه بازگشت به بالا را بررسی می کنیم.

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

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

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

افزونه ای که برای ایجاد دکمه رفتن به بالا در وردپرس به ما کمک می کند با نام WPFront Scroll Top  در مخزن وردپرس به ثبت رسیده است. این افزونه تا کنون با بیش از 80.000 نصب فعال توانسته است امتیاز 5 را کسب نماید. برای ایجاد دکمه بالا رونده کافی است با کلیک روی دکمه زیر افزونه را دانلود کرده و سپس با استفاده از آموزش نصب افزونه ها در وردپرس آن را نصب و فعال نمایید.

دانلود افزونه WPFront Scroll Top

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

تنظیمات افزونه دکمه بازگشت به بالا
تنظیمات افزونه
فیلتر در افزونه بازگشت به بالا
بخش فیلتر
انتخاب تصویر دکمه بازگشت به بالا
تصویر دکمه

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

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

اگر تمایلی به استفاده از افزونه نداشتید میتوانید به راحتی با چند خط کدنویسی و تغییرات در قالب وردپرس خود، امکان اسکرول به بالای صفحه را فراهم کنید. برای این منظور ابتدا وارد هاست خود شده و روی دکمه File Manager کلیک کنید. سپس به مسیر /public_html/wp-content/themes/ مراجعه کنید و وارد پوشه قالبی که در حال حاضر روی سایت شما فعال است شوید. بعد از اینکه وارد پوشه قالب شدید وارد پوشه js شوید، در صورتی که چنین پوشه‌ای ندارید یک پوشه با نام js  در ایجاد کرده و سپس با استفاده از برنامه ویرایشگر متن مثل notepad کدهای زیر را در فایلی با نام scrolltotop.js  ذخیره کرده و در نهایت داخل پوشه js آپلود کنید.

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;

});

});

بعد از اینکه فایل را در پوشه js آپلود کردید به مسیر اصلی پوشه قالب برگردید و کدهای زیر را در مکان مناسبی از فایل functions.php  قرار دهید و سپس فایل را ذخیره نمایید.

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

همانطور که در کد میبینید به وردپرس گفته شده تا اسکریپت موجود در فایل scroltotop  را لود کند. در این مرحله لازم است دکمه اسکرول به بالای صفحه در وردپرس را در قالب خود نمایش دهیم. برای این منظور به ویرایشگر قالب مراجعه کرده و کد زیر را در مکان مناسبی از فایل فوتر(footer.php)  قرار دهید.

<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("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");

-webkit-transition-duration: 0.4s;

-moz-transition-duration: 0.4s; transition-duration: 0.4s;

}

#smoothup:hover {

-webkit-transform: rotate(360deg) }

background: url('') no-repeat;

}

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

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

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