دکمه اسکرول در وردپرس با Scroll Bar With Back To Top

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

اسکرول در وردپرس با Scroll Bar With Back To Top

این افزونه وردپرس پر امکانات و ساده در مخزن افزونه های وردپرس به ثبت رسیده است و تا کنون بیش از 1000 دانلود و نصب و فعال سازی داشته است. این افزونه توسط Shafiqul Islam که یک مسلمان می باشد طراحی و برنامه نویسی شده است و از آخرین بروزرسانی این افزونه وردپرس حدود یک سال نیز می گذرد. قابل ذکر است هم اکنون که در حال آموزش این مقاله وردپرس هستیم نسخه نهایی آن، نسخه 1 می باشد و نویسنده آن از بروزرسانی های متعدد خود داری کرده است زیرا این نسخه کامل ترین نسخه بوده و دارای هیچ گونه باگ یا ایرادی نمی باشد.

آموزش کار با Scroll Bar With Back To Top

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

open-settings-hamyarwp-اسکرول در وردپرس

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

scroll-bar-settings-hamyarwp-اسکرول در وردپرس

scroll bar

در ابتدای تنظیمات  این افزونه وردپرس ما می بایستی مشخص کنیم که افزونه فعال باشد یا غیر فعال! ولی ما نمیخواهیم افزونه غیر فعال باشد بنابراین این بخش را به صورت پیش فرض در حالت فعال قرار میدهیم.
در بخش بعدی ما میتوانیم رنگ پس زمینه دکمه را مشخص نماییم که این بخش به صورت سلیقه ای می باشد و هر شخص با توجه به سلیقه خود، این بخش را انتخاب می کند.
در قسمت بعدی ما میتوانیم اندازه آیکون داخل دکمه را مشخص کنیم که واحد اندازه گیری آن
PX  (پیکسل) می باشد. در بخش Scroll Top Icon Color ما میتوانیم رنگ آیکون داخل دکمه را مشخص کنیم که دقیقا مانند بخش رنگ پس زمینه روی گزینه گزینش رنگ کلیک کرده و رنگ مورد نظر را انتخاب میکنیم.

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

scroll back to top

در بخش Scroll Top Border Radius ما میتوانیم انحنا یا خمیدگی دور شکل به صورت مربع می باشد را تغییر دهیم. در قسمت بعدی از تنظیمات که در
واقع مهم ترین بخش می باشد ما میتوانم شکل آیکون را مشخص کنیم که روی هر شکل که دوست داشتیم کلیک میکنیم.

scroll-back-to-top-settings-hamyarwp-اسکرول در وردپرس

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

output-hamyarwp-اسکرول در وردپرس

موفق باشید.

دانلود افزونه Scroll Bar With Back To Top

دانلود صفحه افزونه

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 5 ماه عضو همیار وردپرس

    سلام
    ببخشید از این افزونه نصب و فهال سازی کردم ولی هیچی از ایکون scroll تو سایتم دیده نمی شه باید چی کار کنم. ممنون میشم راهنمایی ام کنید.

  2. سلام
    این افزونه تو هم موبایل هم درست کار میکنه؟

مطالب زیر را حتما بخوانید

دوره‌های آموزشی