تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
اسکریپت یا کد انتقال دهنده کاربر به صفحه 2 پاسخ 109 بازدید وردپرس شبکه 0 پاسخ 3 بازدید مشکل در نصب اسکریپت 0 پاسخ 1 بازدید درخواست افزونه 3 پاسخ 715 بازدید اسکریپت مدیریت هاست رایگان 3 پاسخ 276 بازدید کتابخانه blog برای لاراول 0 پاسخ 88 بازدید معرفی وبسایت خرید آنلاین مواد و لوازم دندانپزشکی 0 پاسخ 106 بازدید افزونه Coins MarketCap 1 پاسخ 516 بازدید درخواست پلاگین 4 پاسخ 782 بازدید اسکریپت vfm 5 پاسخ 871 بازدید
تبلیغات
تبلیغات تبلیغات

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

وردپرس , مقالات,آموزش,ترفند

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

 

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

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

در صورتیکه با نصب افزونه در وردپرس آشنا نیستید، می توانید مقاله “آموزش نصب افزونه در وردپرس” را مطالعه کنید.

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

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

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

برای این کار میبایست ابتدا کلاس مورد نظر و استایل دلخواه خود را تعیین کنید. برای مثال:

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

حالا میتوانید کلاس subscribe را در فیلد مذکور وارد کرده و ابزارک را ذخیره کنید.

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

 

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

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

 

هر ابزارک در سایدبار سایت وردپرس شما دارای کلاس شماره گذاری شده است. مثلا widget-1، widget-2 و مواردی از این دست. با استفاده از ابزارک Inspect Element مروگر گوگل کروم یا فایرفاکس می توانید کلاس CSS مربوط به ابزارکی که میخواهید استایل دلخواه آنها را ایجاد کنید، پیدا کنید.

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

همان طور که در تصویر بالا مشاهده می کند، ابزارکی که میخواهیم استایل مورد نظر خود را به آن اضافه کنیم، دارای کلاس widget-3 است. پس میتوانید کد استایل آنرا به صورت زیر تعریف کنید:

.widget-3 {
background-color: #e67e22 !important;
color:#FFF;
margin-bottom:20px;
padding:10px;
}

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=48464
کلمات کلیدی پست :
مطالب مرتبط
4,2085 افزونه برتر برای مدیریت پروژه در وردپرس تاریخ : 2019/11/28
4,536پوسته موسسه خیریه ELEVATION برای وردپرس تاریخ : 2019/12/18
11,895ارسال مستقیم مطالب از Word به وردپرس تاریخ : 2017/06/16
4,832آموزش رفع خطای Missing a temporary folder در وردپرس تاریخ : 2019/07/4
6,928افزونه کمک مالی در ووکامرس YITH Donations for WooCommerce تاریخ : 2018/10/5
4,036رفع ارور Err_Too_Many_Redirects در وردپرس تاریخ : 2020/01/24
5,861نحوه افزودن ابزارک به پوسته وردپرس تاریخ : 2015/08/11
7,890افزونه اشتراک گذاری به ازای دانلود وردپرس تاریخ : 2017/01/11
4,620وردپرس و محدود کردن بایگانی آن تاریخ : 2018/11/10
8,177پلاگین افزودن امکانات فروشگاهی به ادیتور وردپرس WP Sales Code تاریخ : 2013/10/24
4,860خطای با عرض پوزش، این نوع پرونده به دلایل امنیتی مجاز نیست. در وردپرس تاریخ : 2019/10/1
3,896DNSSEC چیست و چطور از آن استفاده کنیم؟ تاریخ : 2020/02/11
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات