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

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

سفارشی کردن اسکرول

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

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

راه های تغییر اسکرول بار در وردپرس

اکنون که متوجه شدید چه انتظاری دارید، بیایید به نحوه اضافه کردن یک اسکرول‌بار سفارشی به سایت نگاهی کنیم. ما با درنظر گرفتن موارد زیر، سفارشی سازی اسکرول در وردپرس را امکان‌پذیر می‌کنیم:

• استفاده کردن از افزونه وردپرس
• استفاده کردن از CSS

بیشتر بیاموزید: نحوه ساخت فرم نظرسنجی در وردپرس

استفاده کردن از افزونه وردپرس

ساده‌ترین راه برای سفارشی کردن اسکرول بار استفاده از افزونه Advanced Scrollbar است. این افزونه رایگان به شما این امکان را می‌دهد تا بدون نیاز به نوشتن یک خط کد، عرض، رنگ، سرعت اسکرول و موارد دیگر را تغییر دهید. اولین کاری که باید انجام دهید این است که افزونه Advanced Scrollbar را نصب و فعال کنید. پس از فعال‌سازی، به Settings » Advanced Scrollbar Settings بروید.

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

همچنین می‌توانید با تایپ یک عدد جدید در قسمت «Scroll Step» مرحله اسکرول ماوس را تغییر دهید. عدد کمتر باعث می‌شود سایت شما با سرعت بیشتری حرکت کند و عدد بالاتر باعث می‌شود که سرعت حرکت آن بیشتر شود.

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

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

استفاده کردن از CSS

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

بیشتر بیاموزید: چگونه کد css را به وردپرس اضافه کنیم؟

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

کد زیر مربوط به یک ظاهر سفارشی از اسکرول است که با استفاده از آن می‌توانید ظاهر اسکرول‌تان را تغییر دهید.

::-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;
}

شما می‌توانید هر کدی را که می‌خواهید اضافه کنید و هنگامی که از ظاهر اسکرول خود راضی بودید، کافیست روی دکمه “انتشار” کلیک کنید. اکنون می‌توانید از سایت وردپرس خود در مرورگر WebKit دیدن کنید تا تغییرات خود را برروی وب‌سایت مشاهده کنید.

افزودن اسکرول با افکت بالا در وردپرس

به غیر از ایجاد یک نوار پیمایش سفارشی، ممکن است بخواهید یک افکت اسکرول به بالا را نیز در سایت وردپرس خود اضافه کنید. اگر پست‌های وبلاگ طولانی‌تری دارید و می‌خواهید راهی سریع برای بازگشت به بالای صفحه به کاربران ارائه دهید، می‌توانید از اسکرول به بالا در وردپرس استفاده کنید. برای افزودن این قابلیت باید افزونه WPFront Scroll Top را نصب و فعال کنید. پس از فعال‌سازی، از داشبورد وردپرس به “صفحه تنظیمات » پیمایش بالا” بروید و کادر «فعال» را علامت بزنید تا افکت اسکرول به بالا فعال شود. پس از آن، می‌توانید افست اسکرول، اندازه دکمه، کدورت، مدت زمان محو شدن، مدت زمان اسکرول و موارد دیگر را ویرایش کنید.

پس از اتمام کار، فراموش نکنید که روی دکمه “ذخیره تغییرات” کلیک کنید تا تنظیمات خود را ذخیره کنید.

جمع‌بندی

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