آموزش هدر قالب وودمارت | ساخت هدر، منو و مگامنو در Woodmart

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

آموزش هدر قالب وودمارت – سربرگ ساز در Woodmart چیست؟

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

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

برای ورود به محیط طراحی هدر، از پیشخوان وردپرس مسیر زیر را باز کنید:

WoodMart → Header builder

در این بخش می‌توانید هدرهای موجود را ویرایش کنید، از آن‌ها نسخه جدید بسازید، هدر پیش‌فرض را تغییر دهید یا یک هدر جدید ایجاد کنید.

۱. ساخت هدر جدید در WoodMart

برای ایجاد هدر جدید، ابتدا وارد مسیر WoodMart → Header builder شوید و روی افزودن هدر جدید کلیک کنید.

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

انتخاب ساختار اولیه

• خالی: ایجاد هدر با ساختار خالی.
• هدرهای آماده: شروع طراحی از نمونه‌های آماده.
• هدرهای کاربران: استفاده از ساختار یک هدر ذخیره‌شده.

اگر قصد دارید طراحی را از ابتدا انجام دهید، Empty انتخاب مناسبی است. اگر قبلاً هدری ساخته‌اید و می‌خواهید نسخه متفاوتی از آن داشته باشید، می‌توانید از User headers استفاده کنید.

پس از انتخاب ساختار، نامی برای هدر تعیین کنید؛ برای مثال «هدر اصلی فروشگاه» یا «هدر صفحات فرود».

سپس ردیف‌ها و عناصر موردنیاز را تنظیم کنید و روی Save header بزنید.

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

۲. ویرایش هدر قالب وودمارت در حالت Frontend

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

برای ورود به این حالت:

۱. وارد WoodMart → Header builder شوید.

۲. هدر موردنظر را باز کنید.

۳. روی ویرایشگر فرانت اند کلیک کنید.

همچنین هنگام مشاهده سایت به‌عنوان مدیر، می‌توانید از نوار مدیریت وردپرس گزینه WoodMart → Header builder → Edit current header را انتخاب کنید.

در این حالت، تغییرات در پیش‌نمایش دیده می‌شوند؛ اما برای ذخیره نهایی باید روی Save header کلیک کنید.

گزینه Select preview page نیز امکان مشاهده هدر در صفحه‌ای دیگر را فراهم می‌کند. این گزینه فقط صفحه پیش‌نمایش را تغییر می‌دهد و هدر را به آن صفحه اختصاص نمی‌دهد.

۳. تنظیم ردیف‌ ها و ستون‌ های هدر

ساختار هدر در وودمارت از سه ردیف تشکیل می‌شود:

ردیف	کاربرد
Top bar	نمایش اطلاعات تکمیلی، پیام‌ها و لینک‌های جانبی
Main header	نمایش لوگو، منوی اصلی و امکانات فروشگاه
Header bottom	نمایش منوی تکمیلی یا سایر عناصر موردنیاز

هر ردیف تنظیمات مستقل خود را دارد و می‌توانید ارتفاع، رنگ، ساختار ستون‌ها و نحوه نمایش آن را در دستگاه‌های مختلف مشخص کنید.

برای تنظیم یک ردیف، روی Edit settings آن کلیک کنید.

در زبانه General تنظیمات ساختار و رفتار ردیف و در زبانه Style تنظیمات ظاهری قرار دارند.

تنظیم تعداد ستون‌ها

گزینه Row columns برای انتخاب ساختار تک‌ستونه یا سه‌ستونه استفاده می‌شود.

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

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

عناصر را می‌توان با روش Drag & Drop بین ستون‌ها جابه‌جا کرد.

۴. افزودن و ویرایش عناصر هدر

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

عناصر مهم Header Builder عبارت‌اند از:

عنصر	کاربرد
Logo	نمایش لوگوی سایت
Main menu	نمایش منوی اصلی
Mobile menu	نمایش منوی موبایل
Search	جست‌وجوی سایت
Cart	سبد خرید
Account	حساب کاربری
Wishlist	علاقه‌مندی‌ها
Compare	مقایسه محصولات
Categories	نمایش دسته‌بندی‌ها
Space	ایجاد فاصله
Divider	ایجاد خط جداکننده
Button	نمایش دکمه
Text/HTML	نمایش متن یا کد HTML
HTML Block	نمایش محتوای بلوک ذخیره‌شده
Sticky navigation	دسترسی به ناوبری کناری

برای تغییر ترتیب عناصر، آن‌ها را با ماوس بگیرید و در جایگاه جدید رها کنید.

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

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

۵. تنظیم نحوه تقسیم عرض ستون‌ها

در ردیف‌های سه‌ستونه، گزینه Row flex layout نحوه تقسیم فضای افقی میان ستون‌ها را مشخص می‌کند.

دو حالت اصلی این گزینه عبارت‌اند از:

• Flexible middle column: ستون‌های طرفین متناسب با محتوای خود فضا می‌گیرند و ستون وسط فضای باقی‌مانده را اشغال می‌کند.
• Equal right and left columns: ستون چپ و راست عرض برابر دارند و ستون وسط بر اساس محتوای خود فضا می‌گیرد.

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

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

۶. طراحی هدر واکنش‌ گرا برای دسکتاپ و موبایل

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

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

در مستندات فعلی قالب وودمارت، چیدمان دسکتاپ برای عرض ۱۰۲۵ پیکسل و بیشتر و چیدمان موبایل برای عرض ۱۰۲۴ پیکسل و کمتر استفاده می‌شود.

طراحی هدر موبایل

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

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

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

• مخفی در دسکتاپ
• مخفی در موبایل

ارتفاع ردیف نیز برای دسکتاپ و موبایل قابل تنظیم است.

۷. تنظیمات عمومی هدر

برای دسترسی به تنظیمات عمومی هدر، روی تنظیمات در نوار ابزار Header Builder کلیک کنید.

این تنظیمات برای هر هدر به‌صورت مستقل ذخیره می‌شوند.

گزینه	کاربرد
Make it overlap	قرارگرفتن هدر روی محتوای صفحه
Make it boxed	محدودکردن هدر هم‌پوشان به یک کادر
Full width header	گسترش عرض هدر
Header dropdowns dark	استفاده از طرح تیره برای پنل‌های کشویی

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

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

۸. افزودن لوگو به هدر

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

سپس تصویر لوگو را از کتابخانه رسانه وردپرس انتخاب یا بارگذاری کنید و مقدار عرض لوگو را تنظیم کنید.

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

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

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

۹. کنترل اندازه لوگو

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

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

برای اصلاح اندازه لوگو:

۱. مقدار Logo width را بررسی کنید.

۲. ارتفاع ردیفی را که لوگو در آن قرار دارد تنظیم کنید.

۳. نسبت عرض به ارتفاع فایل تصویر را بررسی کنید.

۴. تنظیمات لوگوی موبایل و لوگوی هدر چسبان را جداگانه کنترل کنید.

۵. در صورت وجود گزینه Add width and height attributes، آن را فعال نگه دارید تا فضای تصویر هنگام بارگذاری مشخص باشد.

۱۰. تغییر ارتفاع هدر

ارتفاع کلی هدر به ارتفاع ردیف‌های قابل‌نمایش آن بستگی دارد.

برای تغییر ارتفاع:

۱. ردیف مورد نظر را در سربرگ‌ ساز باز کنید.
۲. روی گزینه ویرایش تنظیمات کلیک کنید.
۳. در زبانه عمومی، ارتفاع ردیف را برای دسکتاپ تنظیم کنید.
۴. ارتفاع ردیف در دستگاه‌ های موبایل را نیز مشخص کنید.
۵. اگر ردیف به سربرگ چسبان تعلق دارد، ارتفاع ردیف در سربرگ چسبان را تنظیم کنید.

اگر از قابلیت تکثیر سربرگ چسبان استفاده می‌کنید، ارتفاع نسخه فشرده را از مسیر تنظیمات ← سربرگ چسبان ← ارتفاع سربرگ چسبان تنظیم کنید.

پس از تغییر ارتفاع، لوگو و سایر عناصر را بررسی کنید تا فضای کافی برای نمایش داشته باشند.

۱۱. تغییر رنگ ردیف‌های هدر

برای تغییر رنگ یک ردیف، روی ویرایش تنظیمات آن کلیک کنید و وارد زبانه استایل شوید.

در بخش رنگ‌ ها، گزینه «طرح رنگی متن» برای انتخاب رنگ نوشته‌ها و سایر عناصر در دسترس است.

• تیره معمولاً برای نوشته‌های تیره روی پس‌زمینه روشن استفاده می‌شود.
• روشن معمولاً برای نوشته‌های روشن روی پس‌زمینه تیره مناسب است.

رنگ پس‌زمینه را نیز متناسب با طرح انتخاب کنید. انتخاب Light به‌تنهایی پس‌زمینه تیره ایجاد نمی‌کند.

برای مثال، اگر هدر روی یک تصویر تیره قرار گرفته است، می‌توانید نوشته‌ها و آیکون‌های روشن را انتخاب کنید تا خوانایی آن‌ها حفظ شود.

۱۲. ایجاد فاصله بین عناصر هدر

برای ایجاد فاصله بین عناصر هدر، از عنصر Space استفاده کنید. این عنصر فضای خالی افقی ایجاد می‌کند و می‌توانید عرض آن را با گزینه Space width تنظیم کنید.

اگر به خط جداکننده نیاز دارید، عنصر Divider مناسب‌تر است. پس از افزودن Divider، رنگ خط و در صورت پشتیبانی گزینه Full height را تنظیم کنید.

Space برای کنترل فاصله و Divider برای جداسازی بصری عناصر کاربرد دارد.

۱۳. استفاده از آیکون‌های اختصاصی

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

برای این کار:

۱. عنصر موردنظر را ویرایش کنید.

۲. وارد زبانه Style شوید.

۳. گزینه Icon type را روی Custom قرار دهید.

۴. تصویر آیکون را از کتابخانه رسانه انتخاب کنید.

۵. در صورت وجود گزینه Icon width، اندازه آن را تنظیم کنید.

این قابلیت برای عناصری مانند سبد خرید، جست‌وجو، علاقه‌مندی‌ها، حساب کاربری و منوی موبایل کاربرد دارد.

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

۱۴. فعال‌ کردن هدر چسبان

هدر چسبان یا Sticky Header هنگام پیمایش صفحه در دسترس باقی می‌ماند.

در وودمارت دو روش اصلی برای ساخت آن وجود دارد.

روش اول: Sticky header clone

این روش یک نسخه فشرده و خودکار از هدر ایجاد می‌کند.

برای فعال‌سازی، وارد Settings → Sticky header شوید، گزینه Sticky effect را روی Slide after scrolled down قرار دهید و Sticky header clone را فعال کنید. سپس ارتفاع نسخه فشرده را مشخص کنید.

روش دوم: Sticky rows

اگر می‌خواهید ردیف‌های مشخصی از هدر اصلی هنگام پیمایش باقی بمانند، Sticky header clone را غیرفعال کنید.

سپس تنظیمات هر ردیف را باز کنید و گزینه Make it sticky را فعال کنید. در صورت نیاز، ارتفاع ردیف در حالت چسبان را نیز تنظیم کنید.

ویژگی	Sticky header clone	Sticky rows
ساختار	نسخه فشرده خودکار	ردیف‌های انتخابی
کنترل عناصر	محدود به ساختار نسخه فشرده	استفاده از عناصر ردیف اصلی
کاربرد	هدر جمع‌وجور	حفظ منو یا ردیف مشخص

اگر می‌خواهید هدر هنگام پیمایش به پایین مخفی شود و با پیمایش به بالا بازگردد، گزینه Hide when scrolling down را نیز بررسی کنید.

۱۵. فعال‌کردن Header Overlap

قابلیت Make it overlap باعث می‌شود هدر روی محتوای ابتدای صفحه قرار بگیرد. این روش برای طراحی هدر روی تصویر بنر یا اسلایدر کاربرد دارد.

برای فعال‌کردن آن:

۱. هدر را در Header Builder باز کنید.

۲. وارد Settings شوید.

۳. در بخش General، گزینه Make it overlap را فعال کنید.

۴. در صورت نیاز، Make it boxed را نیز فعال کنید.

۵. تنظیمات رنگ و پس‌زمینه ردیف‌ها را هماهنگ کنید.

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

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

۱۶. تعیین هدر پیش‌فرض سایت

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

برای تعیین هدر پیش‌فرض:

۱. وارد WoodMart → Header builder شوید.

۲. هدر موردنظر را پیدا کنید.

۳. منوی عملیات آن را باز کنید.

۴. گزینه انتخاب به عنوان پیشفرض را انتخاب و تأیید کنید.

اگر صفحه‌ای از قبل هدر اختصاصی داشته باشد، تغییر هدر پیش‌فرض الزاماً هدر همان صفحه را تغییر نمی‌دهد.

۱۷. اختصاص هدر به صفحات و انواع محتوا

وودمارت امکان تعیین هدر جداگانه برای صفحات، نوشته‌ها، محصولات و پروژه‌ها را فراهم می‌کند.

برای اختصاص هدر به یک صفحه:

۱. صفحه را در وردپرس ویرایش کنید.

۲. تنظیمات قالب مربوط به صفحه را باز کنید.

۳. بخش Header را پیدا کنید.

۴. گزینه Custom header for this page را فعال یا انتخاب کنید.

۵. هدر موردنظر را مشخص و صفحه را ذخیره کنید.

در محتوای ساخته‌شده با Elementor، تنظیم مربوطه در Document Settings و بخش Custom header قرار دارد.

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

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

۱۸. خروجی گرفتن و درون‌ریزی هدر

قالب WoodMart امکان انتقال پیکربندی هدر را از طریق JSON فراهم می‌کند.

برای خروجی گرفتن:

۱. هدر موردنظر را باز کنید.

۲. در پایین ویرایشگر روی Export کلیک کنید.

۳. کل JSON تولیدشده را کپی کنید و در فایل متنی ذخیره کنید.

برای انتقال به سایت دیگر:

۱. وارد WoodMart → Header builder در سایت مقصد شوید.

۲. روی Import header کلیک کنید.

۳. JSON را وارد کنید.

۴. روی Import بزنید.

۵. هدر واردشده را بررسی و در صورت نیاز ذخیره کنید.

فایل JSON ساختار و تنظیمات هدر را منتقل می‌کند؛ اما منوها، HTML Blockها و سایر محتوای وردپرس را منتقل نمی‌کند. بنابراین این منابع باید در سایت مقصد نیز موجود باشند و در صورت نیاز دوباره به هدر اختصاص داده شوند.

۱۹. افزودن منو به سایت

برای ساخت منو ابتدا وارد نمایش → فهرست‌ها شوید و یک منو ایجاد کنید یا منوی موجود را ویرایش کنید.

برگه‌ها، دسته‌بندی‌ها، نوشته‌ها و پیوندهای موردنیاز را اضافه کنید و پس از تنظیم ترتیب، منو را ذخیره کنید.

سپس وارد Header Builder شوید و عنصر Main menu را به هدر دسکتاپ اضافه کنید. در تنظیمات عنصر، منوی وردپرسی موردنظر را انتخاب کنید.

برای نمایش منو در موبایل، در چیدمان Mobile عنصر Mobile menu را اضافه کنید و منوی دلخواه را به آن اختصاص دهید.

به این ترتیب می‌توانید ساختار منوی موبایل را مستقل از منوی دسکتاپ مدیریت کنید.

۲۰. ساخت مگامنو در وودمارت

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

در وودمارت می‌توانید محتوای مگامنو را با HTML Block بسازید و آن را به آیتم والد منو اختصاص دهید.

مرحله اول: ساخت HTML Block

۱. وارد بلوک های HTML شوید و روی افزودن جدید کلیک کنید.

۲. عنوان مشخصی برای بلوک بنویسید.

۳. محتوای موردنیاز را با ویرایشگر یا صفحه‌ساز پشتیبانی‌شده طراحی کنید.

۴. بلوک را منتشر کنید.

مرحله دوم: انتخاب آیتم والد

۱. وارد نمایش → فهرست‌ها شوید.

۲. منوی موردنظر را انتخاب کنید.

۳. آیتم والد، مانند «فروشگاه»، را باز کنید.

۴. در فیلد Design، طرح مگامنو را انتخاب کنید.

مرحله سوم: اتصال HTML Block

در تنظیمات همان آیتم، HTML Block ساخته‌ شده را انتخاب کنید و منو را ذخیره کنید.

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

تنظیمات تکمیلی مگامنو

بسته به طرح انتخابی، گزینه‌های زیر ممکن است در دسترس باشند:

• عرض منوی کشویی
• ارتفاع منوی کشویی
• فاصله داخلی منوی کشویی
• فعال‌سازی پیمایش داخل پنل
• طرح رنگی منوی کشویی
• بارگذاری محتوای HTML منوی کشویی با استفاده از ایجکس (AJAX)

قابلیت بارگذاری با AJAX می‌تواند برای مگامنوهای بزرگ مفید باشد؛ اما پس از فعال‌کردن آن، عملکرد منو و بارگذاری محتوا را آزمایش کنید.

۲۱. ساخت ناوبری چسبان

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

برای راه‌ اندازی:

۱. از مسیر نمایش ← فهرست‌ها، یک منوی وردپرس بسازید یا منوی موجود را انتخاب کنید.
۲. آیتم‌های منو را مرتب کنید و در صورت نیاز، برای آیتم‌های سطح اول تصویر تعیین کنید.
۳. وارد مسیر تنظیمات قالب ← تنظیمات عمومی ← ناوبری چسبان شوید.
۴. منوی موردنظر را از بخش انتخاب منو انتخاب کنید.
۵. در صورت نیاز، عنوان و محتوای پایین منو را تنظیم کنید.
۶. به سربرگ‌ساز بروید و عنصر ناوبری چسبان را به سربرگ دسکتاپ اضافه کنید.
۷. نوع نمایش دکمه را از میان متن، آیکون یا آیکون همراه با متن انتخاب کنید.
۸. تغییرات را ذخیره کنید و نتیجه را در سایت بررسی کنید.

۲۲. رفع مشکل ذخیره‌ نشدن تنظیمات منو

اگر تنظیمات آیتم‌های انتهایی منو پس از ذخیره ناپدید می‌شوند، یکی از علت‌های احتمالی محدودیت PHP با نام max_input_vars است.

برای بررسی:

۱. وارد WoodMart → Status شوید.

۲. مقدار PHP Max Input Vars را پیدا کنید.

۳. اگر مقدار کمتر از ۱۰۰۰۰ است، مطابق مستندات وودمارت آن را افزایش دهید.

در صورت امکان، این مقدار را در تنظیمات PHP هاست یا فایل پیکربندی مناسب قرار دهید:

max_input_vars = 10000

پس از اعمال تغییر، دوباره مقدار را در وضعیت قالب بررسی کنید و منو را ذخیره کنید.

اگر مشکل برطرف نشد، خطاهای سرور، محدودیت‌های فایروال، نسخه قالب و افزونه‌های مرتبط را بررسی کنید. این مشکل همیشه ناشی از max_input_vars نیست؛ بنابراین باید خطا را بر اساس شرایط واقعی سایت عیب‌یابی کرد.

نکات پایانی برای ساخت هدر استاندارد

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

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

ادامه یادگیری با دوره آموزش قالب وودمارت

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

برای انتخاب مسیر ادامه آموزش، ابتدا مشخص کنید به کدام بخش نیاز دارید: طراحی هدر و مگامنو، ساخت HTML Block، تنظیمات فروشگاه یا طراحی صفحات محصول. سپس درس مرتبط را دنبال کنید تا هر قابلیت را در محل استفاده واقعی آن یاد بگیرید.

سوالات متداول آموزش هدر وودمارت