آموزش تغییر نوار اسکرول صفحه وردپرس
تغییر در راستای زیبا تر کردن یک وبسایت از کارهایی است که میتوان بهش فکر کرد. امروز قرار است در مقاله ” آموزش تغییر نوار اسکرول صفحه وردپرس ” به این اشاره کنیم که چطور میتوان نوار اسکرول صفحه وبسایت خودمان را شخصی سازی کرد در این مقاله روش های مختلفی را بررسی می کنیم پس تا انتها همراه ما باشید.
- آنچه در مقاله تغییر نوار اسکرول صفحه خواهید خواند
آیا نوار اسکرول صفحه قابل تغییر است؟
بله نوار اسکرول صفحه وبسایت شما قابل تغییر است اما ممکن است روی تمام مروگرهای امروزی به درستی عمل نکند. ما در این آموزش روش های مختلفی را بررسی میکنیم تا بتوانید بدون مشکل نوار اسکرول وبسایت خود را تغییر دهید.
اکثرا با زبان جاوا اسکریپت این روش قابل پیاده سازی است اما با استفاده از افزونه هم این امر میسر است.
روش اول : استفاده از افزونه برای تغییر نوار اسکرول صفحه
این روش به اکثر کاربران وردپرس توصیه میشود ولی یک مشکلی دارد و آن هم در گوشی های موبایل پشتیبانی نمیشود.
برای اینکار ما نیاز داریم که افزونه Advanced Scrollbar را بر روی سایت وردپرسی خود نصب کنیم
دانلود افزونه Advanced Scrollbar
نیاز به کمک در زمینه نصب افزونه وردپرس دارید؟
آموزش ویدیویی نصب افزونه وردپرس
[/box]
پس از نصب این افزونه ، به پیشخوان شما یک بخش جدید تحت عنوان Custom Color Scrollbar Settings اضافه میشود که فقط کافیست به این بخش بروید تا تنظیمات خود را اعمال کنید.
تغییر نوار اسکرول صفحه
در پنل تنظیمات این افزونه با قسمت های مختلفی مواجه خواهید شد که در زیر آن ها را توضیح داده ایم :
Scrollbar Color : با استفاده از این گزینه میتوانید رنگ اسکرول بار خودتان را به دلخواه از داخل کالر پیکر انتخاب نمایید.
Scrollbar Rail Background Color : با استفاده از این گزینه میتوانید رنگ ریل اسکرول خود را به دلخواه تغییر دهید.
Mouse Scroll Step : با استفاده از این گزینه میتوانید سرعت نوار اسکرول خود را تنظیم کنید که بصورت پیشفرض 40 در نظر گرفته شده است.
Auto Hide : اگر مایل هستید بعد از مدتی نوار اسکرول شما محو شود از این گزینه استفاده نمایید.
Scroll Speed : سرعت اسکرول را با استفاده از این گزینه تنظیم کنید.
Rail Align : موقعیت نوار ریل اسکرول را میتوانید تعیین کنید.
بعد از تغییرات حتما بر روی گزینه save کلیک کنید تا تغییرات شما اعمال شود. بعد از تنظیمات سایت شما مانند تصویر زیر خواهد شد.
تغییر نوار اسکرول صفحه
روش دوم : استفاده از کد css برای تغییر نوار اسکرول صفحه
این روش فقط بر روی مرورگرهای سافاری ، کروم و اپرا و آن دسته از مرورگرهایی که از webkit پشتیبانی میکنند کار میکند پس لطفا دقت کنید.
لازم هست که کد زیر را به قالب وردپرس خود اضافه کنید.
::-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; }
تغییر نوار اسکرول صفحه
پس از اضافه کردن کد بالا و ذخیره کردن آن با تصویری مشابه با زیر مواجه خواهید شد. در صورتی که به کدها مسلط هستید رنگ ها را میتوانید به دلخواه ویرایش کنید.
تغییر نوار اسکرول صفحه
امیدواریم که مقاله آموزشی ” آموزش تغییر نوار اسکرول صفحه وردپرس ” به شما کمک کند تا به راحتی یک اسکرول خاص و زیبا برای سایت خود طراحی کنید. آیا این آموزش برای شما مفید بود؟ آیا راه حل دیگری دارید که به بقیه هم کمک کند؟ لطفا آن را در نظرات زیر به اشتراک بگذارید. ما می خواهیم این مقاله را به یک منبع جامع برای کاربرانی که با این مشکل روبرو هستند تبدیل کنیم. با آرزوی موفقیت برای شما عزیزان در مسیر سبزتان
درباره بهزاد نگهبان
در گریختن رستگاری نیست ، بمان و از خودت چیزی بساز ، چیزی که نشکند
سایر نوشته های بهزاد نگهبانمطالب زیر را حتما مطالعه کنید
سئو چیست؟ روش های بهینه سازی وردپرس برای موتور جستجو 2021
طراحی هدر با المنتور (فهرست وردپرس) – جلسه ششم
آموزش امنیت وردپرس (7 مرحله تضمینی)
آموزش بهینه سازی css وردپرس
بهترین سایت های آنالیز سایت و سئو
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
با عرض سلام و تشکر از سایت و مطالب خوبتون
یه مشکلی داشتم. نوار اسکرول با css برای مرورگر فایرفاکس کار نمیکنه.
برای فایرفاکس با چه زبانی میشه ظاهر نوار اسکرول رو تغییر داد؟
درود و وقت بخیر دوست عزیز
از این کد css استفاده کنید :
.container {
white-space: nowrap;
overflow-y: hidden;
width: 500px;
display: block;
position: relative;
scrollbar-width: thin;
scrollbar-color: #e3e3e3 transparent;
}
.box {
display: inline-block;
height: 200px;
width: 200px;
background-color: red;
white-space: normal;
}
/* firefox */
//firefox
.container {
scrollbar-width: thin;
scrollbar-color: $gray–lighter transparent;
}
.container:-webkit-scrollbar {
width: 11px;
}
.container:-webkit-scrollbar-track {
background: transparent;
}
.container:-webkit-scrollbar-thumb {
background-color: $gray–lighter;
border-radius: 6px;
border: 3px solid transparent;
}
/* webkit browsers */
.container::-webkit-scrollbar,
.container::-webkit-scrollbar-thumb {
height: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
}
.container::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}