افزونه 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 می پردازیم.
?مگامنو
مگامنو نامی است که به یک پنل بزرگ محتوا داده می شود. این پنل وقتی بر روی آیتم های منو کلیک کرده یا هاور می کنید، در زیر آیتم ها نشان داده می شود. مگامنوها می توانند شامل آیتم های زیرمنو و ابزارک ها باشند.
آیتم های زیرمنو به صورت پیش فرض در یک منوی آبشاری (یا آکاردئونی flyout) در سایت نشان داده می شوند. برای تبدیل منوی آبشاری به مگامنو، بر روی دکمه مگامنو در هر یک از آیتم های سطح بالای افزونه کلیک کرده و در باکس کشویی “حالت نمایش زیرمنو” منو آبشاری را به هریک از حالت های Mega Menu-Grid Layout یا Mega Menu-Standard Layout تغییر دهید.
پس از آن هریک از آیتم های زیرمنو در یک ویرایشگر مگامنو نمایش داده می شود.
بسته به اینکه Grid Layout یا Standard Layout را انتخاب کرده باشید، تنظیمات مختلفی به شما نشان داده می شود.
?تغییر دادن تعداد ستون ها
در افزونه Max Mega Menu اگر طرح بندی استاندارد (standard layout) را انتخاب کرده باشید، می توانید مگامنوها را طوری تنظیم کنید که محتوا را بین 1 تا 8 ستون نشان دهند. زیرمنوها و ابزارک ها در این ستون ها قرار می گیرند.
از سلکتور کشویی که در گوشه بالای صفحه قرار دارد استفاده کرده و تعداد ستون های مگامنو را طبق نیازهای سایت خود تغییر دهید.
اگر طرح بندی شبکه (Grid Layout) را انتخاب کرده باشید می توانید ردیف های مختلف ایجاد کرده و در هر ردیف تا 4 ستون قرار دهید.
چه طرح بندی Grid چه Standard را انتخاب کرده باشید می توانید ابزارک ها را در مگامنو شامل کنید. در ادامه آموزش افزونه 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 در پیشخوان وردپرس روی زیرمنوی مگامنو کلیک کنید. این صفحه از تب های مکان مگامنو، پوسته منو، تنظیمات عمومی و ابزار تشکیل شده است. در ادامه آموزش به بررسی این تب ها می پردازیم.
?تنظیمات عمومی
به مسیر مگامنو » تنظیمات عمومی بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.
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 را انتخاب کنید.
تنظیمات خود را اعمال کرده و روی دکمه ذخیره تغییرات کلیک کنید.
برای اعمال قالب جدید به مگامنو باید مجدداً به مسیر نمایش » فهرست ها بازگشته و از باکس تنظیمات مگامنو، قالب جدید را در منوی کشویی مربوط به قالب انتخاب کنید.
برای سفارشی سازی رنگ مگامنو و هماهنگ سازی آن با رنگ قالب سایت باید در صفحه پوسته منو وارد تب نوار منو شوید.
در قسمت پس زمینه منو رنگ کلی قالب سایت خود را وارد کرده و تغییرات را ذخیره کنید.
نکته: برای تعیین رنگ قالب وب سایت می توانید از ابزار Inspect Element در فایرفاکس یا Inspect در گوگل کروم استفاده کنید.
حال می توانید به فرانت اند سایت خود مراجعه کرده و مگامنو را مشاهده کنید.
دیدگاهتان را بنویسید