آقای برنامه نویس

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

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

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

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

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

مشکلات با رنگ های اسکرول سفارشی

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

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

خب در ادامه آموزش افزودن پیمایش سفارشی به سایت رو به شما آموزش می دهیم.

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


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

این روش به کاربران مبتدی پیشنهاد می شود.

برای اینکار شما ابتدا باید افزونه Advanced Scrollbar را در سایت خود نصب و فعال کنید. برای جزئیات بیشتر در صورت نیاز می توانید آموزش نصب افزونه وردپرس را ببینید.

پس از نصب و فعالسازی افزونه وردپرس باید شما آن را پیکربندی کنید. برای انجام اینکار به قسمت تنظیمات » Custom Color Scrollbar Settings مراجعه کنید.

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

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

و همچنین در این صفحه می توانید تنظیم کنید که آیا نوار اسکرول خودکار نمایش داده شود یا مخفی باشد و یا اینکه با انتخاب گزینه ‘Cursor only’ فقط مکان نما را نمایش دهید.

اگر کمی به پایین صفحه بیایید گزینه های دیگری موجود است:

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

در اینجا گزینه هایی برای تنظیم سرعت اسکرول، تنظیم تراز چپ یا راست بودن ریل اسکرول و همچنین برای فعال کردن رفتار لمسی وجود دارد.

خب بعد از اینکه تنظیمات را به دلخواه خود انجام دادید فراموش نکنید که حتما باید تنظیمات را ذخیره کنید.

اکنون می توانید به وب سایت مراجعه کنید تا رنگ های پیمایش سفارشی خود را در عمل مشاهده کنید.

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

روش 2. اضافه کردن رنگ های پیمایشگر سفارشی به وردپرس از طریق 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; 
}

در کدهای بالا شما می توانید به سلیقه خود رنگ ها و خصوصیات رو تغییر دهید.

پس از جاسازی کد در قالب وردپرس فراموش نکنید که تنظیمات را ذخیره کنید.

پس از ذخیره سازی، سایت خود را چک کنید تا اسکرول سفارشی اضافه شده را ببینید.

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

خب به پایان این مقاله رسیدیم امیدواریم که نحوه اضافه کردن نوار پیشمایش سفارشی به وردپرس را یاد گرفته باشید.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام آقای برنامه نویس عضو شوید.
سعید حسنی
سعید حسنی
محتوا پادشـــاه است، با تایپ هر کلمه یک قدم به هدفـم نزدیک تـر میشم...
سعید حسنی
سعید حسنی
محتوا پادشـــاه است، با تایپ هر کلمه یک قدم به هدفـم نزدیک تـر میشم...
Advanced scrollbar -Custom scrollbar

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پاسخ خود را پیدا نکردید؟
همکاران ما آنلاین هستند تا پاسخگوی سوالات شما باشند حتما سوال خود را در بخش دیدگاه ها بپرسید.
آموزش افزونه دستیار سلامت
آموزش راه اندازی افزونه دستیار سلامت

آموزش راه اندازی افزونه دستیار سلامت تنها افزونه ایرانی محاسبه توده بدنی و بررسی سلامتی و تناسب اندام کاربران https://files.mr-programer.ir/videos/dastyar-salamat-plugin.mp4 امروزه افراد به تناسب اندام

جلسه ۲: حداقل سیستم مورد نیاز برای المنتور - آقای برنامه نویس
جلسه 2: حداقل سیستم مورد نیاز برای المنتور

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

اتصال MailChimp به المنتور (اتصال میل چیمپ به المنتور)
اتصال MailChimp به المنتور، ساخت فرم عضویت در خبرنامه

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

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

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

ساخت دکمه گرادیانت در المنتور، بدون افزایه جانبی
ساخت دکمه گرادیانت در المنتور، بدون نیاز به افزایه جانبی

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

قابلیت کد کوتاه ضروری در افزونه المنت پک - آقای برنامه نویس
قابلیت کد کوتاه ضروری در افزونه المنت پک

استفاده از کد های کوتاه در نوشته ها و بخش های سایت امکانات زیادی را برای ما فراهم میکند. در این مقاله ما به بررسی ویژگی کد کوتاه ضروری در افزونه المنت پک می‌پردازیم. پس با ما همراه باشید…

تغییرات وردپرس 5.7 - آقای برنامه نویس
وردپرس 5.7 منتشر شد!

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

طراحی صفحه در دست تعمیر وردپرس با المنتور
طراحی صفحه در دست تعمیر وردپرس با المنتور

وردپرس برخی اوقات به بروزرسانی و تعمیر احتیاج داره. و هنگامی که وبسایت در دست تعمیر و دیباگ هست برای حفظ امنیت وبسایت نمیتوان وبسایت را در دسترس بازدید کنندگان قرار داد. به همین دلیل هنگام تعمیر وبسایت، ترجیحاً حالت تعمیر رو فعال میکنند!

اشتراک گذاری

اشتراک گذاری در twitter
اشتراک گذاری در pinterest
اشتراک گذاری در whatsapp
اشتراک گذاری در telegram