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

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

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

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

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

شروع کار

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

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

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

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

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

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

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

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

مثال

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

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

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

Add element

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

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

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

Image

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

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

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

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

کپشن چیست؟

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

  افزایش ویژگی‌های محصولات در ووکامرس با YITH WooCommerce Product Add-Ons

Submenu

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

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

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

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

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

دانلود صفحه افزونه دانلود نسخه حرفه‌ای
راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام همیار وردپرس

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

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

۲۷۱,۱۰۱ نفر

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

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

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

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

  2. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    lezzatekardasti.ir/sina

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

محبوبترین‌های آموزش آنلاین

  • دوره ۱۴ جامع وبمستران هوشمند

    ۶.۸ میلیون تومان ۵.۸ میلیون تومان
    ساخت کسب‌و‌کار اینترنتی امروزه یکی از اساسی‌ترین کارها برای ایجاد یا توسعه درآمدزایی است. هر ایده‌ای که دارید میتوانید آنلاین در فضای اینترنتی راه اندازی نمایید فقط کافیست که بخواهید. یا اگر چندین سال است...
  • دوره جامع آپ استارتاپ

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

    ۴.۱ میلیون تومان ۲.۹ میلیون تومان
    گرافیک هنر نیست گرافیک یک علم است . حتماً شما از اهمیت یک طراحی خوب اطلاع دارید. رقابت فشرده تبلیغاتی کسب وکارهای کوچک و بزرگ در هر رسانه‌ای همیشه به چشم می‌خورد، در این ترافیک تبلیغات یک طرح خوب و یک ارائه...
مشاهده همه آموزش‌های آنلاین