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

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

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

تغییر ظاهر اسکرول بار باعث می‌شود وبسایت شما ظاهری استثنایی و منحصر بفرد داشته باشد.

ضمنا شما ‌توانید آن را با رنگ قالب وردپرس خودتون ست کنید.

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

در این مقاله سفارشی کردن اسکرول بار را به دو روش استفاده از افزونه و CSS آموزش خواهیم داد.

مشکلات تغییر اسکرول بار

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

البته راه هایی وجود دارد اما در حال حاضر توسط بیشتر مرورگرها پشتیبانی نمی‌شود.

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

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

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

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

ما این روش را توصیه می‌کنیم چون برای اکثر کاربران راه آسان‌تری است. اگرچه در مرورگرهای موبایل پشتیبانی نمی‌شود.

ابتدا به قسمت افزونه ‌ها > افزودن بروید.

افزونه Advanced Scrollbar را نصب و فعال نمایید. برای اطلاعات بیشتر می‌توانید مقاله آموزش قدم به قدم نصب افزونه وردپرس را مطالعه نمایید.

پس از فعالسازی برای پیکربندی تنطیمات به قسمت تنظیمات > Custom Color Scrollbar Settings بروید.

تنظیمات اسکرول بار سفارشی وردپرس

در این صفحه می‌توانید رنگ اسکرول بار و رنگ پس زمینه آن را تغییر دهید. سپس می‌توانید در قسمت Mouse Scroll Step سرعت پیمایش چرخ موس را بر حسب پیکسل وارد نمایید.

Auto Hide: در این قسمت می‌توانید انتخاب کنید که اسکرول بار سفارشی پنهان یا همیشه نمایش داده شود. همچنین با انتخاب گزینه Cursor Only ریل اسکرول بار نمایش داده می‌شود ولی خود دکمه اسکرول بار پنهان می‌شود.

Scroll Speed: سرعت اسکرول

Rail Align: چپ یا راست بودن اسکرول بار

Enable Touch Behavior: فعال کردن حالت لمسی در رایانه مانند دستگاه های لمسی

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

حالا می‎توانید به سایت خود رفته تا اسکرول باری که ایجاد کرده‌اید را مشاهده کنید.

نمایش اسکرول بار سفارشی در سایت

روش اول: اسکرول بار سفارشی در وردپرس با استفاده از CSS (بدون افزونه)

در این روش ما از css برای سفارشی کردن اسکرول بار استفاده می‌کنیم که راه سریع‌تری نسبت به روش jQuery است.

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

فراموش نکنید این روش در مروگرهای موبایل و همچنین فایرفاکس و Edge در دسکتاپ کار نمی‌کند.

برای ایجاد تغییر اسکرول بار در وردپرس با استفاده از css باید کد زیر را به فایل css خود اضافه نمایید:

 

می‌توانید رنگ و دیگر پارامترها را در کد بالا به دلخواه خود عوض کنید. سپس فراموش نکنید که تغییرات را ذخیره نمایید.

حالا می‌توانید سایت خود را در یک مرورگری که این روش را پشتیبانی می‌کند مشاهده نمایید.

اسکرول بار

خب آموزش این افزونه وردپرس ما هم تمام شد.

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

 

موفق باشید.

دانلود افزونه Advanced Scrollbar

پاسخی بگذارید

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