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

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

مشکلات با رنگ های پیمایشگر سفارشی

به طور پیش فرض ، CSS دارای یک قانونی نیست که به شما امکان می دهد خصوصیات پیمایش را تغییر دهید. پیشنهادهایی برای اضافه کردن این پیشنهاد وجود دارد ، اما در حال حاضر توسط اکثر مرورگرها پشتیبانی نمی شوند.

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

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

روش 1. اضافه کردن یک نوار پیمایشی سفارشی در وردپرس با یک افزونه

این روش برای اکثر کاربران ساده تر و توصیه می شود. با این وجود از مرورگرهای موبایل پشتیبانی نمی کند.

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

پس از فعال سازی ، برای پیکربندی افزونه باید به صفحه تنظیمات »تنظیمات Custom Color Scrollbar  بروید .

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

همچنین می توانید انتخاب کنید که آیا می خواهید نوار پیمایش خودکار را پنهان کنید یا همیشه آن را نمایش دهید.

در زیر آن گزینه هایی برای تنظیم سرعت پیمایش ، تغییر تراز ریلی (چپ یا راست) و فعال کردن رفتار لمسی پیدا خواهید کرد.

فراموش نکنید که برای ذخیره تنظیمات خود ، روی دکمه save change کلیک کنید.

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

روش 2. با استفاده از CSS ، رنگ های پیمایشگر سفارشی را در وردپرس اضافه کنید

در این روش از CSS برای سبک کردن نوار پیمایشی خود استفاده می شود که سریعتر از استفاده از jQuery است.

با این حال ، این تنها در مرورگرهای دسک تاپ با استفاده از موتور ارائه دهنده WebKit مانند Google Chrome ، Safari ، Opera و موارد دیگر کار می کند.

این امر هیچ تاثیری در مرورگرهای موبایل یا Firefox و 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; 
}

در تغییر رنگ ها و دیگر خصوصیات CSS احساس راحتی کنید.

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

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