اضافه کردن کد CSS به وردپرس با افزونه و بدون افزونه

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

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

اضافه کردن کد CSS به وردپرس چه کاربردی داره؟

CSS به زبان ساده یعنی چی؟

CSS زبانیه که ظاهر صفحه‌های وب رو کنترل می‌کنه. محتوای صفحه می‌تونه عنوان، تصویر، دکمه یا فرم باشه؛ CSS هم مشخص می‌کنه هرکدوم چه رنگ، اندازه، فاصله و چیدمانی داشته باشن.

هر قانون CSS معمولاً یک «انتخابگر» و چند ویژگی داره. انتخابگر مشخص می‌کنه تغییر باید روی کدوم بخش انجام بشه و ویژگی هم نوع اون تغییر رو تعیین می‌کنه. مثلاً کد زیر رنگ همه عنوان‌های سطح دوم رو قرمز می‌کنه:

h2 {
  color: #e53935;
}

با CSS کدوم بخش‌های سایت رو می‌تونید تغییر بدید؟

تقریباً ظاهر هر بخشی از سایت رو می‌تونید با CSS تغییر بدید. چند نمونه ساده از کارهایی که می‌شه انجام داد:

• رنگ، اندازه و فاصله نوشته‌ها رو تغییر بدید.
• ظاهر دکمه‌ها، فرم‌ها و منوها رو شخصی‌سازی کنید.
• برای بخش‌ها حاشیه، پس‌زمینه یا گوشه گرد بسازید.
• یک عنصر اضافی رو در موبایل یا کامپیوتر مخفی کنید.
• فاصله بین ستون‌ها و بخش‌های صفحه رو تنظیم کنید.

یادتون باشه CSS فقط ظاهر رو تغییر می‌ده و قابلیت تازه‌ای به وردپرس اضافه نمی‌کنه. مثلاً با CSS می‌تونید شکل یک فرم رو عوض کنید، ولی نمی‌تونید امکان پرداخت یا ثبت‌نام رو به اون اضافه کنید.

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

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

اگه سایتتون بازدید زیادی داره، تغییرات بزرگ رو اول روی نسخه آزمایشی امتحان کنید. نسخه آزمایشی یا Staging یک کپی جدا از سایت اصلیه و بازدیدکننده‌ها تغییراتی رو که اونجا انجام می‌دید نمی‌بینن.

روش پیشنهادی برای اضافه کردن کد CSS به وردپرس

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

اضافه کردن CSS در قالب‌های کلاسیک

قالب‌های کلاسیک معمولاً برای تنظیم ظاهر از بخش «سفارشی‌سازی» وردپرس استفاده می‌کنن. اگه این گزینه رو در منوی نمایش می‌بینید، مراحل زیر رو انجام بدید:

وارد بخش نمایش و سفارشی‌سازی بشید: از پیشخوان وردپرس به «نمایش ← سفارشی‌سازی» برید.

بخش CSS اضافی رو باز کنید: در ستون تنظیمات روی «CSS اضافی» کلیک کنید.

کد رو وارد کنید: کد CSS رو داخل کادر بنویسید. هم‌زمان می‌تونید نتیجه تغییر رو در پیش‌نمایش کنار صفحه ببینید.

تغییرات رو منتشر کنید: وقتی مطمئن شدید نتیجه درسته، روی دکمه «انتشار» کلیک کنید.

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

اضافه کردن CSS در قالب‌های بلوکی

قالب بلوکی برای طراحی سربرگ، پابرگ و قالب صفحه‌ها از «ویرایشگر سایت» استفاده می‌کنه. توی این قالب‌ها ممکنه گزینه سفارشی‌سازی رو در منوی نمایش نبینید. محل گزینه CSS هم می‌تونه با توجه به نسخه وردپرس و امکانات قالب فرق کنه. اگه گزینه CSS اضافی در ویرایشگر سایتتون دیده می‌شه، این مراحل رو جلو برید:

1. ویرایشگر سایت رو باز کنید: از پیشخوان به «نمایش ← ویرایشگر» برید.
2. وارد بخش استایل‌ها بشید: گزینه «استایل‌ها» رو انتخاب کنید و بخش ویرایش استایل رو باز کنید.
3. دنبال CSS اضافی بگردید: منوی گزینه‌های بیشتر رو باز کنید. اگه گزینه «CSS اضافی» در دسترسه، می‌تونید کد سراسری سایت رو همون‌جا بنویسید.
4. تنظیمات بلوک رو بررسی کنید: در بخش استایل‌ها وارد «بلوک‌ها» بشید و بلوک موردنظرتون رو انتخاب کنید. اگه نسخه وردپرس یا قالبتون کادر CSS مخصوص اون بلوک رو نشون می‌ده، کد رو همون‌جا وارد کنید.
5. نتیجه رو ذخیره کنید: روی «ذخیره» بزنید و بعد صفحه واقعی سایت رو هم در موبایل و هم در کامپیوتر ببینید.

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

اضافه کردن کد CSS به وردپرس با افزونه

اگه ترجیح می‌دید با افزونه کار کنید، می‌تونید افزونه Simple Custom CSS رو بررسی کنید. این افزونه یک ویرایشگر جدا برای نوشتن کدهای CSS در اختیارتون می‌ذاره و کد رو داخل فایل‌های اصلی قالب نمی‌نویسه. وضعیت به‌روزرسانی، سازگاری و مسیر منوهای افزونه‌ها ممکنه تغییر کنه؛ پس قبل از نصب، اطلاعات صفحه رسمی افزونه رو با نسخه وردپرس و PHP سایتتون تطبیق بدید. بهتره افزونه رو اول روی نسخه آزمایشی سایت امتحان کنید.

چه زمانی استفاده از افزونه منطقیه؟

وقتی تعداد کدها زیاده، چند نفر روی سایت کار می‌کنن یا می‌خواید CSS رو در یک محیط جدا نگه دارید، افزونه می‌تونه مدیریت کدها رو راحت‌تر کنه. ولی برای چند تغییر ساده، ابزار داخلی وردپرس معمولاً کم‌دردسرتره.

موقع انتخاب افزونه CSS به چه نکاتی دقت کنید؟

• سازگاری: نسخه‌های وردپرس و PHP پشتیبانی‌شده رو در صفحه افزونه ببینید.
• به‌روزرسانی و پشتیبانی: تاریخ آخرین به‌روزرسانی، تغییرات نسخه‌ها و پاسخ‌های تیم پشتیبانی رو بررسی کنید.
• محل ذخیره کد: مستندات افزونه رو بخونید و مطمئن بشید کدها داخل فایل‌های اصلی قالب نوشته نمی‌شن.
• امکان خروجی گرفتن: اگه کدهای زیادی دارید، قابلیت پشتیبان‌گیری یا خروجی گرفتن به دردتون می‌خوره.
• سادگی افزونه: افزونه‌ای رو انتخاب کنید که امکانات اضافه و بی‌استفاده نداشته باشه.

مراحل اضافه کردن CSS با افزونه

1. از پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید.
2. عبارت Simple Custom CSS رو جست‌وجو کنید. قبل از نصب، نام افزونه و اطلاعات سازگاری اون رو با صفحه رسمی افزونه تطبیق بدید. بعد روی «نصب» و «فعال‌سازی» بزنید.
3. بعد از فعال‌سازی، دنبال بخش «Custom CSS» در منوهای پیشخوان بگردید. مسیر این صفحه ممکنه در نسخه‌های مختلف افزونه تغییر کنه.
4. کد CSS رو داخل ویرایشگر افزونه وارد و تغییرات رو ذخیره کنید. بهتره هر بار فقط یک تغییر کوچک انجام بدید تا اگه مشکلی پیش اومد، راحت‌تر دلیلش رو پیدا کنید.
5. صفحه رو در حالت ناشناس مرورگر و روی موبایل و کامپیوتر باز کنید تا نتیجه نهایی رو ببینید.

چند نمونه کد CSS کاربردی برای شروع

کدهای زیر فقط نمونه هستن و ممکنه لازم باشه انتخابگر اون‌ها رو با کلاس واقعی بخش موردنظرتون عوض کنید. قبل از ذخیره هم حتماً نتیجه رو در پیش‌نمایش ببینید.

تغییر رنگ و اندازه نوشته

این کد رنگ و اندازه همه عنوان‌های سطح دوم رو تغییر می‌ده:

h2 {
  color: #1e73be;
  font-size: 32px;
}

انتخابگر h2 خیلی کلیه و روی همه عنوان‌های سطح دوم اثر می‌ذاره. اگه فقط می‌خواید یک بخش خاص رو تغییر بدید، بهتره کلاس همون بخش رو پیدا کنید.

تغییر رنگ دکمه‌ها

توی این نمونه، رنگ پس‌زمینه و نوشته دکمه‌های بلوک وردپرس عوض می‌شه:

.wp-block-button__link {
  background-color: #ff6b35;
  color: #ffffff;
  border-radius: 8px;
}

اضافه کردن فاصله بین بخش‌ها

ویژگی margin-bottom زیر یک بخش فاصله می‌سازه. فقط باید عبارت .section-name رو با کلاس بخش خودتون عوض کنید:

.section-name {
  margin-bottom: 40px;
}

مخفی کردن یک بخش از صفحه

با کد زیر می‌تونید عنصر انتخاب‌شده رو از صفحه مخفی کنید:

.element-name {
  display: none;
}

مخفی کردن با CSS فقط محتوا رو از دید کاربر پنهان می‌کنه و اون رو از کد صفحه حذف نمی‌کنه. کسی که کد صفحه رو بررسی کنه هنوز می‌تونه اون محتوا رو ببینه. پس هیچ‌وقت از این روش برای پنهان کردن رمز، اطلاعات شخصی یا داده‌های حساس استفاده نکنید.

اعمال تغییر فقط در موبایل

Media Query یعنی قانونی که فقط در اندازه مشخصی از صفحه اجرا می‌شه. نمونه زیر اندازه عنوان رو در صفحه‌های 768 پیکسل و کوچک‌تر کم می‌کنه:

@media (max-width: 768px) {
  h2 {
    font-size: 24px;
  }
}

چطور کلاس CSS بخش موردنظرتون رو پیدا کنید؟

کلاس CSS یک اسم داخل کد صفحه‌ست که می‌تونه برای چند عنصر تکرار بشه. شناسه یا ID هم معمولاً برای یک عنصر یکتا به کار می‌ره. برای پیدا کردن این اسم‌ها می‌تونید از ابزار Inspect مرورگر کمک بگیرید. Inspect ابزاریه که کد صفحه رو نشون می‌ده و اجازه می‌ده ظاهر اون رو موقت تغییر بدید.

1. ابزار Inspect رو باز کنید: روی بخش موردنظرتون راست‌کلیک کنید و گزینه «Inspect» یا «بررسی» رو بزنید.
2. عنصر رو انتخاب کنید: ابزار انتخاب عنصر رو فعال کنید و نشانگر موس رو روی دکمه، نوشته یا بخش موردنظر ببرید.
3. کلاس یا شناسه رو پیدا کنید: در کد بازشده دنبال عبارتی مثل class="button-name" یا id="section-name" بگردید. کلاس در CSS با نقطه و شناسه با علامت # شروع می‌شه.
4. کد رو موقت آزمایش کنید: در پنل Styles یک ویژگی تازه بنویسید. این تغییر فقط در مرورگر خودتون دیده می‌شه و با تازه‌سازی صفحه از بین می‌ره.

کلاسی رو انتخاب کنید که فقط همون بخش رو هدف بگیره و اسم قابل‌فهمی داشته باشه. مثلاً .site-header معمولاً از کلاسی مثل .css-1a2b3c پایدارتره. اسم‌های کوتاه، تصادفی یا ساخته‌شده به‌وسیله صفحه‌ساز ممکنه بعد از به‌روزرسانی عوض بشن. قبل از استفاده هم با Inspect مطمئن بشید انتخابگر فقط بخش موردنظرتون رو انتخاب می‌کنه.

CSS رو با افزونه اضافه کنیم یا بدون افزونه؟

روش مناسب به حجم تغییرات و نوع سایتتون بستگی داره:

• ابزار داخلی وردپرس: برای چند تغییر ساده و قطعه‌کد کوتاه، معمولاً بهترین نقطه شروعه.
• افزونه CSS: اگه کدهای زیادی دارید و یک محیط جدا برای مدیریت اون‌ها می‌خواید، می‌تونید از افزونه‌ای مثل Simple Custom CSS استفاده کنید. قبل از نصب هم سازگاری نسخه فعلی افزونه رو بررسی کنید.
• چایلد تم: برای تغییرات توسعه‌ای، ویرایش فایل‌های قالب یا نگهداری مجموعه بزرگی از استایل‌ها مناسب‌تره. چایلد تم یک قالب فرزند از قالب اصلیه که تغییرات اختصاصی شما رو جدا نگه می‌داره.

فایل style.css قالب اصلی رو مستقیم ویرایش نکنید. بعد از به‌روزرسانی قالب ممکنه تغییرات مستقیم این فایل از بین برن. اگه فقط چند تغییر ظاهری دارید، ابزار داخلی وردپرس انتخاب ساده‌تر و کم‌دردسرتریه.

مشکلات رایج بعد از اضافه کردن CSS و راه‌حل اون‌ها

کد CSS روی سایت اعمال نمی‌شه

اول مطمئن بشید کد رو ذخیره یا منتشر کردید. بعد نقطه، علامت # و آکولادهای باز و بسته رو بررسی کنید. جا افتادن آکولاد بسته می‌تونه قانون‌های بعدی رو هم به‌هم بریزه. نقطه‌ویرگول بین ویژگی‌ها هم مهمه، هرچند بعد از آخرین ویژگی هر قانون اجباری نیست.

اگه ظاهر کد درسته ولی هنوز تغییری نمی‌بینید، احتمالاً انتخابگر اشتباهه. با Inspect بررسی کنید که کلاس انتخاب‌شده واقعاً روی همون عنصر قرار گرفته باشه.

کش سایت نسخه قبلی رو نشون می‌ده

کش یک نسخه آماده از صفحه رو نگه می‌داره تا سایت سریع‌تر باز بشه. بعد از تغییر CSS، کش افزونه سرعت، سرور، CDN و مرورگر رو پاک کنید. بعد صفحه رو در پنجره ناشناس باز کنید. اگه با کش و افزونه‌های اون آشنا نیستید، راهنمای بهترین افزونه افزایش سرعت وردپرس می‌تونه کمکتون کنه.

کد روی موبایل ظاهر سایت رو به‌هم می‌ریزه

عرض ثابت، فاصله زیاد و نوشته‌های خیلی بزرگ معمولاً در صفحه کوچک دردسر درست می‌کنن. برای عرض بخش‌ها می‌تونید به‌جای یک عدد ثابت از درصد یا max-width استفاده کنید. واحد rem هم برای اندازه نوشته انعطاف بیشتری بهتون می‌ده. اگه تغییر فقط برای موبایله، اون رو داخل Media Query بذارید. نتیجه رو در چند اندازه صفحه و روی یک گوشی واقعی هم ببینید، چون فقط کوچک کردن پنجره مرورگر همیشه کافی نیست.

استایل قالب کد سفارشی رو بازنویسی می‌کنه

گاهی انتخابگر قالب از انتخابگر شما دقیق‌تره و اولویت بیشتری می‌گیره. در این حالت، انتخابگر خودتون رو کمی دقیق‌تر کنید. مثلاً به‌جای .button از .header .button استفاده کنید.

فقط وقتی سراغ !important برید که دلیل تداخل رو پیدا کردید و راه ساده‌تری ندارید. استفاده زیاد از اون، مدیریت و اصلاح کدها رو سخت می‌کنه.

بعد از تغییر قالب، CSS درست کار نمی‌کنه

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

نکات مهم برای نوشتن CSS سفارشی امن و مرتب

• هر تغییر رو اول آزمایش کنید: کد رو در پیش‌نمایش یا Inspect امتحان کنید و بعد ذخیره کنید.
• برای کدها توضیح بنویسید: بالای هر بخش یک توضیح کوتاه مثل /* تغییر رنگ دکمه خرید */ بذارید.
• انتخابگر خیلی کلی نسازید: تغییر مستقیم همه تگ‌های p یا a ممکنه بخش‌هایی از سایت رو که مدنظرتون نیست هم عوض کنه.
• نسخه موبایل رو فراموش نکنید: صفحه‌های اصلی، نوشته‌ها، فرم‌ها و منو رو در اندازه‌های مختلف ببینید. برای بررسی دقیق‌تر می‌تونید راهنمای تست سایت در مرورگرهای مختلف رو بخونید.
• یک نسخه سالم نگه دارید: قبل از هر تغییر مهم، کد فعلی رو کپی کنید تا اگه لازم شد راحت به نسخه قبلی برگردید.
• کدهای تکراری رو پاک کنید: چند قانون مشابه می‌تونن پیدا کردن تداخل‌ها رو سخت کنن.

جمع‌بندی

برای بیشتر کاربران تازه‌کار، بهترین کار اینه که کد CSS رو با ابزار داخلی خود وردپرس وارد و مدیریت کنن. در قالب کلاسیک می‌تونید از بخش «سفارشی‌سازی ← CSS اضافی» کمک بگیرید. در قالب بلوکی هم اول بخش استایل‌های ویرایشگر سایت رو بررسی کنید، چون در دسترس بودن CSS سراسری یا مخصوص هر بلوک به نسخه وردپرس و امکانات قالب بستگی داره.

وقتی خود وردپرس کاری رو بدون افزونه انجام می‌ده، معمولاً نصب یک افزونه تازه برای همون کار منطقی نیست. ولی اگه کدهای زیادی دارید و یک محیط جدا برای مدیریت اون‌ها می‌خواید، Simple Custom CSS یکی از گزینه‌هاییه که می‌تونید بعد از بررسی سازگاری نسخه فعلیش امتحان کنید. برای ویرایش فایل‌های قالب و تغییرات توسعه‌ای هم چایلد تم انتخاب مناسب‌تریه. با هر روشی که جلو می‌رید، کد رو قبل از ذخیره امتحان کنید، یک نسخه سالم از اون نگه دارید و نتیجه رو در موبایل و کامپیوتر ببینید.

سؤالات متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.