ویرایش زنده CSS در وردپرس با Visual CSS Style Editor

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

توی این آموزش، نصب افزونه Visual CSS Style Editor یا YellowPencil، انتخاب درست عناصر، ویرایش ظاهر دسکتاپ و موبایل، ذخیره استایل‌ها و رفع خطاهای رایج رو قدم‌به‌قدم یاد می‌گیرید. همین‌طور تفاوت نسخه رایگان و حرفه‌ای رو بررسی می‌کنیم تا قبل از شروع بدونید کدوم امکانات به نسخه حرفه‌ای نیاز دارن.

ویرایش زنده CSS در وردپرس چه کاربردی داره؟

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

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

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

افزونه YellowPencil چیه و چطور کار می‌کنه؟

YellowPencil نام شناخته‌شده افزونه Visual CSS Style Editor هست. این افزونه یک لایه ویرایش بصری روی سایت باز می‌کنه. شما روی یک عنصر مثل عنوان، دکمه یا تصویر کلیک می‌کنید و افزونه انتخابگر CSS مناسب اون رو پیدا می‌کنه. انتخابگر CSS یعنی نشانی‌ای که مرورگر با کمک اون عنصر موردنظر رو بین بقیه بخش‌های صفحه پیدا می‌کنه.

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

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

قبل از شروع به چه چیزهایی نیاز دارید؟

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

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

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

نصب و فعال‌کردن YellowPencil در وردپرس

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

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

آشنایی با محیط ویرایش زنده CSS

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

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

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

چطور ظاهر بخش‌های مختلف سایت رو تغییر بدید؟

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

تغییر رنگ متن و پس‌زمینه

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

تغییر فونت، اندازه و فاصله خطوط

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

تنظیم فاصله داخلی و خارجی

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

تغییر عرض و ارتفاع بخش‌ها

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

ساخت حاشیه، گوشه گرد و سایه

با Border می‌تونید دور یک بخش خط بسازید. Border Radius گوشه‌ها رو گرد می‌کنه و Box Shadow سایه‌ای پشت کادر می‌سازه. برای طراحی تمیز، سایه رو کم‌رنگ و اندازه گردی گوشه‌ها رو هماهنگ با بقیه سایت نگه دارید.

جابه‌جاکردن عناصر با کشیدن و رهاکردن

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

اضافه‌کردن انیمیشن به عناصر

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

ویرایش مستقیم کد CSS در YellowPencil

اگه با CSS آشنا هستید و ویرایشگر کد در نسخه شما در دسترس هست، این ابزار کنترل بیشتری بهتون می‌ده. اول عنصر رو از داخل صفحه انتخاب کنید تا YellowPencil انتخابگر پیشنهادی اون رو نشون بده. بعد ابزار CSS Editor رو باز کنید و قانون دلخواهتون رو بنویسید.

.example-button {
  border-radius: 8px;
  padding: 12px 20px;
}

این نمونه فقط برای توضیح ساختار کده و انتخابگر .example-button باید با انتخابگر واقعی سایتتون عوض بشه. هر ویژگی رو در یک خط بنویسید و انتهای اون علامت نقطه‌ویرگول بذارید.

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

تغییر ظاهر سایت در موبایل و تبلت

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

1. اول ظاهر اصلی رو در حالت دسکتاپ تنظیم کنید.
2. به حالت تبلت برید و فاصله‌ها، اندازه متن و عرض بخش‌ها رو بررسی کنید.
3. حالت موبایل رو باز کنید و مطمئن بشید متن از کادر بیرون نزده و دکمه‌ها قابل لمس هستن.
4. تغییرات رو ذخیره کنید و صفحه رو روی یک گوشی واقعی هم ببینید.

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

ذخیره و مدیریت تغییرات CSS

بعد از هر تغییر کوچک، نتیجه رو بررسی کنید و سپس گزینه ذخیره رو بزنید. چند تغییر بزرگ رو یکجا انجام ندید؛ چون اگه مشکلی پیش بیاد، پیداکردن عامل اون سخت می‌شه.

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

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

تفاوت امکانات نسخه رایگان و حرفه‌ای YellowPencil

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

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

چرا تغییرات CSS نمایش داده نمی‌شن؟

اگه تغییر رو ذخیره کردید ولی توی سایت نمی‌بینید، مراحل زیر رو به‌ترتیب انجام بدید:

1. کش مرورگر رو پاک کنید: صفحه رو در پنجره ناشناس باز کنید یا تازه‌سازی کامل مرورگر رو انجام بدید.
2. کش وردپرس و CDN رو پاک کنید: اگه از افزونه بهینه‌سازی، کش سرور یا CDN استفاده می‌کنید، نسخه ذخیره‌شده CSS رو پاک کنید.
3. نمای دستگاه رو بررسی کنید: شاید استایل فقط برای موبایل ذخیره شده باشه و شما صفحه دسکتاپ رو ببینید.
4. انتخابگر رو بررسی کنید: ممکنه قالب بعد از به‌روزرسانی نام کلاس عنصر رو تغییر داده باشه یا انتخابگر روی بخش دیگه‌ای تنظیم شده باشه.
5. قدرت قانون‌های CSS رو بررسی کنید: گاهی قانون قالب دقیق‌تره و تغییر تازه رو کنار می‌زنه. مثلاً ممکنه شما رنگ همه دکمه‌ها رو عوض کنید، ولی قالب برای دکمه داخل هدر یک قانون جدا و قوی‌تر داشته باشه.
6. تداخل رو پیدا کنید: روی سایت آزمایشی، افزونه‌های مرتبط با ظاهر یا کش رو یکی‌یکی غیرفعال کنید و بعد از هر مرحله نتیجه رو ببینید.

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

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

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

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

جمع‌بندی ویرایش زنده CSS در وردپرس

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

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

سوالات متداول درباره ویرایش زنده CSS در وردپرس

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

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