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

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

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

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

وقتی کاربر وارد سایت شما می‌شود، ناخودآگاه تمام عناصر بصری را در کنار هم می‌بیند. اگر هدر، دکمه‌ها، پس‌زمینه و حتی آیکن‌ها همگی با یک هویت بصری مشخص طراحی شده باشند اما اسکرول بار همچنان همان مدل ساده و خاکستری مرورگر باقی بماند، این ناهماهنگی به چشم می‌آید؛ حتی اگر کاربر دقیقاً نداند مشکل از کجاست.

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

آیا برای این کار به افزونه نیاز داریم؟

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

در این آموزش قرار است قدم‌به‌قدم یاد بگیرید چطور بدون استفاده از افزونه و تنها از طریق بخش «CSS اضافی» در سفارشی‌سازی وردپرس، اسکرول بار سایتتان را دقیقاً مطابق سلیقه و هویت بصری برندتان طراحی کنید.

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

پیش‌نیازهای ساخت اسکرول بار سفارشی

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

اول از همه باید به پیشخوان وردپرس سایتتان دسترسی داشته باشید. یعنی بتوانید وارد بخش مدیریت سایت شوید و تنظیمات ظاهری را تغییر دهید. اگر قبلاً قالب یا رنگ‌بندی سایتتان را تغییر داده‌اید، احتمالاً با این بخش کاملاً آشنا هستید.

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

نکته دیگری که بد نیست با آن آشنا باشید، کدهای رنگ یا همان Hex Code است. این کدها معمولاً به شکل یک علامت # و شش کاراکتر بعد از آن نمایش داده می‌شوند، مثل ‎#ffffff‎ یا ‎#333333‎. قرار است رنگ اسکرول بار را با همین کدها تنظیم کنیم. اگر هم کد رنگ برندتان را نمی‌دانید، به‌راحتی می‌توانید از ابزارهای انتخاب رنگ استفاده کنید و مقدار آن را کپی کنید.

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

کد ساخت اسکرول بار سفارشی

در این بخش می‌خواهیم کد کامل و تمیز سفارشی‌سازی اسکرول بار را قرار بدهیم. کافی است این کد را کپی کنید و داخل بخش «CSS اضافی» در سفارشی‌سازی وردپرس قرار دهید.

/* عرض اسکرول بار */
::-webkit-scrollbar {
    width: 7px;
}

/* پس‌زمینه اسکرول بار */
::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* نوار متحرک اسکرول */
::-webkit-scrollbar-thumb {
    background: #6c5ce7;
    border-radius: 10px;
}

/* تغییر رنگ هنگام هاور */
::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

بعد از قرار دادن این کد و زدن دکمه «انتشار»، اگر یکی از صفحات سایتتان اسکرول داشته باشد، بلافاصله تغییر را مشاهده خواهید کرد. حالا بیایید خیلی ساده بررسی کنیم هر بخش از این کد دقیقاً چه کاری انجام می‌دهد.

در خط اول از ::-webkit-scrollbar استفاده کرده‌ایم. این قسمت مسئول تنظیم عرض اسکرول بار است. با مقدار width می‌توانید ضخامت اسکرول بار را تعیین کنید. معمولاً عددی بین 6 تا 8 پیکسل ظاهر استاندارد و مینیمال‌تری ایجاد می‌کند.

بخش بعدی یعنی ::-webkit-scrollbar-track مربوط به پس‌زمینه اسکرول بار است. همان مسیری که نوار متحرک داخل آن حرکت می‌کند. با تغییر مقدار background می‌توانید رنگ این قسمت را تنظیم کنید. پیشنهاد می‌شود این رنگ را نزدیک به رنگ پس‌زمینه سایتتان انتخاب کنید تا ظاهر تمیزتری داشته باشد.

قسمت ::-webkit-scrollbar-thumb مهم‌ترین بخش کار است. این همان نوار متحرکی است که کاربر آن را می‌گیرد و بالا و پایین می‌کند. با ویژگی background رنگ اصلی اسکرول بار را مشخص می‌کنید. بهتر است این رنگ را هماهنگ با رنگ سازمانی سایتتان انتخاب کنید تا هویت بصری یکدست‌تری ایجاد شود.

در همین بخش از ویژگی border-radius استفاده کرده‌ایم. این ویژگی میزان گردی لبه‌های اسکرول بار را مشخص می‌کند. هرچه عدد بزرگ‌تر باشد، لبه‌ها گردتر می‌شوند. اگر عدد را صفر بگذارید، اسکرول بار کاملاً صاف و بدون گردی خواهد بود.

در نهایت از حالت :hover استفاده کرده‌ایم. این قسمت تعیین می‌کند زمانی که کاربر ماوس را روی اسکرول بار می‌برد، رنگ آن تغییر کند. این افکت ساده باعث می‌شود اسکرول بار تعاملی‌تر و حرفه‌ای‌تر به نظر برسد.

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

آموزش قدم‌به‌قدم اعمال کد در وردپرس

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

در قدم اول وارد پیشخوان وردپرس سایتتان شوید. همان بخشی که معمولاً برای انتشار نوشته‌ها، مدیریت برگه‌ها یا تنظیمات قالب استفاده می‌کنید.

بعد از ورود، از منوی سمت راست روی «نمایش» کلیک کنید و سپس گزینه «سفارشی‌سازی» را انتخاب کنید. با این کار وارد محیط سفارشی‌سازی زنده سایت می‌شوید؛ جایی که می‌توانید تغییرات را همان لحظه مشاهده کنید.

در صفحه سفارشی‌سازی، بخشی با عنوان «CSS اضافی» وجود دارد. روی آن کلیک کنید تا یک کادر ویرایش کد برای شما باز شود. این همان جایی است که قرار است کد اسکرول بار را قرار دهیم.

حالا کافی است کدی که در بخش قبل در اختیار شما قرار داده شد را به طور کامل کپی کنید و داخل این کادر پیست کنید. دقت کنید کد قبلی‌ای اگر در این بخش دارید حذف نشود، بلکه کد جدید را در انتهای آن اضافه کنید تا با سایر تنظیمات تداخل نداشته باشد.

بعد از اینکه کد را قرار دادید، روی دکمه «انتشار» کلیک کنید. به همین سادگی تغییرات روی سایت شما اعمال می‌شود. اگر صفحه‌ای از سایتتان اسکرول داشته باشد، بلافاصله می‌توانید ظاهر جدید اسکرول بار را مشاهده کنید.

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

انتخاب رنگ حرفه‌ای برای اسکرول بار

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

برای پیدا کردن ترکیب رنگ‌های جذاب و آماده، می‌توانید از سایت Coolors استفاده کنید. این سایت یک ابزار ساده و کاربردی برای ساخت و بررسی پالت‌های رنگی است و کار با آن هم بسیار راحت است.

وقتی وارد Coolors می‌شوید، می‌توانید روی گزینه Explore کلیک کنید تا مجموعه‌ای از پالت‌های آماده را ببینید. هر پالت شامل چند رنگ هماهنگ با هم است که قبلاً توسط طراحان انتخاب شده‌اند. اگر یکی از این ترکیب‌ها به فضای سایت شما نزدیک بود، کافی است رنگ مورد نظر را انتخاب کنید.

برای استفاده از رنگ در کد CSS، باید کد Hex آن را کپی کنید. کدهای Hex معمولاً با علامت # شروع می‌شوند و بعد از آن شش کاراکتر شامل عدد و حروف انگلیسی دارند، مثل ‎#6c5ce7‎. در Coolors کافی است روی رنگ کلیک کنید تا کد آن نمایش داده شود و بتوانید آن را کپی کنید. بعد همین مقدار را داخل بخش background در کد اسکرول بار قرار می‌دهید.

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

در نهایت هدف این نیست که اسکرول بار مرکز توجه باشد؛ هدف این است که با طراحی کلی سایت هماهنگ شود و حس یک طراحی دقیق و فکرشده را به کاربر منتقل کند. همین توجه به جزئیات است که سایت‌های حرفه‌ای را از سایت‌های معمولی جدا می‌کند.

شخصی‌سازی بیشتر اسکرول بار (اختیاری)

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

اضافه کردن سایه با box-shadow

یکی از کارهایی که می‌تواند به اسکرول بار عمق بدهد، اضافه کردن سایه است. با استفاده از ویژگی box-shadow می‌توانید یک سایه خیلی ملایم به بخش thumb بدهید تا کمی از پس‌زمینه جدا شود.

مثلاً داخل بخش ::-webkit-scrollbar-thumb می‌توانید این خط را اضافه کنید:

box-shadow: 0 0 6px rgba(0,0,0,0.2);

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

تغییر ضخامت اسکرول بار

اگر احساس می‌کنید اسکرول بار بیش از حد باریک یا ضخیم است، می‌توانید مقدار width را تغییر دهید. این مقدار در بخش ::-webkit-scrollbar تنظیم می‌شود.

برای سایت‌های مدرن و مینیمال معمولاً عرض کمتر جلوه بهتری دارد. مثلاً عدد 6 یا 7 پیکسل اغلب تعادل خوبی بین دیده شدن و ظرافت ایجاد می‌کند. اگر سایت شما طراحی بولد و گرافیکی دارد، شاید عرض کمی بیشتر هم منطقی باشد.

حالت مینیمال حرفه‌ای پیشنهادی

اگر بخواهم یک حالت پیشنهادی استاندارد معرفی کنم که در بیشتر پروژه‌ها نتیجه تمیز و حرفه‌ای می‌دهد، این ترکیب معمولاً بهترین انتخاب است:

• عرض اسکرول بار بین 6 تا 8 پیکسل،
• استفاده از رنگ سازمانی سایت برای thumb،
• رنگ نزدیک به پس‌زمینه برای track،
• و یک گردی ملایم با border-radius حدود 8 تا 12 پیکسل.

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

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

سازگاری با مرورگرها (نکته مهم فنی)

قبل از اینکه این آموزش را کامل بدانیم، لازم است یک نکته مهم فنی را در نظر بگیریم. کدی که برای سفارشی‌سازی اسکرول بار استفاده کردیم بر پایه pseudo-elementهای WebKit نوشته شده است. این یعنی در مرورگرهایی که از این ساختار پشتیبانی می‌کنند، بدون مشکل اجرا می‌شود.

در حال حاضر این کد روی مرورگرهای مبتنی بر WebKit و Blink به‌خوبی کار می‌کند؛ مرورگرهایی مثل Google Chrome، Microsoft Edge و Safari. اگر اکثر کاربران سایت شما از این مرورگرها استفاده می‌کنند، عملاً جای نگرانی خاصی وجود ندارد.

اما در مرورگر Mozilla Firefox شرایط کمی متفاوت است. فایرفاکس از ساختار ::-webkit-scrollbar پشتیبانی نمی‌کند و برای تغییر ظاهر اسکرول بار باید از ویژگی‌های مخصوص خودش مثل scrollbar-width و scrollbar-color استفاده شود. البته میزان شخصی‌سازی در فایرفاکس محدودتر است و امکان اعمال تمام جزئیات ظاهری وجود ندارد.

از نظر سئو جای نگرانی نیست، چون این تغییر صرفاً یک استایل ظاهری است و هیچ تأثیری روی ساختار محتوا یا ایندکس شدن صفحات ندارد. تنها موضوعی که باید در نظر بگیرید تجربه کاربری است؛ یعنی بدانید ممکن است ظاهر اسکرول بار در برخی مرورگرها کمی متفاوت دیده شود.

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

اگر از قالب اهورا استفاده می‌کنید

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

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

این رویکرد هم کار را برای کاربران ساده‌تر می‌کند و هم باعث می‌شود طراحی سایت کاملاً یکپارچه و هماهنگ از داخل خود قالب مدیریت شود. پس اگر از اهورا استفاده می‌کنید، فعلاً می‌توانید با همین روش دستی اسکرول بار را سفارشی کنید و در آینده احتمالاً نسخه تنظیمات گرافیکی آن هم در اختیار شما قرار می‌گیرد.

جمع‌بندی

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

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

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

در نهایت هدف از این تغییر، نمایش مهارت فنی نیست؛ هدف این است که تجربه کاربری بهتر و حس حرفه‌ای‌تری برای بازدیدکننده ایجاد کنیم. اگر تا امروز اسکرول بار سایتتان همان حالت پیش‌فرض مرورگر بوده، حالا وقتش رسیده این بخش کوچک اما مهم را هم با طراحی کلی سایتتان هماهنگ کنید. شاد و سربلند باشید. 🙂

تیم تولید محتوا

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