Mega Menu by WooRockets

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

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

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

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

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

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

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

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

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

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

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

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

بیشتر بخوان بیشتر بدان  افزودن ویژگی های کاربردی به دیدگاه ها در وردپرس با Decent Comments

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

تکنیک های ضروری برای کابران مبتدی در وردپرس

کاربرد ویرایش سریع در وردپرس

آموزش نحوه ساخت ستون در وردپرس با افزونه Column Shortcodes

 

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

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

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

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

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

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

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

.

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

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

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

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

بیشتر بخوان بیشتر بدان  ساخت تب‌های ریسپانسیو در وردپرس با Tabby Responsive Tabs
افزونه مگا منو
افزونه مگا منو

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

Add element

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

Add element
Add element

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

Image

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

Image
Image

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

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

کپشن چیست؟

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

Submenu

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

Submenu
Submenu

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

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

Text

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

Text
Text

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

بیشتر بخوان بیشتر بدان  استفاده از فرم ساز واکنش گرا در وردپرس با افزونه Caldera Forms
Text

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

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

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

Styling

Styling
Styling

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

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

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

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

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

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

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

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

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

منابع:

وب سایت دیجی وردپرس

وب سایت همیار وردپرس

Click to rate this post!
[Total: 1 Average: 5]
نوشته ایجاد شد 408

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

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

نوشته های مرتبط

متنی که میخواهید برای جستجو وارد کرده و دکمه جستجو را فشار دهید. برای لغو دکمه ESC را فشار دهید.

بازگشت به بالا