آموزش وردپرسافزونه وردپرس

چطور ابزارک‌ها را در وردپرس استایل دهی کنیم

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

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

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

پلاگین افزودن css به ویجت‌های سایت وردپرس
پلاگین افزودن css به ویجت‌های سایت وردپرس

پس از کلیک روی ویجت مورد نظر یک فیلد جدید با عنوان CSS Class در قسمت پایین ابزارک خواهید دید. در این قسمت میتوانید به‌سادگی برای هر ابزارک کلاس‌های CSS را وارد کنید.
برای مثال یک کلاس به‌نام subscribe برای افزودن در فرم عضویت لیست ایمیل ایجاد کرده و آن را در صفحه استایل قالب خود قرار میدهیم:

.subscribe { 
background-color: #858585;
color:#FFF;
}

 

 

افزودن استایل سفارشی به ویجت توسط پلاگین Widget CSS Classes
افزودن استایل سفارشی به ویجت توسط پلاگین Widget CSS Classes

شما میتوانید هر css دلخواه دیگری که شامل پس زمینه، تغییر کادر، تغییر رنگ و سایر موارد باشد برای استایل دهی به ابزارک خود در نظر بگیرید.


مقاله مرتبط: نحوه ایجاد تصاویر تعاملی interactive image در وردپرس


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

اگر نمیخواهید از افزونه استفاده کنید، میتوانید بصورت دستی این کار را انجام دهید. وردپرس بصورت پیش فرض کلاس‌های css را به عناصر مختلف مانند ابزارک‌ها اضافه میکند.
هر ابزارک در نوار کناری، یک کلاس شماره گذاری شده دارد. مانند کلاس widget-1، widget-2 ، widget-3 و …. با استفاده از ابزار inspect element گوگل کروم میتوانید کلاس css ابزارکی که میخواهید آن را سفارشی کنید پیدا کنید.

اضافه کردن css سفارشی به ویجت‌های سایت وردپرس
اضافه کردن css سفارشی به ویجت‌های سایت وردپرس

همانطور که در تصویر صفحه بالا میبینید، کلاس ابزارکی که میخواهیم آن را تغییر دهیم کلاس widget-2 میباشد. اکنون به صفحه استایل قالب خود بروید و استایل موردنظر خود را به این کلاس اضافه کنید.

.widget-2 { 
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title { 
font-weight:bold;
}

 

این تمام کاری بود که لازم است انجام دهید. امیدواریم این مقاله جهت یادگیری نحوه افزودن css سفارشی به ابزارک‌های سایت وردپرس برایتان مفید بوده باشد. همچنین میتوانید جهت دانستن اینکه چه استایلی برای سایت شما بهتر میباشد از تست تفکیک A/B کمک بگیرید.
اگر دیدگاه یا سوالی دارید میتوانید زیر همین پست کامنت بگذارید.

< آخرین آموزش‌های پایگاه دانش تسنیم را در تلگرام دنبال کنید >

نوشته های مشابه

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

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

دکمه بازگشت به بالا