افزونه Widget CSS Classes

افزونه Widget CSS Classes

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

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

افزونه Widget CSS Classes بیش از 100 هزار نصب فعال داشته و امتیاز 4.9 از 5 را کسب کرده است. این افزونه به شما امکان می دهد کلاس ها و ID های سفارشی به ابزارک های وردپرس خود اضافه کنید.

توجه داشته باشید که افزونه Widget CSS Classes شما را قادر به اضافه کردن CSS سفارشی نمی کند بلکه تنها می توانید فایل style.css قالب خود را ویرایش کنید. برای اضافه کردن CSS سفارشی به سایت وردپرس خود می توانید از افزونه ای مانند افزونه Simple Custom CSS استفاده کنید.

برخی ویژگی های این افزونه عبارت است از:

• یک فیلد متنی برای تعریف کلاس به هر ابزارک اضافه می کند.
• با قرار دادن فاصله بین کلاس ها می توانید چندین کلاس را تعریف کنید.
• به صورت اختیاری چک باکس هایی به کلاسهای از پیش تعریف شده اضافه می کند.
• کلاسهای first و last را به اولین و آخرین ابزارک در نوار کناری اضافه می کند.
• کلاسهای زوج / فرد را به ابزارک ها اضافه می کند.
• کلاسهای عددی را به ابزارک ها اضافه می کند.
• سازگار با افزونه Widget Logic و افزونه Widget Context و افزونه WP Page Widget است.

آموزش افزونه Widget CSS Classes و نحوه شخصی سازی ابزارک ها در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس به مسیر نمایش » ابزارک ها بروید. باکس ابزارکی که می خواهید شخصی سازی کنید را باز نمایید.

مشاهده می کنید که در انتهای باکس تنظیمات ابزارک، یک قسمت جدید به نام CSS Classes اضافه شده است. با استفاده از این قسمت می توانید برای هر ابزارک یک کلاس CSS تعریف کنید.

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

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

افزونه Widget CSS Classes کلاس های بیشتری را نیز به ابزارک ها اضافه می کند تا امکان استایل دهی آسان تر آنها را فراهم کند. این کلاس ها عبارتند از:

• widget-first: به اولین ابزارک در نوار کناری اضافه می شود.
• widget-last: به آخرین ابزارک در یک نوار کناری اضافه می شود.
• widget-odd: به ابزارک هایی که دارای شمار فرد در نوار کناری هستند، اضافه می شود.
• widget-even: به ابزارک هایی که دارای شماره زوج در نوار کناری هستند، اضافه می شود.
• #-widget: به هر ابزارک کلاس هایی مانند widget-1 ، widget-2 اضافه می شود.

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

در این صفحه می توانید قابلیت ساختن هریک از کلاس های ذکر شده را غیرفعال کنید. همچنین می توانید یک فیلد اضافی برای اختصاص دادن ID به هر ابزارک قرار دهید. کافی است گزینه Show Additional Field for ID را فعال کنید. در این صورت می توانید برای ابزارک ها ID تعریف کنید.

در تب Import/Export می توانید تنظیمات افزونه را برون بری کنید یا تنظیمات را از سایت دیگرتان به این سایت خود ایمپورت کنید.

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

اگر نمی خواهید از افزونه استفاده کنید ، می توانید استایل های سفارشی را به صورت دستی به ابزارک های وردپرس خود اضافه کنید. وردپرس به طور پیش فرض کلاس های CSS را به عناصر مختلف از جمله ابزارک ها اضافه می کند.

هر ابزارک در نوار کناری شما دارای یک کلاس یا ID ابزارک است. با استفاده از ابزار Inspect Element گوگل کروم می توانید کلاس یا شناسه CSS را برای ابزارکی که می خواهید سفارشی سازی کنید پیدا نمایید.

همانطور که در تصویر بالا مشاهده می کنید ، ابزارکی که می خواهیم سفارشی سازی کنیم دارای کلاس widget-search و شناسه Search-4 است که توسط وردپرس به آن اضافه شده است. اکنون به استایل شیت قالب خود بروید و قوانین استایل دهی سفارشی خود را اضافه کنید.