آموزش های وردپرس

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

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

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

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

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

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

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

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

این مطلب را از دست ندهید :
آموزش جامع Child Theme و استفاده از آن در وردپرس

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

تنظیمات افزونه دکمه بازگشت به بالا
تنظیمات افزونه
  • Enabled: برای فعال کردن نمایش دکمه اسکرول وردپرس این گزینه باید فعال باشد.
  • JavaScript Async: با فعال کردن این گزینه امکان اسکرول توسط جاوا اسکریپت اضافه شده و کارکرد بهتری را در هنگام بازگشت به بالای صفحه در وردپرس خواهید داشت.
  • Scroll Offset: با استفاده از این بخش میتوانید تا آفست اسکرول را بر حسب پیکسل وارد کنید.
  • Button Size: اندازه ثابت دکمه اسکرول را بر حسب پیکسل انتخاب کنید. در صورت قرار دادن صفر این مقدار به صورت رسپانسیو در هر نمایشگر به اندازه استاندارد نمایش داده خواهد شد.
  • Button Opacity: میزان کدر بودن دکمه اسکرول وردپرس را مشخص می کند.
  • Button Fade Duration: مدت زمان محو شدن دکمه اسکرول پس از رسیدن به بالای صفحه را بر حسب میلی ثانیه مشخص می کند.
  • Scroll Duration: مدت زمان اسکرول را از این بخش انتخاب کنید.
  • Auto Hide: با فعال کردن این گزینه دکمه اسکرول وردپرس به صورت خودکار مخفی خواهد شد.
  • Auto Hide After: مدت زمان مورد نظر برای مخفی شدن دکمه اسکرول بر حسب ثانیه را وارد کنید.
  • Hide on Small Devices: با فعال کردن این گزینه در نمایشگرهایی با اندازه کوچک که در بخش بعدی یعنی در فیلد Small Device Max Width حداکثر اندازه آن را مشخص می‌کنید دکمه اسکرول نمایش داده نخواهد شد.
  • Hide on Small Window: با فعال کردن این گزینه نیز مشابه مورد قبل برای پنجره مرورگر در محیط ویندوز،‌لینوکس،‌مک و سایر سیستم‌عامل‌های کامپیوتری می‌توانید حداکثر اندازه را در فیلد Small Window Max Width وارد کنید تا دکمه اسکرول در آنها مخفی شود.
  • Hide on WP-ADMIN: در صورتی که تمایلی به نمایش دکمه اسکرول وردپرس در پیشخوان وردپرس ندارید این گزینه را فعال کنید تا از بخش پیشخوان مخفی شود.
  • Hide on iframes: با فعال کردن این گزینه دکمه اسکرول در آی‌فریم‌هایی که در صفحات خود استفاده می‌کنید مخفی خواهد شد.
  • Move Admin Menu: با فعال کردن این گزینه منوی تنظیمات این افزونه به زیر منوی تنظیمات در پیشخوان وردپرس منتقل خواهد شد.
  • Button Style: از این بخش نوع دکمه خود را در حالت متنی، تصویر یا فونت آویسام انتخاب کنید.
  • Location: در این بخش هم میتوانید موقعیت نمایش دکمه را انتخاب کنید.
این مطلب را از دست ندهید :
آموزش حذف فیلد آدرس سایت از نظرات در وردپرس
فیلتر در افزونه بازگشت به بالا
بخش فیلتر
  • Filter: از این بخش نیز قادر خواهید بود نمایش دکمه اسکرول وردپرس را برای صفحات خاصی غیرفعال کنید.
انتخاب تصویر دکمه بازگشت به بالا
تصویر دکمه
  • Image Button: از این بخش میتوانید تصویر مورد نظر برای اسکرول وردپرس را انتخاب کنید.

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

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

اگر تمایلی به استفاده از افزونه نداشتید میتوانید به راحتی با چند خط کدنویسی و تغییرات در قالب وردپرس خود، امکان اسکرول به بالای صفحه را فراهم کنید. برای این منظور ابتدا وارد هاست خود شده و روی دکمه 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;

}

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

عاطفه نوربخش

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

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

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

وردپرس نارنجی در جشنواره وب و موبایل ایران شرکت کرده است.به این وب سایت رای دهید
+
بستن