سفارشی سازی اسکرول بار وردپرس : آموزش با و بدون افزونه

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

اگه می‌خوای اسکرول بار وردپرس رو سفارشی کنی و نمی‌دونی چطور باید این کارو انجام بدی، این مقاله مخصوص توئه! اینجا یاد می‌گیری که چطور هم با افزونه و هم بدون افزونه اسکرول بار سایت وردپرسی‌ات رو سفارشی سازی کنی😊❤️

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

🤔اسکرول بار چیه؟

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

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

چرا سفارشی‌سازی اسکرول بار اهمیت داره؟

تصور کن کاربری وارد سایتت می‌شه و شروع می‌کنه به گشتن بین صفحات مختلف. معمولاً وقتی اسکرول می‌کنه، توجه زیادی به ظاهر اسکرول بار نداره، ولی اگه این اسکرول بار یه ظاهر خاص و منحصر‌به‌فرد داشته باشه، ناخودآگاه به چشم میاد و یه حس حرفه‌ای بودن به سایتت میده. همین تغییر کوچیک می‌تونه تو ذهن کاربر یه تأثیر مثبت بذاره⭐

وقتی داری یه سایت طراحی می‌کنی، احتمالاً به رنگ‌ها، فونت‌ها و چیدمان خیلی توجه می‌کنی، درسته؟ اما اسکرول بار هم دقیقاً یه بخش از همون طراحی کلی به حساب میاد. مثلاً فرض کن سایتت یه تم تیره و شیک داره، ولی اسکرول بار ساده و خاکستری باشه! این عدم هماهنگی یه جورایی از جذابیت سایت کم می‌کنه. ولی اگه اسکرول بار هم تیره باشه و با بقیه طراحی همخوانی داشته باشه، کاربر احساس می‌کنه که همه‌چیز در کنار هم معنادار و هماهنگه.

بهبود تجربه کاربری (UX): هر چقدر کاربر توی سایت راحت‌تر بگرده، احتمال اینکه بیشتر توی سایت بمونه و به صفحات مختلف سر بزنه، بیشتره. یه اسکرول بار زیبا می‌تونه به‌طور ناخودآگاه تجربه کاربری رو بهتر کنه، حتی اگه تغییر کوچیکی به نظر برسه.

ایجاد هویت بصری قوی‌تر: هر سایت یه هویت بصری مخصوص به خودش داره. مثل وقتی که لوگوی خاص خودت رو داری یا از رنگ‌های برندت استفاده می‌کنی. حالا فرض کن حتی اسکرول بارت هم جزئی از این هویت بصری باشه. این نشون می‌ده که چقدر روی جزئیات طراحی سایتت حساس هستی و برای کاربرات ارزش قائلی.

ایجاد تمایز با بقیه سایت‌ها: توی دنیای وب، سایت‌های وردپرسی زیادی وجود داره. خیلی از اونا با استفاده از قالب‌های آماده ساخته می‌شن و ظاهرهای مشابهی دارن. ولی وقتی اسکرول بارت رو شخصی‌سازی می‌کنی، یه جورایی سایتت از بقیه متمایز می‌شه. ممکنه این تغییر کوچیک به نظر برسه، ولی همین جزئیات کوچیک باعث می‌شه کاربرات سایتت رو به یاد بیارن.

ایجاد حس خلاقیت: یکی دیگه از نکات مثبت این کار، اینه که حس خلاقیت و نوآوری رو به سایتت اضافه می‌کنی. اگه اهل دست‌به‌کار شدن و امتحان کردن چیزهای جدید هستی، سفارشی‌سازی اسکرول بار می‌تونه یه فرصت خوب باشه تا با کدنویسی ساده یا استفاده از افزونه‌ها، یه ظاهر خاص برای سایتت بسازی.

در کل، سفارشی‌ سازی اسکرول بار شاید توی ظاهر خیلی به چشم نیاد، ولی توی تجربه کلی کاربر تاثیر داره و می‌تونه حس خوبی به بازدیدکننده‌ها بده. حتی اگه یه تغییر کوچیک به نظر برسه، می‌تونه یه حس تازه و متفاوت به سایتت بده.

⭐روش‌های سفارشی‌ سازی اسکرول بار وردپرس

برای اینکه ظاهر اسکرول بار سایت وردپرسیت رو به دلخواه تغییر بدی، دو روش اصلی وجود داره:

1. استفاده از افزونه‌
2. سفارشی‌سازی دستی با CSS (بدون افزونه)

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

1. سفارشی‌سازی اسکرول بار با افزونه 🪧

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

چرا افزونه‌ها مفیدن؟

• نصب و استفاده راحت: نیازی نیست کد بنویسی بلد باشی. فقط کافیه افزونه رو نصب کنی و از تنظیماتش استفاده کنی.
• زمان کمتر: چون وقت گذاشتن برای نوشتن کد رو کم می‌کنه، پس می‌تونی زودتر نتیجه رو ببینی.
• گزینه‌های بیشتر: خیلی از افزونه‌ها امکانات متنوعی دارن؛ از تغییر رنگ و اندازه اسکرول بار گرفته تا تغییر سرعت اسکرول.

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

توجه: شما میتونید از افزونه های دیگری هم برای سفارشی سازی اسکرول بار استفاده کنید اما دلیل استفاده من از این افزونه این بود چون این افزونه سبک و سریع هست و رابط کاربری اسونی داره.

پس از نصب و فعال کردن افزونه Scrollbar ، به تنظیمات افزونه برو:

در اینجا میتونی تمام قسمت های نوار اسکرول وب سایتت رو تغییر بدی. .

• رنگ اسکرول بار (Scrollbar Thumb Color): یک بخش برای انتخاب رنگ نوار اسکرول بار وجود داره. با کلیک بر روی این گزینه، میتونی رنگ دلخواهت رو برای نوار اسکرول انتخاب کنی. این گزینه به شخصی‌سازی و هماهنگی با طراحی کلی سایت کمک می‌کنه.

• رنگ پس‌زمینه (Scrollbar Track Color): در این بخش، می‌تونی رنگ پس‌زمینه‌ای که نوار اسکرول روی اون حرکت می‌کنه رو تنظیم کنی. این گزینه کمک می‌کنه تا اسکرول بار در کلیت طراحی سایت بیشتر جلوه کنه.

• عرض اسکرول بار (Scrollbar Width): این تنظیم بهت این امکان رو می‌ده که عرض اسکرول بار رو تغییر بدی. برای مثال، می‌تونی باریک یا عریض تر کنی اسکرول بارو، بسته به سلیقه و نیاز طراحی سایت.

• شکل نوار اسکرول (Thumb Shape): در این قسمت، می‌تونی انتخاب کنی که نوار اسکرول بار گرد باشه یا دارای زوایای تیز. این ویژگی می‌تونه به طراحی مدرن یا کلاسیک سایت کمک کنه.

• شفافیت نوار اسکرول (Scrollbar Thumb Opacity): این گزینه بهت این امکان رو می‌ده که شفافیت نوار اسکرول بار رو تنظیم کنی. اگه بخوای که نوار اسکرول کمتر جلب توجه کنه، میتونی شفافیت بیشتری بهش بدی.

تنظیمات شخصی خودت رو که انجام دادی روی دکمه Save Changes بزن و از اسکرول بار سفارشی جدید در سایت وردپرسیت لذت ببر 🙂

2. سفارشی‌سازی اسکرول بار بدون افزونه (با استفاده از CSS) 🪶

اگه به کدنویسی علاقه داری یا دوست داری دست به کد بشی، این روش برات مناسبه. توی این روش، بدون نیاز به نصب هیچ افزونه‌ای و فقط با اضافه کردن چند خط کد CSS می‌تونی ظاهر اسکرول بارت رو به کلی تغییر بدی.

چرا این روش رو انتخاب کنی؟

• کنترل کامل: با نوشتن کدهای CSS، کنترل بیشتری روی ظاهر اسکرول بار داری و می‌تونی به‌صورت دقیق‌تر تغییرات دلخواهت رو اعمال کنی.
• سبک بودن سایت: برخلاف استفاده از افزونه، این روش هیچ بار اضافه‌ای به سایتت تحمیل نمی‌کنه. این موضوع به‌خصوص برای سایت‌هایی که می‌خوان سرعت بارگذاری‌شون بالا باشه، خیلی مهمه.
• بدون محدودیت: افزونه‌ها ممکنه یه سری محدودیت‌ها داشته باشن، ولی با CSS می‌تونی هر نوع تغییر ظاهری که دلت بخواد رو انجام بدی.

روش کار:

وارد پیشخوان وردپرس بشو و از نوار بالا روی گزینه سفارشی سازی بزن از منوی کناری گزینه “CSS اضافی” رو انتخاب کن. بعد این کدها رو بهش اضافه کن:

/* اسکرول بار سفارشی برای سایت RayaWp.ir */
/* عرض کلی */
body::-webkit-scrollbar {
    width: 8px; /* عرض اسکرول بار */
}

/* خود اسکرول بار */
body::-webkit-scrollbar-thumb {
    background-color: #d24b49; /* رنگ دستگیره اسکرول بار */
    border-radius: 30px; /* گوشه‌های گرد دستگیره */
    border: 0px solid #fff; /* حاشیه دستگیره */
}

/* تغییر رنگ دستگیره اسکرول بار در حالت hover */
body::-webkit-scrollbar-thumb:hover {
    background-color: #ad343e; /* رنگ جدید دستگیره در حالت hover */
}

می‌تونی رنگ، شکل گوشه‌ها و سایر جزئیات رو توی کد CSS بالا به سلیقه خودت تغییر بدی و با طراحی و رنگ‌بندی سایتت هماهنگ کنی. فقط یادت باشه که این تغییرات فقط برای بازدیدکنندگانی که از مرورگرهای با موتور رندر WebKit استفاده می‌کنند، قابل مشاهده است. معروف‌ترین این مرورگرها شامل گوگل کروم، سافاری و اپرا هستن.

اگر با CSS آشنا نیستی نگران نباش من یه راهکار دیگه هم واست دارم که بتونی کد بالا رو به سلیقه خودت سفارشی کنی:

سایت https://scrollbar.app یک رابط کاربری آسون داره که با تنظیماتی که انجام میدی بهت یک کد CSS نهایی میده که میتونی در سایتت قسمت کدهای سفارشی ازش استفاده کنی.

جمع‌ بندی

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

🚩کلمات کلیدی برای سئو مقاله: افزونه اسکرول بار وردپرس – تغییر اسکرول بار با css – شخصی سازی اسکرول در css – تغییر اسکرول بار در وردپرس – Scroll bar چیست – کنترل اسکرول در css – اسکرول وردپرس – تغییر استایل اسکرول بار