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

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

فهرست مطالب

• نصب و فعال‌سازی Bricks Builder
• تنظیمات اولیه محیط طراحی
• ساخت صفحه اصلی با کشیدن رها
• افزودن محتوا با المان‌های پیشرفته
• بهینه‌سازی سرعت و سئو با Bricks
• انتشار نهایی و نگهداری آسان
• سوالات متداول

نصب و فعال‌سازی Bricks Builder

برای شروع کار با Bricks Builder ابتدا باید افزونه را از سایت رسمی تهیه کنید. پس از خرید یا دریافت نسخه رایگان، یک فایل .zip در اختیار خواهید داشت. به پیشخوان وردپرس رفته، منوی «افزونه‌ها» → «افزودن» را انتخاب کنید و با کلیک بر روی «بارگذاری افزونه» فایل فشرده را آپلود کنید. پس از بارگذاری، روی «اکنون نصب کن» کلیک کنید تا افزونه به‌صورت خودکار بر روی سایت شما نصب شود.

نصب کامل شد، اما برای استفاده از تمام قابلیت‌های Bricks نیاز به فعال‌سازی دارید. پیش‌نمایش نصب، دکمه «فعال‌سازی» را نمایش می‌دهد؛ روی آن کلیک کنید. سپس صفحه‌ای برای وارد کردن کلید لایسنس (License Key) نمایش داده می‌شود؛ این کلید را که در ایمیل دریافت کرده‌اید یا در حساب کاربری‌تان در وب‌سایت Bricks پیدا می‌کنید، وارد کنید و «تأیید» کنید. اگر کلید معتبر باشد، افزونه فعال می‌شود و می‌توانید به‌سرعت به محیط ویرایشگر Bricks دسترسی پیدا کنید.

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

اگر یکی از این موارد کافی نباشد، می‌توانید از طریق پنل میزبانی یا با تماس با پشتیبان هاست خود، نسخه PHP را به‌روز کنید یا حافظه PHP را افزایش دهید. پس از اطمینان از سازگاری، یک بار دیگر به پیشخوان بازگردید، Bricks Builder را از منوی «صفحه‌ها» → «افزودن جدید» باز کنید و با کلیک بر روی «Edit with Bricks» وارد محیط ویرایش گرافیکی شوید. در اینجا می‌توانید به‌صورت زنده ساختار و استایل صفحات را تعریف کنید.

نکته‌ی کاربردی: پس از فعال‌سازی، یک «پروژه آزمایشی» (Demo Project) پیش‌فرض برای شما ساخته می‌شود. می‌توانید این پروژه را حذف یا کپی کنید و سپس با استفاده از بلوک‌های پیش‌ساخته یا کشیدن و رها کردن (drag‑and‑drop) المان‌ها، یک صفحه نمونه برای مشتری یا خودتان بسازید. این کار به شما کمک می‌کند تا به سرعت با قابلیت‌های پیشرفته Bricks مانند شرطی‌سازی نمایش (display conditions) یا متغیرهای CSS آشنا شوید.

ساخت صفحه اصلی با کشیدن رها

با استفاده از Bricks Builder، ساخت صفحهٔ اصلی سایت‌تان به سادگی کشیدن و رها کردن (drag‑and‑drop) تبدیل می‌شود. ابتدا وارد پنل مدیریت وردپرس شده و از منوی «Bricks» گزینهٔ «Add New» را انتخاب کنید. صفحهٔ خالی یا یکی از الگوهای پیش‌ساخته را به عنوان بستر انتخاب کنید؛ این کار پایهٔ ساختار کلی صفحهٔ اصلی را برای شما فراهم می‌کند.

سپس به بخش ساختار بروید و با کشیدن یک Section جدید، ناحیهٔ اصلی را تعریف کنید. داخل هر Section می‌توانید یک یا چند Row اضافه کنید و هر Row را به ستون‌های دلخواه (۲، ۳ یا ۴ ستون) تقسیم نمایید. برای مثال، یک Row دو ستونی می‌تواند شامل یک بنر بزرگ در ستون چپ و یک فرم ثبت‌نام در ستون راست باشد.

بعد از تنظیم ساختار، نوبت به افزودن ویجت‌ها می‌رسد. از منوی سمت راست، عناصر مانند Heading، Text, Image, Button یا حتی ابزارهای پیشرفته‌تر مثل Slider و Countdown را به سلول‌های دلخواه بکشید. برای هر عنصر می‌توانید تنظیمات خاص (فونت، رنگ، حاشیه) را در پنل سمت چپ شخصی‌سازی کنید؛ استفاده از Global Settings باعث می‌شود تا رنگ‌های برند یا فونت‌های اصلی در تمام صفحات یکسان باقی بمانند. نکتهٔ کاربردی: برای بهبود سرعت بارگذاری، فقط عناصری را فعال کنید که واقعا به آن‌ها نیاز دارید و از افزودن اسکریپت‌های اضافی خودداری کنید.

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

سرعت بارگذاری سایت و سئوی فنی دو ستون اصلی موفقیت هر وب‌سایت وردپرسی هستند. Bricks به‌عنوان یک بیلدر سبک‌وزن، از همان ابتدا برای تولید کدهای تمیز و کم حجم طراحی شده است؛ این یعنی کمتر بار روی سرور، زمان بارگذاری سریع‌تر و در نتیجه امتیاز بهتری در ابزارهای ارزیابی سئو مثل Google PageSpeed به‌دست می‌آید.

در تنظیمات Bricks می‌توانید گزینه‌های بهینه‌سازی زیر را فعال کنید:

• Combine CSS/JS: ترکیب فایل‌های استایل و اسکریپت برای کاهش درخواست‌های HTTP.
• Minify CSS/JS: حذف فضاهای خالی و کامنت‌ها برای کاهش حجم فایل.
• Lazy Load Images: بارگذاری تصاویر فقط زمانی که در viewport کاربر ظاهر می‌شوند.
• Async / Defer Scripts: اجرای اسکریپت‌ها به‌صورت غیرهمزمان یا پس از بارگذاری محتوا.

برای فعال‌سازی این ویژگی‌ها به‌صورت گام‌به‌گام عمل کنید:

1. به Bricks → Settings → Performance بروید.
2. کلیدهای «Combine CSS»، «Combine JS» و «Minify CSS/JS» را روشن کنید.
3. گزینه «Lazy Load Images» را فعال کرده و در صورت نیاز «Blur Up» برای نمایش پیش‌نمایش نرم‌افزار استفاده کنید.
4. در بخش «Scripts Loading» حالت Async یا Defer را برای اسکریپت‌های سنگین (مانند jQuery) انتخاب کنید.
5. در نهایت با دکمه «Regenerate CSS»، کش مرورگر را تازه‌سازی کنید.

یک مثال واقعی: یک صفحه محصول با یک تصویر بزرگ (۲ مگابایت) و چند اسکریپت سفارشی، پس از اعمال تنظیمات بالا زمان LCP (Largest Contentful Paint) از حدود 4.5 ثانیه به 2.3 ثانیه کاهش یافت. جدول زیر مقایسهٔ کوتاهی از نتایج قبل و بعد را نشان می‌دهد:

از نظر سئو، Bricks خروجی HTML به‌صورت semantically‌ درست تولید می‌کند؛ تگ‌های

-

به‌صورت سلسله‌مراتبی قرار می‌گیرند و برای هر تصویر می‌توانید به‌صورت خودکار ویژگی alt بر پایهٔ نام فایل یا متن دلخواه تنظیم کنید. افزون بر این، امکان افزودن Schema.org به‌صورت بلوک‌های مخصوص یا از طریق فیلدهای سفارشی وجود دارد که می‌تواند با افزونه‌های محبوب سئو مانند Yoast یا Rank Math ادغام شود. برای مثال، یک بلوک «FAQ» در Bricks به‌صورت خودکار کد JSON‑LD مربوطه را تولید می‌کند و در نتایج غنی گوگل ظاهر می‌شود. این ترکیب از بهینه‌سازی سرعت و ساختار سئوی قوی، پایه‌ای مستحکم برای رتبه‌بندی بهتر در نتایج جستجو فراهم می‌کند.

سوالات متداول

چگونه قالب پیش‌فرض Bricks را تغییر دهم؟

به پنل وردپرس رفته و از منوی Bricks به Settings > Theme Style بروید. در بخش Global Styles یک الگوی جدید انتخاب یا ساخته و ذخیره کنید. سپس در هر صفحه یا پست می‌توانید با دکمه Switch Theme آن را اعمال کنید.

آیا می‌توانم قالب موبایل را به صورت جداگانه تنظیم کنم؟

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

چطور یک بخش پویا با ACF بسازم؟

اول پلاگین Advanced Custom Fields را نصب و فیلدهای مورد نیاز را تعریف کنید. در Bricks یک عنصر متن یا تصویر اضافه کنید و در قسمت Dynamic Data فیلد ACF مربوطه را انتخاب کنید. پس از ذخیره، مقدار فیلد برای هر پست به‌صورت خودکار نمایش داده می‌شود.

چرا پس از به‌روزرسانی Bricks سایت کند شد؟

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

چک‌لیست سریع

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

با پیروی از این گام‌ها، می‌توانید به‌سرعت یک وب‌سایت حرفه‌ای، سریع و سئو‑دوست با Bricks Builder بسازید. هر مرحله به بهبود تجربه کاربری و عملکرد کلی سایت کمک می‌کند. اگر نظری یا سؤال خاصی دارید، خوشحال می‌شوم که آن را با من در میان بگذارید.