چگونه کد CSS به ابزارک های وردپرس اضافه کنیم
چگونه کد CSS به ابزارک های وردپرس اضافه کنیم
برای اینکه بتوانید در سایت خود به ابزارک های وردپرس خود تغییرات ظاهری ایجاد کنید هم می توانید به کمک افزونه این کار را انجام دهید و هم می توانید با استفاده از کد نویسی در سایت خود به ابزارک های وردپرس خود تغییرات جلوه ای ایجاد کنید و با اضافه کردن کد های CSS در ابزارک های خود می توانید طرح های مختلف ایجاد کرده و سایت خود را کاملآ سفارشی سازی کنید و شما می توانید برای اضافه کردن کد CSS در وردپرس خود در این مقاله با ما همراه باشید.
خب همانطور که می دانید طراحی هر بخش سایت باید مطابق و مرتبط با سایت شما باشد و هر سایتی که شما راه اندازی کردید باید در مورد رنگبندی های سایت خود اطلاع کامل داشته باشید که هر بخش سایت چه رنگی باشد و یا چه گرادیانتی داشته باشد که مورد توجه کاربران قرار گیرد و کاربر را به سمت مقاله های جدید یا بخش های جدید سایت شما شوند
یکی از مهم ترین بخش های که تمامی وب سایت ها دارند بخش سایدبار می باشد و شما می توانید طبق این آموزش ابزارک های سایدبار خود را تغییر رنگ دهید و این قابلیت می تواند برای شما خیلی مفید باشد و تنها بخشی که بیشتر از همه بخش ها در دید کاربران می باشد بخش سایدبار می باشد و شاید که شما بخواهید یک ابزارک را با رنگی متفاوت تر در سایت خود نمایش دهید که بیشتر مورد توجه و دید کاربران شما قرار گیرد.
اضافه کردن کد CSS به ابزارک های وردپرس
همان طور که می دانید در وردپرس این امکان وجود دارد که هم افزونه نصب کنید و هم کد نویسی انجام دهید و این بار ما میخواهیم هم به شما آموزش دهیم که چطور می توانید در سایت خود هم با نصب افزونه و هم با کد نویسی کد های CSS را به ابزارک های وردپرس خود اضافه کنید و یک ابزارک های CSS نویسی شده داشته باشید و آن را در سایت خود ویرایش کنید و تغییرات ظاهری بر روی آن اعمال کنید و استایل ابزارک های سایت خود را تا حد توان شخصی سازی کنید.
معرفی افزونه اضافه کردن کد CSS به ابزارک های وردپرس
بریم که با هم این افزونه را به شما معرفی کنیم نام این افزونه که شما می توانید به کمک آن در سایت خود کد CSS را به ابزارک های وردپرس اضافه کنید Widget CSS Classes می باشد و شما می توانید به راحتی از انتهای این مقاله آموزشی افزونه را دانلود کرده و اگر که نمی دانید چطور در سایت خود افزونه نصب کنید می توانید از آموزش نصب افزونه در وردپرس که در میهن آکادمی موجود می باشد استفاده کنید
این افزونه در مخزن وردپرس بیش از 100000+ بار دانلود و فعالسازی شده است و شما هم می توانید از این افزونه برای سایت خود استفاده کنید و در سایت خود کد های CSS را به ابزارک های وردپرس خود اضافه کنید ، این افزونه حدود 2 هفته است که به نسخه جدید آپدیت شده است و با وردپرس شما سازگاری کامل دارد و این افزونه هر امکاناتی که شما برای سفارشی کردن یک ستون را در سایت خود نیاز دارید را در اختیار شما قرار می دهد و دیگر نیازی به کمک گرفتن از برنامه نویس یا طراح برای استایل دهی به سایت خود ندارید.
آموزش کار با افزونه Widget CSS Classes
همانطور که می دانید بعد از نصب هر افزونه ای یک تب جدید در هر بخش وردپرس برای شما به وجود می آید و شما می توانید با استفاده از این تب یا این بخش مربوط به افزونه تنظیمات آن افزونه را انجام دهید و شما بعد از اینکه افزونه Widget CSS Classes را در سایت خود نصب کردید یک بخش به همین نام یعنی Widget CSS Classes در تب تنظیمات وردپرس شما مانند تصویر بالا نمایش داده می شود که شما باید بر روی این دکمه کلیک کنید
حالا شما بعد از اینکه وارد صفحه Widget CSS Classes شدید می توانید تنظیمات مورد نیاز افزونه را انجام دهید و یا اگر که نمی دانید این تنظیمات چطور کار می کند می توانید از آموزش زیر تنظیمات افزونه را انجام دهید :
Add Widget Number Classes : با این بخش شما می توانید اجازه اضافه کردن عدد گذاری برای ابزارک ها را صادر کنید
Add First/Last Classes : با این بخش شما می توانید قابلیت اضافه کردن اولین و آخرین کلاس ها را بررسی کنید
Add Even/Odd Classes : با این بخش شما می توانید قابلیت اضافه کردن کلاس های زوج و فرد را نیز صادر کنید
Show Additional Field for ID : با این بخش شما می توانید اجازه دهید که فیلد های اضافه را نمایش دهید یا نه
Class Field Type : اینجا شما می توانید نوع فیلد های کلاس خود را مشخص کنید
Predefined Classes : اینجا شما می توانید کلاس های از پیش برای خود تعریف کنید و در سایت استفاده کنید
Fix widget parameters : اینجا شما می توانید مشکلات ابزارک های خود را بررسی کنید و حل کنید
Remove duplicate classes : اینجا شما می توانید کلاس های اضافه و آن های را که تکرار شده حذف کنید
Translate classes : اینجا شما می توانید به راحتی کلاس های خود را ترجمه کنید و استفاده کنید
نکته : شما برای استفاده از CSS های که می خواهید مورد استفاده قرار دهید باید در بخش Predefined Classes که در بالا توضیح داده شد این CSS را تعریف کنید و بعد از آن در کد نویسی خود استفاده کنید ، حالا به فرض مثال ما یک NewsJadid داریم و می خواهیم این را با کمی CSS نویسی تغییر حالت دهیم می توانیم از کد زیر استفاده کنیم ( این یک مثال است) :
.NewsJadid {
background-color: #828282;
color:#FFF;
}
شما می توانید هر نوع CSS نویسی که می خواهید در سایت خود انجام دهید و این خودش یک قابلیت عالی می باشد CSS های مانند اضافه کردن پس زمینه در سایت خود و تغییر رنگ مرز های سایت و تغییر بخش های مختلف و … را اضافه کنید.
اضافه کردن کد CSS به ابزارک ها در وردپرس بدون نیاز به نصب افزونه :
خیلی از افراد به دنبال چالش های برنامه نویسی هستند و دوست دارند خودشان همیشه کار های سایت خود را انجام دهند و به همین دلیل همیشه به دنبال روش های کدنویسی هستند و این قسمت از آموزش مخصوص عاشقان کد نویسی می باشد و شما با این روش می توانید بدون نیاز به نصب افزونه دانش کمی کد نویسی تغییراتی را که می خواهید در ابزارک های خود ایجاد کنید و در سایت خود نمایش دهید ، آن هم به صورت دستی
به طور پیشفرض قالب های وردپرس یک CSS Class سفارشی به المنت های مختلفی که حالا طراح سایت یا خود مدیر سایت به آن قالب اضافه کرده است و شما هم می خواهید یک المنت دیگری به ابزارک های سایت خود اضافه کنید باید در هر بخش از ابزارک های سایت که می خواهید به فرض مثال ابزارک شماره یک و یا ابزارک شماره دو و … که در قالب سایت شما وجود دارد را با استفاده از ابزارک های بازرسی که در گوگل کروم وجود دارد CSS Class خود را برای ابزارک مورد نظر خود پیدا کنید
به فرض مثال حالا شما یک ابزارک در قالب وردپرسی خود دارید به نام Widget-3 که می خواهید استایل یا فرم آن ابزارک را در سایت خود تغییر دهید و اکنون شما برای اینکار باید وارد سایت خود شوید و به فایل خود استایل قالب خود رفته و کد آن را مانند کد زیر در سایت خود اضافه کنید (این ابزارک یک ابزارک نمونه می باشد) :
.widget-3 {
background-color:Green;
color:#FFF;
}
.widget-3 .widget-title {
font-weight:bold;
}
در ضمن توجه داشته باشید که در این قسمت شما هر تکیه کدی که اضافه کنید ، استایل ها و رنگ ها و هر بخش دیگر را در سایت شما تغییر می دهد و امیدواریم که این مقاله به شما برای سفارشی کردن ابزارک های سایت وردپرسی تان کمک کند ، موفق و سربلند باشید.
