بیشتر نوار کناری ابزارک ها در وردپرس معمولاً یکسان به نظر می رسد. خوب است اگر همه ابزارک های شما از اهمیت یکسانی برخوردار باشند ، اما واقعیت این است که برخی از ابزارک ها برای رشد سایت شما بیش از سایر موارد مهم هستند. به عنوان مثال ، یک لیست ایمیل ابزارک اشتراک مهمتر از ویجت بایگانی است. آیا خوب نیست که بتوانید به راحتی ویدجت های مهم را به طرز متفاوتی سبک کنید؟ در این مقاله ، ما به شما نشان خواهیم داد که چگونه سبک های سفارشی را به ابزارک های وردپرس اضافه کنید.
استفاده از یک افزونه برای افزودن سبک های سفارشی به ابزارک های وردپرس h4>
اولین کاری که باید انجام دهید نصب و فعال سازی Widget CSS Classes. پس از فعال شدن ، به سادگی به ابزارها »ظاهر» بروید و برای گسترش ، روی هرگونه ابزارک در یک نوار کناری کلیک کنید.
در زیر ابزارک های خود متوجه یک قسمت کلاس CSS جدید می شوید ، بنابراین می توانید به راحتی برای هر ابزارک یک کلاس CSS تعریف کنید. به عنوان مثال ، ما کلاس subscribe را به ابزارک فرم اشتراک خود اضافه کردیم.
اکنون می توانید به صفحه سبک تم خود بروید و قوانین سبک خود را در آنجا اضافه کنید. مانند این:
.اشتراک در {
background-color: # 858585؛
رنگ: #FFF؛
}
می توانید CSS دلخواه خود را اضافه کنید مانند افزودن پس زمینه ، تغییر مرزها ، استفاده از رنگ های مختلف و غیره.
افزودن دستی سبک های سفارشی به ابزارک های وردپرس h4>
اگر نمی خواهید از افزونه استفاده کنید ، می توانید سبک های سفارشی را به صورت دستی به ابزارک های وردپرس خود اضافه کنید. به طور پیش فرض ، وردپرس کلاسهای CSS را به عناصر مختلف از جمله ابزارک اضافه می کند.
هر ابزارک در نوار کناری شما دارای یک کلاس ابزارک شماره گذاری شده است. مانند widget-1، widget-2، widget-3 و … با استفاده از ابزار Inspect Element Google Chrome ، می توانید کلاس CSS را برای ویجتی که می خواهید سفارشی کنید پیدا کنید.
همانطور که در تصویر بالا مشاهده می کنید ، عنصری که می خواهیم سفارشی سازی کنیم دارای کلاس widget-2 است که توسط وردپرس به آن اضافه شده است. اکنون به صفحه سبک تم خود بروید و قوانین سبک سفارشی خود را اضافه کنید.
.widget-2 {
background-color: # 858585؛
رنگ: #FFF؛
}
.widget-2 .widget-title {
font-weight: پررنگ؛
}
این همه ، امیدواریم این مقاله به شما کمک کند سبک های سفارشی را به ابزارک های وردپرس اضافه کنید. با CSS بازی کنید و با رنگهای مختلف آزمایش کنید. از تست تقسیم A / B برای اینکه بفهمید کدام سبک های سفارشی برای سایت شما بهتر است.
همچنین اگر روش برجسته تری برای برجسته کردن ابزارک فرم نوار کناری خود می خواهید ، OptinMonster a را امتحان کنید > زیرا چندین طرح ، آزمایش A / B و موارد دیگر را ارائه می دهد.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و Google+ .
منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-custom-styles-to-wordpress-widgets/.