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

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

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

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

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

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

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

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

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

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

روش 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; 
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نحوه تغییر DNS دامنه های ir در ایرنیک - آقای برنامه نویس آموزش المنتور و وردپرس
نحوه تغییر DNS دامنه های ir در ایرنیک

دامنه هویت وب‌سایت را در اینترنت مشخص می‌کند. تغییر dns دامنه های ir با دامنه های جهانی متفاوت است. بهترین راه تغییر DNS دامنه ir در پنل وب سایت ایرنیک است.

سفارشی سازی قالب وردپرس با ابزار inspect element
سفارشی سازی قالب وردپرس با ابزار inspect element

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

طراحی پوسته باکس پست‌های المنتور - آقای برنامه نویس
طراحی پوسته باکس پست‌های المنتور

احتمالا شما نیز تاکنون از ویجت پست های المنتور استفاده کرده‌‌اید. این المان تنها دارای 3 پوسته ( کلاسیک، کارت ها و محتوای تمام عرض ) می‌باشد. ولی شاید نیاز به سفارشی سازی و اضافه کردن امکانات بیشتری برای نمایش پست‌ها داشته باشید.

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

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

ورود به حساب