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

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

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

اولین مرحله برای انجام این کار این است که شما باید ایتدا افزونه Widget CSS Classes plugin را نصب و راه اندازی کنید. پس از فعال سازی به قسمت نمایش /ابزارک ها مراجعه کرده و روی یکی از ابزارک ها کلیک کنید.

برای پیاده‌سازی مدیریت نمایش شرطی ابزارک‌های وردپرس در وردپرس می‌توان Extended Widget Options را هم از نظر امکانات و سازگاری بررسی کرد.

در این مرحله شما متوجه یک فیلد CSS Class زیر ابزارک خواهید شد. بنابراین به راحتی میتوانید برای هر ابزارک یک CSS Class تغریف کنید برای مثال: اضافه کردن subscribe class به این قسمت باعث تغییر رنگ این ابزارک خواهد شد.

1
2
3
4
.subscribe {
background-color: #858585;
color:#FFF;
}

شما می توانید هر کد  CSS سفارشی، مانند اضافه کردن پس زمینه، تغییر مرزها، استفاده از رنگ های مختلف، و… را در آن قسمت اضافه کنید.

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

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

 بیشتر بخوانید: افزونه ابزارک ها در وردپرس

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

اگر نمیخواهید برای اضافه کردن استایل سفارشی از افزونه استفاده کنید میتوانید این کار را به صورت دستی انجام دهید. بطور پیش فرض وردپرس یکCSS Class سفارشی به عناصر  مختلف از جمله ابزارک اضافه می کند و شما باید روی ابزارکی که میخواهید تغییر دهید کلیک راست کرده و گزینه inspect element را انتخاب کنید ( از مرورگر کروم استفاده کنید ) و کد ابزارک مورد نظر را پیدا کنید همانطور که میبیند این کدها معمولا در استایل css قالب موجود میباشد و شما نیز برای اضافه کردن کد در جایی که استایل css موجود میباشد یک rtl.css ایجاد کرده و کدی زیر را در آن قسمت قرار دهید.

از این کد میتوانید برای تغییر ابزارک خود استفاده کنید فقط کافیست کد را در جای مناسب از استایل css یا rtl قرار دهید.

1
2
3
4
5
6
7
.widget-2 {
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight:bold;
}