ساخت هدر و فوتر حرفه‌ای در Bricks بدون افزونه اضافه

در فرایند طراحی وب‌سایت با صفحه‌سازهای سنتی، راه‌اندازی یک هدر چسبان (Sticky Header)، منوی ناوبری شفاف (Overlay Header) و یک فوتر چندستونه ریسپانسیو معمولاً به نصب افزونه‌های جانبی سنگین نظیر «Header Footer Builder»، افزونه‌های مگامنو یا نوشتن اسکریپت‌های جی‌کوئری متکی بود. این افزونه‌های مازاد صدها سطر کد جاوااسکریپت و فایل‌های استایل اضافی به سایت تحمیل می‌کردند و با عمیق‌تر کردن لایه‌های درخت دام (DOM Depth)، افت شدید امتیاز سرعت و جهش ناخواسته چیدمان (CLS) را به بار می‌آوردند. اما در Bricks Builder، کل معماری هدر و فوتر به صورت صددرصد بومی، ماژولار و مبتنی بر استانداردهای معنایی وب مهندسی شده است؛ به این معنا که می‌توانید پیشرفته‌ترین رفتارهای ناوبری را بدون نصب حتی یک افزونه اضافه پیاده‌سازی کنید.

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

گام ۱: مزایای ساخت بومی هدر و فوتر در Bricks نسبت به افزونه‌های جانبی

هدر و فوتر از حیاتی‌ترین اجزای بارگذاری هر صفحه هستند؛ زیرا هدر بالاترین بخش دید اولیه (Above the Fold) را پوشش می‌دهد و هرگونه تاخیر در لود کدهای CSS یا پرش ساختاری در آن، مستقیماً شاخص‌های LCP (بزرگ‌ترین رنگ‌آمیزی محتوا) و CLS (تغییر چیدمان تجمعی) را تخریب می‌کند. تکیه بر قابلیت‌های بومی Bricks مزایای مهندسی زیر را به همراه دارد:

• کاهش شگفت‌انگیز نودهای DOM: افزونه‌های متداول به ازای هر آیتم منو، آیکون و ستون، چندین لایه تگ پوششی (Wrapper) تولید می‌کنند. بریکس خروجی HTML را فوق‌العاده تمیز و با حداقل تگ‌های ممکن رندر می‌نماید.
• تگ‌های معنایی استاندارد (Semantic HTML): بریکس به شما اجازه می‌دهد تگ سکشن را مستقیماً به <header>، منوی ناوبری را به <nav> و پانوشت را به <footer> تغییر دهید؛ امری که برای فهم ساختار توسط ربات‌های گوگل و موتورهای جستجو و دسترس‌پذیری معلولین الزامی است.
• حذف کامل کتابخانه‌های جاوااسکریپت سنگین: رفتارهایی چون منوی چسبان یا باز شدن منوی موبایل با استفاده از رفتارهای بومی CSS (نظیر position: sticky) و جاوااسکریپت بسیار سبک هسته بریکس اجرا می‌شوند و هیچ وابستگی به jQuery ندارند.
• کنترل هوشمند از طریق Template Conditions: شما می‌توانید برای بخش‌های مختلف سایت (مانند لندینگ‌پیج‌ها، مقالات وبلاگ، برگه تسویه حساب فروشگاه یا پنل کاربری) هدرها و فوترهای مجزا با شرایط استثنا تعریف کنید.

گام ۲: ساخت قالب هدر (Header Template) و تنظیم شرایط نمایش

در Bricks، هدر و فوتر درون صفحات معمولی ساخته نمی‌شوند؛ بلکه به عنوان یک تمپلیت سراسری (Template) تعریف می‌شوند تا به صورت خودکار در تمام صفحات تزریق گردند.

مراحل ایجاد تمپلیت هدر:

1. از پیشخوان وردپرس وارد منوی Bricks > Templates شوید و روی افزودن جدید (Add New) کلیک کنید.
2. یک عنوان استاندارد برای آن بنویسید (مثلاً: هدر اصلی سراسری – Main Header).
3. در ستون تنظیمات سمت چپ، فیلد Template Type را حتماً روی گزینه Header قرار دهید. این گام بسیار حیاتی است؛ زیرا بریکس با این انتخاب تگ‌های اختصاصی و تنظیمات هدر چسبان را در محیط ویرایشگر فعال می‌کند.
4. روی دکمه انتشار (Publish) کلیک کرده و سپس Edit with Bricks را انتخاب نمایید تا وارد محیط ویرایشگر بصری شوید.

پیکربندی شرایط نمایش (Template Conditions):

قبل از قرار دادن المان‌ها، ابتدا باید مشخص کنید این هدر کجا نمایش داده شود:

• در نوار بالای ویرایشگر، روی آیکون چرخ‌دنده (Settings) کلیک کنید.
• وارد تب Template Settings > Conditions شوید.
• روی Add Condition کلیک کنید. نوع شرط را روی Entire Website (کل وب‌سایت) قرار دهید.
• نکته استثناها (Exceptions): اگر می‌خواهید هدر در برگه‌های فرود (Landing Pages) یا صفحه پرداخت فروشگاه نمایش داده نشود، می‌توانید یک شرط دوم با وضعیت Exclude برای آن برگه مشخص اضافه کنید.

گام ۳: معماری ساختار هدر با Flexbox و پنل Structure

یک هدر مدرن و استاندارد معمولاً شامل سه بخش اصلی است: لوگو در سمت راست، منوی ناوبری در وسط، و دکمه‌های اقدام (CTA یا جستجو) در سمت چپ (در چیدمان راست‌به‌چپ RTL فارسی).

چیدمان اصولی المان‌ها در پنل Structure:

1. یک المان Section به صفحه اضافه کنید. در تب Content، تگ HTML آن را روی <header> قرار دهید.
2. یک المان Container درون سکشن درج کنید. در تب چیدمان (Layout)، جهت فلکس را روی Row (افقی)، تراز عمودی را روی Center و تراز افقی را روی Space Between بگذارید.
3. بخش اول (لوگو): یک المان Logo یا Image اضافه کنید. اگر از تصویر استفاده می‌کنید، لینک آن را به صورت داینامیک با تگ https://bricksfa.com به صفحه اصلی متصل کنید و عرض صریح تعیین نمایید تا از جهش چیدمان جلوگیری شود.
4. بخش دوم (منوی ناوبری): المان Nav (Nestable) را به کانتینر اضافه کنید. این المان جدیدترین ابزار ناوبری بریکس است که کنترل کامل تک‌تک لینک‌ها، آیکون‌ها و زیرمنوها را فراهم می‌سازد.
5. بخش سوم (دکمه‌های اقدام): یک کانتینر کوچک (Div یا Block) برای قرار دادن دکمه تماس، ورود به حساب یا آیکون جستجو اضافه کنید تا در سمت چپ هدر قرار گیرند.

گام ۴: پیاده‌سازی هدر چسبان (Sticky Header) و هدر شفاف (Overlay)

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

فعال‌سازی Sticky Header:

1. در ویرایشگر قالب هدر، به مسیر Settings > Template Settings > Header بروید.
2. گزینه Sticky Header را روشن کنید. با این کار، هنگام اسکرول صفحه به پایین، هدر به بالای پنجره مرورگر می‌چسبد.
3. گزینه Sticky on Scroll را روی مقدار دلخواه (مثلاً ۱۰۰ پیکسل) بگذارید تا هدر پس از کمی اسکرول چسبان شود.
4. Slide up on scroll down: اگر این گزینه کاربردی را فعال کنید، هدر هنگام اسکرول به پایین مخفی شده و به محض اینکه کاربر کمی به سمت بالا اسکرول کند، دوباره نمایان می‌شود. این تکنیک تجربه کاربری (UX) بهتری در گوشی‌های موبایل ایجاد می‌کند چون فضای دید صفحه را آزاد نگه می‌دارد.

پیاده‌سازی هدر شفاف (Overlay Header):

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

گام ۵: طراحی ناوبری واکنش‌گرا و منوی موبایل با Nav (Nestable)

المان نوین Nav (Nestable) در بریکس، انقلابی در طراحی منوهای ناوبری است. برخلاف منوهای قدیمی وردپرس که قالبی بسته داشتند، در این المان می‌توانید داخل دراور کشویی موبایل (Mobile Off-canvas) هر المانی—از آیکون‌های شبکه‌های اجتماعی تا دکمه شماره تماس و فیلد جستجو—را به دلخواه قرار دهید.

• تنظیم نقطه شکست (Mobile Breakpoint): در تنظیمات المان Nav Nestable تعیین کنید منو در کدام اندازه صفحه (مثلاً زیر ۹۹۱ پیکسل) به منوی همبرگری تبدیل شود.
• شخصی‌سازی آیکون همبرگر: آیکون باز و بسته شدن را بدون نیاز به فایل‌های فونت آیکون سنگین، با استفاده از SVGهای سبک داخلی انتخاب کنید.
• طراحی دراور کشویی: پنل کشویی موبایل را استایل دهید؛ جهت باز شدن (از راست به چپ برای زبان فارسی)، رنگ پس‌زمینه و انیمیشن اسلاید را تنظیم نمایید.

گام ۶: ساخت فوتر حرفه‌ای چندستونه و داینامیک

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

مراحل ایجاد تمپلیت فوتر:

1. به بخش Bricks > Templates بروید و تمپلیتی با عنوان فوتر اصلی سراسری با نوع Footer بسازید.
2. در ویرایشگر، یک Section با تگ معنایی <footer> درج کنید.
3. یک Container درون آن قرار داده و چیدمان را با CSS Grid روی ۴ ستون تنظیم کنید:
   • ستون اول: لوگوی دوم سایت، توضیحات کوتاه معرفی کسب‌وکار و آیکون شبکه‌های اجتماعی.
   • ستون دوم: لینک‌های دسترسی سریع به صفحات مهم.
   • ستون سوم: دسته‌بندی‌های اصلی مقالات وبلاگ یا خدمات.
   • ستون چهارم: اطلاعات تماس، تلفن، آدرس و اینماد یا نمادهای اعتماد.
4. نوار کپی‌رایت داینامیک: در انتهای فوتر، یک سطر مجزا با متن حق نشر ایجاد کنید. برای درج سال به صورت خودکار، از تگ داینامیک 2026 در متن استفاده کنید تا سال میلادی یا شمسی همواره بدون نیاز به ویرایش دستی سالانه به‌روز بماند.

برای درک بهتر زیرساخت معماری و چرایی عملکرد برتر این سیستم، مطالعه کالبدشکافی تحلیلی ما در مقاله Bricks Builder چیست و برای چه نوع پروژه‌هایی مناسب است؟ توصیه می‌شود.

جمع‌بندی و نتیجه‌گیری معماری

سیستم تمپلیت‌سازی Bricks Builder به طراحان وب اجازه می‌دهد هدرها و فوترهای مدرن، سبک و با واکنش‌گرایی کامل خلق کنند؛ بدون آنکه برای قابلیت‌های پایه‌ای مانند حالت چسبان یا چیدمان ریسپانسیو محتاج افزونه‌های سنگین شخص ثالث باشند. با رعایت اصول لایه‌بندی فلکس‌باکس، استفاده از کامپوننت بومی Nav Nestable، تگ‌های معنایی و خودکارسازی داده‌های داینامیک نظیر سال کپی‌رایت، شما ساختاری پایدار ایجاد می‌کنید که هم سرعت بارگذاری فوق‌العاده‌ای ارائه می‌دهد و هم نگهداری آن در طول پروژه‌های بزرگ سال‌ها بدون زحمت خواهد بود.

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