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

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

در حال حاضر یکی از چالش‌های مهم هر سایت فروشگاهی و شرکتی ساخت منو در وردپرس است. با وجود اینکه چندین افزونه منو وردپرس در مارکت‌های مختلف وجود دارد ( به عنوان مثال ساخت مگامنو در وردپرس با Max Mega Menu ) اما نحوه انجام اینکار در هر افزونه متفاوت است. به همین خاطر ما در این مقاله از همیار وردپرس قصد داریم به شما نحوه ساخت منو حرفه ای در وردپرس را به کمک افزونه QuadMenu آموزش دهیم. حتما تا انتهای این مقاله با ما همراه باشید.

آنچه در این مقاله به اختصار خواهید خواند:

  • نحوه نصب و فعالسازی افزونه منو وردپرس QuadMenu
  • طریقه ساخت منو حرفه ای در وردپرس

نحوه نصب و فعالسازی افزونه منو وردپرس QuadMenu

افزونه QuadMenu دارای بیش از 20 هزار نصب فعال بوده و برای نسخه وردپرس 4.6 و بالاتر مناسب است. مطابق شکل زیر، برای نصب و فعالسازی این افزونه به بخش افزونه‌ها و افزودن در پیشخوان وردپرس مراجعه کنید. سپس در کادر مشخص شده نام افزونه را وارد کرده و آن را نصب و فعالسازی نمایید.

نصب افزونه QuadMenu
نصب افزونه QuadMenu

طریقه ساخت منو حرفه ای در وردپرس

مطابق شکل زیر، بعد از نصب و فعالسازی افزونه بخشی به نام QuadMenu به پنل پیشخوان وردپرس شما اضافه خواهد شد.

صفحه خوش‌آمد گویی افزونه QuadMenu
صفحه خوش‌آمد گویی افزونه QuadMenu

این افزونه دارای دو بخش مهم و کاربردی زیر است:

  1. گزینه‌ها (Options)
  2. منو (Menu)

1. گزینه‌ها

مطابق شکل زیر، این بخش خود شامل 5 زیر بخش پیکربندی، واکنشگرایی، قالب پیشفرض، شخصی سازی و درون‌ریزی/برون‌بری است.

صفحه option در افزونه QuadMenu
صفحه option در افزونه QuadMenu

1.1. پیکربندی (Configuration)

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

بخش پیکربندی در افزونه QuadMenu
بخش پیکربندی در افزونه QuadMenu

اما در همین زیر بخش فهرست‌هایی که به کمک این افزونه می‌توانید بسازید را برای شما آورده است. این فهرست شامل موارد زیر هستند:

  • فهرست افقی دکستاپ
  • فهرست گسترده (عمودی) دکستاپ
  • فهرست موبایل
  • فهرست پابرگ
  • فهرست شبکه‌های اجتماعی

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

انتخاب قالب برای فهرست افقی در دسکتاپ
انتخاب قالب برای فهرست افقی در دسکتاپ

 

1.2. واکنشگرایی یا Responsive

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

1.3. قالب پیش‌فرض (Default Theme)

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

اگر تنظیمات قالب پیش‌فرض (Default Theme) مطابق سلیقه شما نبود می‌توانید مطابق شکل زیر با کلیک بر روی دکمه Create Theme قالب مورد نظر خود را از ابتدا تا انتها بسازید.

ساخت قالب در QuadMenu
ساخت قالب در QuadMenu

زیر بخش سوم خود شامل چند قسمت مجزا می‌باشد که مهمترین قسمت آن menu است.

این قسمت مطابق شکل زیر، پیکربندی و تنظیمات مربوط به قسمت‌های مختلف منو مانند رنگ پس زمینه، متن، عرض و ارتفاع، لوگو، لینک‌ها، هاورها و… دارد.

پیکربندی و تنظیمات مربوط به قسمت‌های مختلف منو
پیکربندی و تنظیمات مربوط به قسمت‌های مختلف منو

1.4. سفارشی سازی (Customize)

در این زیر بخش می‌توانید کدهای CSS اختصاصی خود را وارد کرده و منو را مطابق نظر خودتان شخصی سازی نمایید.

1.5. درون‌ریزی/برون‌بری

در زیر بخش پنجم یعنی درون‌ریزی/برون‌بری می‌توانید تنظیماتی را که اعمال برای ساخت منو حرفه ای در وردپرس به کمک افزونه QuadMenu اعمال کردید برون‌بری کرده و در یک سایت دیگر درون‌ریزی نمایید.

  بهترین ابزارهای بک آپ گیری از وردپرس

2. منو (Menu)

بخش منو در افزونه QuadMenu
بخش منو در افزونه QuadMenu

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

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

بعد از ساخت فهرست حال باید آن را طراحی و پیاده سازی کنیم. ابتدا مطابق شکل زیر در قسمت سمت راست – QuadMenu Item – تیک گزینه Mega را زده و بر روی دکمه افزودن به فهرست کلیک نمایید.

QuadMenu Item در فهرست‌ها
QuadMenu Item در فهرست‌ها

حال مگا منو شما برای طراحی به فهرست اضافه می‌شود. مطابق شکل زیر، برای اعمال تنظیمات دلخواه و طراحی مگا منو، موس را بر روی آن ببرید و دکمه آبی QauadMenu را که ظاهر شده است بزنید.

دکمه آبی QuadMenu Item
دکمه آبی QuadMenu Item

بعد از زدن این دکمه تنظیمات مگا منوی شما باز خواهد شد. مطابق شکل زیر، این تنظیمات شامل 6 قسمت زیر است:

تنظیمات مگا منو در QauadMenu
تنظیمات مگا منو در QauadMenu
  • پیش‌فرض‌ها (Default): این قسمت مربوط انتخاب عنوان، نشانی اینترنتی و کلاس‌های CSS می‌باشد.
  • عمومی (General): در این بخش تنظیمات عمومی قرار دارد مانند قرار دادن زیر نویس برای منو.
  • آیکون (Icon): در این قسمت می‌توانید آیکون مورد نظر خود را انتخاب کنید.
  • پس‌زمینه (Background): این بخش مربوط به انتخاب رنگ و تصویر پس زمینه مگا منو شما می‌باشد که می‌توانید برای آن ابعاد تعیین کرده و نحوه نمایش آن را نیز مشخص نمایید.
  • پهنای منو (Width): در این قسمت همانطور که از نامش پیداست باید پهنای منوی خود را انتخاب نمایید.
  • ستون‌ها (Columns): ستون‌ها مهمترین بخش طراحی مگا منو می‌باشد. در این قسمت شما باید تعیین کنید که در مگا منوی شما چه محتوایی و با چه ساختاری قرار بگیرید. در این قسمت باید تعیین نمایید که هر محتوا جند ستون از سایت شما را پر کند. کمترین تعداد ستون 1 است بیشترین تعداد ستون 12 می‌باشد.

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

تنظیمات ستون در مگا منو
تنظیمات ستون در مگا منو

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

افزودن المان به مگا منو در افزونه منو وردپرس QauadMenu
افزودن المان به مگا منو

در این مثال ما قصد داریم مگا منوی‌مان را در 3 بخش پیاده سازی نماییم. که در بخش اول تقویم، بخش دوم کادر جستجو و در بخش سوم چند تصویر قرار خواهیم داد. در نهایت خواهیم داشت:

منوی ساخته شده با افزونه منو وردپرس QauadMenu
منوی ساخته شده با افزونه منو وردپرس QauadMenu

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

در نهایت توجه داشته باشید که به کمک افزونه منو وردپرس QuadMenu شما می‌توانید منوهای عمودی نیز بر اساس سلیقه خود طراحی نمایید. ما در این مقاله تمامی بخش‌های این افزونه را به طور کامل مورد بررسی قرار دادیم و یک منو افقی نیز طراحی کردیم. حال نوبت شماست که مطابق میل و نظرتان منوهای جذاب افقی و عمودی ایجاد نمایید. از توجه شما به این مقاله آموزشی سپاس‌گزاریم. لطفا سوالات و نظرات خود را در بخش دیدگاه‌ها با ما به اشتراک بگذارید.

آموزش ویدیویی افزونه QauadMenu

دانلود افزونه QauadMenu

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

سوالات متداول

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

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

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

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

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

    سلام
    من این افزونه رو نصب کردم همه چیز درسته اما توی قسمتی که انتخاب می کنیم منو بچسبه بالای صفحه گزینش غیر فعاله
    ممنون

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

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

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

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

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

    با سلام من با نصب این افزونه همه کارهای رو که گفته بودید انجام دادم ولی به دو مشکل برخوردم
    اول این که کلاً فهرستم چپ چین شد
    دوم ایکون ها با حروف فهرستم تداخل دارن از همون پوسته ای که شما استفاده کرده اید استفاده کردم
    برای رفع این دو مشکل چه کاری رو باید انجام بدم

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

      با احترام
      انشالله سعی می کنم تا اخر این هفته این افزونه رو بروزرسانی کنم.

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

    سلام دوباره
    افزونه مگا منو واکنش گرا سراغ ندارید؟

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

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

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

    با سلام و احترام:
    توی پیش نمایش این افزونه به نظرم واکنش گرا نیست .
    روش که میزنی هیچی نمیاد. روی کامپیوتر وگوشی امتحان کردم خواهش می کنم راهنماییم کنید.
    با تشکر امین اصغری ۱۳ ساله از شیروان.

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

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

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

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

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

      با احترام
      شما ایکون ها رو انتخاب می کنید و نمایش نمیده؟
      یا اینکه کلا چنین گزینه ای ندارید؟

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

    موقعی که میخوام با افزونه کار کنم فقط لود میشه و اون چرخونک وسط نمیره!چی کار کنم؟

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

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

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

    حسین جان گوینده خوبی هستی میتونی گویندگی کنی خیلی باحاله صدات

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

    سلام
    افزونه ی کاربردی خوبیه ممنون.
    فقط یه سوال در صفحه فهرست ها اونجا که از قسمت “جایگاه ها در پوسته” فهرست پیمایش انتخاب کردید، واسه من گزینه ای برای انتخاب وجود نداره.
    با تشکر

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

      با احترام
      بسته به قالب نام های مختلفی در انجا هست.
      این ها نام های فهرست های قالب شما هست.

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

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

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

      با احترام
      انگار شما ویدئو رو خیلی دقیق نگاه کردید 🙂
      Alexa Traffic Rank
      Awesome Screenshot: Screen capture, Annotate
      Page Analytics (by Google)
      SEO Site Tools, Site Analysis
      Wappalyzer
      Wordpress Site Manager