آموزشها
قالب‌ها
افزونه‌ها
آکادمی
هاست وردپرس
طراحی سایت
فرماناضافه کردن CSS به ابزارک وردپرس با افزونه و بدون افزونه
- مقالات آموزشیافزونه وردپرس
- بروزرسانی شده در
اضافه کردن CSS به ابزارک وردپرس به شما کمک میکنه بدون دست‌کاری محتوای ابزارک، رنگ، فاصله، حاشیه، عنوان و حتی نحوه نمایش اون در موبایل رو تغییر بدید. روش انجام این کار به نوع پوسته سایتتون بستگی داره: در پوستههای بلوکی معمولاً همه‌چیز از داخل ویرایشگر سایت انجام می‌شه، ولی در پوستههای کلاسیک با بخش ابزارکها و سفارشیسازی سروکار دارین.
در این آموزش هر دو مسیر رو قدم‌به‌قدم می‌بینید. اول بدون افزونه یک کلاس اختصاصی می‌سازیم، بعد محل نوشتن کد CSS رو پیدا می‌کنیم و در ادامه سراغ ابزارک‌های کلاسیک و افزونه Widget CSS Classes می‌ریم. چند کد آماده و روش رفع مشکل‌های رایج هم داریم تا حتی اگه اولین باره CSS می‌نویسید، بتونید با خیال راحت شروع کنید.
آنچه در این مقاله می‌خوانید
اضافه کردن CSS به ابزارک وردپرس چه کاربردی داره؟
CSS زبانی برای تعیین ظاهر بخش‌های یک صفحه وب هست. مثلاً با چند خط CSS میتونید پس‌زمینه یک ابزارک رو رنگی کنید، دور اون کادر بذارید یا فاصله متن از لبه‌ها رو بیشتر کنید.
این تغییرها برای برجسته‌کردن بخشهایی مثل فرم عضویت، کادر جست‌وجو، محصولات ویژه یا نوشته‌های مهم کاربرد دارن. نکته مهم اینه که انتخابگر CSS، یعنی عبارتی که بخش هدف رو مشخص میکنه، باید دقیق باشه. اگه انتخابگر خیلی عمومی باشه، ظاهر چند ابزارک یا حتی بخش‌های دیگه سایت هم تغییر میکنه.
قبل از شروع، نوع پوسته وردپرس رو مشخص کنید
قبل از کدنویسی باید بفهمید سایتتون از پوسته بلوکی استفاده میکنه یا کلاسیک. اگه هنوز با مفهوم پوسته آشنا نیستید، راهنمای قالب وردپرس چیست این موضوع رو ساده‌تر توضیح می‌ده.
پوسته بلوکی و ویرایشگر سایت
در یک پوسته بلوکی، معمولاً با رفتن به «نمایش ← ویرایشگر» میتونید سربرگ، پابرگ، نوار کناری و الگوهای سایت رو ویرایش کنید. در این پوستهها ممکنه منوی جداگانه «ابزارکها» رو نبینید، چون بخش‌های سایت با بلوکها ساخته میشن.
پوسته کلاسیک و بخش ابزارکها
در پوسته کلاسیک معمولاً مسیر «نمایش ← ابزارکها» یا «نمایش ← سفارشیسازی» در دسترسه. نوار کناری و بخش‌های ابزارکی هم از همین مسیر ساخته میشن. ظاهر دقیق این صفحه به پوسته و نسخه وردپرس سایتتون بستگی داره.
اضافه کردن CSS به ابزارک وردپرس بدون افزونه در پوستههای بلوکی
برای بیشتر بلوکها نیازی به افزونه ندارید. میتونید یک نام اختصاصی به بلوک بدید و بعد CSS مربوط به همون نام رو در تنظیمات سراسری پوسته بنویسید. البته بعضی بلوک‌های ساخته‌شده با افزونه‌ها ممکنه این گزینه رو نداشته باشن.
انتخاب بلوک موردنظر در ویرایشگر سایت
- از پیشخوان وردپرس به «نمایش ← ویرایشگر» برید.
- بخش «طراحی» یا یکی از قسمت‌های «الگوها» و «قالب‌ها» رو باز کنید. اسم گزینهها ممکنه در پوستههای مختلف کمی فرق داشته باشه.
- روی بخشی که می‌خواید تغییر بدید کلیک کنید.
- اگه انتخاب بخش داخلی سخت بود، «نمای فهرست» رو باز کنید و بلوک رو از فهرست انتخاب کنید.
اضافه کردن کلاس CSS از تنظیمات پیشرفته بلوک
بعد از انتخاب بلوک، پنل تنظیمات سمت چپ یا راست صفحه رو باز کنید. بخش «پیشرفته» رو پیدا کنید و در کادر «کلاسهای CSS اضافی» یک نام مثل featured-widget بنویسید.
ابتدای نام کلاس نقطه نذارید. یعنی داخل تنظیمات بلوک باید featured-widget رو وارد کنید، ولی موقع نوشتن کد CSS از .featured-widget استفاده کنید. بهتره نام کلاس انگلیسی باشه، فاصله نداشته باشه و کلمه‌ها با خط تیره از هم جدا بشن.
نوشتن کد در بخش CSS سراسری پوسته
در ویرایشگر سایت، بخش «استایلها» رو باز کنید و از منوی گزینه‌های بیشتر، قسمت CSS اضافی رو پیدا کنید. جای دقیق یا در دسترس بودن این گزینه به نسخه وردپرس، نوع پوسته و سطح دسترسی حساب کاربریتون بستگی داره. کد زیر رو وارد کنید و تغییرها رو ذخیره کنید:
.featured-widget { background-color: #f4f7ff; color: #1f2937; padding: 24px; border-radius: 12px;}اگه پوسته‌تون بخش CSS اضافی رو در ویرایشگر سایت نشون نمی‌ده، مستندات پوسته رو بررسی کنید. ممکنه پوسته محل جداگانه‌ای برای CSS داشته باشه.
بررسی نتیجه در نسخه موبایل و دسکتاپ
بعد از ذخیره، صفحه واقعی سایت رو در یک تب جدید باز کنید. فقط به پیش‌نمایش ویرایشگر اکتفا نکنید. عرض مرورگر رو کم و زیاد کنید و مطمئن بشید متن از کادر بیرون نمی‌زنه، فاصله‌ها زیاد نیستن و ابزارک در موبایل خوانا می‌مونه.
اضافه کردن CSS به ابزارک وردپرس بدون افزونه در پوستههای کلاسیک
در پوسته کلاسیک هم میتونید بدون افزونه ظاهر ابزارک رو تغییر بدید. در این روش باید کلاس یا شناسه واقعی ابزارک رو از کد صفحه پیدا کنید و CSS رو در بخش «CSS اضافی» بنویسید.
پیدا کردن کلاس ابزارک با ابزار Inspect مرورگر
Inspect یا ابزار بازرسی مرورگر بخشی برای دیدن ساختار صفحه و کدهای اعمال‌شده روی هر قسمت هست. صفحه‌ای رو باز کنید که ابزارک داخل اون دیده می‌شه. روی ابزارک کلیک راست کنید و «Inspect» یا «بازرسی» رو بزنید. مرورگر کد مربوط به همون ناحیه رو انتخاب میکنه.
حالا نزدیک‌ترین عنصر اصلی ابزارک رو پیدا کنید. ممکنه کلاسی مثل widget، یک کلاس مربوط به نوع بلوک یا یک شناسه اختصاصی ببینید. قبل از استفاده، با حرکت‌دادن نشانگر روی کد مطمئن بشید کل ابزارک موردنظرتون انتخاب می‌شه.
اضافه کردن کد از بخش CSS اضافی وردپرس
از پیشخوان به «نمایش ← سفارشیسازی ← CSS اضافی» برید.
انتخابگری رو که پیدا کردید وارد کنید و استایل دلخواهتون رو داخل آکولاد بنویسید. مثلاً اگه ابزارک شناسه newsletter-widget داره، کد به این شکل نوشته می‌شه:
#newsletter-widget { background-color: #fff7ed; padding: 20px; border: 1px solid #fdba74;}نشانه # برای شناسه و نشانه . برای کلاس استفاده می‌شه. اگه می‌خواید اصول کد رو بهتر بشناسید، آموزش ساختار اصلی فایل CSS نقطه شروع خوبیه.
انتخاب دقیق ابزارک بدون تغییر بقیه بخش‌های سایت
کلاسی مثل .widget معمولاً بین چند ابزارک مشترکه. اگه اون رو بهتنهایی انتخاب کنید، استایل روی همه ابزارکها اعمال می‌شه. برای هدف‌گرفتن یک مورد خاص، از شناسه اختصاصی یا ترکیب کلاس ناحیه و کلاس ابزارک استفاده کنید:
.sidebar .featured-widget { background-color: #f4f7ff;}این انتخابگر فقط عنصری با کلاس featured-widget رو هدف می‌گیره که داخل ناحیه‌ای با کلاس sidebar باشه.
اضافه کردن کلاس CSS به ابزارک کلاسیک با افزونه Widget CSS Classes
اگه ابزارک کلاسیکتون کلاسی اختصاصی نداره، افزونه Widget CSS Classes می‌تونه یک فیلد برای افزودن کلاس یا شناسه در اختیارتون بذاره. این روش بیشتر برای محیط ابزارک‌های کلاسیک مناسبه.
این افزونه چه کاری انجام می‌ده؟
این افزونه خودش ظاهر ابزارک رو طراحی نمی‌کنه و کد CSS آماده هم نمی‌سازه. فقط کمک میکنه یک کلاس یا شناسه دلخواه به خروجی ابزارک اضافه کنید. بعد باید CSS مربوط به اون رو جداگانه بنویسید.
عملکرد این روش به ساختار خروجی پوسته هم وابسته‌ست. صفحه رسمی افزونه در زمان بررسی مقاله هشدار آزمایش‌نشدن با سه نسخه اصلی اخیر وردپرس رو نشون می‌داد؛ پس قبل از نصب، وضعیت به‌روزرسانی و سازگاری فعلی اون با نسخه وردپرس سایتتون رو دوباره بررسی کنید. اگه امکان افزودن کلاس از خود وردپرس یا پوسته رو دارین، معمولاً همون روش بدون افزونه ساده‌تره.
نصب و فعال‌سازی افزونه
- از پیشخوان به «افزونه‌ها ← افزودن افزونه تازه» برید.
- عبارت
Widget CSS Classesرو جست‌وجو کنید. - نام و سازنده افزونه رو با صفحه رسمی اون تطبیق بدید.
- وضعیت به‌روزرسانی و سازگاری افزونه رو بررسی کنید. اگه هشدار سازگاری می‌بینید، بهتره اول روش بدون افزونه رو امتحان کنید.
- روی «نصب» و بعد «فعال‌کردن» کلیک کنید.
اگه با این مراحل آشنا نیستید، راهنمای نصب افزونه در وردپرس همه مراحل رو توضیح می‌ده.
اضافه کردن کلاس یا شناسه به ابزارک
به «نمایش ← ابزارکها» برید و ابزارک موردنظرتون رو باز کنید. فیلد مربوط به کلاس CSS رو پیدا کنید و نامی مثل subscribe-box بنویسید. برای جلوگیری از تداخل، از یک نام روشن و اختصاصی استفاده کنید.
اگه این فیلد رو نمی‌بینید، احتمال داره سایتتون از پوسته بلوکی یا ویرایشگر ابزارک مبتنی بر بلوک استفاده کنه. در این حالت، روش بخش پوستههای بلوکی رو امتحان کنید.
نوشتن CSS برای کلاس اضافه‌شده
بعد از ذخیره ابزارک، به محل CSS اضافی پوسته برید و کد زیر رو وارد کنید:
.subscribe-box { background-color: #1f2937; color: #ffffff; padding: 24px; border-radius: 10px;}صفحه سایت رو باز کنید و نتیجه رو ببینید. اگه تغییری اعمال نشد، با Inspect بررسی کنید که کلاس واقعاً به عنصر اصلی ابزارک اضافه شده باشه.
چند نمونه کد CSS کاربردی برای ابزارکها
در نمونه‌های زیر از کلاس custom-widget استفاده کردیم. شما باید این نام رو با کلاس واقعی بلوک یا ابزارکتون جایگزین کنید.
تغییر رنگ پس‌زمینه و متن ابزارک
.custom-widget { background-color: #eef2ff; color: #1e1b4b;}کد رنگ اول برای پس‌زمینه و کد دوم برای متن هست. رنگ‌هایی انتخاب کنید که تضاد کافی داشته باشن تا متن راحت خونده بشه.
اضافه کردن فاصله، حاشیه و گوشه‌های گرد
.custom-widget { padding: 20px; margin-bottom: 24px; border: 1px solid #d1d5db; border-radius: 12px;}padding فاصله محتوای داخل ابزارک از لبه‌ها رو تعیین میکنه. margin-bottom هم بین ابزارک و بخش بعدی فاصله می‌ذاره. برای آشنایی بیشتر با ویژگی‌های پایه، آموزش ویژگی‌های پرکاربرد CSS رو ببینید.
تغییر ظاهر عنوان ابزارک
.custom-widget .widget-title,.custom-widget h2,.custom-widget h3 { color: #4338ca; font-size: 22px; margin-bottom: 12px;}عنوان ابزارک ممکنه با کلاس widget-title یا یک تگ عنوان مثل h2 و h3 ساخته شده باشه. با Inspect بررسی کنید کدوم انتخابگر با ساختار سایتتون هماهنگه. برای جزئیات بیشتر درباره اندازه نوشته‌ها هم میتونید آموزش تغییر اندازه فونت سایت وردپرس رو بخونید.
مخفی کردن ابزارک در موبایل یا دسکتاپ
Media Query یا شرط اندازه صفحه کمک میکنه یک کد فقط در عرض مشخصی اجرا بشه. نمونه زیر ابزارک رو در صفحه‌های ۷۸۲ پیکسل و کوچک‌تر مخفی میکنه:
@media (max-width: 782px) { .custom-widget { display: none; }}برای مخفی‌کردن ابزارک در صفحه‌های بزرگ‌تر میتونید از min-width استفاده کنید. این روش رو برای محتوای ضروری، فرم‌های مهم، منوی اصلی یا مسیرهایی که کاربر برای انجام کارش به اون‌ها نیاز داره به کار نبرید، چون اون بخش در اندازه مشخص‌شده کاملاً از صفحه حذف می‌شه. راهنمای مخفی کردن ابزارک وردپرس در موبایل هم یک روش افزونه‌ای رو توضیح می‌ده.
چطور کلاس درست ابزارک یا بلوک رو پیدا کنید؟
باز کردن Inspect در مرورگر
صفحه سایت رو در مرورگر باز کنید، روی ابزارک کلیک راست کنید و گزینه Inspect رو بزنید. در پنل بازشده، نشانگر انتخاب عنصر رو فعال کنید و روی قسمت موردنظر برید. مرورگر محدوده عنصری رو که انتخاب کردید روی صفحه مشخص میکنه.
تشخیص کلاس اختصاصی از کلاسهای عمومی
کلاس‌هایی مثل widget، block یا wp-block-group ممکنه روی چند بخش تکرار بشن. یک کلاس اختصاصی معمولاً نام مشخص‌تری داره و فقط برای همون بخش ساخته شده. میتونید نام کلاس رو در پنل کد جست‌وجو کنید و ببینید چند بار در صفحه تکرار شده.
جلوگیری از انتخاب کلاس‌هایی مثل widget-2 بدون بررسی
کلاسی مثل widget-2 یک قانون ثابت برای همه سایتها نیست. نام و شماره کلاسها به پوسته، نوع ابزارک و ساختار صفحه بستگی داره و ممکنه بعد از جابه‌جایی ابزارک یا تغییر پوسته عوض بشه. پس اون رو از آموزش‌های دیگه کپی نکنید؛ اول کلاس واقعی سایت خودتون رو با Inspect پیدا کنید.
مشکلات رایج بعد از اضافه کردن CSS به ابزارک وردپرس
کد CSS اعمال نمیشه
اول نام کلاس رو بررسی کنید. داخل تنظیمات بلوک نباید نقطه بذارید، ولی در CSS باید نام کلاس با نقطه شروع بشه. بسته‌شدن آکولادها، غلط املایی نام کلاس و ذخیره‌شدن تغییرها رو هم بررسی کنید. اگه یک کد دیگه اثر کد شما رو خنثی کرده، در Inspect کدتون به‌صورت خط‌خورده دیده می‌شه.
استایل روی چند ابزارک اعمال می‌شه
این مشکل معمولاً یعنی انتخابگرتون خیلی کلیه و چند بخش رو هم‌زمان انتخاب میکنه. به‌جای .widget از کلاس اختصاصی استفاده کنید یا انتخابگر رو با کلاس ناحیه ترکیب کنید. بهتره قبل از ذخیره، در Inspect ببینید انتخابگر شما چند عنصر رو هدف می‌گیره.
تغییرات بعد از ذخیره دیده نمی‌شن
صفحه رو با بازخوانی کامل دوباره بارگذاری کنید و کش مرورگر، افزونه کش و کش سرور رو پاک کنید. اگه از لایت‌اسپید استفاده می‌کنید، راهنمای تنظیمات افزونه لایت‌اسپید کش مسیرهای مربوط به پاک‌کردن و مدیریت کش رو توضیح می‌ده.
ظاهر ابزارک در موبایل به‌هم می‌ریزه
مقدارهای ثابت بزرگ مثل عرض ۶۰۰ پیکسل یا فاصله ۸۰ پیکسل معمولاً در صفحه کوچک مشکل می‌سازن. تا جای ممکن از عرض انعطاف‌پذیر استفاده کنید. ویژگی box-sizing: border-box هم باعث می‌شه فاصله داخلی و حاشیه داخل عرض تعیین‌شده حساب بشن و ابزارک از فضای خودش بیرون نزنه. برای موبایل میتونید یک Media Query جدا بنویسید:
.custom-widget { box-sizing: border-box; width: 100%; max-width: 600px;}@media (max-width: 782px) { .custom-widget { padding: 16px; max-width: 100%; }}روش افزونه بهتره یا روش بدون افزونه؟
- برای پوسته بلوکی: اول روش داخلی وردپرس رو انتخاب کنید. بیشتر بلوکها بخش «کلاسهای CSS اضافی» دارن و افزونه جدا لازم نیست.
- برای ابزارک کلاسیک: اگه ابزارک کلاس یا شناسه مناسبی داره، با Inspect اون رو پیدا کنید. اگه کلاس اختصاصی در دسترس نیست، افزونه Widget CSS Classes می‌تونه این فیلد رو اضافه کنه؛ ولی وضعیت به‌روزرسانی و سازگاری فعلی افزونه رو قبل از نصب بررسی کنید.
- قبل از ویرایش CSS: از سایت نسخه پشتیبان بگیرید و کدهای فعلی بخش CSS رو هم در یک فایل متنی امن کپی کنید تا اگه مشکلی پیش اومد، راحت به نسخه قبلی برگردید. کدهای قبلی رو پاک نکنید، هر تغییر رو اول روی یک بخش آزمایش کنید و نتیجه رو در موبایل و دسکتاپ ببینید.
روش بدون افزونه معمولاً انتخاب ساده‌تریه، چون قابلیت‌های خود وردپرس رو به کار می‌گیره و وابستگی تازه‌ای به سایت اضافه نمی‌کنه. افزونه زمانی مفیده که با ابزارک کلاسیک کار می‌کنید و راه مناسبی برای ساخت کلاس اختصاصی ندارید.
جمع‌بندی
برای اضافه کردن CSS به ابزارک وردپرس، اول نوع پوسته رو مشخص کنید. در پوسته بلوکی، بلوک رو از ویرایشگر سایت انتخاب کنید، یک کلاس CSS اضافی به اون بدید و کد رو در بخش CSS سراسری بنویسید. در پوسته کلاسیک هم میتونید کلاس واقعی ابزارک رو با Inspect پیدا کنید و کد رو در «CSS اضافی» بذارید.
اگه ابزارک کلاسیک کلاس مناسبی نداره، Widget CSS Classes می‌تونه فقط برای افزودن کلاس یا شناسه کمکتون کنه. قبل از نصب، وضعیت سازگاری افزونه رو در صفحه رسمیش ببینید. در هر روش، انتخابگر دقیق و بررسی نتیجه در موبایل مهم‌ترین بخش کاره؛ چون یک انتخابگر عمومی ممکنه ظاهر چند قسمت سایت رو هم‌زمان تغییر بده.
سؤال‌های رایج درباره اضافه کردن CSS به ابزارک وردپرس
برای اضافه کردن CSS به ابزارک حتماً باید افزونه نصب کنیم؟
نه. در پوستههای بلوکی معمولاً میتونید از بخش کلاسهای CSS اضافی بلوک استفاده کنید. در پوستههای کلاسیک هم میتونید کلاس یا شناسه ابزارک رو با Inspect پیدا کنید و CSS رو بدون افزونه بنویسید.
کد CSS ابزارک رو کجای وردپرس وارد کنیم؟
در پوسته کلاسیک معمولاً مسیر «نمایش ← سفارشیسازی ← CSS اضافی» در دسترسه. در پوسته بلوکی باید بخش استایلها و CSS اضافی ویرایشگر سایت رو بررسی کنید. جای دقیق یا در دسترس بودن گزینهها به پوسته، نسخه وردپرس و سطح دسترسی شما بستگی داره.
آیا کلاس widget-2 در همه سایتها یکسانه؟
نه. نام کلاسها به پوسته، نوع ابزارک و ساختار خروجی صفحه بستگی داره. همیشه با Inspect کلاس واقعی ابزارک سایت خودتون رو پیدا کنید و یک نام نمونه رو از سایت دیگه کپی نکنید.
چطور فقط ظاهر یک ابزارک خاص رو تغییر بدیم؟
به اون ابزارک یا بلوک یک کلاس اختصاصی بدید و CSS رو با همون کلاس بنویسید. اگه امکان ساخت کلاس ندارید، شناسه یا ترکیب دقیق کلاسهای اون بخش رو با Inspect پیدا کنید. از انتخابگرهای عمومی مثل .widget بهتنهایی استفاده نکنید.
برای ارسال نظر لطفا ابتدا ثبتنام کنید یا وارد شوید.