وقتی تعداد دسته‌بندی‌ها، برگه‌ها و محصولات در سایت‌های بزرگ افزایش پیدا می‌کند، منوهای کشویی معمولی هدر را شلوغ می‌کنند و یافتن صفحات داخلی برای بازدیدکننده دشوار می‌شود. مگامنو لینک‌ها را در چند ستون منظم نمایش می‌دهد، سردرگمی بازدیدکننده را برطرف می‌کند و دسترسی به بخش‌های عمیق سایت را سرعت می‌بخشد.
سازمان‌دهی فهرست‌ها و ناوبری سایت از مهارت‌های کاربردی در مسیر آموزش وردپرس برای مدیریت سایت‌های محتوامحور است. روش‌های پیاده‌سازی مگامنو را با امکانات داخلی قالب، المنتور پرو، افزونه رایگان Max Mega Menu و کدنویسی بلوکی بررسی می‌کنیم تا بر اساس زیرساخت فعلی سایتتان، کم‌دردسرترین مسیر را انتخاب کنید.
مگامنو در وردپرس چیست و چه زمانی به آن نیاز داریم؟
مگامنو (Mega Menu) یک پنل ناوبری بزرگ، بازشونده و چندستونه است که با قرار گرفتن نشانگر ماوس روی گزینه‌های اصلی هدر باز می‌شود. این منو برای گروه‌بندی لینک‌ها فضای کافی دارد. می‌توانید در کنار لینک دسته‌ها، برای هر بخش عنوان، توضیح کوتاه، آیکون، تصویر یا دکمه قرار دهید. برای نمونه، یک فروشگاه پوشاک می‌تواند دسته‌های زنانه، مردانه و برندها را در ستون‌های جداگانه کنار هم بچیند.
مگامنوها در مجله‌های اینترنتی، سایت‌های آموزشی و به‌ویژه هنگام ساخت سایت فروشگاهی با وردپرس بیشترین کارایی را دارند؛ زیرا دسته‌بندی‌های پرتعداد و تصویر محصولات را یکجا نمایش می‌دهند تا خریدار سردرگم نشود.
اگر سایت شما کوچک است و فقط چهار یا پنج صفحه اصلی، مانند خانه، درباره ما و تماس با ما دارد، همان منوی ساده انتخاب بهتری است. ساخت مگامنو بدون محتوای کافی فقط هدر سایت را شلوغ می‌کند و یافتن لینک‌ها را برای بازدیدکننده سخت‌تر می‌سازد.
تفاوت مگامنو با منوی کشویی معمولی و منوی همبرگری
برخلاف تصور رایج، این سه نوع منو هرکدام وظیفه مشخصی در ناوبری سایت دارند و رقیب یکدیگر نیستند:
- منوی کشویی معمولی (Regular Dropdown) لینک‌ها را به شکل یک فهرست عمودی و لایه‌به‌لایه نمایش می‌دهد. این ساختار در سایت‌های بزرگ بخش‌های داخلی را پنهان می‌کند، تعداد کلیک‌ها را برای رسیدن به صفحات عمیق بالا می‌برد و مرور چشمی گزینه‌ها را سخت می‌کند.
- مگامنو (Mega Menu) کل ساختار سایت، شامل دسته‌ها، زیردسته‌ها و صفحات کلیدی را هم‌زمان و در یک نگاه پیش روی کاربر می‌گذارد تا بدون حدس زدن مسیر، مستقیم به صفحه هدف برود.
- منوی همبرگری (Hamburger Menu) ظرف نگهدارنده ناوبری است و جایگزین مگامنو نیست. محل قرارگیری ناوبری را، به‌ویژه در صفحات کوچک موبایل، مشخص می‌کند و مگامنو می‌تواند برای صرفه‌جویی در فضا داخل آن باز شود.
بهترین روش‌های ساخت مگامنو در وردپرس (کدام روش برای شما مناسب است؟)
وردپرس ابزار مستقلی برای ساخت مگامنو با چند ستون و تصویر ندارد. به همین دلیل، روش مناسب به زیرساخت فعلی سایت شما بستگی دارد. ابتدا تنظیمات قالب خود را بررسی کنید. قالب‌هایی مانند اهورا و وودمارت ابزارهای داخلی طراحی مگامنو دارند؛ با این ابزارها به افزونه اضافه نیاز ندارید و مدیریت ظاهر منو هم ساده‌تر می‌ماند.
اگر هدر سایت را با المنتور طراحی کرده‌اید و نسخه پرو را دارید، برای حفظ سرعت سایت از ویجت‌های داخلی همین صفحه‌ساز استفاده کنید. در صورتی که قالب شما این قابلیت را ندارد و المنتور پرو هم ندارید، افزونه رایگان Max Mega Menu فهرست معمولی وردپرس را به مگامنو تبدیل می‌کند.
پیش از اقدام، مطمئن شوید که دو افزونه یا دو سیستم مگامنو را هم‌زمان فعال نکنید. فعال بودن هم‌زمان آنها در عملکرد منو تداخل ایجاد می‌کند و تنظیمات را از کار می‌اندازد. با مقایسه روش‌های زیر می‌توانید بر اساس وضعیت سایتتان تصمیم بگیرید:
| روش ساخت مگامنو | پیش‌نیاز اصلی | سطح دشواری | مناسب برای چه سایت‌هایی؟ |
|---|---|---|---|
| امکانات داخلی قالب | قالب دارای مگامنو (مثل اهورا یا وودمارت) | آسان | سایت‌هایی که می‌خواهند بدون نصب افزونه اضافی، منویی هماهنگ با قالب داشته باشند. |
| صفحه‌ساز المنتور پرو | نصب بودن افزونه Elementor Pro | متوسط | سایت‌های المنتوری که به دنبال طراحی بصری (مشابه دیجی‌کالا) و حفظ سرعت هستند. |
| افزونه Max Mega Menu | وردپرس ۶.۲ و PHP ۷.۴ به بالا | آسان تا متوسط | قالب‌های کلاسیک یا بلوکی فاقد ابزار مگامنو که به راه‌حل رایگان نیاز دارند. |
| کدنویسی بلوکی | وردپرس ۶.۵ به بالا و دانش توسعه | پیشرفته | توسعه‌دهندگانی که می‌خواهند بلوک مگامنوی اختصاصی و سبک برای ویرایشگر سایت بسازند. |
آموزش ساخت مگامنو در وردپرس با المنتور پرو (بدون افزونه جانبی)
اگر المنتور پرو روی سایتتان نصب است، می‌توانید بدون افزونه جانبی یا کدنویسی مگامنو بسازید. ابزارهای داخلی و ویجت‌های بومی المنتور پرو مانع افت سرعت بارگذاری سایت می‌شوند. برای اجرای این روش در قالب‌هایی مانند Astra یا Hello Elementor، مراحل زیر را از پیشخوان وردپرس دنبال کنید.
گام اول: فعال‌سازی ویژگی‌های مگامنو در تنظیمات المنتور
پیش از باز کردن ویرایشگر، ابزارهای لازم برای ساخت مگامنو را فعال کنید تا ویجت آن به پنل اضافه شود. پس از ورود به پیشخوان وردپرس، از منوی سمت راست به مسیر «المنتور > تنظیمات» بروید و سربرگ «ویژگی‌ها» (Features) را باز کنید.
در فهرست ویژگی‌ها، این سه گزینه را پیدا کنید و وضعیت آنها را روی حالت فعال قرار دهید:
- کانتینر فلکس باکس (Flexbox Container)
- عناصر تودرتو (Nested Elements)
- فهرست (Menu)
روی دکمه ذخیره تغییرات در پایین صفحه کلیک کنید. فعال‌سازی این سه گزینه، ویجت جدید فهرست را برای طراحی منوهای چندسطحی در ویرایشگر المنتور در دسترس قرار می‌دهد.
گام دوم: افزودن ویجت فهرست و طراحی ساختار کشویی
هدر سایت را در ویرایشگر المنتور باز کنید. پس از فعال‌سازی ویژگی‌های مرحله قبل، ویجت جدید «فهرست» (Menu) به پنل المان‌ها اضافه شده است. آن را بکشید و در محل مناسبی از هدر رها کنید.
آیتم‌های اصلی منو را در پنل تنظیمات ویجت بسازید. اگر به آیکون نیاز دارید، از بخش آیکن نماد دلخواه را کنار هر عنوان قرار دهید. برای تبدیل یک آیتم معمولی به مگامنو، تنظیمات همان آیتم را باز و گزینه محتوای کشویی یا بازشو (Dropdown Content) را فعال کنید.
در پیش‌نمایش ویرایشگر، مستقیم روی همان آیتم منو کلیک کنید تا فضای خالی زیرمنوی بازشو باز شود. می‌توانید در این فضا یک کانتینر جدید بسازید و آن را ستون‌بندی کنید. سپس ویجت‌های مستقل المنتور، مانند عنوان (Heading)، تصویر (Image) و دکمه (Button) را برای نمایش دسته‌بندی‌ها و لینک‌ها اضافه کنید.
گام سوم: ساخت مگامنو مشابه دیجی‌کالا با ویجت زبانه‌ها (Tabs)
برای ساخت مگامنوی تب‌بندی‌شده مشابه دیجی‌کالا، زیرمنوی بازشویی را که در مرحله قبل ساختید باز کنید و یک کانتینر داخل آن قرار دهید. سپس ویجت «زبانه‌ها» (Tabs) المنتور پرو را به داخل کانتینر بکشید تا ساختار اولیه دسته‌بندی‌ها شکل بگیرد.
در تنظیمات ویجت زبانه‌ها، به تعداد دسته‌بندی‌های اصلی فروشگاه تب بسازید و برای هرکدام عنوان و آیکون متناسب با همان دسته قرار دهید. فضای داخلی هر زبانه ویجت‌های مستقل را می‌پذیرد. برای نمایش زیردسته‌ها در چند ستون منظم، ویجت «لیست آیکون» را به محتوای هر تب اضافه کنید و لینک‌های هر گروه کالایی را زیر هم بچینید.
اگر در کنار المنتور از افزونه‌های مکملی مانند JetMenu یا JetTabs استفاده می‌کنید، روش دیگری هم دارید. از بخش «قالب‌ها» در پیشخوان وردپرس، یک قالب جدید از نوع «بخش» (Section) می‌سازید و چیدمان مگامنو را با المنتور طراحی می‌کنید. سپس هنگام تنظیم زبانه‌ها یا از مسیر «نمایش > فهرست‌ها»، قالب آماده را به آیتم منوی اصلی متصل خواهید کرد. در این روش، برای هر دسته‌بندی به یک قالب مجزا نیاز دارید تا محتوای تب‌ها تکراری نشود.
آموزش مگامنو در وردپرس با افزونه رایگان Max Mega Menu
اگر قالب سایت ابزار داخلی مگامنو ندارد و از المنتور پرو هم استفاده نمی‌کنید، Max Mega Menu یک افزونه استاندارد و رایگان برای این کار است. این افزونه فهرست معمولی وردپرس را بدون کدنویسی و با کشیدن و رها کردن آیتم‌ها به منوی چندستونه تبدیل می‌کند و در هر دو نوع قالب کلاسیک و بلوکی قابل اجراست.
پیش‌نیازها و نصب افزونه مگامنو
برای اجرای بدون خطای Max Mega Menu، سایت شما به وردپرس نسخه ۶.۲ یا جدیدتر و PHP نسخه ۷.۴ به بالا نیاز دارد. پیش از تغییر سربرگ و جایگاه‌های منو، از فایل‌ها و پایگاه داده سایت نسخه پشتیبان تهیه کنید. دسته‌ها، برگه‌ها و لینک‌های اصلی را هم از قبل روی کاغذ یا در یک فایل متنی گروه‌بندی کنید و صفحات کم‌اهمیت را برای فوتر نگه دارید.
برای نصب افزونه، در پیشخوان وردپرس به مسیر «افزونه‌ها > افزودن افزونه تازه» بروید. عبارت Max Mega Menu را در کادر جست‌وجو بنویسید و پس از پیدا کردن افزونه، آن را نصب و فعال کنید. با فعال‌سازی آن، گزینه Mega Menu به منوی کناری پیشخوان اضافه می‌شود.
راه‌اندازی و چیدمان ستون‌ها در قالب‌های کلاسیک
در قالب‌های کلاسیک وردپرس، به مسیر «نمایش > فهرست‌ها» بروید و فهرست اصلی سایت را انتخاب کنید یا فهرست تازه‌ای بسازید. در پایین صفحه، فهرست را به جایگاه قالب، مانند «منوی اصلی»، «سربرگ» یا Primary Menu متصل کنید. سپس در پنل تنظیمات Max Mega Menu در همان صفحه، تیک فعال‌سازی افزونه را برای آن جایگاه بزنید و تغییرات را ذخیره کنید.
نشانگر ماوس را روی یکی از آیتم‌های سطح اول فهرست ببرید. روی دکمه آبی Mega Menu که کنار آیتم ظاهر می‌شود کلیک کنید. پنجره بازشده دو نوع نمایش اصلی دارد: حالت Mega Menu یک پنل بزرگ با امکان ستون‌بندی می‌سازد و برای آیتم‌هایی با زیرمجموعه زیاد کاربرد دارد. حالت Flyout همان منوی کشویی باریک و چندسطحی است که برای چند لینک ساده مناسب است.
برای چیدمان چندستونه، حالت شبکه‌ای (Grid Layout) را انتخاب کنید. یک ردیف بسازید و تعداد ستون‌ها را بین ۲ تا ۴ قرار دهید تا لینک‌ها بیش از حد باریک نشوند. در هر ستون می‌توانید لینک‌های زیرمنو، بلوک‌های وردپرس، ابزارک‌ها یا HTML سفارشی (برای متن و دکمه‌های ساده) اضافه کنید و ترتیب آنها را با کشیدن و رها کردن تغییر دهید. سپس تنظیمات پنجره و فهرست را ذخیره کنید.
افزودن مگامنو در قالب‌های بلوکی (ویرایشگر سایت)
در قالب‌های بلوکی، ویرایشگر سایت امکان مدیریت سربرگ و بخش‌های اصلی سایت را در اختیار شما می‌گذارد. در این قالب‌ها باید به‌جای اتصال افزونه به جایگاه‌های قدیمی، بلوک اختصاصی آن را مستقیم در سربرگ قرار دهید.
از پیشخوان به مسیر «Mega Menu > Menu Locations» بروید و یک جایگاه جدید با نامی مشخص، مانند «مگامنوی سربرگ» بسازید. سپس فهرست موردنظر را به این جایگاه متصل کنید.
به مسیر «نمایش > ویرایشگر» بروید و از بخش طراحی یا الگوها، سربرگ فعال سایت را باز کنید. روی دکمه افزودن بلوک بزنید، عبارت Max Mega Menu را جست‌وجو کنید و بلوک آن را در محل مناسب سربرگ قرار دهید. از نوار تنظیمات بلوک، جایگاهی را که در مرحله قبل ساختید انتخاب کنید. بلوک Navigation قبلی را حذف کنید تا دو منو کنار هم نمایش داده نشوند. سپس تغییرات سربرگ را ذخیره کنید.
سفارشی‌سازی ظاهر با پوسته‌های منو (Menu Themes)
برای هماهنگ کردن ظاهر مگامنو با طراحی کلی سایت، از پیشخوان وردپرس به مسیر «Mega Menu > Menu Themes» بروید. می‌توانید پوسته پیش‌فرض را ویرایش کنید یا پوسته‌ای جدید بسازید و آن را به جایگاه منوی موردنظرتان متصل کنید.
در تنظیمات نوار اصلی منو (Menu Bar)، رنگ پس‌زمینه، رنگ متن، ارتفاع نوار و فاصله بین آیتم‌ها را مشخص کنید. سپس در تب «Mega Menus» ظاهر پنل بازشونده را تنظیم کنید. در این تب می‌توانید رنگ پس‌زمینه پنل، عرض مگامنو، فاصله داخلی و استایل عنوان ستون‌ها را تغییر دهید. برای اینکه مگامنو بخشی جدا از سایت به نظر نرسد، در بخش تایپوگرافی (Typography)، نوع فونت، اندازه نوشته‌ها و فاصله خطوط را با فونت قالب سایت یکسان کنید.
ساخت مگامنو با امکانات داخلی قالب‌های وردپرس (بدون افزونه)
بسیاری از قالب‌های استاندارد وردپرس در هسته خود ابزارهای اختصاصی طراحی منوهای چندستونه دارند. استفاده از این امکانات داخلی در اولویت است، چون تعداد افزونه‌های نصب‌شده را کم نگه می‌دارد و مدیریت ظاهر هدر را ساده‌تر می‌کند. نحوه پیاده‌سازی این قابلیت را در وودمارت و اهورا، دو نمونه از قالب‌های پرکاربرد، بررسی می‌کنیم.
ساخت مگامنو در قالب وودمارت (با بلوک HTML و فهرست‌ها)
قالب فروشگاهی وودمارت دو روش داخلی برای ساخت مگامنو دارد:
- برای استفاده از بلوک‌های HTML در چیدمان‌های گرافیکی و چندستونه، از پیشخوان وردپرس وارد بخش «بلوک‌های HTML» شوید و گزینه «اضافه کردن آیتم جدید» را بزنید. برای بلوک نام بگذارید و روی «ویرایش با المنتور» کلیک کنید. ساختار مگامنو را با ستون‌ها، لیست، متن، آیکون، تصویر و دکمه بچینید و منتشر کنید. سپس به مسیر نمایش > فهرست‌ها بروید و تنظیمات آیتم اصلی موردنظر را باز کنید. از بخش «بلوک HTML»، بلوکی را که ساخته‌اید انتخاب کنید. بخش «طراحی» را روی «ارتفاع کامل» یا پهنایی مشخص، مثلاً ۸۰۰، قرار دهید و فهرست را ذخیره کنید.
- برای ساخت مستقیم از طریق فهرست‌ها، در مسیر نمایش > فهرست‌ها یک فهرست جدید بسازید و دسته‌های اصلی فروشگاه را به آن اضافه کنید. تنظیمات آیتم مادر را باز کنید و از بخش «تنظیمات کشویی»، طراحی و ارتفاع منو را مشخص و ذخیره کنید. سپس به مسیر وودمارت > سربرگ ساز > Header Advanced بروید و بخش منوی اصلی را ویرایش کنید. فهرستی را که ساخته‌اید برای فراخوانی در هدر انتخاب و ذخیره کنید.
طراحی مگامنو در قالب اهورا
در قالب اهورا، از مسیر «نمایش > فهرست‌ها» ساختار منو را بسازید و چند زیرمنو زیر آیتم اصلی قرار دهید. روی آیتم اصلی کلیک کنید و در تنظیمات آن، حالت نمایش را از «ساده» یا «پیش‌فرض» به «مگامنو» تغییر دهید تا فهرست حالت ستونی بگیرد.
سپس از بخش تنظیمات یا سازنده هدر اهورا، هدر فعال سایت را با المنتور باز کنید و المان منوی اصلی را انتخاب کنید. در تنظیمات این المان می‌توانید چیدمان ستون‌ها را نهایی کنید. عرض منو، فاصله‌های داخلی، اندازه نوشته‌ها و رنگ پس‌زمینه را هم متناسب با ظاهر هدر تنظیم کنید.
معرفی بهترین افزونه‌های مگامنو وردپرس (رایگان و تجاری)
برای امکاناتی مانند انیمیشن‌های خاص، برچسب کنار لینک‌ها یا ساخت منو در گوتنبرگ، می‌توانید از افزونه‌های جایگزین زیر استفاده کنید:
- UberMenu یک افزونه تجاری مگامنو است که با بارگذاری فایل ZIP نصب می‌شود و تنظیمات گسترده‌ای برای چیدمان و محتوا دارد. تعداد زیاد تنظیمات ممکن است کاربران مبتدی را گیج کند. پیش از خرید، سازگاری آن را با قالب، صفحه‌ساز و نسخه PHP بررسی کنید.
- JetMenu از مجموعه Crocoblock، افزونه مکمل المنتور است و منوهای ریسپانسیو همراه با افکت و انیمیشن می‌سازد. با فعال کردن گزینه Enable Mega Menu در بخش فهرست‌ها، می‌توانید قالب طراحی‌شده را مستقیم به آیتم منو متصل کنید.
- Premium Addons در هر دو نسخه رایگان و پرو امکان ساخت مگامنوهای افقی، عمودی، بازشو و اسلایدی را دارد. با این افزونه می‌توانید زیرمنو را برای باز شدن با هاور یا کلیک، یا باز ماندن دائمی تنظیم کنید و کنار آیکون‌ها برچسب بگذارید.
- ElementsKit یک افزونه جانبی المنتور با ویجت اختصاصی مگامنو است. با این ویجت می‌توانید منوهای افقی، عمودی و ساختارهای مشابه دیجی‌کالا را به‌آسانی و بدون کدنویسی پیاده‌سازی کنید.
- HappyAddons در نسخه پریمیوم خود ویجت مگامنو دارد. این ویجت برای طراحی منوهای چندسطحی و چندستونه به کار می‌رود.
- The Plus Addons علاوه بر ساخت منوهای افقی و عمودی در المنتور، قابلیت Indicator دارد. با این قابلیت می‌توانید برای بخش‌های نیازمند توضیح، راهنمای کوتاه (Tooltip) اضافه کنید.
- Unlimited Elements Blocks Library مخصوص ویرایشگر بلوکی وردپرس (گوتنبرگ) است. پس از نصب افزونه، بلوک Mega Menu را از بخش Blocks Library دانلود و مستقیم در صفحه درج می‌کنید تا عرض پنل، ستون‌ها و تریگر باز شدن (Hover/Click) را بدون کدنویسی تنظیم کنید.
ساخت مگامنو اختصاصی با کدنویسی و بلوک‌ها (مخصوص توسعه‌دهندگان)
در معماری بلوکی وردپرس ۶.۵ به بالا، امکان توسعه مگامنوهای سبک بدون افزونه‌های آماده فراهم شده است. برای پیاده‌سازی این ساختار، با پکیج @wordpress/create-block یک پلاگین بلوک پویا (Dynamic) بسازید و برای مدیریت تعاملات کاربری از Interactivity API استفاده کنید.
سپس با هوک default_wp_template_part_areas در فایل اصلی افزونه، یک ناحیه الگوی سفارشی با نام menu ثبت کنید. با این کار می‌توانید بخش‌های مگامنو را مستقیم در ویرایشگر سایت (Site Editor) طراحی کنید. بلوک Navigation هسته وردپرس به‌طور پیش‌فرض فقط بلوک‌های خاصی را می‌پذیرد؛ بنابراین باید با فیلتر blocks.registerBlockType نام بلوک اختصاصی خود را به آرایه allowedBlocks در بلوک core/navigation اضافه کنید.
اگر قصد دارید برای محتوای طولانی داخل تب‌های مگامنو، مشابه دیجی‌کالا، نوار پیمایش یا اسکرول‌بار قرار دهید، باید در استایل‌دهی CSS از ویژگی‌های overflow و min/max-height استفاده کنید. تسلط بر این هوک‌ها و سفارشی‌سازی استایل‌ها به آشنایی با مباحث آموزش برنامه نویسی وردپرس نیاز دارد.
پیشنهاد مطالعه و یادگیری: برای ساخت بلوک‌های سفارشی و ابزارهای اختصاصی با استانداردهای جدید هسته وردپرس، می‌توانید در دوره افزونه نویسی وردپرس شرکت کنید.
نکات کلیدی بهینه‌سازی مگامنو برای موبایل، تجربه کاربری و سئو
برای اینکه مگامنو در دستگاه‌های لمسی درست باز شود و سرعت سایت را کاهش ندهد، هنگام طراحی این موارد را رعایت کنید:
۱. بهینه‌سازی برای موبایل و حالت ریسپانسیو
- چیدمان چندستونه دسکتاپ برای صفحه موبایل بیش از حد عریض است. ستون‌ها را جمع‌شونده کنید تا در موبایل به شکل ردیف‌های عمودی زیر هم قرار بگیرند.
- تصاویر یا بخش‌های غیرضروری داخل ستون‌ها را در نمایش موبایل مخفی کنید.
- فاصله داخلی لینک‌ها را طوری تنظیم کنید که لمس هر گزینه با انگشت راحت باشد.
- اگر برای موبایل منوی متفاوتی می‌سازید، تمام لینک‌های اصلی نسخه دسکتاپ را در آن نگه دارید.
- پیش‌نمایش ویرایشگر همه رفتارهای لمسی را دقیق نشان نمی‌دهد؛ نتیجه را روی یک گوشی واقعی آزمایش کنید.
۲. تجربه کاربری (UX) و سرعت بارگذاری
- پیش از طراحی مگامنو، چیدمان کلی هدر را مرتب کنید. لوگو، منوی اصلی، سبد خرید و دکمه‌های ورود یا عضویت پس از ساخت پنل کاربری در وردپرس را در ردیف‌های مجزا و منظم قرار دهید.
- لینک‌های مهم هر گروه را در ابتدای ستون‌ها بگذارید. عنوان‌ها را کوتاه بنویسید و بین متن و پس‌زمینه کنتراست رنگی مناسب ایجاد کنید.
- برای جلوگیری از افت سرعت، تصاویر داخل منو را با حجم کم و فرمت WebP بارگذاری کنید. از قرار دادن فرم یا اسکریپت سنگین در مگامنو بپرهیزید.
۳. اصول سئو در مگامنو
- سطوح مختلف منو را با رعایت سلسله‌مراتب (دسته مادر > زیردسته > محصول) بچینید تا موتورهای جستجو ساختار سایت را آسان‌تر درک کنند.
- لینک‌های هدر از نظر آموزش سئو اهمیت بالایی دارند. برای عنوان دسته‌بندی‌ها از کلمات کلیدی کوتاه، مفهومی و باارزش استفاده کنید.
رفع مشکلات رایج در ساخت مگا منو وردپرس
هنگام پیاده‌سازی مگامنو ممکن است خطاهای زیر عملکرد منو را مختل کنند:
- اگر کانتینر زیرمنو باز نمی‌شود یا گزینه فهرست در المنتور وجود ندارد، هر دو افزونه المنتور رایگان و المنتور پرو را هم‌زمان به آخرین نسخه آپدیت کنید. سپس کش مرورگر را خالی کنید و از بخش ابزارهای المنتور در پیشخوان، گزینه Regenerate CSS and Data را بزنید.
- لینک‌دهی مستقیم به عنوان زبانه‌ها (Tabs) امکان‌پذیر نیست. المان تب در المنتور و افزونه جت‌تب (JetTabs) لینک مستقیم قبول نمی‌کند، چون این ویجت برای نمایش محتوای داخل هر تب طراحی شده است.
- بزرگ شدن غیرعادی آیکون‌ها در خروجی معمولاً از تداخل CSS یا استایل‌دهی نادرست به آیکون‌ها ناشی می‌شود. بخش استایل مگامنو و تنظیمات اندازه آیکون را بررسی و اصلاح کنید.
- اگر آیتم‌های منو کامل ذخیره نمی‌شوند و پس از افزودن لینک‌های متعدد بخشی از آنها حذف می‌شود، به محدودیت تعداد آیتم‌های منو در وردپرس برخورده‌اید. باید این محدودیت را برطرف کنید.
- فعال بودن هم‌زمان دو افزونه مگامنو، مثلاً Max Mega Menu در کنار یک افزونه دیگر، باعث تداخل می‌شود و تنظیمات افزونه کار نمی‌کند. یکی از افزونه‌ها را غیرفعال کنید تا تنظیمات درست عمل کند.
پیاده‌سازی درست هدر و منوها بخشی از فرایند ساخت یک وب‌سایت استاندارد است. اگر می‌خواهید بر طراحی سایر بخش‌های سایت و رفع چالش‌های فنی آن مسلط شوید، مشاهده دوره‌های آموزش طراحی سایت با وردپرس در مکتب‌خونه مسیر یادگیری شما را تکمیل می‌کند.
سوالات متداول
آیا برای ساخت مگامنو در وردپرس به دانش کدنویسی نیاز است؟
خیر. با امکانات داخلی قالب‌ها، ابزارهای بصری کشیدن و رها کردن در المنتور یا افزونه‌هایی مانند Max Mega Menu می‌توانید بدون نوشتن کد مگامنو بسازید.
آیا می‌توان در نسخه رایگان المنتور مگامنو طراحی کرد؟
ویجت بومی فهرست برای ساخت مگامنو فقط در المنتور پرو فعال است. در نسخه رایگان المنتور باید از افزونه‌های جانبی رایگان، مانند نسخه رایگان Premium Addons استفاده کنید.
برای حفظ سرعت بارگذاری مگامنو چه تصاویری مناسب‌تر هستند؟
استفاده از تصاویر کم‌حجم با فرمت WebP و تنظیم آنها در ابعاد دقیق موردنیاز منو، از افت سرعت بارگذاری هدر جلوگیری می‌کند.
آیا برای ساخت مگامنو نصب افزونه الزامی است؟
خیر. اگر قالب سایت شما، مانند وودمارت یا اهورا، ابزار داخلی طراحی مگامنو دارد یا از المنتور پرو استفاده می‌کنید، به نصب افزونه مجزا نیاز ندارید.
