در چند پروژه‌ای که سال‌های اخیر روی وردپرس کار کرده‌ام، نقطه‌ای که تفاوت تیم حرفه‌ای با تیم تازه‌کار مشخص می‌شود، لحظه‌ای است که مشتری می‌گوید رنگ دکمه‌ها را عوض کنید. تیمی که سیستم طراحی دارد، این تغییر را در چند دقیقه اعمال می‌کند؛ تیمی که ندارد، به‌دنبال کلاس‌های CSS (Cascading Style Sheets) پراکنده در ده فایل می‌گردد. پیاده‌سازی Design System در وردپرس، این تفاوت را می‌سازد. اما برخلاف تصور عموم، پیاده‌سازی سیستم طراحی در وردپرس یک پروژه یک‌روزه نیست؛ یک تصمیم معماری بلندمدت است. اگر با مفهوم پایه آشنا نیستید، ابتدا سیستم طراحی چیست و چرا مهم است را بخوانید و سپس به این مقاله بازگردید.

چرا وردپرس، بستر مناسبی برای سیستم طراحی است؟

وردپرس به‌طور سنتی به‌عنوان یک CMS (Content Management System) شناخته می‌شود که با نصب قالب و افزونه راه می‌افتد. اما از نسخه‌ای که گوتنبرگ و بعد theme.json معرفی شد، وردپرس به‌طور جدی وارد قلمرو معماری طراحی شد. سه ویژگی وردپرس را برای پیاده‌سازی سیستم طراحی مناسب می‌کند: اول، سیستم تم لایه‌ای با قالب والد و فرزند که اجازه تغییرات امن می‌دهد. دوم، هوک‌های رسمی که به شما اجازه می‌دهند بدون دست‌زدن به هسته، رفتار سایت را کنترل کنید. سوم، معرفی theme.json که پل رسمی بین توکن‌های طراحی و CSS است.

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

وردپرس بدون سیستم طراحی، یک CMS است؛ وردپرس با سیستم طراحی، یک پلتفرم محتوایی قابل توسعه در مقیاس سازمانی.

چهار لایه پیاده‌سازی: توکن، کامپوننت، قالب، بلوک

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

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

لایه اول: توکن‌های طراحی در وردپرس

توکن‌های طراحی، پایه سیستم هستند. یک توکن، یک مقدار مشخص است که به یک مفهوم معنایی متصل می‌شود. مثلاً به‌جای نوشتن رنگ #2563EB در صد جای مختلف، یک توکن با نام color-primary تعریف می‌کنید و در همه جا از آن استفاده می‌کنید. مزیت این روش، تمرکز تغییرات است: اگر رنگ برند عوض شود، فقط توکن را تغییر می‌دهید و همه جا اعمال می‌شود.

در وردپرس، توکن‌ها را می‌توانید در چند جا تعریف کنید. یکی از رایج‌ترین روش‌ها، تعریف متغیرهای CSS در فایل استایل چایلد تم است. روش دیگر، استفاده از theme.json است که در بخش بعد توضیح می‌دهم. در پروژه‌های تیمی، توصیه می‌کنم توکن‌ها را در یک فایل جداگانه با نام tokens.css نگه دارید و آن را در چایلد تم وارد کنید. اگر با روش افزودن کد سفارشی آشنا نیستید، افزودن کد سفارشی به وردپرس راهنمای مناسبی است.

توکن‌ها را می‌توانید در چند دسته سازمان‌دهی کنید: رنگ‌های اصلی، رنگ‌های متن، رنگ‌های وضعیت (موفق، خطا، هشدار)، تایپوگرافی (اندازه‌ها، وزن‌ها، ارتفاع خط)، فاصله‌ها (margin و padding)، شعاع گوشه‌ها و سایه‌ها. این سازمان‌دهی، در تیم‌های بزرگ تفاوت بین سیستم قابل استفاده و سیستم نامفهوم را می‌سازد. برای درک عمیق‌تر نقش توکن‌ها در طراحی، مفهوم Design System در ویکی‌پدیا مرجع خوبی است.

لایه دوم: theme.json و پل بین طراحی و کد

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

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

ساختار پایه theme.json به این صورت است: بخش settings برای تعریف پالت رنگ، تایپوگرافی، فاصله‌ها و سایر تنظیمات سیستم؛ بخش styles برای اعمال پیش‌فرض این تنظیمات به عناصر مختلف HTML (HyperText Markup Language). در پروژه‌های واقعی، این فایل می‌تواند به صدها خط برسد، اما ساختارش ساده و قابل نگهداری است. توصیه می‌کنم theme.json را به‌عنوان منبع اصلی حقیقت برای توکن‌ها انتخاب کنید، نه فقط یک فایل پیکربندی.

theme.json به وردپرس یک زبان رسمی برای بیان سیستم طراحی داد؛ قبل از آن، هر تیم زبان خودش را اختراع می‌کرد.

لایه سوم: کامپوننت‌ها در گوتنبرگ

در وردپرس، کامپوننت‌های سیستم طراحی دو شکل می‌توانند داشته باشند: قالب‌های بلوک (Block Patterns) و بلوک‌های سفارشی (Custom Blocks). تفاوت این دو در سطح سفارشی‌سازی و پیچیدگی است. قالب‌های بلوک، ترکیب‌های آماده از بلوک‌های موجود هستند که کاربر می‌تواند آن‌ها را درج کند. مثلاً یک قالب بلوک برای بخش خدمات که شامل عنوان، توضیح و دکمه است. بلوک سفارشی، یک بلوک کاملاً جدید است که با جاوااسکریپت و PHP نوشته می‌شود و کنترل بیشتری می‌دهد.

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

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

لایه چهارم: چایلد تم و مدیریت تغییرات

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

ساختار پیشنهادی من در چایلد تم این است: پوشه assets برای CSS و JavaScript سیستم طراحی، پوشه patterns برای قالب‌های بلوک، پوشه inc برای توابع و منطق سفارشی، و فایل theme.json سفارشی که تنظیمات والد را بازنویسی می‌کند. این ساختار در پروژه‌های بزرگ، تفاوت بین سیستم قابل نگهداری و آشوب را می‌سازد. اگر با مفهوم چایلد تم آشنا نیستید، پیشنهاد می‌کنم قالب چایلد چیست را بخوانید. برای اینکه کد سیستم طراحی در چایلد تم امن باشد، اصول امنیت کد که در هوک‌های وردپرس و امنیت کد توضیح داده‌ام را جدی بگیرید.

جریان کار پیشنهادی در تیم‌های حرفه‌ای

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

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

گام دوم، تبدیل توکن‌ها به مقادیر قابل استفاده در کد است. این مرحله شامل تولید theme.json و فایل CSS توکن‌ها از توکن‌های Figma است. برخی تیم‌ها این کار را دستی انجام می‌دهند، برخی از پلاگین‌های Figma برای صادر کردن توکن‌ها استفاده می‌کنند.

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

سیستم طراحی یک محصول است، نه یک پروژه؛ محصولی که باید نسخه‌بندی، مستندسازی و به‌روزرسانی شود.

ابزارهای مکمل Figma و WordPress

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

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

چالش‌های پیاده‌سازی و راه‌های عبور از آن‌ها

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

چالش اول: افزونه‌های شخص ثالث ممکن است استایل‌های خودشان را تزریق کنند و ظاهر سیستم طراحی شما را خراب کنند. راه‌حل، استفاده از CSS Layers و در برخی موارد بازنویسی استایل افزونه با Specificity درست است. چالش دوم: تیم‌هایی که سال‌ها با روش قدیمی کار کرده‌اند، در برابر جریان جدید مقاومت می‌کنند. راه‌حل، شروع با یک ماژول کوچک و گسترش تدریجی است. چالش سوم: در بلندمدت، سیستم طراحی ممکن است از قالب والد یا افزونه‌های ثالث جدا شود. راه‌حل، مستندسازی دقیق و نسخه‌بندی سیستم است. اگر می‌خواهید اصول حرفه‌ای طراحی را مرور کنید، اصول طراحی وب حرفه‌ای منبع خوبی است.

پرسش‌های پرتکرار درباره پیاده‌سازی Design System در وردپرس

آیا می‌توانم بدون theme.json سیستم طراحی در وردپرس بسازم؟

بله، اما theme.json کار شما را بسیار ساده‌تر می‌کند. اگر از یک قالب قدیمی استفاده می‌کنید که از theme.json پشتیبانی نمی‌کند، می‌توانید توکن‌ها را در یک فایل CSS سفارشی در چایلد تم تعریف کنید. اما توصیه من این است که در پروژه‌های جدید از theme.json استفاده کنید تا از مزایای ویرایشگر بلوک بهره‌مند شوید.

آیا برای سیستم طراحی باید از چایلد تم استفاده کنم؟

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

آیا سیستم طراحی با هر قالبی کار می‌کند؟

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

آیا سیستم طراحی سرعت سایت را کم نمی‌کند؟

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

آیا سیستم طراحی برای پروژه‌های کوچک هم منطقی است؟

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

چگونه بین تیم طراحی و تیم توسعه هماهنگی ایجاد کنیم؟

کلید موفقیت، اشتراک‌گذاری توکن‌ها به‌صورت ماشین‌خوان است. Figma این امکان را می‌دهد که توکن‌ها را به‌صورت JSON صادر کنید. در سمت وردپرس، همان JSON می‌تواند به‌طور خودکار به theme.json یا فایل CSS توکن‌ها تبدیل شود. این رویکرد، تفاوت بین پروژه‌ای که توکن‌هایش همیشه همگام است و پروژه‌ای که هفته‌ای یک ساعت صرف همگام‌سازی دستی می‌کند را می‌سازد.

اگر یک افزونه استایل سیستم طراحی را بشکند چه کنیم؟

اول، با DevTools بررسی کنید که استایل افزونه چه چیزی را بازنویسی کرده. دوم، از CSS Layers برای کنترل ترتیب بارگذاری استفاده کنید. سوم، در صورت لزوم، از Specificity بالاتر برای توکن‌های طراحی خود استفاده کنید. اما توصیه می‌کنم در صورت امکان، افزونه‌های سازگار با سیستم طراحی را انتخاب کنید و در زمان انتخاب افزونه، سازگاری با سیستم را به‌عنوان یک معیار در نظر بگیرید.

آنچه یک معمار سیستم طراحی در وردپرس می‌داند

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

اگر تجربه‌ای از پیاده‌سازی سیستم طراحی در وردپرس دارید — چه با theme.json و چه با روش‌های سنتی‌تر — در دیدگاه‌ها بنویسید. به‌خصوص اگر با چالشی روبه‌رو شده‌اید که راه‌حل خلاقانه‌ای برای آن پیدا کرده‌اید، تجربه‌تان برای خواننده بعدی طلاست. برای آشنایی با رویکردهای دیگر در این حوزه، پیشنهاد می‌کنم مقایسه Figma و Sketch را هم ببینید. 🎯