گامهای بعدی (Next steps)
مسیر اصلی را طی کردید! حالا میتوانید با Bricks سایتهای حرفهای وردپرس بسازید. اما این فقط پایه است — Bricks ویژگیهای پیشرفته قدرتمندی دارد که هنوز به آنها نپرداختیم.
این مقاله نقشه راه بعدی را نشان میدهد. برای هر ویژگی خواهید دید: - چیست — توضیح ساده - چرا اهمیت دارد — مزایای واقعی - کِی به آن نیاز دارید — چه مشکلی را حل میکند - کجا بیشتر بخوانید — لینک به مستندات کامل
لازم نیست همه را یکجا یاد بگیرید. پروژه بسازید، با چالش روبرو شوید، بعد ویژگیای که آن مشکل را حل میکند را یاد بگیرید. تسلط بر Bricks اینطور به دست میآید.
بهترین روش یادگیری Bricks
سعی نکنید همه چیز را حفظ کنید. به جایش:
- پروژه واقعی بسازید — سایت شخصی، کار مشتری، پروژه علاقهمندی
- با مشکل روبرو شوید — «باید این CTA را در ۲۰ صفحه داشته باشم» یا «این accordion باید همهجا کار کند»
- راهحل را یاد بگیرید — «آها، Components این را حل میکند!»
- اعمال کنید — بسازید، بشکنید، بفهمید
- تکرار کنید — هر پروژه چیز جدیدی یاد میدهد
با استفاده از Bricks به تسلط میرسید، نه با خواندن دربارهاش. این منابع وقتی نیاز داشتید آنجا هستند.
نقشه راه ویژگیهای پیشرفته
Components (کامپوننتها)
چیست: المانهای قابلاستفادهمجدد که در سراسر سایت همگام میشوند. یک کارت طراحی کنید، همهجا استفاده کنید. کامپوننت را آپدیت کنید — هر نمونه خودکار بهروز میشود.
چرا اهمیت دارد: سازگاری تضمین میکند و نگهداری را سرعت میبخشد. رنگ دکمه در ۵۰ کارت باید عوض شود؟ یک کامپوننت ویرایش کنید، نه ۵۰ کارت جداگانه.
کِی به آن نیاز دارید: - کارتهایی که در چند صفحه استفاده میشوند - CTA، testimonial یا کارت اعضای تیم قابلاستفادهمجدد - وقتی میبینید یک طرح را مکرراً کپیپیست میکنید
تفاوت با Templates: قالبها کل طرحبندی صفحه را کنترل میکنند. کامپوننتها المانهای منفرد یا گروههای کوچک را. از کامپوننت برای عناصر تکراری، از قالب برای ساختار صفحه استفاده کنید.
بیشتر بدانید: مستندات Components
Style Manager (مدیر سبک)
چیست: مرکز اصلی مدیریت سیستم طراحی سایت. از آیکون Styles در نوار ابزار یا Cmd/Ctrl + . باز میشود — Theme Styles، Classes، متغیرهای CSS، رنگها، مقیاس تایپوگرافی، مقیاس فاصلهگذاری و تنظیمات Framework را در یک جا جمع میکند.
چرا اهمیت دارد: به جای جستجو در پنلهای مختلف، همه design tokenها و استایلهای قابلاستفادهمجدد را یکجا مدیریت میکنید — پالت رنگ، تایپوگرافی fluid، مقیاس فاصله، و کلاسها.
کِی به آن نیاز دارید: - مدیریت design tokenها در سایتهای بزرگ - سایتهای مشتری که رنگ برند ممکن است تغییر کند - وقتی میخواهید انعطاف بیشتری از Theme Styles داشته باشید - راهاندازی یک سیستم طراحی منسجم از ابتدا
ترکیب با: Theme Styles و Global Classes. Style Manager جایی است که متغیرها، کلاسها و مقیاسها را تعریف میکنید.
بیشتر بدانید: مستندات Style Manager
Interactions (تعاملات)
چیست: اقدامات trigger-شده (نمایش/مخفی المان، toggle کلاس، شروع انیمیشن) بر اساس رویدادهای کاربر (کلیک، hover، scroll، ارسال فرم).
چرا اهمیت دارد: تجربههای تعاملی بدون نوشتن JavaScript بسازید — accordion، tab، modal، انیمیشن scroll و غیره را بهصورت بصری بسازید.
کِی به آن نیاز دارید: - accordion یا tab سفارشی - نمایش/مخفیکردن المان - انیمیشن هنگام scroll - باز کردن popup با کلیک دکمه
مثالها: - کلیک روی دکمه ← نمایش div پنهان - Hover روی تصویر ← Fade in caption - Scroll به المان ← انیمیشن شروع شود - ارسال فرم ← نمایش پیام موفقیت
بیشتر بدانید: مستندات Interactions
Element Conditions (شرایط المان)
چیست: نمایش یا مخفیکردن المانها بر اساس شرایط — نقش کاربر، مقدار custom field، query string، تاریخ و موارد دیگر.
چرا اهمیت دارد: طرحبندیهای پویا بسازید که با context سازگار میشوند. محتوای admin را فقط به مدیران واردشده نشان دهید. بنر فروش را فقط در دوره تبلیغاتی نمایش دهید.
کِی به آن نیاز دارید: - سایتهای عضویت (محتوا بر اساس نقش کاربر) - قیمتگذاری مشروط (پیشنهاد ویژه برای کاربران خاص) - قالبهای پویا (طرحبندی متفاوت بر اساس post meta) - A/B testing (نسخههای مختلف بر اساس query parameter)
ترکیب قدرتمند: Element Conditions + Dynamic Data + Query Loop = قالبهای فوقالعاده انعطافپذیر.
بیشتر بدانید: مستندات Element Conditions
Query Filters (فیلترهای کوئری) — پیشرفته
چیست: فیلتر AJAX بلادرنگ برای Query Loop. کاربران میتوانند جستجو کنند، بر اساس دستهبندی فیلتر کنند، محدوده قیمت تنظیم کنند، و نتایج را بدون reload صفحه مرتب کنند.
چرا اهمیت دارد: تجربههای جستجو و فیلتر تعاملی و قدرتمند میسازد — برای e-commerce، دایرکتوریها و آرشیوهای محتوا ضروری است.
کِی به آن نیاز دارید: - فروشگاه WooCommerce (فیلتر بر اساس دسته، قیمت، ویژگی) - دایرکتوری (جستجو و فیلتر اعضا، مکانها، خدمات) - وبلاگ بزرگ (فیلتر پستها بر اساس دسته، تگ، تاریخ)
فیلترهای موجود: Live search، Checkbox، Radio button، Select، Range slider (قیمت، تاریخ)، Date picker
بیشتر بدانید: مستندات Query Filters
WooCommerce Builder
چیست: المانها و قالبهای اختصاصی برای ساخت فروشگاههای WooCommerce سفارشی — کنترل کامل روی طرحبندی محصول، آرشیو فروشگاه، سبد خرید، checkout و صفحات حساب.
چرا اهمیت دارد: قالبهای پیشفرض WooCommerce عمومیهستند. با Bricks، هر جنبهای از تجربه خرید را مطابق برند خود طراحی میکنید.
کِی به آن نیاز دارید: - ساخت سایت e-commerce - سفارشیکردن صفحات محصول فراتر از توان تمها - طرحبندی فروشگاه منحصربهفرد
شامل: المانهای محصول (قیمت، افزودن به سبد، تصاویر، گالری، تب)، قالبهای فروشگاه (آرشیو، تکمحصول، سبد خرید، checkout)، dynamic data tagهای WooCommerce، فیلترهای کوئری برای محصولات
بیشتر بدانید: مستندات WooCommerce Builder
Custom Code و Hooks
چیست: Bricks را با PHP، CSS و JavaScript سفارشی گسترش دهید. از WordPress hookها برای تغییر رفتار Bricks بهصورت برنامهنویسی استفاده کنید.
چرا اهمیت دارد: وقتی ابزارهای بصری به محدودیت میرسند، کد انعطاف بینهایت میدهد — قابلیتهای سفارشی بسازید، با افزونهها یکپارچه کنید، یا ویژگیهای منحصربهفرد بسازید.
کِی به آن نیاز دارید: - افزودن قابلیت فراتر از رابط گرافیکی Bricks - یکپارچهسازی با افزونه یا سیستم سفارشی - ساخت قالبهای بسیار تخصصی
نیاز به: دانش PHP، JavaScript و توسعه WordPress.
بیشتر بدانید: مستندات Hooks و Filters
Popup Builder
چیست: modal و popup سفارشی بسازید که روی هر triggerای ظاهر میشوند — کلیک، scroll، exit intent، تاخیر زمانی و غیره.
چرا اهمیت دارد: popup ثبتنام خبرنامه، پیشنهاد تبلیغاتی، video lightbox، فرم ورود، یا هر محتوای overlayای با کنترل طراحی کامل بسازید.
کِی به آن نیاز دارید: - popup ثبتنام خبرنامه - video lightbox - پیشنهاد exit intent - modal شرایط و ضوابط - فرم سفارشی ورود/ثبتنام
ترکیب با: Interactions برای کنترل دقیق زمان و نحوه ظاهر شدن popup.
بیشتر بدانید: مستندات Popup Builder
Font Manager
چیست: فونتهای سفارشی (self-hosted یا از سرویسها) را مستقیماً در Bricks بارگذاری و مدیریت کنید.
چرا اهمیت دارد: هر فونتی میخواهید استفاده کنید — نه فقط Google Fonts. فونتهای self-hosted عملکرد بهتر و کنترل کامل تایپوگرافی میدهند.
کِی به آن نیاز دارید: - فونتهای اختصاصی برند - بهینهسازی عملکرد با self-hosting - دسترسی به فونتهایی که در Google Fonts نیستند
بیشتر بدانید: مستندات Font Manager
Keyboard Shortcuts
چیست: میانبرهای صفحهکلید برای اقدامات رایج — سرعت گردش کار را بهطور چشمگیری افزایش میدهند.
میانبرهای رایج:
- Cmd/Ctrl + K — Command Palette (جستجوی المانها و اقدامات)
- Cmd/Ctrl + D — duplicate المان انتخابشده
- Cmd/Ctrl + Z — Undo
- Cmd/Ctrl + Shift + Z — Redo
- Cmd/Ctrl + B — جابهجایی بین breakpointها
- Delete — حذف المان انتخابشده
بیشتر بدانید: مستندات Keyboard Shortcuts
مسیر یادگیری بر اساس نوع سایت
پروژههای مختلف به ویژگیهای متفاوتی نیاز دارند:
وبلاگ یا سایت محتوا
اولویتها: 1. Dynamic Data + Query Loop (ضروری) 2. Templates (Single، Archive) 3. Theme Styles (تایپوگرافی ثابت) 4. Query Filters (قابلیت جستجو)
مفید بودن: - Components (کارتهای پست قابلاستفادهمجدد) - Popups (popup ثبتنام خبرنامه) - Interactions (انیمیشنهای reveal)
سایت e-commerce
اولویتها: 1. WooCommerce Builder 2. Query Loop (شبکه محصولات) 3. Query Filters (فیلتر محصول) 4. Templates (صفحات محصول، آرشیو فروشگاه)
مفید بودن: - Components (کارتهای محصول قابلاستفادهمجدد) - Interactions (modal quick view) - Popups (اعلان فروش)
سایت کسبوکار یا پورتفولیو
اولویتها: 1. Theme Styles (سازگاری برند) 2. Global Classes (استایلهای قابلاستفادهمجدد) 3. Components (اعضای تیم، testimonial) 4. Templates (صفحات خدمات، case study)
مفید بودن: - Interactions (گالری پورتفولیو) - Element Conditions (محتوا بر اساس نقش) - Popups (فرمهای تماس)
سایت عضویت یا جامعه
اولویتها: 1. Element Conditions (محدود کردن محتوا بر اساس نقش) 2. Templates (پروفایل اعضا، دایرکتوری) 3. Dynamic Data (محتوای خاص کاربر) 4. Query Loop (لیست اعضا)
مفید بودن: - Custom Code (محدودیتهای پیشرفته) - Interactions (ویژگیهای داشبورد اعضا)
پروژه بعدی شما
بهترین راه تثبیت آموختهها: یک سایت کامل از صفر بسازید. شامل:
- صفحه اصلی (طراحی استاتیک)
- وبلاگ با پست (قالب + Dynamic Data + Query Loop)
- صفحه درباره ما
- صفحه تماس
- قالبهای هدر و فوتر
این پروژه همه آنچه یاد گرفتید را لمس میکند و برای کار با مشتری آمادهتان میکند.
نکات: - از Theme Styles از همان ابتدا استفاده کنید - Global Class برای الگوهای رایج بسازید - در حین ساخت، رفتار واکنشگرا را آزمایش کنید - مرتب در دستگاههای واقعی پیشنمایش بگیرید
جامعه و منابع
منابع رسمی: - Bricks Academy — مستندات کامل - کانال یوتیوب Bricks — آموزشهای ویدیویی - Bricks Changelog — ویژگیها و بهروزرسانیهای جدید
جامعه: - Bricks Facebook Group — جامعه فعال، پرسش و پاسخ - Bricks Forum — انجمن پشتیبانی رسمی
نکته: وقتی با مشکل روبرو شدید، اول انجمن را جستجو کنید. اکثر مشکلها قبلاً توسط جامعه حل شدهاند.
کلام آخر
سری Getting Started را تمام کردید. حالا دانش پایه ساخت سایتهای حرفهای وردپرس با Bricks را دارید.
اما تسلط از خواندن به دست نمیآید — از ساختن، شکستن، درستکردن و دوباره ساختن. هر پروژه چیز جدیدی یاد میدهد. هر چالش ویژگیای را نشان میدهد که نمیدانستید به آن نیاز دارید.
شروع به ساختن کنید. بهترین یادگیری وقتی اتفاق میافتد که مشکل واقعی دارید و میخواهید حلش کنید.
دنبال کمال نباشید. اولین سایتهایتان شاهکار نخواهند بود — این کاملاً طبیعی است.
کنجکاو بمانید. سایتی با ویژگی جالب دیدید؟ از خودتان بپرسید: «چطور این را در Bricks میسازم؟» بعد امتحان کنید.
به جامعه Bricks خوش آمدید.