آیا می خواهید یک نوار پیمایشی سفارشی در وردپرس اضافه کنید؟ تغییر شکل ظاهری نوار پیمایشی می تواند به شما کمک کند تا به ویژه هنگام ساختن یک تم سفارشی برای وب سایت خود برجسته شوید.
در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید به راحتی اسکرول پیمایشی سفارشی را در وردپرس اضافه کنید. ما دو راه حل به شما نشان خواهیم داد و شما می توانید یکی از راه حل های مناسب شما را انتخاب کنید.
مشکلات مربوط به رنگهای پیمایشی سفارشی h4>
به طور پیش فرض ، CSS با مجموعه قوانینی همراه نیست که به شما امکان تغییر خصوصیات نوار پیمایش را بدهد. چند پیشنهاد برای افزودن این موارد وجود دارد ، اما در حال حاضر توسط اکثر مرورگرها پشتیبانی نمی شوند.
برای غلبه بر این ، طراحان و توسعه دهندگان از عناصر pseduo مخصوص مرورگر یا جاوا اسکریپت تا جلوی پیش فرض نوار پیمایش را نادیده بگیریم.
ما هر دو روش را به شما نشان خواهیم داد. با این حال ، به یاد داشته باشید که شما باید سایت خود را با مرورگرها و دستگاه های مختلف آزمایش کنید تا اطمینان حاصل شود که به درستی در همه مرورگرها کار می کند.
با این گفته ، بیایید نگاهی به نحوه افزودن رنگهای سفارشی نوار پیمایشی در وردپرس بیندازیم.
روش 1. یک Scrollbar سفارشی در وردپرس با یک پلاگین اضافه کنید h4>
این روش برای بیشتر کاربران آسان تر و توصیه می شود. با این حال ، از مرورگرهای تلفن همراه پشتیبانی نمی کند.
ابتدا کاری که باید انجام دهید نصب و فعال کردن Advanced Scrollbar plugin. برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال سازی ، برای پیکربندی افزونه باید به صفحه تنظیمات »تنظیمات سفارشی پیمایش رنگ رنگ بروید.
از اینجا می توانید رنگ نوار پیمایش و رنگ پس زمینه ریل پیمایش را تغییر دهید. سپس می توانید مرحله پیمایش ماوس ، یعنی سرعت پیمایش چرخ ماوس را انتخاب کنید.
همچنین می توانید انتخاب کنید که می خواهید نوار پیمایش را به صورت خودکار پنهان کنید یا همیشه آن را نمایش دهید.
شما گزینه “فقط مکان نما” را انتخاب کنید که ریل اسکرول را نمایش می دهد اما دکمه را نشان نمی دهد.
در زیر آن ، گزینه هایی برای تنظیم سرعت پیمایش ، تغییر ترازبندی ریل (چپ یا راست) و فعال کردن رفتار لمسی پیدا خواهید کرد.
برای ذخیره تنظیمات ، فراموش نکنید که روی دکمه ذخیره تغییرات کلیک کنید.
اکنون می توانید از وب سایت خود دیدن کنید تا رنگ های سفارشی نوار پیمایشی خود را در عمل مشاهده کنید.
روش 2. با استفاده از CSS رنگهای سفارشی را در وردپرس اضافه کنید h4>
این روش با استفاده از CSS نوار پیمایشی شما را سبک می کند ، که سریعتر از استفاده از jQuery است.
با این حال ، فقط در مرورگرهای دسک تاپ با استفاده از موتور ارائه دهنده WebKit مانند Google Chrome ، Safari ، Opera و موارد دیگر کار می کند.
هیچ تاثیری روی مرورگرهای تلفن همراه یا Firefox و Edge در رایانه های رومیزی نخواهد داشت.
شما باید عناوین زیر را اضافه کنید CSS سفارشی را به قالب وردپرس خود .
:: - webkit-scrollbar {
-webkit-ظاهر: هیچ؛
}
:: - webkit-scrollbar {
عرض: 10 پیکسل
}
:: - وب کیت-پیمایش-آهنگ {
پس زمینه: # ffb400؛
حاشیه: 1 پیکسل جامد # سی سی؛
}
:: - webkit-scrollbar-thumb {
پس زمینه: # cc00ff؛
حاشیه: 1px solid #eee؛
ارتفاع: 100 پیکسل
شعاع مرز: 5px؛
}
:: - webkit-scrollbar-thumb: شناور {
زمینه: آبی
}
در صورت تمایل رنگ ها و سایر خصوصیات CSS را تغییر دهید.
پس از رضایت ، ذخیره تغییرات خود را فراموش نکنید. پس از آن ، می توانید پیش نمایش آن را در یک مرورگر پشتیبانی شده مشاهده کنید.
در وب سایت نمایشی ما هنگام مشاهده در Google Chrome در رایانه Mac اینگونه مشاهده می شد.
امیدواریم این مقاله به شما کمک کند یاد بگیرید چگونه می توانید یک نوار پیمایشی سفارشی در وردپرس اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در نحوه ایجاد یک قالب وردپرس سفارشی بدون نوشتن هیچ کدی.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/plugins/how-to-add-a-custom-scrollbar-in-wordpress/.