آموزشها
قالبها
افزونهها
آکادمی
هاست وردپرس
طراحی سایت
تولزینا
فرمانویرایش کدهای CSS در وردپرس بدون نیاز به دانش برنامهنویسی
- افزونه وردپرس
- بروزرسانی شده در
برای عوضکردن رنگ دکمهها، اندازه نوشتهها یا فاصله بین بخشهای سایت، لازم نیست همون اول سراغ کدنویسی برید. اگه سایتتون قالب بلوکی داشته باشه، خیلی از این کارها از داخل خود وردپرس انجام میشن. برای تغییرهای دقیقتر هم میتونید از افزونه SiteOrigin CSS کمک بگیرید و نتیجه رو همون لحظه ببینید.
توی این راهنما اول میبینیم چطور نوع قالب سایتتون رو تشخیص بدید. بعد امکانات داخلی وردپرس و افزونه SiteOrigin CSS رو قدمبهقدم بررسی میکنیم. در آخر هم بهتون میگیم چطور تغییر اشتباه رو برگردونید و چرا گاهی استایل تازه توی سایت دیده نمیشه.
آنچه در این مقاله میخوانید
CSS چیه و چه بخشهایی از ظاهر سایت رو تغییر میده؟
CSS زبانیه که ظاهر صفحههای وب رو کنترل میکنه. این زبان محتوای اصلی صفحه رو عوض نمیکنه و فقط شکل نمایش اون رو تغییر میده. مثلاً با CSS میشه رنگ عنوان، اندازه فونت، فاصله بین دو بخش، حاشیه دکمه یا چیدمان یک کادر رو تغییر داد.
هر بخش از صفحه یک یا چند استایل داره. قالب وردپرس، افزونهها و تنظیمات خود وردپرس این استایلها رو میسازن. وقتی ظاهر بخشی رو تغییر میدید، در واقع یک قانون تازه به اونها اضافه میکنید یا مقدار یکی از تنظیمات قبلی رو عوض میکنید.
ویرایش CSS در وردپرس بدون کدنویسی یعنی برای تغییرهای رایج، از ابزارهای دیداری مثل انتخاب رنگ، تنظیم اندازه و تغییر فاصله استفاده کنید. بعضی طراحیهای خاص هنوز به نوشتن CSS نیاز دارن، ولی برای شروع و انجام کارهای معمول لازم نیست برنامهنویس باشید.
قبل از ویرایش CSS، نوع قالب سایتتون رو بشناسید
مسیر تغییر ظاهر توی همه سایتهای وردپرسی یکی نیست. قبل از شروع باید بدونید سایتتون قالب بلوکی داره یا قالب کلاسیک. اگه هنوز با مفهوم قالب آشنا نیستید، مقاله قالب وردپرس چیست شروع خوبی براتون هست.
تفاوت قالب بلوکی و قالب کلاسیک
قالب بلوکی بهتون اجازه میده بخشهایی مثل سربرگ، پابرگ و قالب نوشتهها رو با بلوکهای وردپرس ویرایش کنید. بخش «استایلها» هم تنظیمات کلی رنگ، تایپوگرافی، فاصله و ظاهر بلوکها رو در اختیارتون میذاره. تایپوگرافی یعنی تنظیم ظاهر نوشتهها؛ مثل فونت، اندازه، ضخامت و فاصله خطوط.
قالب کلاسیک معمولاً تنظیمات ظاهری رو توی بخش «نمایش ← سفارشیسازی» یا پنل اختصاصی خودش میذاره. امکانات این بخش به قالب بستگی داره. بعضی قالبها تنظیمات کاملی دارن و بعضیها حتی برای تغییرهای کوچک هم به CSS یا یک افزونه کمکی نیاز پیدا میکنن.
اگه از قالبهایی مثل قالب اهورا استفاده میکنید، برای خیلی از تغییرهای ظاهری نیازی به نوشتن CSS ندارید. میتونید از پیشخوان وردپرس وارد «نمایش ← سفارشیسازی» بشید و با تنظیمات خود قالب، بخشهایی مثل استایل، فونت، رنگهای عمومی و ظاهر قسمتهای مختلف سایت رو تغییر بدید.
پس قبل از نصب افزونه یا اضافهکردن CSS، اول تنظیمات خود قالب رو ببینید. تغییرهایی که از پنل قالب انجام میدید معمولاً سادهتر پیدا و مدیریت میشن.
چطور نوع قالب سایتتون رو تشخیص بدید؟
- وارد پیشخوان وردپرس بشید و منوی «نمایش» رو باز کنید.
- اگه گزینه «ویرایشگر» رو میبینید، به احتمال زیاد قالب فعالتون بلوکیه.
- اگه گزینه «سفارشیسازی» رو دارید و «ویرایشگر» دیده نمیشه، معمولاً قالبتون کلاسیکه.
بعضی افزونهها یا تنظیمات مدیریتی ممکنه این منوها رو تغییر بدن. اگه هنوز مطمئن نیستید، نام قالب فعال رو از بخش «نمایش ← پوستهها» پیدا کنید و راهنمای رسمی همون قالب رو بخونید.
بهترین روش ویرایش CSS در وردپرس بدون کدنویسی کدومه؟
- ویرایشگر سایت برای قالبهای بلوکی: برای تغییرهای کلی مثل رنگ، فونت، فاصله و ظاهر بلوکها، اول این روش رو امتحان کنید. افزونه تازهای لازم نداره و با ساختار قالب هماهنگه.
- افزونه SiteOrigin CSS برای ویرایش بصری دقیقتر: وقتی میخواید بخش مشخصی از صفحه رو انتخاب کنید و نتیجه تغییر رو زنده ببینید، این ابزار کاربردیتره.
- انتخاب روش بر اساس قالب و نوع تغییر: اول سراغ امکانات قالب برید. اگه تنظیم دلخواهتون اونجا نبود، ابزار بصری افزونه رو امتحان کنید.
اگه میخواید کل صفحه رو با کشیدن و رهاکردن بخشها بسازید، احتمالاً یک صفحهساز انتخاب مناسبتریه. راهنمای بهترین افزونههای صفحهساز وردپرس تفاوت این ابزارها رو ساده توضیح میده.
ویرایش ظاهر سایت با امکانات داخلی وردپرس
اگه قالب بلوکی دارید، بهتره از بخش استایلهای وردپرس شروع کنید. این بخش برای تغییر ظاهر کلی سایت و استایل هر نوع بلوک ساخته شده.
ورود به بخش استایلها در ویرایشگر سایت
- از پیشخوان وردپرس وارد «نمایش ← ویرایشگر» بشید.
- بخش «استایلها» رو باز کنید. جای این گزینه ممکنه با توجه به نسخه وردپرس و قالب کمی فرق کنه.
- برای تغییر ظاهر کل سایت، رنگها، تایپوگرافی یا چیدمان رو انتخاب کنید.
- برای تغییر یک نوع بلوک، بخش «بلوکها» رو باز کنید و بلوک موردنظرتون رو انتخاب کنید.
تغییر رنگ، فونت، فاصله و چیدمان بلوکها
برای تغییر رنگهای عمومی سایت، بخش «رنگها» رو باز کنید. اونجا میتونید رنگ پسزمینه، متن، لینکها یا دکمهها رو تنظیم کنید. بهتره بین رنگ متن و پسزمینه تفاوت کافی باشه تا نوشتهها راحت خونده بشن.
در بخش تایپوگرافی میتونید اندازه و ظاهر نوشتهها رو عوض کنید. برای فاصلهها و عرض محتوا هم سراغ تنظیمات چیدمان برید. بعد از هر تغییر، صفحه اصلی، یک نوشته و یک برگه رو ببینید؛ چون تنظیمات کلی ممکنه روی چند جای سایت اثر بذارن.
استفاده از بخش CSS سفارشی در قالبهای بلوکی
ویرایشگر سایت بخشی برای CSS سفارشی هم داره. این قسمت وقتی به کارتون میاد که ابزارهای دیداری تنظیم دلخواهتون رو ندارن و یک قطعه CSS آماده و مطمئن دارید. چون باید توی این بخش کد بنویسید، برای ویرایش کاملاً بصری انتخاب اولتون نیست.
اگه کدی رو از یک آموزش کپی میکنید، قبل از ذخیره مطمئن بشید منبعش قابلاعتماده و کد دقیقاً برای بخش موردنظر شما نوشته شده. یک کد نامناسب ممکنه ظاهر چند بخش دیگه رو هم عوض کنه.
ویرایش CSS در وردپرس با افزونه SiteOrigin CSS
افزونه SiteOrigin CSS یک ویرایشگر بصری داره که با اون میتونید بخشهای صفحه رو انتخاب کنید، ویژگیهای ظاهری رو تغییر بدید و نتیجه رو زنده ببینید. وقتی گزینه موردنظرتون توی تنظیمات قالب نیست، این افزونه میتونه برای تغییرهای دقیقتر به کارتون بیاد.
نصب و فعالسازی SiteOrigin CSS
- از پیشخوان وردپرس وارد «افزونهها ← افزودن افزونه تازه» بشید.
- عبارت «SiteOrigin CSS» رو جستوجو کنید.
- نام افزونه و سازنده اون رو بررسی کنید تا گزینه درست رو نصب کنید.
- روی «هماکنون نصب نمایید» و بعد «فعال نمایید» کلیک کنید. متن این دکمهها ممکنه در ترجمه وردپرس شما کمی متفاوت باشه.
ورود به بخش Custom CSS
بعد از فعالسازی، از منوی «نمایش» وارد «Custom CSS» بشید. این صفحه کدهایی رو نشون میده که با ابزار بصری ساخته شدن یا خودتون واردشون کردید. قبل از شروع هم از سایت بکاپ بگیرید تا اگه مشکلی پیش اومد، راحتتر به وضعیت قبلی برگردید.
باز کردن ویرایشگر بصری و پیشنمایش زنده
توی صفحه Custom CSS، گزینه ورود به ویرایشگر بصری رو انتخاب کنید. افزونه سایت رو کنار ابزارهای ویرایش باز میکنه. حالا میتونید بخش دلخواهتون رو انتخاب کنید و قبل از ذخیره، نتیجه تغییر رو ببینید.
اگه پیشنمایش کامل باز نشد، اول کش مرورگر و افزونههای کش رو بررسی کنید. افزونههای امنیتی یا محدودیتهای مرورگر هم ممکنه جلوی بارگذاری درست پیشنمایش رو بگیرن.
انتخاب بخش موردنظر از صفحه
ابزار انتخاب عنصر رو فعال کنید و روی بخشی مثل عنوان، دکمه یا کادر محتوا بزنید. «عنصر» یعنی همون قسمت مشخصی که انتخاب کردید. افزونه برای اون یک انتخابگر یا Selector پیدا میکنه. انتخابگر نشون میده استایل باید روی کدوم قسمت صفحه اعمال بشه.
قبل از تغییر، ببینید فقط همون بخش دلخواهتون انتخاب شده یا نه. اگه چند دکمه یا عنوان با هم مشخص شدن، انتخابگر عمومیتره و ممکنه تغییر روی همه اونها اثر بذاره.
تغییر رنگ، فونت، اندازه و فاصلهها بدون نوشتن کد
بعد از انتخاب بخش، کنترلهای دیداری افزونه رو باز کنید. با توجه به عنصری که انتخاب کردید، میتونید رنگ متن و پسزمینه، نوع و اندازه فونت، ضخامت نوشته، حاشیه و فاصله داخلی یا بیرونی رو تغییر بدید.
فاصله داخلی یا Padding فضای بین محتوای کادر و لبههای اونه. فاصله بیرونی یا Margin هم فضای بین کادر و بخشهای اطرافشه. اگه نمیدونید کدوم گزینه مناسبه، مقدارها رو کمکم تغییر بدید و نتیجه رو توی پیشنمایش ببینید.
بررسی تغییرها در موبایل و دسکتاپ
تغییری که روی مانیتور خوب به نظر میرسه، ممکنه توی موبایل فضای زیادی بگیره یا نوشتهها رو بشکنه. عرض پنجره پیشنمایش رو کم و زیاد کنید و صفحه رو دستکم در اندازه موبایل، تبلت و دسکتاپ ببینید.
بعد از ذخیره، سایت رو با یک گوشی واقعی هم بررسی کنید. منوها، دکمهها، فرمها و نوشتههای بلند مهمترن؛ چون بههمریختگی توی این بخشها زودتر خودش رو نشون میده.
ذخیرهکردن تغییرها
وقتی از نتیجه راضی بودید، تغییر رو تأیید کنید و به صفحه اصلی Custom CSS برگردید. کد ساختهشده رو یک بار ببینید و گزینه ذخیره CSS رو بزنید. بعد سایت رو در یک تب تازه باز کنید و نتیجه نهایی رو بررسی کنید.
بهتره تغییرها رو جداگانه ذخیره و آزمایش کنید. اینطوری اگه ظاهر سایت بههم ریخت، راحتتر میفهمید کدوم تغییر باعث مشکل شده.
ویرایش استایل فقط در یک برگه
چه زمانی CSS مخصوص یک برگه به کارتون میاد؟
فرض کنید فقط دکمه صفحه تماس باید رنگ دیگهای داشته باشه یا فاصله عنوان صفحه اصلی درست نیست. اگه یک انتخابگر عمومی رو تغییر بدید، احتمال داره دکمهها یا عنوانهای بقیه سایت هم عوض بشن. اینجا باید استایل رو به همون برگه محدود کنید.
روش اعمال تغییر بدون تأثیر روی بقیه سایت
اول همون برگه رو در ویرایشگر بصری SiteOrigin CSS باز کنید. بخش موردنظرتون رو انتخاب کنید و ببینید انتخابگر افزونه به شناسه همون صفحه محدود شده یا نه. شناسه صفحه کمک میکنه تغییر فقط روی همون برگه اعمال بشه.
بعد از ذخیره، یک صفحه مشابه رو هم باز کنید. مثلاً اگه دکمه یک برگه رو تغییر دادید، دکمه برگه دیگهای رو ببینید تا مطمئن بشید استایل به کل سایت نرسیده. اگه محدوده انتخابگر رو تشخیص نمیدید، بهتره قبل از ذخیره از کسی که CSS بلده کمک بگیرید.
چطور تغییر اشتباه CSS رو برگردونید؟
بررسی تاریخچه نسخههای CSS
SiteOrigin CSS برای تغییرهای ذخیرهشده تاریخچه بازبینی داره. بازبینی یعنی نسخه قدیمیتری از CSS که میتونید اون رو ببینید و با نسخه فعلی مقایسه کنید. اگه بعد از ذخیره مشکلی دیدید، وارد صفحه Custom CSS بشید و بخش بازبینیها یا تاریخچه رو پیدا کنید.
برگشت به نسخه قبلی
نسخهای رو انتخاب کنید که قبل از ایجاد مشکل ذخیره شده. محتوای اون رو بررسی کنید و فقط وقتی مطمئن شدید نسخه درسته، بازیابی رو انجام بدید. بعد از برگشت هم صفحه مشکلدار رو دوباره باز کنید.
پاککردن کش بعد از اصلاح استایل
کش نسخهای موقت از صفحهها و فایلها رو نگه میداره تا سایت سریعتر باز بشه. برای همین ممکنه CSS رو اصلاح کرده باشید، ولی هنوز نسخه قبلی رو ببینید. کش افزونه بهینهسازی و مرورگرتون رو پاک کنید. اگه سرویس میزبانی شما کش جداگانه داره، اون رو هم پاک کنید و صفحه رو دوباره باز کنید.
اگه از افزونه رخش استفاده میکنید، راهنمای افزونه وردپرس رخش بهتون کمک میکنه تنظیمات مربوط به کش رو بهتر بشناسید.
نکات مهم برای جلوگیری از بههمریختن ظاهر سایت
- قبل از تغییرهای بزرگ بکاپ بگیرید: بکاپ همون نسخه پشتیبان از فایلها و اطلاعات سایتتونه. یادتون نره روش برگردوندن اون رو هم یاد بگیرید.
- مرحلهای ذخیره کنید: یک تغییر رو انجام بدید، نتیجه رو ببینید و بعد سراغ تغییر بعدی برید.
- اندازههای مختلف صفحه رو امتحان کنید: ظاهر سایت رو روی موبایل، تبلت و دسکتاپ ببینید.
- فایل style.css قالب اصلی رو مستقیم ویرایش نکنید: این تغییرها ممکنه بعد از بهروزرسانی قالب از بین برن. مستندات ویرایش فایل قالب وردپرس هم درباره این خطر توضیح میده.
- برای تغییر مستقیم فایلها از چایلد تم استفاده کنید: چایلد تم یا قالب فرزند، تغییرهای شما رو جدا از فایلهای قالب اصلی نگه میداره. ساخت و نگهداری اون فنیتره؛ پس برای کارهای ساده، تنظیمات داخلی قالب یا افزونه بصری راحتتره.
مشکلات رایج موقع ویرایش CSS در وردپرس
چرا تغییرها نمایش داده نمیشن؟
اول ببینید تغییر رو ذخیره کردید یا نه. بعد کش مرورگر و افزونه کش رو پاک کنید و اگه هاستتون کش جداگانه داره، اون رو هم خالی کنید. اگه باز نتیجه رو ندیدید، صفحه رو در حالت ناشناس مرورگر باز کنید. بهینهسازی فایلهای CSS هم ممکنه نمایش نسخه تازه رو عقب بندازه.
چرا تغییر روی بخش اشتباهی اعمال میشه؟
احتمالاً انتخابگر بیشازحد عمومیه. مثلاً اگه بهجای یک دکمه خاص، همه دکمهها تغییر کنن، یعنی افزونه گروه بزرگتری از عناصر رو هدف گرفته. دوباره بخش درست رو با ابزار بصری انتخاب کنید و قسمتهای مشابه صفحه رو هم توی پیشنمایش ببینید.
چرا ظاهر موبایل بعد از تغییر بههم میریزه؟
اندازه ثابت و بزرگ برای فونت، عرض یا فاصله معمولاً توی صفحه کوچک دردسر درست میکنه. مقدارها رو کمتر کنید و از تنظیمات مخصوص موبایل قالبتون کمک بگیرید. اگه تغییر باید فقط روی دسکتاپ دیده بشه، به قانون واکنشگرا نیاز دارید و ممکنه لازم باشه کمی CSS بنویسید.
چرا استایل قالب روی تغییر جدید غلبه میکنه؟
وقتی مرورگر چند قانون برای یک بخش پیدا میکنه، قانون دقیقتر یا قانونی که اولویت بیشتری داره اجرا میشه. شاید انتخابگر قالب دقیقتر باشه و اجازه نده تغییر شما دیده بشه. دوباره عنصر درست رو با ابزار بصری انتخاب کنید. بهتره بیدلیل از !important استفاده نکنید، چون اصلاحهای بعدی رو سختتر میکنه.
جمعبندی: کدوم روش برای شما مناسبتره؟
اگه از یک قالب پیشرفته مثل اهورا استفاده میکنید، اول تنظیمات خود قالب رو ببینید. چنین قالبهایی برای خیلی از تغییرهای ظاهری، کنترلهای آمادهای دارن و کمک میکنن بدون برنامهنویسی رنگ، فونت، استایل و بخشهای مختلف سایت رو اصلاح کنید.
استفاده از امکانات خود قالب معمولاً انتخاب بهتری از دستکاری کد بدون دانش تخصصی یا نصب افزونههای اضافیه. این روش هم مدیریت تغییرها رو سادهتر میکنه و هم لازم نیست برای هر کار کوچکی افزونه تازهای به سایت اضافه کنید.
اگه قالب بلوکی دارید و گزینه موردنظرتون توی تنظیمات قالب نیست، از «نمایش ← ویرایشگر ← استایلها» کمک بگیرید. SiteOrigin CSS هم وقتی به کارتون میاد که تنظیم دلخواهتون جای دیگه پیدا نمیشه و میخواید یک بخش مشخص رو از روی صفحه انتخاب کنید. هر روشی رو که انتخاب میکنید، تغییرها رو مرحلهای انجام بدید، ظاهر موبایل رو ببینید و قبل از تغییرهای بزرگ بکاپ بگیرید.
سؤالات متداول
آیا برای تغییر ظاهر وردپرس حتماً باید CSS بلد باشیم؟
نه. خیلی از تغییرهای رایج مثل رنگ، اندازه فونت و فاصلهها با تنظیمات قالب، ویرایشگر سایت یا ابزار بصری SiteOrigin CSS انجام میشن. فقط برای طراحیهای خاص ممکنه به CSS نیاز پیدا کنید.
استفاده از SiteOrigin CSS برای مبتدیها مناسبه؟
بله. ویرایشگر بصری افزونه اجازه میده بخش موردنظرتون رو انتخاب کنید و نتیجه رو زنده ببینید. بهتره تغییرها رو یکییکی ذخیره کنید و بعد از هر مرحله، ظاهر موبایل و دسکتاپ رو بررسی کنید.
آیا تغییرهای CSS بعد از آپدیت قالب باقی میمونن؟
اگه CSS رو با تنظیمات داخلی وردپرس یا افزونه SiteOrigin CSS ذخیره کنید، داخل فایل اصلی قالب نوشته نمیشه. ولی اگه ساختار یا نام کلاسهای قالب بعد از آپدیت عوض بشه، شاید بعضی استایلها به اصلاح نیاز پیدا کنن. فایل style.css قالب اصلی رو مستقیم ویرایش نکنید، چون تغییرهای اون ممکنه با آپدیت از بین برن.
چطور تغییرهای CSS رو به حالت قبل برگردونیم؟
در SiteOrigin CSS میتونید تاریخچه بازبینیها رو ببینید و نسخه قبلی رو بازیابی کنید. اگه از امکانات داخلی وردپرس استفاده کردید، تنظیم تغییرکرده رو به مقدار قبلی برگردونید. بعد از اصلاح هم کش سایت و مرورگرتون رو پاک کنید.
برای قالب بلوکی بهتره از ویرایشگر وردپرس استفاده کنیم یا افزونه؟
اول تنظیمات خود قالب و بعد ویرایشگر وردپرس رو امتحان کنید. اگه کنترل موردنیاز اونجا نبود یا میخواستید یک بخش خاص رو بهصورت دیداری انتخاب کنید، SiteOrigin CSS گزینه مناسبتریه.
سلام خیلی افزونه خوبیه فقط بعضی از قسمت ها مثل دکمه خرید نمیشه رنگش رو عوض کرد میشه راهنمایی کنید؟
سلام
ایا با این افزونه میتونیم صفحه ای کاملا سفارشی(یعنی بدون هدر و…)از صفحه اصلی بسازیم یانه؟
یا اینکه تغیر این کد ها روی همه صفحه های سایت اعمال میشه؟؟؟؟؟
باسلام
تغییرات روی کل سایت شما اعمال میشود
با این افزونهه میشد متنها رو بولد کنی یا کوچیک و بزرک کنی ولی نمیشد تغییر بدی نوشته رو
سلام
کد های css تغییر میکنند به همین دلیل امکان تغییر نوشته وجود ندارد.
افزونه ای هست که بشه متن ها رو تغییر داد ؟ البته بجز واژه نگار .. چون توی قالبی که دارم واژه نگار کار نمیده نمیدونم چرا
سلام
چنین افزونه ای موجود نیست در صورتی هم که وجود داشته باشه اگر یک کلمه رو وارد کنید و کلمه ای جایگزینش کنید در تمامی سایت اعمال میشه به عنوان مثال کلمه وردپرس رو بخواید تغییر بدید هرجا که از وردپرس استفاده کرده باشید تغییر پیدا میکنه.
در صورتی که بخواید متنی را تغییر دهید از طریق پنل وردپرس امکان پذیر هست.
سلام .. من هر کاری کردم متن ها تغییری نکردن.
آیا افزونه ای هست که بشه متن ها رو هم تغییر داد ؟
درود
css ربطی به متن های سایت ندارد . متن ها را باید از طریق ویرایش کد های قالب تغییر دهید .
واقعا کار راه انداز بود، تاحالا نه دیده و نه شنیده بودم. چه خوبه که شما هستین، همیشه باشین خب
سلام من از قالب پابلیشر استفاده میکنم، مقدار زیادی css خود قالب را به سلیقه خودم ویرایش کردم، مدتیه آپدیت جدید اومده و الان اگر آپدیت کنم همه بازنشانی می شوند، شما چه راه حلی را پیشنهاد می کنید، اگر ممکن هست افزونه پیشنهاد ندید، مگر افزونه ای که خیلی ساده، بروز و سبک باشه.
سلام شما باید از چایلد تم استفاده کنید. توی سایت سرچ کنید آموزش کامل چایلد تم هست