آموزش افزونه Max Mega Menu و اضافه کردن مگامنو به وردپرس

آموزش افزونه Max Mega Menu

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

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

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

Max Mega Menu با بالاترین کیفیت استانداردهای کدنویسی نوشته شده و به همین دلیل یک افزونه سریع و کارآمد است. همچنین باعث شده است که ادغام این افزونه با بسیاری از قالب های وردپرس به آسانی صورت بگیرد.

Max Mega Menu قابلیت سفارشی سازی بالایی دارد و دارای بیش از 100 گزینه سفارشی سازی است. این افزونه بیش از 300 هزار نصب فعال داشته و امتیاز 4.8 از 5 را کسب کرده است.

آموزش افزونه Max Mega Menu و نحوه اضافه کردن مگامنو به وردپرس

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

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

آموزش افزونه Max Mega Menu

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

در اولین قسمت آموزش افزونه Max Mega Menu نحوه فعال سازی این افزونه برای یک فهرست وردپرس را توضیح خواهیم داد.

آموزش اضافه کردن مگامنو در افزونه Max Mega Menu

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

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

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

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

آموزش افزونه Max Mega Menu

منویی که ایجاد کرده اید برای موقعیت مربوطه اش تبدیل به مگامنو می شود.

راه اندازی اولیه افزونه Max Mega Menu کامل شده است. حال در ادامه آموزش قابلیت های افزونه که شامل اضافه کردن ابزارک ها و آیکون ها به فهرست و اعمال استایل سفارشی به افزونه است را پیاده سازی می کنیم.

تنظیمات مگامنو و پیاده سازی قابلیت های افزونه

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

آموزش افزونه Max Mega Menu

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

مگامنو

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

آیتم های زیرمنو به صورت پیش فرض در یک منوی آبشاری (یا آکاردئونی flyout) در سایت نشان داده می شوند. برای تبدیل منوی آبشاری به مگامنو، بر روی دکمه مگامنو در هر یک از آیتم های سطح بالای افزونه کلیک کرده و در باکس کشویی “حالت نمایش زیرمنو” منو آبشاری را به هریک از حالت های Mega Menu-Grid Layout یا Mega Menu-Standard Layout تغییر دهید.

پس از آن هریک از آیتم های زیرمنو در یک ویرایشگر مگامنو نمایش داده می شود.

آموزش افزونه Max Mega Menu

بسته به اینکه Grid Layout یا Standard Layout را انتخاب کرده باشید، تنظیمات مختلفی به شما نشان داده می شود.

تغییر دادن تعداد ستون ها

در افزونه Max Mega Menu اگر طرح بندی استاندارد (standard layout) را انتخاب کرده باشید، می توانید مگامنوها را طوری تنظیم کنید که محتوا را بین 1 تا 8 ستون نشان دهند. زیرمنوها و ابزارک ها در این ستون ها قرار می گیرند.

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

آموزش افزونه Max Mega Menu

اگر طرح بندی شبکه (Grid Layout) را انتخاب کرده باشید می توانید ردیف های مختلف ایجاد کرده و در هر ردیف تا 4 ستون قرار دهید.

آموزش افزونه Max Mega Menu

چه طرح بندی Grid چه Standard را انتخاب کرده باشید می توانید ابزارک ها را در مگامنو شامل کنید. در ادامه آموزش افزونه Max Mega menu نحوه اضافه کردن ابزارک ها به مگامنو را توضیح خواهیم داد.

نمایش ابزارک ها در مگامنو

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

آموزش افزونه Max Mega Menu

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

برای ویرایش یک ابزارک روی آیکون آچار شکل کلیک کنید.

آموزش افزونه Max Mega Menu

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

تنظیمات

تب تنظیمات از دو قسمت تنظیمات عناصر منو و تنظیمات زیر منو تشکیل شده است.

آموزش افزونه Max Mega Menu

در قسمت تنظیمات منو می توانید:

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

در قسمت تنظیمات زیرمنو دو گزینه وجود دارد: چینش زیرمنوها و مخفی کردن زیرمنو در تلفن همراه

 در باکس چینش زیر منو ها می توانید تنظیمات منوی آبشاری یا آکاردئونی (Flyout) را انجام دهید.

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

منوهای آکاردئونی در یک زمان تنها یک سطح از منوها را نمایش می دهند و با کلیک کردن کاربر یا قرار دادن موس بر روی آیتم ها، زیر منوها نمایش داده می شوند.

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

در پایان بر روی دکمه ذخیره تغییرات کلیک کنید. در ادامه آموزش افزونه Max Mega Menu به بررسی تب آیکون می پردازیم.

 آیکون

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

آموزش افزونه Max Mega Menu

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

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

تنظیمات عمومی افزونه Max Mega Menu

با استفاده از گزینه های پیکربندی این بخش می توانید رفتار کلی افزونه Max Mega Menu (به جای رفتار هریک از منوها یا آیتم های منو) را کنترل کنید.

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

تنظیمات عمومی

به مسیر مگامنو » تنظیمات عمومی بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.

آموزش افزونه Max Mega Menu

CSS Output: افزونه Max Mega Menu به طور خودکار CSS مورد نیاز برای نمایش منو (های) شما را تولید می کند. گزینه CSS Output به شما امکان می دهد نحوه افزودن این CSS به صفحه خود را انتخاب کنید.

با انتخاب گزینه Save to filesystem که گزینه پیش فرض است، CSS به طور خودکار در دایرکتوری upload های سایت شما ذخیره شده و به سایت اضافه می شود. اگر CSS نتواند به طور خودکار ذخیره شود (به دلیل مجوزهای سرور) ، Max Mega Menu از گزینه “Output in <head>” استفاده می کند.

اگر گزینه Output in <head> انتخاب شود، CSS مینیفای شده و در یک بلوک style درون خطی قرار می گیرد:

<style type="text/css">#mega-menu-wrap-primary_navigation.......</style>

این گزینه سریع است اما باعث می شود سورس کد شما ظاهر زیبایی نداشته باشد.

گزینه Don’t output CSS باعث می شود افزونه Max Mega Menu هیچ CSS ی روی مگامنوی شما اعمال نکند. در این حالت خودتان باید کدهای CSS مورد نظر خود را اعمال کنید.

پوسته منو

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

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

برای ایجاد یک پوسته یا قالب جدید روی آیکون سه نقطه در بالای صفحه کلیک کرده و Add new theme را انتخاب کنید.

آموزش افزونه Max Mega Menu

تنظیمات خود را اعمال کرده و روی دکمه ذخیره تغییرات کلیک کنید.

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

آموزش تنظیمات رنگ مگامنو ها در افزونه Max Mega Menu

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

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

آموزش افزونه Max Mega Menu

نکته: برای تعیین رنگ قالب وب سایت می توانید از ابزار Inspect Element در فایرفاکس یا  Inspect در گوگل کروم استفاده کنید.

آموزش افزونه Max Mega Menu

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

امیدواریم از این آموزش بهره لازم را برده باشید. دیدگاههای خود را با ما در میان بگذارید.

دانلود افزونه

دانلود افزونه Max Mega Menu
صفحه افزونه Max Mega Menu

درباره ی مینا قدسی

مطلب پیشنهادی

آموزش افزونه WP Smush

آموزش افزونه WP Smush و بهینه سازی تصاویر وردپرس

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

۳ دیدگاه

  1. با سلام و خسته نباشید
    لینکی که گذاشتید، Max Mega Menu نیست بلکه افزونه چند زبانه کردن سایته!
    لطفا لینک رو اصلاح بفرمایید.

    با تشکر

  2. سلام، من وقتی می خوام تصویر در ساب منو اضافه کنم عنوان تصویر اضافه می شه ولی خود تصویر دیده نمی شه ولی سایز منو تغییر می کنه، می تونید راهنمایی کنید چکار می تونم بکنم؟

    • سلام دوست عزیز…آیا بعد از اضافه کردن تصویر روی دکمه ذخیره کلیک می کنید؟ اگر ذخیره سازی رو انجام ندید تصویر نشان داده نمی شه ولی عنوان تصویر رو مشاهده می کنید..همچنین بعد از درست کردن فهرست روی دکمه ذخیره فهرست کلیک کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *