هنگام طراحی سایت، یک مگا منو وردپرس برای ناوبری یکپارچه بسیار مهم است. این امر به ویژه در مورد سایت های تجارت الکترونیکی که طیف گسترده ای از دسته بندی محصولات را ارائه می دهند صادق است.

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

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

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

یک مگا منو وردپرس معمولاً از چندین سطح تشکیل شده است:

  • منوی سطح بالا. این منوی اصلی است که بازدیدکنندگان هنگام فرود می بینند روی یک وبسایت. یک منوی سطح بالا معمولاً شامل دسته‌ها یا بخش‌های اصلی یک وب‌سایت است، مانند a محصولات page.
  • منوی سطح دوم. هنگامی که کاربران ماوس را نگه می دارند یا روی یک آیتم منوی سطح بالا کلیک می کنند، قابل مشاهده خواهد بود. به عنوان مثال، مارک های مد معمولا لیست می کنند تن پوش به عنوان یکی از آیتم های سطح دوم در بخش محصولات.
  • منوی سطح سوم. این زیر منوها زمانی ظاهر می شوند که بازدیدکنندگان با یک منوی سطح دوم تعامل داشته باشند. به عنوان مثال، اقلام سطح سوم برای لباس می تواند باشد پیراهن، ژاکت، و ژاکت.

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

روش ایجاد مگا منو در وردپرس

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

این بخش هر دو گزینه را با جزئیات بیشتری پوشش می دهد. به راحتی به روش دلخواه خود بپرید.

روش ایجاد یک مگا منو وردپرس با استفاده از افزونه Max Mega Menu

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

قبل از اینکه بیشتر به روش عملکرد Max Mega Menu بپردازیم، ابتدا افزونه را نصب و پیکربندی کنید.

1. افزونه Max Mega Menu را پیکربندی کنید

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

نکته حرفه ای

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

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

  1. رفتن به ظاهر منوها.
  2. انتخاب کنید مکان های منو و کلیک کنید مکان منوی دیگری اضافه کنید.
  3. وارد بخش وب سایتی شوید که می خواهید منو در آن نمایش داده شود، مانند هدر، پاورقی یا نوار کناری.
  4. منوی سفارشی که ایجاد کرده اید را انتخاب کنید.
  5. کلیک اضافه کردن مکان منو.
تنظیمات افزونه Max Mega Menu در داشبورد وردپرس
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 34

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

  • Hover Intent. قبل از اینکه منوی سطح دوم ظاهر شود، کاربران باید چند ثانیه ماوس را روی منوی سطح بالا نگه دارند. این تاخیر برای جلوگیری از کلیک های تصادفی طراحی شده است.
  • شناور. هنگامی که کاربر نشانگر ماوس خود را روی منوی والد قرار دهد، منوهای فرعی فوراً باز می شوند. از آنجایی که هیچ تاخیری وجود ندارد، این روش برای ارائه یک سیستم ناوبری روان بهترین کار را دارد.
  • کلیک. از بازدیدکنندگان می‌خواهد که روی مگا منو کلیک یا ضربه بزنند تا آیتم‌های سطح دوم آن باز شوند. این گزینه برای دستگاه‌های صفحه لمسی و موقعیت‌هایی که شناور کردن دقیق ماوس ممکن است چالش‌برانگیز باشد، ایده‌آل است.

اگر انتخاب کنید کلیک، به سمت پیشرفته برگه → روی Event Behavior کلیک کنید. سپس، یکی از این گزینه ها را انتخاب کنید تا مشخص کنید وقتی کاربران روی مگا منو کلیک می کنند چه اتفاقی می افتد:

  • اولین کلیک منوی فرعی را باز می کند و با کلیک دوم آن را می بندد.
  • اولین کلیک منوی سطح دوم را باز می کند و کلیک بعدی به دنبال آن خواهد آمد page ارتباط دادن.
  • اولین کلیک مستقیماً باز می شود page ارتباط دادن.

پس از آن، به تنظیمات عمومی را برگه و پیدا کنید اثر حوزه.

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

برای فعال کردن انیمیشن برای منوی تلفن همراه خود، یک سبک در کنار آن انتخاب کنید افکت (موبایل) – بلغزانید به پایین، بلغزانید به چپ یا به راست. توجه داشته باشید که استفاده از یک عنصر تعاملی ممکن است سایت شما را کند کند روی دستگاه های تلفن همراه یا سیستم هایی با سرعت اینترنت پایین.

هنگامی که از تنظیمات پیکربندی راضی شدید، کلیک کنید ذخیره تغییرات.

تنظیمات کلی مکان منوی Max Mega Menu برای استایل منو
تنظیمات کلی مکان منوی Max Mega Menu برای استایل منو
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 35

2. چینش منو و ظاهر را تنظیم کنید

Max Mega Menu یک تم منوی پیش فرض را ارائه می دهد که می توانید بلافاصله از آن استفاده کنید. اما اگر ترجیح می دهید یک تم سفارشی ایجاد کنید، می توانید منوی بزرگ خود را به راحتی شخصی سازی کنید.

برای انجام این کار، دسترسی داشته باشید تم های منو از تنظیمات Max Mega Menu. کلیک کنید بر روی نماد سه نقطه جنب موضوع را برای ویرایش انتخاب کنید، و انتخاب کنید اضافه کردن تم جدید.

زیر تنظیمات عمومی، می توانید عنوان تم جدید را تغییر دهید، یک سبک پیکان انتخاب کنید، ارتفاع خط کلی را برای آیتم های زیرمنو تنظیم کنید، و یک سایه را روی طرح بندی های مگا منوی خود اعمال کنید.

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

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

پیشنهاد می‌کنیم بخوانید:  Magento 2 Tutorial: ساخت یک سایت تجارت الکترونیک در مقیاس بزرگ
تنظیمات نوار منو برای تم های منو در رابط Max Mega Menu
تنظیمات نوار منو برای تم های منو در رابط Max Mega Menu
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 36

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

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

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

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

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

3. محتوا را به منوی وردپرس اضافه کنید

Max Mega Menu یک رابط کشیدن و رها کردن را ارائه می دهد که اضافه کردن محتوای جدید را آسان می کند. به غیر از لینک های متنی، می توانید محصولات WooCommerce، تصاویر و فیلترهای جستجو را نیز اضافه کنید.

نکته حرفه ای

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

با پیمایش به شروع کنید ظاهر منوها برای ایجاد یک منوی جدید یا ویرایش منوی موجود خود. سپس، این دستورالعمل ها را دنبال کنید:

  1. تیک فعال کردن جعبه از تنظیمات منوی مگا حداکثر روی چپ. این کادر همچنین به شما امکان می دهد تنظیمات منو را برای چندین مکان پیکربندی کنید.
  2. به پایین حرکت کنید صفحات، تمام صفحات را انتخاب کرده و کلیک کنید به منو اضافه کنید.
  3. همین کار را تکرار کنید process برای نوشته ها، دسته بندی ها، و دسته بندی محصولات.
  4. زیر ساختار منو، زیر مجموعه ها را بکشید و به دسته اصلی مربوطه خود رها کنید. می توانید یک منوی سطح سوم را با کشیدن آن به سمت راست یک منوی سطح دوم ایجاد کنید. روی.
بخش منوها در داشبورد وردپرس
بخش منوها در داشبورد وردپرس
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 37

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

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

منوی مگا برای نمایش یک منوی فرعی در حالت پرواز، شبکه یا استاندارد
منوی مگا برای نمایش یک منوی فرعی در حالت پرواز، شبکه یا استاندارد
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 38

طرح بندی شبکه ای مگا منو به شما امکان می دهد یک منو در چندین ستون و ردیف ایجاد کنید. در همین حال، تنها با استفاده از طرح بندی استاندارد، می توانید تعداد ستون ها را تغییر دهید.

با کلیک کردن، محتوای غنی اضافه کنید تا منوی خود از نظر بصری جذاب تر شود ویجتی را برای افزودن به پانل انتخاب کنید. سپس، ویجتی را از لیست کشویی انتخاب کنید، از جمله نوار جستجو، گالری تصاویر، تقویم، محتوای صوتی، ویدیو و فیلترهای محصول.

گزینه Grid Layout با لیست ویجت گسترش یافته است
گزینه Grid Layout با لیست ویجت گسترش یافته است
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 39

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

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

روش ایجاد یک مگا منو وردپرس به صورت دستی با استفاده از کد

ایجاد یک مگا منو وردپرس به صورت دستی با استفاده از کد به شما کنترل بیشتری بر طراحی و عملکرد آن می دهد. با این حال، این روش به دانش CSS سفارشی و توانایی بهینه سازی فایل شیوه نامه تم شما نیاز دارد.

این راهنمای گام به گام را برای افزودن یک مگا منو به سایت وردپرس خود دنبال کنید:

1. محیط توسعه خود را آماده کنید

وردپرس یک سیستم مدیریت محتوای متن باز (CMS) است که به این معنی است که می توانید از کدهای سفارشی برای تغییر مضامین و افزونه های آن استفاده کنید.

با این حال، ویرایش کد روی وب سایت زنده شما می تواند منجر به مشکلات غیرمنتظره شود. برای جلوگیری از این امر، از سایت وردپرس خود نسخه پشتیبان تهیه کنید و یک محیط امن برای آزمایش ایجاد کنید.

هاستینگerمیزبانی مدیریت شده وردپرس پشتیبان گیری خودکار را برای ایمن نگه داشتن فایل های شما ارائه می دهد. این کسب و کار و راه اندازی ابری برنامه ها همچنین با ابزار مرحله بندی وردپرس همراه هستند. این ویژگی به شما این امکان را می دهد که وب سایت خود را کپی کنید و تغییرات را قبل از استقرار آنها در سایت زنده آزمایش کنید.

بنر میزبانی وردپرسبنر میزبانی وردپرس
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 40

در اینجا روش راه اندازی یک محیط مرحله بندی وردپرس با آن آورده شده است هاستینگer:

  1. ورود به hPanel و برو به وب سایت ها.
  2. نام دامنه خود را انتخاب کرده و کلیک کنید مدیریت کنید.
  3. هدایت به وردپرس صحنه سازی روی نوار کناری سمت چپ
  4. به سمت صحنه سازی را بزنید و کلیک کنید مرحله بندی ایجاد کنید.
قابلیت وردپرس Staging Tool در hPanel
قابلیت وردپرس Staging Tool در hPanel
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 41
  1. یک زیر دامنه برای محیط استیجینگ خود ایجاد کنید. این process ممکن است تا 15 دقیقه تکمیل شود.
ایجاد یک زیر دامنه برای یک محیط مرحله بندی در hPanel
ایجاد یک زیر دامنه برای یک محیط مرحله بندی در hPanel
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 42

2. به فایل صفحه سبک تم خود دسترسی پیدا کنید

گام بعدی این است که تم خود را سفارشی کنید style.css فایل روی سایت صحنه سازی تازه ایجاد شده

نکته حرفه ای

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

با اکثر ارائه دهندگان میزبانی، نیاز به اتصال به یک کلاینت پروتکل انتقال فایل (FTP) شخص ثالث دارد. خوشبختانه، هاستینگer کاربران به راحتی می توانند این کار را از طریق hPanel:

  1. هدایت به فایل ها → مدیر فایل، و انتخاب کنید دسترسی به فایل های (دامنه شما).
  2. باز کن public_html → مرحله بندی → wp_content → تم ها.
  3. تم وردپرسی را که می خواهید تغییر دهید انتخاب کنید و پوشه آن را باز کنید.
  4. روی تم دوبار کلیک کنید style.css فایل برای ایجاد تغییرات
  5. به پایین ویرایشگر متن بروید و این کد را وارد کنید:
.main-navigation ul:hover li ul,
.main-navigation ul:hover li ul li ul {
    display: inherit;
}

این باعث می شود موارد سطح دوم و سوم شما زمانی که کاربران روی آنها قرار می گیرند قابل مشاهده باشند.

مرحله 3: منوی مگا را سفارشی کنید

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

ایجاد ستون در مگا منو:

.mega-menu li.mega-menu-column {
  width: 25%; /* for a 4-column layout */
  float: left;
  padding: 10px;
}

سفارشی کردن رنگ، بالشتک و سبک متن برای هر آیتم منو:

.mega-menu ul.mega-sub-menu li a {
  color: #555;
  padding: 8px 15px;
  display: block;
  text-decoration: none;
}

بهینه سازی طرح منو برای نمایش موبایل:

@media screen and (max-width: 767px) {
  .mega-menu li.mega-menu-column {
    width: 100%;
    float: none;
  }
}

اینکه آیا این تکه کدها همانطور که در نظر گرفته شده کار خواهند کرد یا نه بستگی دارد روی بقیه ساختار CSS و HTML سایت شما. به همین دلیل مهم است که هر کد را آزمایش کنید و در صورت لزوم تنظیم کنید.

بهترین افزونه های مگا منو وردپرس

در حالی که امکان ایجاد یک مگا منو در وردپرس بدون افزونه وجود دارد، این روش دستی برای کاربرانی که تجربه کمی یا بدون برنامه نویسی دارند مناسب نیست. اگر کاملا مبتدی هستید، بهتر است از افزونه های منوی وردپرس برای ساده سازی کل استفاده کنید process.

پیشنهاد می‌کنیم بخوانید:  چگونه Selinux را غیرفعال کنیم روی CentOS 7

جدا از Max Mega Menu، در اینجا سه ​​بهترین افزونه وردپرس برای ایجاد یک مگا منو آورده شده است. می توانید نصب کنید چهار منو از دایرکتوری افزونه وردپرس، در حالی که WP Mega Menu Pro و JetMenu فقط در بازارهای شخص ثالث در دسترس هستند.

1. QuadMenu

فرود page از QuadMenu در فهرست پلاگین وردپرس
فرود page از QuadMenu در فهرست پلاگین وردپرس
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 43

چهار منو یک افزونه مگا منوی وردپرس منبع باز و بومی است که طیف گسترده ای از تم ها و مکان ها را ارائه می دهد.

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

برنامه های حرفه ای در شروع می شود 49 دلار در سال، ویژگی های اضافی مانند برگه ها، ورود به سیستم، ثبت نام، منوهای اجتماعی و چرخ فلک را ارائه می دهد.

2. WP Mega Menu Pro

فرود page از منوی مگا WP on سایت mythemeshop
فرود page از منوی مگا WP on سایت mythemeshop
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 44

WP Mega Menu یک سازنده منوی مگا با کاربری آسان است که برای مبتدیان طراحی شده است. راه اندازی فوری را ارائه می دهد و به شما امکان می دهد فوراً مگا منوهای پاسخگو ایجاد کنید.

با وجود تمرکز آن روی کاربر پسند بودن، این افزونه مگا منو وردپرس قابلیت های سفارشی سازی گسترده ای را ارائه می دهد. شما به راحتی می توانید فونت ها، انواع منوها، ابرداده های پست، طرح های رنگی منو و انیمیشن های منو را تغییر دهید.

WP Mega Menu فقط در نسخه پریمیوم موجود است. هزینه دارد 19 دلار / مجوز برای سایت های نامحدود با به روز رسانی یک ساله و پشتیبانی اولویت دار.

3. JetMenu

فرود page از JetMenu on سایت کروکوبلاک
فرود page از JetMenu on سایت کروکوبلاک
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 45

JetMenu یک افزونه ممتاز برای ایجاد یک منوی مگا وردپرس با تصاویر، ویدئوها، رکوردهای صوتی و انواع دیگر محتوای تعاملی است.

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

یکی دیگر از ویژگی های برجسته مگا منو مدیریت از پیش تعیین شده است که به شما امکان می دهد چندین الگو را برای منوهای مختلف ایجاد و ذخیره کنید.

مزایای استفاده از مگا منو وردپرس

در مقایسه با منوهای سنتی، استفاده از مگا منو در وردپرس مزایای متعددی را برای وب سایت شما به ارمغان می آورد:

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

منوی مگا وردپرس جایگزین

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

این امر به ویژه در صورتی مناسب است که سلسله مراتب منوی ساده ای دارید و می خواهید طراحی سایت وردپرس را تمیز نگه دارید.

روش ایجاد منوهای کشویی از طریق تم کلاسیک

اگر از یک تم کلاسیک استفاده می کنید، در اینجا روش ایجاد یک منوی کشویی با استفاده از Customizer WordPress آورده شده است:

  1. وارد داشبورد وردپرس خود شوید و به آن بروید ظاهر شخصی سازی.
  2. در رابط Customizer، را انتخاب کنید منوها و منوی موجود خود را انتخاب کنید. در غیر این صورت، یک مورد جدید ایجاد کنید.
  3. کلیک موارد را اضافه کنید برای افزودن صفحات یا پست های جدید
  4. منوهای فرعی را به صورت سلسله مراتبی با کشیدن آنها به پایین و کمی به سمت راست مورد اصلی مرتب کنید.
رابط سفارشی ساز وردپرس که نحوه چیدمان ساختار منو را نشان می دهد
رابط سفارشی ساز وردپرس که نحوه چیدمان ساختار منو را نشان می دهد
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 46
  1. پس از اتمام، به مکان های منو و منوی کشویی خود را به قسمت مورد نظر اختصاص دهید.
  2. کلیک انتشار برای ذخیره تغییرات شما
رابط سفارشی ساز وردپرس نشان می دهد که چگونه یک منوی کشویی را به مکان مورد نظر اختصاص دهید
رابط سفارشی ساز وردپرس نشان می دهد که چگونه یک منوی کشویی را به مکان مورد نظر اختصاص دهید
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 47

روش ایجاد منوهای کشویی از طریق ویرایشگر Block

برای کاربران تم بلوک، یک منوی کشویی از طریق ویرایشگر گوتنبرگ ایجاد کنید:

  1. سر به ظاهر ویرایشگر از داشبورد وردپرس شما.
  2. در Block Editor، روی آن کلیک کنید نماد پلاس (+). در نوار منوی بالا و انتخاب کنید بلوک ها.
  3. جستجو برای جهت یابی مسدود کنید و آن را به منطقه دلخواه خود بکشید.
Block Editor با بلوک Navigation با رنگ قرمز مشخص شده است
Block Editor با بلوک Navigation با رنگ قرمز مشخص شده است
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 48
  1. هنگامی که بلوک ناوبری را اضافه کردید، به نوار کناری سمت راست بروید و آن را باز کنید تنظیمات را مسدود کنید پانل.
  2. کلیک کنید بر روی نماد پلاس (+). و انتخاب کنید پیوند صفحه برای افزودن صفحات اصلی و آیتم های زیر منو.
Block Editor با بلوک Page Link با رنگ قرمز مشخص شده است
Block Editor با بلوک Page Link با رنگ قرمز مشخص شده است
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 49
  1. برای ایجاد یک منوی کشویی، موارد زیر منو را کمی به سمت راست زیر آیتم اصلی آن‌ها بکشید. همچنین، روی نماد سه نقطه در کنار منوهای موجود خود کلیک کرده و انتخاب کنید پیوند منوی فرعی را اضافه کنید.
ویرایشگر بلوک نحوه افزودن پیوند زیر منو را نشان می دهد
ویرایشگر بلوک نحوه افزودن پیوند زیر منو را نشان می دهد
روش ایجاد یک مگا منو وردپرس با استفاده از افزونه و به صورت دستی 50
  1. از تنظیمات تب، می توانید طرح منو را تنظیم کنید و منو را به صورت عمودی یا افقی نمایش دهید.
  2. هنگامی که از ظاهر و عملکرد منوی کشویی راضی شدید، کلیک کنید انتشار یا به روز رسانی برای ذخیره تغییرات شما

نتیجه

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

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

دو راه اصلی برای افزودن یک مگا منو به سایت شما وجود دارد. برای مبتدیان، توصیه می کنیم از Max Mega Menu یا سایر افزونه ها برای ایجاد یک نوار ناوبری سطح بالا و زیر منوهای آن استفاده کنید.

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

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

سوالات متداول منوی مگا وردپرس

پاسخ سوالات متداول در مورد مگا منو وردپرس را بیابید.

آیا برای وب سایت وردپرس خود به یک مگا منو نیاز دارم؟

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

آیا منوی مگا وردپرس بر عملکرد سایت تأثیر می گذارد؟

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

آیا می توانم یک منوی مگا وردپرس را برای موبایل مناسب کنم؟

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