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

ساخت منو در وردپرس

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

ساخت منو در وردپرس

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

شروع کار

WR mega menu- ساخت منو در وردپرس

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

all profiles- ساخت منو در وردپرس

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

add new-ساخت منو در وردپرس

در این قسمت هر مگامنویی را که ایجاد کنید نمایش داده می‌شود. که در حال حاضر ما هیچ مگامنویی را ایجاد نکرده‌ایم و این قسمت کاملا خالی است. برای این که اولین مگامنوی رایگان را به کمک این افزونه ایجاد کنیم روی گزینه ی Add New در بالای این صفحه کلیک می‌کنیم.

title-ساخت منو در وردپرس

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

مثال

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

build megamenu-ساخت منو در وردپرس

بعد از فعال کردن آیتم، با مأوس روی گزینه ADD ROW بروید و حالت مگامنو را تعیین کنید. به عنوان مثال ما تعیین کردیم که تعداد 3 ستون به عرض مساوی وقتی روی آیتم “خدمات ما” هاور شد، نمایش داده شود(همان طور که در تصویر مشاهده می‌کنید). بعد از اضافه شدن ستون‌ها می‌توانید محتوایی مورد نظر را در آن‌ها قرار دهید.

Add element

در هر ستون اگر بر روی گزینه ADD ELEMENT کلیک کنید می‌توانید محتوای مورد نظرتان را وارد کنید.

add element-ساخت منو در وردپرس

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

Image

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

image-ساخت منو در وردپرس

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

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

کپشن چیست؟

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

  افزونه عضویت ویژه حرفه ای با درگاه پرداخت ایرانی + آموزش ویدیویی

Submenu

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

menu-ساخت منو در وردپرس

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

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

Text

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

text-ساخت منو در وردپرس

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

تنظیمات-ساخت منو در وردپرس

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

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

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

Styling

styling-ساخت منو در وردپرس

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

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

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

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

result-ساخت منو در وردپرس

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

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

موفق باشید…

افزونه فارسی سازی و راست چین شده است.

ویدئوی آموزشی

دانلود ویدئوی آموزشی

ویدئوی آموزشی

دانلود افزونه Mega Menu by WooRockets

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

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

324,207 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 3 سال عضو همیار وردپرس

    سلام میشه برای هر برگه یک منو جدا گانه تعریف کرد مثلا صفحه اصلی منو شماره 1 و صفحه مثلا x منوی شماره 2 داشته باشه؟

    • 6 سال عضو همیار وردپرس

      سلام
      بله امکان ساخت چندین منوی مختلف وجود دارده. اما به شرطی می‌توانید در هر صفحه یک منوی خاص داشته باشید که قالب مورد نظر اجرای چنین امکانی رو داشته باشه.

  2. 3 سال عضو همیار وردپرس

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

  3. This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

  4. 2 سال عضو همیار وردپرس

    سلام
    وقت همگی دوستان بخیر یه سوال داشتم
    چطور میتونم منوی سایت وردپرسی رو بزارم زیر هدر و موقعی که صفحه اسکرول میشه منو هم اسکرول بشه و تا بالای صفحه بیاد و ثابت بمونه؟
    مثل سایت ieng-group.com
    ممنون از محبت همگی

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

  6. 4 سال عضو همیار وردپرس

    با سلام خدمت دوستان
    افزونه و یا راهکاری میشناسید که منوی شبیه به بهش باهاش در اورد؟
    خیلی گشتم ولی منویی که بشه برای هر قسمت رنگ مجزا گذاشت و هر کدوم مشخصات مخصوص به خودش را داشته باشه پیدا نکردم.
    لطفا راهنمایی بفرمائید.

  7. 4 سال عضو همیار وردپرس

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

    مرسی از همیاریتون

  8. سلام چرا هیچی نمیشه دانلود کرد وارد سایت هم نمیشه شد ایمیل دانلودم ارسال نمیشه
    من به افزونه فارسی wr-megamenu خیلی احتیاج دارم. تمام فایلای css رو داخلش تغییر دادم float ها و… اما بازم درست نشد .

  9. سلام و خسته نباشید میخواستم لوگو رو که بالای main menu هست رو بزارم داخل نوار منو بزارم باید آدرس عکس رو با چه کدی تو چه فایلی بزارم همونجایی قالب انفولد هست میخوام لوگو رو بیارم تو جایی که تو عکس مشکی کردم http://dr-baha.ir/wp-content/uploads/2017/09/2017-09-06_5-01-28.jpg

  10. 2 سال عضو همیار وردپرس

    سلام خیلی نیاز دارم اگه به روز نمیکنید نسخه اصلی کدد css زاست چین بگید

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

  12. 2 سال عضو همیار وردپرس

    سلام خشته نباشید
    ممنون از اموزش خوبتون فقط منو ها راست چین نیت مثل اینه

  13. 3 سال عضو همیار وردپرس

    اقا این که کار نمیکنه منو هارو نمیاره که تنظیم کنیم یکی نیست جواب کامنتا رو بده

  14. سلام من این افزونه رو نصب کردم اما تب هارو نمیاره این نوشته میاد لطفا راهنمایی کنید اشتباه از کجاست
    WR MegaMenu by WooRockets.com
    Documentation | Support

  15. 5 سال عضو همیار وردپرس

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

  16. با سلام و خسته نباشید
    افزونه را دانلود کردم اما نصب نمیشود و ارور زیر را دارد :
    در حال نصب افزونه از پرونده‌ی فرستاده شده: wr-megamenu-hamyarwp (1).zip

    گشودن بسته‌ی فشرده شده…

    این بسته نمی‌تواند نصب شود. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    بازگشت به نصب‌کننده‌ی افزونه‌هاقالب مورد استفاده spaciouce میباشد

    لطفا راهنمایی بفرمایید

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

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

  19. سلام.
    چطور میشه برای بک گراند مگا منوها عکس گذاشت؟

  20. باسلام وقت بخير
    ميخاسم عرض مگا منو رو كاهش بدم بين هر دسته از كدوم مسير ميتونم اين كارو انجام بدم؟
    خود قالب مگا منو داره و من افزونه اي نصب نكردم قالب shopkeeper
    باتشكر

    lezzatekardasti.ir/sina

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

  22. سلام
    بعد از اینکه پلاگین رو نصب کردم سایت دان شد
    راهی برای غیرفعال کردنش وجود داره ؟
    مرسی

  23. 3 سال عضو همیار وردپرس

    با سلام
    امکانش هست این افزونه با همه قالب ها کار نکنه؟؟؟
    من از قالب موسایی استفاده میکنم
    وقتی میرم بخش افزودن منو اصن مشابه اموزش منو هایی که ساختم باز نمیشه!!!

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

  25. 3 سال عضو همیار وردپرس

    سلام
    بنده نسخه اصلاح شده شما رو دانلود کردم ولی باز هم مشکل راست چین نبودن و بهم ریختن منوی سایت رو دارم…
    میشه طلفا راهنمایی کنید؟

    با تشکر

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

  27. سلام با تشکر از زحمات و اموزش های خیلی خوبتون
    میخواستم بدونم اپدیت جدید رو کی قرار میدید؟ میخوام این افزونه رو نصب کنم ولی برای سال 93 هستش ممنون میشم اپدیت جدیدش رو قرار بدید

  28. 3 سال عضو همیار وردپرس

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

  29. این افزونه روی قالب فروت فول چرا کار نمیکنه وقتی نصبش میکنم منو فقط vertical هست روی هرچی که باشه چه هریزنتال چه ورتیکال
    باید چکارش کنم؟؟؟؟؟؟؟؟؟

  30. سلام و درود فراوان
    من این افزونه روی قالب انفولد نصب کردم . اما متاسفانه وقتی میخام شروع به کار کنم ، صفحه به این شکل در میاد . حالت لودینگ میشه و تو همین حالت می مونه.
    http://8pic.ir/images/50exj0umqdmns61euycp.jpg

    لطفا راهنمایی کنید.
    با تشکر

  31. 3 سال عضو همیار وردپرس

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

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

    • من هم این مشکل رو داشتم و پیشنهاد می کنم از این روش استفاده کنید:
      به صفحه مگامنو برید، و وارد یکی از دسته بندی هاتون بشید؛ در آخر صفحه عرض منو رو 1200 بزارید.

  33. 4 سال عضو همیار وردپرس

    سلام
    ممنون میشم دوباره ورژن جدید رو راست چین کنید
    یا اموزش بزارید
    این ورژن دیگه کار نمیکنه

  34. سلام
    این افزونه چرا تو وردپرس من درست و حسابی باز نمی شه بعضی جاهاش؟
    مثلا یه دایره میاد که داره می چرخه دیگه بعدش هیچی نمیاد

  35. واقعا عالی بود مرسی

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

  37. آقا تو رو خدا منو کمک کنید
    تو هر زمینه وردپرس هرکاری خواستم تونستم انجام بدم ولی این یه مورد مگامنو دهنی ازم سرویس کرده که نگو!
    واقعا راه حلی براش نتونستم پیدا کنم
    تو مگا منو چطور عکس قرار می دهند؟
    با وجود داشتن قابلیت مگامنو در قالب هایی که تست گرفتم (10 مدل قالب با ایمپورت کردن سمپل) ولی من همچین گزینه ای نتونستم پیدا کنم که بتونم عکس در مگا منو بذارم
    انواع و اقسام افزونه ها هم نصب کردن ولی به نتیجه نرسیدم
    تو سایت های فارسی هم چیزی پیدا نکردم
    خواهشا کمک فرمایید

    • 6 سال عضو همیار وردپرس

      با احترام
      هر قالب یا افزونه تنظیمات متفاوتی دارد
      از قالبی استفاده کنید که مطمئن هستید چنین امکانی را دارد و بعد مستندات آن قالب را در اینترنت پیدا کنید ( یا از فروشنده آن قالب پشتیبانی بگیرید)

    • ممنون آره به مستندات قالب حواسم نبود
      اما امیدوارم بتونم به نتیجه ی درستی برسم
      ضمنا می تونم رو همین قالبم بهت مدیریت بدم یه نگاه بندازی؟ اگر بله لطفا ادرس ایمیل یا راه ارتباطی را برام بفرستید
      ممنون

    • 6 سال عضو همیار وردپرس

      با احترام
      تیم همیار وردپرس امکان چنین کاری را ندارد.

  38. قالب unite از فهرست های زیر مجموعه دار پشتیبانی نمیکنه؟

  39. سلام. میشه منوی news این سایت رو نگاه کنید
    http://www.edmsauce.com/
    در این منو سه تا زیر منو وجود داره که با hover روی هر کدوم اخبار مربوط به اون بخش در خود مگامنو دیده می شه، آیا مگامنوی خاصی برای این کار استفاده می شه؟ ممنون می شم راهنمایی کنید یه همچین قابلیتی رو چطور می شه پیاده سازی کرد؟

  40. با سلام و عرض خسته نباشید
    افزونه‌ی بسیار جالب و کاربردی هست. اما مشکلی که من با اون مواجه شدم اینه که کادر مربوط به برگه‌ها هست یعنی در قسمت add new کادر مربوط به برگه‌ها هست اما خالی است! افزونه‌ی انگلیسی آن را هم نصب کردم اما مشکل باز هم حل نشد.

مطالب زیر را حتما بخوانید

دوره‌های آموزشی