تغییر ظاهر نوار اسکرول (Scroll Bar) میتواند به برجستهسازی وبسایت شما کمک کند، اسکرول بار اختصاصی میتواند توجه بازدیدکننده را به خود جلب کرده و آنها را به گردش بیشتر در محتوای شما تشویق کند.
در این مقاله، به شما نشان خواهیم داد که چگونه بهسادگی یک نوار اسکرول سفارشی در وردپرس اضافه کنید.
چرا یک اسکرول بار دستی برای سایت خود بسازیم؟
در سال 2018، کنسرسیوم جهانی وب (WC3) پیشنهادی را تدوین کرد که به مالکان وبسایت اجازه میداد ظاهر نوار اسکرول را با استفاده از CSS سفارشیسازی کنند.
امروزه، بسیاری از مرورگرهای مدرن مانند کروم و فایرفاکس از نوار اسکرول سفارشی پشتیبانی میکنند.
با توجه به این موضوع، ممکن است بخواهید اسکرول بار را بهتر با طرح رنگ یا برندینگ سایت خود تطبیق دهید. بسیاری از وبسایتها نیز از نوار اسکرول سفارشی برای جلب توجه بازدیدکنندگان استفاده میکنند که میتواند تعداد بازدیدهای صفحه شما را افزایش داده و نرخ پرش را کاهش دهد.
روش اول : اضافه کردن اسکرول بار اختصاصی به وسیلهی پلاگین وردپرس
آسانترین روش برای سفارشیسازی اسکرول بار استفاده از افزونه Advanced Scrollbar است. این افزونه رایگان به شما امکان میدهد عرض، رنگ، سرعت اسکرول و موارد دیگر نوار اسکرول را بدون نیاز به نوشتن حتی یک خط کد تغییر دهید.
اولین کاری که باید انجام دهید نصب و فعالسازی افزونه Advanced Scrollbar است. برای جزئیات بیشتر، راهنمای گامبهگام ما در مورد نحوه نصب یک افزونه وردپرس را ببینید.
پس از فعالسازی، به تنظیمات » تنظیمات پیشرفته نوار اسکرول بروید.
و طبق سلیقه و رنگ قالب خود اقدام به تعیین رنگ اسکرول بار کنید.
در تصویر زیر ما یک اسکرول بار ساده ساختیم.
شما همچنین می توانید با تغییر میزان گردش موس تنظمیاتی را انجام دهید که وقتی کاربری در سایت شما اسکرول کرد به آرامی یا به تندی به بالا یا پایین سایت منتقل شود.
همچنین میتوانید انتخاب کنید که آیا میخواهید نوار اسکرول بهصورت خودکار پنهان شود تا فقط هنگام اسکرول کردن بازدیدکننده ظاهر شود.
اگر یک نوار اسکرول رنگیتر ایجاد کردهاید و نگران هستید که ممکن است حواس مخاطب را از بقیه محتوای شما پرت کند، این کار میتواند مفید باشد.
شما می توانید در صورت تمایل طبق تصویر بالا عمل کنید و با فعال کردن این مورد اسکرول بار مخفی خواهد شد.
روش دوم : اضافه کردن اسکرول بار اختصاصی با CSS
اگر میخواهید تغییرات پیشرفتهتری در نوار اسکرول سایت خود ایجاد کنید، گزینه دیگر استفاده از CSS است.
این روش به شما امکان میدهد هر قسمت از نوار اسکرول را سفارشی کنید، اما فقط در مرورگرهای دسکتاپ با استفاده از WebKit کار میکند. این بدان معنی است که تغییرات شما در همه مرورگرها، از جمله مرورگرهای موبایل، نمایش داده نخواهد شد یا ممکن است دچار مشکل باشد.
فایل style قالب سایت خود را باز کنید و کد های زیر در آن درون ریزی کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
::-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; } |
بعد از تزریق کد های بالا تنظیمات را ذخیره کنید و کش وردپرس خود پاک کنید سپس بررسی کنید مشاهده خواهید کرد که تغییرات اعمال شده است.
در نهایت سپاسگزاریم از اینکه در این آموزش نیز با وب آیدین همراه بودید اگر در خصوص تغییر ظاهر اسکرول بار سایت خود دچار مشکل هستید می توانید از طریق بخش کامنت ها موارد را با ما در میان بگذارید.
