آموزش Global Styles و تنظیم رنگ و فونت سایت در وردپرس

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

در این آموزش، مسیر ورود به Global Styles، انتخاب Style Variation، ساخت پالت رنگ، تنظیم فونت فارسی، استفاده از Font Library، مدیریت Typography، Layout، Style Book، استایل اختصاصی بلوک‌ها، Reset و Revision را بررسی می‌کنیم. همچنین نقش theme.json، اولویت تنظیمات، سرعت بارگذاری فونت، کنتراست رنگ، سئو، دسترس‌پذیری و تفاوت این مسیر با قالب WoodMart توضیح داده می‌شود.

Global Styles چیست؟

Global Styles رابط بصری تنظیمات و استایل‌هایی است که قالب، هسته وردپرس و کاربر برای ظاهر سایت تعریف می‌کنند. این سیستم در Site Editor قرار دارد و معمولاً با آیکن دایره نیمه‌رنگی یا گزینه Styles باز می‌شود.

تغییرات Global Styles می‌توانند روی تمام Templateها، نوشته‌ها و برگه‌هایی که از استایل عمومی استفاده می‌کنند اثر بگذارند. برای مثال اگر رنگ پیش‌فرض لینک را تغییر دهید، بسیاری از لینک‌های سایت به‌صورت هم‌زمان به‌روزرسانی می‌شوند. اگر اندازه Heading را تغییر دهید، تیترهایی که Override محلی ندارند از مقدار جدید استفاده می‌کنند.

تفاوت Global Styles با تنظیمات یک بلوک

تنظیمات محلی فقط بلوک انتخاب‌شده را تغییر می‌دهند؛ Global Styles رفتار پیش‌فرض کل سایت یا یک نوع بلوک را مشخص می‌کند.

• Global Styles: همه دکمه‌ها، لینک‌ها یا Headingها
• Block Styles: همه نمونه‌های یک بلوک مشخص مانند Button
• Local Override: فقط همان بلوک در همان صفحه

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

ورود به بخش Styles

1. از پیشخوان وارد Appearance → Editor شوید.
2. بخش Styles را باز کنید.
3. Style Variation یا آیکن ویرایش را انتخاب کنید.
4. Typography، Colors، Layout و Blocks را بررسی کنید.
5. پیش از ذخیره، تغییرات را در Preview ببینید.

اگر گزینه Editor وجود ندارد، قالب فعال Block Theme نیست. برای شناخت این تفاوت، مقاله تفاوت قالب بلوکی و کلاسیک وردپرس را ببینید.

Style Variation چیست؟

Style Variation یک بسته آماده از رنگ، فونت، فاصله و استایل بلوک‌هاست. یک قالب بلوکی می‌تواند چند Variation داشته باشد؛ برای مثال نسخه روشن، تیره، مینیمال یا رنگی.

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

ساخت پالت رنگ حرفه‌ای

یک پالت کاربردی معمولاً شامل تعداد محدودی رنگ با نقش مشخص است:

• رنگ اصلی برند
• رنگ مکمل یا Accent
• رنگ متن اصلی
• رنگ متن ثانویه
• پس‌زمینه اصلی
• پس‌زمینه بخش‌ها و کارت‌ها
• رنگ Border
• رنگ موفقیت، هشدار و خطا در صورت نیاز

نام‌گذاری براساس نقش بهتر از نام‌گذاری براساس ظاهر است. «Primary» و «Surface» برای تغییر آینده مناسب‌تر از «Blue» و «Gray» هستند.

تنظیم رنگ سایت با Global Styles

در Styles → Colors می‌توانید Palette، Text، Background، Link، Heading، Button و Caption را تنظیم کنید. گزینه‌های دقیق به قالب و نسخه وردپرس بستگی دارند.

رنگ متن

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

رنگ لینک

لینک فقط با رنگ قابل تشخیص نباشد؛ Underline یا تفاوت بصری کافی نیز مفید است. حالت Hover و Focus باید مشخص باشند.

رنگ دکمه

رنگ دکمه اصلی را برای اقدام مهم نگه دارید. اگر همه عناصر با Accent پررنگ شوند، اولویت بصری از بین می‌رود.

Gradient

Gradient می‌تواند برای Cover و Hero مناسب باشد، اما استفاده زیاد آن طراحی را ناهماهنگ و CSS را پیچیده‌تر می‌کند. چند Gradient محدود و برندمحور تعریف کنید.

کنتراست رنگ و دسترس‌پذیری

زیبایی رنگ بدون خوانایی ارزش ندارد. متن، لینک، دکمه و Focus State باید روی پس‌زمینه کنتراست کافی داشته باشند. این موضوع به‌خصوص برای متن کوچک، فوتر تیره و دکمه‌های Outline مهم است.

موارد زیر را بررسی کنید:

• متن اصلی روی پس‌زمینه
• متن دکمه روی رنگ دکمه
• لینک در حالت عادی و Hover
• Placeholder فرم
• Focus Ring
• متن روی تصویر Cover
• حالت Dark Variation

Typography در Global Styles

Typography فقط انتخاب نام فونت نیست. اندازه، وزن، Line Height، Letter Spacing، Style و گاهی Text Decoration را شامل می‌شود.

در Styles → Typography می‌توانید استایل عمومی Text، Link، Heading، Caption و Button را تنظیم کنید. سپس از بخش Blocks برای نوع خاصی مانند Quote یا Navigation تنظیم جداگانه بدهید.

انتخاب فونت فارسی مناسب

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

• متن طولانی فارسی
• تیترهای کوتاه و بلند
• اعداد فارسی و لاتین
• ترکیب فارسی و انگلیسی
• قیمت و درصد
• Bold و Medium
• نیم‌فاصله و علائم نگارشی

برای متن بدنه، خوانایی مهم‌تر از ظاهر نمایشی است. فونت نمایشی را می‌توان فقط برای تیترها استفاده کرد.

Font Library چیست؟

Font Library ابزار مدیریت فونت در Site Editor است. با آن می‌توانید فونت‌های ارائه‌شده توسط قالب را فعال یا غیرفعال کنید و در برخی محیط‌ها فایل فونت محلی بارگذاری کنید. فونت نصب‌شده در کتابخانه برای استفاده در Typography در دسترس قرار می‌گیرد.

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

نصب فونت با Font Library

1. Site Editor را باز کنید.
2. به Styles → Typography بروید.
3. گزینه Manage Fonts یا Font Library را باز کنید.
4. Upload را انتخاب کنید.
5. فایل WOFF2 معتبر را بارگذاری کنید.
6. نام Family، Style و Weight را کنترل کنید.
7. فونت را فعال کنید.
8. آن را برای Text یا Heading انتخاب کنید.
9. سایت را در Front-end و موبایل بررسی کنید.

فقط نام فایل را تغییر ندهید؛ Metadata و وزن واقعی باید درست باشند. فایل Regular که با Weight 700 ثبت شود، خروجی نادرست می‌سازد.

چند وزن فونت لازم است؟

برای بیشتر سایت‌ها دو یا سه وزن کافی است:

• Regular برای متن
• Medium یا SemiBold برای رابط
• Bold برای Heading

بارگذاری همه وزن‌های 100 تا 900 بدون استفاده، حجم و درخواست شبکه را افزایش می‌دهد. اگر Variable Font باکیفیت و سازگار دارید، می‌تواند چند وزن را در یک فایل پوشش دهد؛ اما حجم و رفتار مرورگر باید آزمایش شود.

فرمت مناسب فونت

برای وب، WOFF2 انتخاب اصلی است. WOFF می‌تواند برای سازگاری قدیمی‌تر استفاده شود. TTF و OTF معمولاً حجم بیشتری دارند و همیشه بهترین گزینه مستقیم برای وب نیستند.

نام فایل انگلیسی، کوتاه و بدون فاصله انتخاب کنید. فونت را از منبع معتبر دریافت کنید و مجوز وب آن را بررسی کنید.

تنظیم اندازه متن و تیترها

به‌جای انتخاب اندازه جداگانه برای هر تیتر، یک مقیاس منظم بسازید. نمونه:

• Small برای Caption
• Normal برای متن بدنه
• Medium برای Lead
• Large برای H3
• X-Large برای H2
• XX-Large برای H1

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

Line Height و خوانایی متن فارسی

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

مقدار مناسب به فونت بستگی دارد. متن واقعی سایت را روی موبایل، دسکتاپ و مرورگرهای مختلف بررسی کنید.

Letter Spacing در فارسی

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

تنظیم Headingها

در بخش Typography یا Blocks، Heading را انتخاب کنید و سپس H1 تا H6 را در صورت پشتیبانی جداگانه تنظیم کنید. تفاوت اندازه باید سلسله‌مراتب را نشان دهد، اما H4 و H5 نباید آن‌قدر کوچک شوند که از متن عادی قابل تشخیص نباشند.

استایل Heading با ساختار HTML متفاوت است. فقط برای بزرگ کردن متن، Paragraph را به H2 تبدیل نکنید.

Layout در Global Styles

Layout عرض محتوا و Wide Width را کنترل می‌کند. این دو مقدار تعیین می‌کنند بلوک‌های معمولی و Align Wide چه فضایی داشته باشند.

• Content Width: عرض متن و محتوای معمولی
• Wide Width: عرض بلوک‌های Wide
• Padding: فاصله کناره صفحه

متن بسیار عریض خوانایی را کاهش می‌دهد. در موبایل Padding باید مانع چسبیدن محتوا به لبه شود.

Style Book چیست؟

Style Book مجموعه‌ای از بلوک‌های نمونه را با استایل فعلی نشان می‌دهد. به‌جای باز کردن چند صفحه، می‌توانید تأثیر رنگ و فونت را روی Paragraph، Heading، Button، Quote، List، Image، Form و بلوک‌های دیگر یکجا ببینید.

پس از تغییر پالت یا فونت، Style Book را مرور کنید و موارد زیر را کنترل کنید:

• کنتراست Button
• خوانایی Quote
• رنگ لینک
• Border جدول
• Caption تصویر
• Form Controls
• Navigation

استایل اختصاصی هر بلوک

در Styles → Blocks می‌توانید نوع بلوک را انتخاب کنید. برای مثال همه Buttonها می‌توانند Radius، رنگ، فونت و Padding یکسان داشته باشند. همچنین می‌توانید Quote، Code، Navigation، Search، Separator و سایر بلوک‌ها را تنظیم کنید.

این روش بهتر از ویرایش تک‌تک بلوک‌هاست و Design System را پایدار نگه می‌دارد.

Style Variations و Branding

می‌توانید چند Variation برای برند، کمپین یا حالت روشن و تیره داشته باشید. توسعه‌دهنده این Variationها را به‌صورت فایل JSON داخل پوشه styles قالب تعریف می‌کند.

styles/
├── dark.json
├── light.json
└── contrast.json

Variation نباید ساختار Template را تغییر دهد؛ هدف اصلی آن تغییر ظاهر عمومی است.

نقش theme.json

theme.json تنظیمات، Presetها و استایل‌های قالب را تعریف می‌کند. نمونه ساده:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "name": "Primary", "color": "#263b70" }
      ]
    },
    "typography": {
      "fluid": true
    }
  },
  "styles": {
    "color": {
      "text": "#222222",
      "background": "#ffffff"
    }
  }
}

تغییر دستی این فایل باید در Child Theme یا محیط توسعه انجام شود. خطای JSON می‌تواند تنظیمات را از کار بیندازد.

اولویت استایل‌ها در وردپرس

خروجی نهایی نتیجه ترکیب چند منبع است: تنظیمات هسته، theme.json قالب، Style Variation، تنظیمات کاربر در Global Styles و Override محلی بلوک. مقدار محلی معمولاً اولویت بیشتری دارد.

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

Global Styles در قالب کلاسیک

قالب کلاسیک می‌تواند از theme.json و استایل بلوک‌ها پشتیبانی کند، اما Site Editor کامل و رابط Global Styles مشابه Block Theme را لزوماً ندارد. در این حالت تنظیمات ممکن است بین Customizer، Theme Options و Editor تقسیم شوند.

تنظیم رنگ و فونت در WoodMart

در dev-source.ir با WoodMart، مسیر اصلی معمولاً از WoodMart → Theme Settings انجام می‌شود. بخش‌های مرتبط می‌توانند شامل Typography، Styles and Colors، Header، Blog و Shop باشند.

نکات مهم:

• فونت بدنه و Heading را از یک منبع مرکزی تنظیم کنید.
• رنگ Primary و Link را در Theme Settings هماهنگ کنید.
• CSS سفارشی پراکنده را محدود کنید.
• پس از تغییر، CSS Cache و CDN را پاک کنید.
• صفحه محصول، Checkout، Blog و موبایل را بررسی کنید.

برای استفاده از Global Styles واقعی باید Block Theme را روی Staging یا لوکال فعال کنید، نه روی فروشگاه اصلی.

بهینه‌سازی سرعت فونت

• فقط وزن‌های لازم را بارگذاری کنید.
• WOFF2 استفاده کنید.
• فونت‌های تکراری قالب و افزونه را حذف کنید.
• از چند Font Family غیرضروری پرهیز کنید.
• Preload را فقط برای فایل حیاتی در نظر بگیرید.
• رفتار font-display را بررسی کنید.
• کش و CDN را پس از تغییر پاک کنید.

Preload همه فونت‌ها می‌تواند نتیجه معکوس داشته باشد. فقط فونتی که در نمای اولیه واقعاً لازم است در اولویت قرار گیرد.

سئو و Global Styles

رنگ و فونت عامل رتبه‌بندی مستقیم نیستند، اما خوانایی، CLS، سرعت و تجربه کاربر را تحت‌تأثیر قرار می‌دهند. فونت دیر بارگذاری‌شده ممکن است جابه‌جایی Layout ایجاد کند. کنتراست ضعیف نیز استفاده از محتوا را سخت می‌کند.

ساختار Heading را با ظاهر اشتباه نگیرید. تغییر اندازه H2 به ظاهر کوچک‌تر، نقش HTML آن را عوض نمی‌کند.

Revision و بازگشت تغییرات

Global Styles تاریخچه تغییرات دارد. اگر طراحی خراب شد، Revisionهای قبلی را بررسی و نسخه سالم را Restore کنید. گزینه Reset to defaults نیز می‌تواند تنظیمات کاربر را حذف و مقادیر قالب را بازگرداند.

قبل از Reset، Export یا بکاپ تهیه کنید؛ زیرا ممکن است تغییرات گسترده حذف شوند.

Export تنظیمات طراحی

از Site Editor می‌توانید طراحی و تنظیمات را Export کنید. خروجی می‌تواند برای ساخت Child Theme یا انتقال به محیط توسعه استفاده شود. این فایل جایگزین بکاپ کامل محتوا و دیتابیس نیست.

رفع مشکل اعمال نشدن فونت

• کش مرورگر و CDN را پاک کنید.
• بررسی کنید Font Family روی Text یا Heading تنظیم شده باشد.
• فایل فونت خطای 404 یا CORS نداشته باشد.
• وزن درخواست‌شده واقعاً نصب شده باشد.
• بلوک Override محلی نداشته باشد.
• CSS افزونه یا قالب مقدار را بازنویسی نکرده باشد.

رفع مشکل اعمال نشدن رنگ

رنگ ممکن است از Style Block، CSS سفارشی، Pattern یا تنظیم محلی آمده باشد. DevTools مرورگر را باز کنید و Rule برنده را پیدا کنید. سپس منبع اصلی را اصلاح کنید، نه اینکه چند !important جدید اضافه کنید.

رفع مشکل متفاوت بودن ویرایشگر و سایت

Editor Style ممکن است همه CSSهای Front-end را شبیه‌سازی نکند. همچنین کش، افزونه یا Script می‌تواند تفاوت ایجاد کند. نتیجه را همیشه در Preview واقعی و حالت ناشناس بررسی کنید.

اشتباهات رایج

• انتخاب رنگ جداگانه برای هر بلوک
• بارگذاری همه وزن‌های فونت
• استفاده از چند فونت فارسی هم‌زمان
• کنتراست ضعیف متن و دکمه
• تغییر Style Variation روی سایت اصلی بدون Preview
• ویرایش مستقیم قالب والد
• استفاده زیاد از Letter Spacing فارسی
• نادیده گرفتن موبایل
• Reset بدون Export
• تغییر WoodMart با آموزش مخصوص Block Theme

چک‌لیست نهایی رنگ و فونت

• پالت محدود و نقش‌محور است.
• رنگ متن و پس‌زمینه کنتراست مناسب دارند.
• Link، Hover و Focus قابل تشخیص‌اند.
• فونت فارسی همه نویسه‌های لازم را دارد.
• فقط وزن‌های مورد نیاز بارگذاری شده‌اند.
• اندازه و Line Height در موبایل خواناست.
• Headingها سلسله‌مراتب واضح دارند.
• Style Book بررسی شده است.
• Button، Form و Navigation تست شده‌اند.
• کش پاک شده و Front-end بررسی شده است.
• Revision یا Export موجود است.

📌 همچنین بخوانید: دسترس‌پذیری در Gutenberg و Site Editor وردپرس، طراحی ریسپانسیو در Gutenberg و Site Editor وردپرس و ساخت لندینگ پیج با Gutenberg در وردپرس

پرسش‌های متداول

Global Styles در همه قالب‌ها وجود دارد؟

رابط کامل آن مخصوص Block Theme و Site Editor است. قالب کلاسیک ممکن است فقط از بخشی از theme.json استفاده کند.

آیا می‌توان فونت فارسی را از Font Library نصب کرد؟

بله، در محیطی که Upload Font فعال باشد. فایل WOFF2 معتبر و دارای مجوز استفاده وب انتخاب کنید.

چرا تغییر رنگ روی بعضی بلوک‌ها اعمال نمی‌شود؟

احتمالاً بلوک Override محلی، CSS سفارشی یا Style اختصاصی دارد.

آیا Global Styles روی همه صفحات اثر می‌گذارد؟

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

برای سایت فارسی چند فونت مناسب است؟

معمولاً یک Font Family برای متن و در صورت نیاز یک فونت مکمل برای Heading کافی است.

در WoodMart از کجا رنگ و فونت را تغییر دهیم؟

از Theme Settings و بخش‌های Typography و Styles and Colors استفاده کنید. Site Editor کامل مسیر اصلی WoodMart نیست.

جمع‌بندی

Global Styles در وردپرس ابزار ساخت یک Design System مرکزی برای قالب‌های بلوکی است. با آن می‌توانید پالت رنگ، Typography، Layout و استایل انواع بلوک را از یک نقطه مدیریت کنید. Style Book برای کنترل هماهنگی، Font Library برای مدیریت فونت و Revision برای بازگشت تغییرات استفاده می‌شوند.

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

در سایت فعلی dev-source.ir با WoodMart 8.3.7، تنظیم رنگ و فونت باید از Theme Settings انجام شود. برای تمرین Global Styles، یک Block Theme را روی لوکال هاست یا Staging فعال کنید.

برای ادامه مسیر، مقاله آموزش Site Editor، راهنمای ساخت هدر و فوتر با Site Editor و مقاله آموزش Gutenberg را مطالعه کنید.

منابع رسمی

• راهنمای رسمی Styles
• Styles در Site Editor
• راهنمای Font Library
• مستندات Global Settings and Styles
• راهنمای theme.json
• اطلاعیه WordPress 7.0.2