افزونه Hero Menu

افزونه Hero Menu

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

اگرچه فهرست پیش فرض وردپرس معمولاً براساس قالب شما طراحی می شود، با این حال می توانید از افزونه ها برای دسترسی به ویژگی های بهتر و پیشرفته تر استفاده کنید.Hero Menu افزونه ای است که با استفاده از سازنده کشیدن و رها کردن آن می توانید انواع فهرست ها شامل مگامنوها را به راحتی بسازید. این افزونه گزینه های سفارشی سازی بسیار زیادی مانند بیش از 60 رنگ از پیش تنظیم شده، 650 فونت گوگل و پس زمینه قابل سفارشی سازی دارد.

افزونه Hero Menu به شما امکان می دهد فهرست های کشویی و سفارشی ایجاد کنید. همچنین به شما امکان می دهد از بیش از 270 آیکون مختلف استفاده کرده و قیمت محصولات و تصاویر بندانگشتی را در فهرست نشان دهید.

منوهای ساخته شده با افزونه Hero Menu کاملاً رسپانسیو بوده و در تمام دستگاه ها به خوبی نشان داده می شود. همچنین می توانید آیتم ها را از فهرست مخفی کنید و کاربران خاصی را هدف قرار دهید. افزونه Hero Menu افزونه ای است که جزء افزونه های ضروری وردپرس برای کسب و کارهای آنلاین است.

❇️آموزش افزونه Hero Menu فهرست ساز قدرتمند وردپرس

افزونه Hero Menu نسخه رایگان نداشته و به صورت پرمیوم عرضه شده است. بنابراین در ابتدا افزونه را خریداری نمایید. سپس مانند هر افزونه دیگری آن را در سایت خود در بخش افزونه ها نصب کنید

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس منوی جدیدی به نام Hero Menu اضافه می شود.

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

❇️ساخت اولین فهرست با افزونه Hero Menu

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

با کلیک بر روی این دکمه، باکس اضافه کردن منوی جدید نشان داده می شود.

یک نام برای فهرست جدید خود اضافه کرده و روی دکمه Add کلیک کنید.

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

این صفحه از دو تب تشکیل شده است. در تب Layout And Order می توانید طرح بندی و ترتیب آیتم ها را مشخص کنید و در تب Navigation Structure می توانید ساختار ناوبری را تنظیم نمایید.

در تب Layout & Order چند دکمه را مشاهده می کنید که با فعال/غیرفعال کردن آنها می توانید انتخاب کنید که کدام گزینه ها را می خواهید در منوی ناوبری خود فعال کنید.

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

❇️اضافه کردن آیتم های فهرست

در تب Navigation Structure می توانید آیتم های منو را اضافه کنید.

از فهرست سمت چپ، صفحاتی که می خواهید به منو اضافه کنید را انتخاب نمایید.

پس از انتخاب صفحات، روی دکمه “Add to menu” کلیک کنید.

این قسمت بسیار شبیه سازنده استاندارد فهرست وردپرس است، بنابراین استفاده از آن برای شما بسیار ساده است.

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

• صفحات
• مگا منو
• لینک های سفارشی
• دسته ها

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

❇️ویرایش آیتم های فهرست با افزونه Hero Menu

1. برای ویرایش آیتم ها، روی آیکون مداد کنار هر آیتم کلیک کنید. پس از آن می توانید تمام المان هایی که می خواهید تغییر دهید یا ویرایش کنید را مشاهده کنید.
2. با کلیک کردن بر روی دکمه آیکون می توانید آیکون ها را به هر آیتم اضافه کنید.
3. افزونه Hero Menu آیکون های رایگان زیادی را در اختیار شما قرار می دهد تا هر کدام که متناسب با نیازهای سایت تان است را انتخاب کنید. با کلیک بر روی لینک change Icon آیکون مورد نظر خود را انتخاب کنید.
4. اندازه و رنگ آیکون ها نیز قابل ویرایش هستند.
5. حذف یک آیتم ناوبری با کلیک بر روی آیکون “سطل زباله” کنار آیکون ویرایش می تواند انجام شود.

?استایل دهی فهرست

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

تنظیمات پیش فرض افزونه Hero Menu به شکلی طراحی شده است که برای هر وب سایتی مناسب باشد. بنابراین می توانید همه تنظیمات را همانطور که هست باقی بگذارید.

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

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

?انتخاب مکان فهرست

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

به مسیر Settings » Menu Integration » Select Location بروید و یک مکان را انتخاب کنید. برای جایگزین کردن منوی استاندارد وردپرس که با قالب شما ارائه می شود، از منوی کشویی گزینه “Primary” را انتخاب کنید. این گزینه باید جایگزین منوی اصلی وردپرس شما شود.

توجه داشته باشید که لیبل های موقعیت مکانی فهرست بسته به قالب شما ممکن است متفاوت باشد. بیشتر قالب ها دارای گزینه های Primary ، Main و Secondary هستند.

?ادغام دستی با استفاده از شورت کد

شورت کد زیر را به یکی از نوشته ها / برگه های سایت خود اضافه کنید ، به یاد داشته باشید که روی بروزرسانی کلیک کنید.

[hmenu id=1]

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

?ادغام دستی do_shortcode

کد زیر در فایل header.php خود را پیدا کنید:

<header id="masthead" class="site-header">
<div id="navbar" class="navbar"><nav id="site-navigation" class="navigation main-navigation"><button class="menu-toggle"><!--?php _e( 'Menu', 'twentythirteen' ); ?--></button>
<!--?php _e( 'Skip to content', 'twentythirteen' ); ?-->
<!--?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?-->
<!--?php get_search_form(); ?--></nav><!-- #site-navigation -->
</div>
</header>

و با کد زیر جایگزین کنید.

<?php echo do_shortcode( '[hmenu id=1]' ) ?>

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

❇️اضافه کردن مگامنو با استفاده از افزونه Hero Menu

در تب Navigation Structure می توانید یک مگامنو به فهرست خود اضافه کنید.

هنگامی که مگامنو را اضافه کردید، روی آن کلیک کنید تا باکس تنظیمات آن باز شود.

یک طرح بندی انتخاب کنید و برای اضافه کردن محتوا روی دکمه Add Content کلیک کنید. باکس اضافه کردن محتوا به صورت زیر به شما نشان داده می شود.

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

نوع محتوای مورد نظر خود را انتخاب کنید. سپس پنجره تنظیمات آن به شما نشان داده خواهد شد.

بسته به نوع محتوایی که انتخاب می کنید، تنظیمات متفاوتی به شما نشان داده خواهد شد.

به عنوان مثال اگر نوع محتوا را متن انتخاب کنید، تنظیمات زیر به شما نشان داده می شود.

در صورت نیاز می توانید یک عنوان به ستون خود اختصاص دهید و  بسته به اولویت طراحی خود، underline را انتخاب کنید.

❇️ویرایش کردن مگامنو

با کلیک بر روی آیکون مداد می توانید مگامنوی خود را ویرایش کنید.

1. با کلیک بر روی دکمه “Layout” ، طرح مورد نظر خود را انتخاب کنید. افزونه Hero Menu به شما 8 طرح متداول برای مگامنوها را نشان می دهد.
2. با کلیک بر روی دکمه های “Add Content” محتوای مورد نظر خود برای اضافه کردن به هر ستون را انتخاب کنید.
3. با کلیک بر روی نماد مربوط به هر محتوا، نوع محتوای موردنظر برای نمایش را انتخاب کنید. سپس یک پنجره به شما نشان داده می شود که می توانید محتوای خود را برای آن ستون اضافه یا ویرایش کنید. برای کسب اطلاعات بیشتر در مورد محتوای Mega Menu به تب ” Mega Menu Elements ” در بالای صفحه مراجعه کنید.
4. شما می توانید یک آیکون را به آیتم منو خود اضافه کنید که در نوار منوی اصلی شما نمایش داده می شود.
5. اگر نمی خواهید مگامنو را در صفحات وب سایت خود نمایش دهید Nav item active را غیرفعال کنید.
6. در صورت تمایل می توانید مگامنو خود را از روی صفحه نمایش تلفن همراه پنهان کنید.
7. یک تصویر پس زمینه به مگامنو خود اضافه کنید. تصاویر می توانند PNG یا Jpeg باشند. همچنین می توانید موقعیت قرارگیری آنها را نیز تنظیم کنید.

• آیتم ها قابل حذف، ویرایش و کشیدن به چپ و راست برای تغییر ترتیب قرارگیری ستون ها هستند.
• برای استایل دهی به مگامنو خود باید به تب Styling » Mega Menu مراجعه کنید. در این قسمت تنها چیدمان مگامنو را می توانید پیکربندی کنید.

در پایان تنظیمات روی دکمه Save کلیک کنید تا تغییرات شما ذخیره شود.