ساخت منو در وردپرس با Mega Menu by WooRockets

آموزش ساخت منو در وردپرس با Mega Menu by WooRockets

در این مقاله از سئوبلک به معرفی افزونه وردپرس کاربری  Mega Menu by WooRockets برای ساخت مگا منو در وردپرس می پردازیم.
mega menu قابلیتی که امروزه اکثر سایت ها از آن استفاده می کنند.
حتی سایت دیجی وردپرس برای نمایش منو های خود از مگا منو استفاده می کند.
با من در این مقاله آموزش کار با افزونه  Mega Menu by WooRockets همراه باشید تا یک مگا منو زیبا و حرفه ای را به سایت وردپرس اضافه کنیم.

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

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

آموزش ساخت مگا منو در وردپرس با Mega Menu by WooRockets

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

شروع کار با افزونه ساخت مگا منو

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

بیشتر بخوانید:

• الگوریتم های سرچ گوگل
• خطا 417
• الگوریتم موش کور

 

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

شروع کار با افزونه مگا منو

بعد از نصب این افزونه در بخش پیشخوان سایت وردپرسی، بخشی با عنوان WR MegaMenu برای ساخت منو در وردپرس با مگامنو ایجاد شده است.

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

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

.

در قسمت بالای این صفحه ابتدا یک عنوان را برای ساخت منو در وردپرس تعیین کنید و در قسمت بعدی هم یعنی Manage Localations منویی را که می خواهید بصورت مگامنو تبدیل کنید را انتخاب کنید.
در قسمت بعدی هم مشاهده می‌کنید که تعداد آیتم منوی مورد نظر برای شما نمایش داده می‌شود.
هر آیتم را که می‌خواهید زیرمنوی مگامنو داشته باشد کافیست روی آن کلیک کنید و آن را انتخاب کنید.
و گزینه سبز رنگ Turn on MegaMenu را کلیک کنید تا مگامنو برای آن آیتم فعال شود.

با یک مثال شما را با کارکر این افزونه آشنا میکنیم:

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

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

Add element

شما برای قرار دادن محتوای مورد نظرتان در ستون ها باید به به گزینه Add element بروید.

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

Image

می‌توانید محتوای ستون مورد نظرتان را یک تصویر قرار دهید…

همانطور که در تصویر بالا مشاهده می‌کنید ما محتوای یکی از ستون‌های خودمان (ستون سوم) را بصورت تصویر قرار دادیم.
بعد از انتخاب تصویر مورد نظرتان از بخش رسانه، می‌توانید یک عنوان برای آن داشته باشید. همچنین می‌توانید:

• سایز تصویر مورد نظرتان را تغییر دهید.
• از قسمت Alt Text یک متن جایگزین در صورت لود نشدن تصویرتان تعیین کنید (متن جایگزین از نظر سئو برای موتورهای جستجو اهمیت دارد).
• از قسمت Caption یک کپشن برای تصویر داشته باشید.

کپشن چیست؟

کپشن متنی است که درون تصویر قرار میگیرد.
اگر شما برای تصویر مورد نظرتان کپشنی را تعیین کنید آن با یک بک گراند درون تصویر قرار میگیرد.
در بخش اخر هم میتوانید از بخش On Click عملی که با کلیک بر روی تصویر قصد دارید انجام شود را انتخاب کنید.

Submenu

می‌توانید محتوای ستون مورد نظرتان را یک زیر منو قرار دهید…

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

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

Text

می‌توانید محتوای ستون مورد نظرتان را یک متن ساده قرار دهید…

همانند تصویر بالا بعد از وارد کردن محتوای مورد نظرتان درون ستون‌ها می‌توانید تغییرات را ذخیره کنید.

چند نکته ی دیگر

1. از قسمت آیکون تنظیمات کنار هر آیتم امکان فعال یا غیرفعال کردن مگامنو را برای آن آیتم وجود دارد. 
2. از همان بخش همچنین می‌توانید عرض مگامنوی خودتان را تعیین کنید که تمام صفحه یا یک سایز مشخص باشد.
3. از قسمت Styling هم می توانید استایل کلی منوی خودتان را تعیین کنید.

Styling

به ترتیب در این بخش می توانید:

• Menu layout: افقی یا عمودی بودن منوی خودتان را انتخاب کنید.
• Stick menu to top: اگر مایلید با اسکرول کاربر منو به بالا چسبیده شود این گزینه را بر روی Yes قرار دهید.
• Font: می توانید فونت مورد نظرتان را انتخاب کنید.
• Background Color: بگراند منو را می توانید تعیین کنید.
• Background On Hover: بکگراندی را هم که میخواهید هنگام هاور شدن منو نمایش داده شود را میتوانید از این بخش تعیین کنید.
• Display Mode: می توانید برای آیتم های منوی خود آیکون در نظر بگیرید.
  که می توانید یکی از سه حالت: متن تنها، آیکون تنها و یا آیکون به همراه متن را انتخاب کنید.

مشاهده ی خروجی کار

بعد از اتمام کار و ایجاد مگامنو آن را ذخیره کنید و نتیجه را در خروجی مشاهده کنید…

همان طور که مشاهده می‌کنید منوی مورد نظر ما بصورت مگامنو تبدیل شده است که وقتی روی آن هاور می‌کنیم نمایش داده می‌شود.

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

موفق و پیروز باشید…