بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

مقالات وردپرس

تفاوتی ندارد که سایت شما وردپرسی باشد یا غیر وردپرسی ، میتوانید با چندخط کد ساده ، اسکرول بار پیشفرض سایت خودتان را تغییر دهید ! پس همراه ما باشید در این مقاله !

6 148 5
سفارشی کردن اسکرول بار در سایت وردپرسی

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

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

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

اما اگر سایت وردپرسی دارید و با کدنویسی css نیز آشنایی ندارید می‌توانید از افزونه های کمکی وردپرس نیز استفاده کنید .

سفارشی کردن اسکرول بار توسط css

اگر شما در حال طراحی یک قالب با html و css هستید میتوانید با چندخط کد ، از همان بخش های فرانت‌اند ، سفارشی کردن اسکرول بار را انجام دهید . اگرهم سایت وردپرسی دارید ، میتوانید فایل style.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; 
}

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

قسمت بعدی scrollbar-track است که مربوط به بخشی می‌شود که اسکرول بار تامب ( scrollbar track thumb ) داخل آن حرکت می‌کند ! در حقیقت همان بخش طوسی کم رنگ که درون اسکرول بار است ( شاید اینگونه تصور کنید که اسکرول بار ترک همان اسکرول بار است ، اما باید گفت اسکرول بار یک بخش و هولدر کلی است که در داخل آن اسکرول بار ترک قرار گرفته است اما هردوی اینها از لحاظ ارتفاعی هم اندازه هستند ) . میتوانید رنگ طوسی کمرنگ پیشفرض را نیز با دستور background تغییر دهید .

قسمت scrollbar thumb نیز که در بالا توضیح داده شد ، مربوط به همان غلتکی است که هنگام اسکرول در صفحه ، داخل اسکرول بار ترک حرکت می‌کند .

قسمت scrollbar thumb hover نیز برای استایل زمانی است که شما با موس روی غلتک یا همان scrollbar thumb قرار خواهید گرفت که می‌توانید رنگ پس زمینه در زمان hover شدن را تعیین کنید .

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

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

استفاده از افزونه  Advanced scrollbar

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

افزونه Advanced scrollbar

پس از نصب این افزونه ، باید به سراغ قسمت تنظیمات در پیشخوان بروید . اکنون یک گزینه بنام ” Advanced scrollbar setting ” اضافه شده است که می‌توانید تنظیمات شخصی سازی اسکرول بار را در سایت انجام دهید .

تنظیمات Advanced scrollbar

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

تنظیمات افزونه‌ی Advanced scrollbar

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

تغییر اسکرول بار یک مورد سلیقه‌ای است و خودتان باید تصمیم بگیرید که قصد دارید تا اسکرول بار سایت شما چگونه نمایش داده شود . اسکرول بار دیجی کالا یکی از نمونه های جذاب است که می‌توانید از استایل آن نیز کمک بگیرید .

توجه داشته باشید که استفاده از رنگ هایی که بسیار در دید هستند ( رنگ های تابلو ) کار درستی نخواهد بود چرا که وجه ظاهری سایت را بخوبی نمایش نداده و کلیت طرح را به هم خواهد ریخت ، لذا لازم است متناسب با رنگ بندی و طرح کلی وب سایت خودتان ، رنگ اسکرول بار را نیز تعیین کنید .

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

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

چگونه میتوان حالت justify را به ادیتور وردپرس اضافه کرد ؟ حالت های بدون افزونه و معرفی افزونه Re-add text underline and justify

2 273

چگونه میتوانیم قسمت " آدرس سایت " را از فرم ارسال نظرات داخل وردپرس حذف کنیم ؟ شرح دو روش ساده برای حذف فیلد آدرس سایت از فرم دیدگاه های وردپرس !

1 134
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

دیدگاه های شما
ascension ۰۱ / ۱۴۰۳
5

عالی بود دااش دمت گرم

امید قدیمی ۰۱ / ۱۴۰۳

ممونم ازت زنده باشی ، خوشحالم که برات مفید بوده

samin.4303 ۱۰ / ۱۴۰۲

این کد در قالب html که وردپرسی نیست هم کار میکنه استاد؟

امید قدیمی ۱۰ / ۱۴۰۲

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

sara ۱۰ / ۱۴۰۲

ماکه کدنویسی بلد نیستیم همه چیزو باید افزونه نصب کنیم حذف هم بکنیم خراب میشه تغییرات

امید قدیمی ۱۰ / ۱۴۰۲

درست میفرمائید اما سعی کنید از افزونه های استاندارد و شناخته شده استفاده کنید درکل

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود