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

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

چرا یک نوار اسکرول سفارشی در وردپرس اضافه کنیم؟

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

تغییر رنگ و پهنای اسکرول‌بار مرورگر با نمایش درصد پیشرفت خواندن مقاله یکسان نیست. اسکرول‌بار برای جابه‌جایی در صفحه به کار می‌رود، درحالی‌که نوار پیشرفت مطالعه با Article Read Time & Progress Bar Pro مسیر طی‌شده از متن را به خواننده نشان می‌دهد و در کنار آن زمان تقریبی مطالعه را نیز نمایش می‌دهد. می‌توان رنگ و ظاهر نوار، متن زمان خواندن و محل نمایش اطلاعات را متناسب با قالب سایت تنظیم کرد. اگر هدر چسبان یا نوار اعلان دارید، باید جای نوار پیشرفت و نمایش آن در موبایل را آزمایش کنید تا مزاحم متن و پیمایش نشود.

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

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

آموزش ایجاد اسکرول بار سفارشی در وردپرس

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

1- نحوه تغییر ظاهر اسکرول بار در وردپرس با افزونه

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

اولین کاری که باید انجام دهید این است که افزونه Advanced Scrollbar را نصب و فعال کنید. پس از فعال سازی، از بخش تنظمات روی گزینه ” تنظیمات نوار پیمایش پیشرفته” کلیک کنید.

در اینجا، می توانید طرح رنگ نوار اسکرول و رنگ پس زمینه ریل را تغییر دهید. در تصویر زیر یک نوار اسکرول آبی ایجاد کرده ایم.

همچنین می‌توانید با تایپ یک عدد جدید در قسمت «Scroll Step» مرحله اسکرول ماوس را تغییر دهید. عدد کمتر باعث می شود سایت شما با سرعت بیشتری حرکت کند و عدد بالاتر باعث می شود که سرعت حرکت آن بیشتر شود.

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

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

به طور پیش فرض، نوار اسکرول در سمت راست پنجره مرورگر ظاهر می شود. با این حال، در صورت تمایل می توانید با استفاده از تنظیمات “Rail Align” آن را به سمت چپ منتقل کنید.

در نهایت بعد از اینکه تغییرات دلخواه خود را ایجاد کردید، کافیست روی دکمه ذخیره کلیک نمائید تا نوار اسکرول سفارشی در سایت شما نمایان شود.

2- نحوه تغییر ظاهر اسکرول بار در وردپرس بدون افزونه

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

این روش به شما امکان می‌دهد هر قسمت از نوار اسکرول را سفارشی کنید، اما فقط در مرورگرهای دسکتاپ با استفاده از WebKit کار می‌کند. این بدان معناست که تغییرات شما در همه مرورگرها، از جمله مرورگرهای تلفن همراه، نشان داده نخواهد شد.

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

به عنوان مثال می توانید از کد زیر استفاده کنید:

شما می توانید هر کدی را که می خواهید اضافه کنید. در نهایت بعد از اینکه از تغییرات خود راضی شدید، روی دکمه ” انتشار” کلیک نمائید.

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

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

1- افزونه Advanced Scrollbar

افزونه Advanced Scrollbar یک افزونه خوب و آسان برای استفاده وردپرس است و این افزونه بسیاری از ویژگی های قدرتمند مانند تغییر رنگ نوار اسکرول، مخفی کردن نوار اسکرول و همچنین کنترل سرعت اسکرول، فعال و غیرفعال کردن نوار اسکرول را ارائه می دهد. شما نه تنها عرض نوار اسکرول را کنترل می کنید، بلکه این پلاگین با همه دستگاه ها سازگار است.

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

2- افزونه Custom Scrollbar

Custom Scrollbar بهترین افزونه وردپرس ایگان است که ویژگی های اسکرول پیشرفته را ارائه می دهد و همچنین این افزونه ویژگی های قدرتمند بسیاری مانند افزونه کاملاً واکنش گرا را ارائه می دهد که با افزونه های دیگر سازگار است.

3- افزونه Scroll Styler

 Scroll styler بهترین ابزار اسکرول بار رایگان وردپرس است زیرا این افزونه ویژگی‌های بسیار جذابی مانند ارائه رنگ سفارشی نامحدود، نوار اسکرول سفارشی، عرض نوار اسکرول، پد کردن مسیر نوار اسکرول و همچنین ارائه رنگ پس‌زمینه پیمایش نوار اسکرول و همچنین تغییر و سفارشی‌سازی عرض نوار اسکرول را ارائه می‌دهد.

سوالات متداول

جمع بندی: سفارشی سازی اسکرول بار در وردپرس

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

منبع: wpbeginner