آموزش تغییر نوار اسکرول سایت در وردپرس

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

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

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

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

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

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

این روش، ساده‌ترین و سریع‌ترین راه است که برای اکثر کاربران هم توصیه می‌شود.

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

ابتدا افزونه Advanced Scrollbar را از مخزن وردپرس نصب و فعالسازی کنید (لینک در انتهای مطلب).

سپس در پیشخوان وردپرس به قسمت تنظیمات > Custom Color Scrollbar Settings مراجعه کنید.

با ورود به صفحه تنظیمات افزونه، می‌توانید رنگ نوار اسکرول و پس زمینه آن را تعیین نمایید.

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

همچنین در قسمت Auto Hide مشخص می‌کنید که اسکرول بار به طور خودکار پنهان شود یا خیر.

در بخش پائین، فیلد Scroll Speed سرعت پیشمایش صفحه توسط اسکرول بار را تعیین می‌کند.

با گزینه Rail Align هم می‌توانید محل نمایش نوار اسکرول در چپ یا راست صفحه را انتخاب کنید.

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

پس از ایجاد تنظیمات دلخواه، روی گزینه «ذخیره تغییرات» کلیک کنید تا ذخیره سازی انجام شود.

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

روش دوم: تغییر استایل Scrollbar با استفاده از CSS

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

استایل‌های زیر، در مرورگرهای دسکتاپ که از موتور WebKit استفاده می‌کنند (نظیر گوگل کروم، سافاری، اپرا و…) اعمال خواهند شد.

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

اگر با نحوه استفاده از کدها در وردپرس آشنایی ندارید، مطلب آموزش اضافه کردن کد CSS به سایت وردپرسی را مطالعه نمایید.

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #ffb400; 
    border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
  background: #cc00ff; 
    border:1px solid #eee;
    height:100px;
    border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

رنگ‌های دلخواه خود را با مقادیر #ffb400 (برای پس زمینه نوار) ، #cc00ff (برای دکمه شاخص اسکرول) و blue (برای هاور دکمه شاخص اسکرول) جایگزین کنید.

نتیجه کد بالا در تصویر زیر نمایش داده شده است:

امیدواریم که از آموزش تغییر نوار اسکرول سایت در وردپرس لذت برده باشید.