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

قبل از اینکه به سراغ کد نویسی برویم ، باید در این مورد صحبت کنیم که اجرای یک مگا منو می تواند روش های متفاوتی داشته باشد. ما در اینجا از ترکیب Menu locations , Menu items , widget areas  استفاده می کنیم.

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

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

در ابتدا ما نیاز داریم تا یک جایگاه منو (Menu location) جدید ثبت کنیم.دلیل اینکار این هست که بتوانیم در مکان مورد نظر خودمان ، مگا منو وردپرس را نمایش دهیم. برای اینکار نیاز داریم تا تغییراتی در فایل Functions.php ایجاد کنیم. این فایل را باز کنید و کد زیر را به آن اضافه کنید و سپس آن را ذخیره کنید

function pedram_megamenu() {
    register_nav_menus( array(
        'mega_menu' => 'Mega Menu'
    ));
}
add_action( 'after_setup_theme', 'pedram_megamenu' );

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

همانطور که می بینید ما یک منو با نام مگامنو تعریف نمودیم و جایگاه قرارگیری آن را بر روی Mega Menu تنظیم نمودیم.

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

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

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

نام کلاسی که من در نظر گرفتن “has-mega-menu” هست (شما می توانید به دلخواه هر نامی را انتخاب کنید). این کلاس را به سر منوهایی که به شکل مگا منو هستند اختصاص می دهیم

ساخت سایدبار و ویجت های مربوط به مگا منو

مگا منو وردپرس اختصاصی خود را به راحتی ایجاد کردید. حال باید تنظیم کنیم که چه محتوایی در این مگا منو نمایش داده شود.برای اینکار باید تعریف کنیم که به ازای هر سر منوی دارای کلاس “has-mega-menu” یک widget area ایجاد گردد تا محتوا توسط ویجت ها ایجاد شود. برای اینکار از هوک “widgets_init” استفاده می کنیم و یک فانکشن اختصاصی را به آن اضافه می کنیم.

این فانکشن باید تمام سر منوهایی که در قسمت “Mega Menu” قرار دارند را بررسی کند و برای آنهایی که دارای کلاس “has-mega-menu” هستند یک widget area تعریف کند.

برای اینکار کد زیر را به فایل فانکشن قالب خود اضافه کنید

function alabahar_megamenu_widget_init()
{
    $location = 'mega_menu';
    $css_class = 'has-mega-menu';
    $locations = get_nav_menu_locations();
    if (isset($locations[$location])) {
        $menu = get_term($locations[$location], 'nav_menu');
        if ($items = wp_get_nav_menu_items($menu->name)) {
            foreach ($items as $item) {
                if (in_array($css_class, $item->classes)) {
                    register_sidebar(array(
                        'id' => 'mega-menu-widget-area-' . $item->ID,
                        'name' => $item->title . ' - Mega Menu',
                        'before_widget' => '<li class="menu-sec">',
                        'after_widget' => '</li>',
                        'before_title' => '<p class="megamenu-title">',
                        'after_title' => '</p>',
                    ));
                }
            }
        }
    }
}

add_action('widgets_init', 'alabahar_megamenu_widget_init');

توجه داشته باشید که من به هر بخش داخلی مگا منو کلاس “mega-menu-inner” را اختصاص دادم که با آن عرض و ارتفاع و استایل هر بخش را تعیین کنم. و همچنین برای تیتر هر ویجت کلاس “megamenu-title” رو اختصاص دادم.

این مرحله هم به اتمام رسید. حالا اگر به بخش ابزارک ها بروید ، یک widget area با نام سر منو یا سر منو هایی که به آنها کلاس “has-mega-menu” اختصاص داده اید مشاهده خواهید کرد.محتوای دلخواه خود را در آن قرار بدید تا به مرحله بعد برویم.

نمایش محتوا

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

<ul class="menubar">
<?php
$locations = get_nav_menu_locations();
if (isset($locations['mega_menu'])) {
$menu = get_term($locations['mega_menu'], 'nav_menu');
if ($items = wp_get_nav_menu_items($menu->name)) {
foreach ($items as $item) : ?>
<?php $mega_check = is_active_sidebar('mega-menu-widget-area-' . $item->ID)?>
<li>
<a class="parent-menu <?php if ($mega_check) {echo 'have-mega';} ?>" href="<?php echo $item->url ?>">
 <?php echo $item->title;                                                                                         }                                                                                               ?>
</a>
<?php if ($mega_check) : ?>
<div id="mega-menu-<?php echo $item->ID ?>" class="mega-menu">
<ul class="dropdown-menu mega-dropdown-menu">
<div class="container">
<?php dynamic_sidebar('mega-menu-widget-area-' . $item->ID); ?>
</div>
</ul>
</div>
<?php endif; ?>
</li>
<?php endforeach;
}
} ?>
</ul>

من برای تست یه صفحه خالی ، بدون هیچ فایل استایل یا جاوا اسکریپتی ایجاد کردم و منو را در آن نمایش دادم. همانطور که در تصویر مشاهده می کنید. منو و محتوا مگا منو نمایش داده شده است. اما به دلیل نداشتن استایل و و لود نشدن فایل جی کوئری به درستی نمایش داده نشده است.

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

ابتدا یک پوشه ایجاد کنید (نام پوشه من assets می باشد). در این پوشه دو فایل با نام custom.js و  megamenu.css ایجاد نمایید و محتوای آنها را مطابق زیر تکمیل نمایید.

jQuery( document ).ready(function ($) {
    $('.have-mega').toggle(
        function() {
            $(this).next(".mega-menu").children(".mega-dropdown-menu").slideDown()
        },
        function() {
            $(this).next(".mega-menu").children(".mega-dropdown-menu").slideUp()
        }
    );
});

فایل CSS

برای زیبا تر شدن کار من از فونت رایگان وزیر استفاده کردم که می تونید از صفحه رسمی فونت وزیر ، آن را دریافت نمایید. این فونت ها را نیز در پوشه ای با نام fonts ذخیره کردم.

body {
    direction: rtl;
}

@font-face {
font-family: "vazir";
src: url("../fonts/vazir.woff2") format("woff2"),
url("../fonts/vazir.woff") format("woff");
url("../fonts/vazir.eot") format("eot");
url("../fonts/vazir.rrf") format("ttf");
}

.parent-menu a , .mega-dropdown-menu a , .mega-dropdown-menu p{font-family: vazir}

.mega-dropdown-menu {
    display: none;
    padding: 0px;
}
.parent-menu{
    display: inline;
}
.mega-menu-inner {
    display: inline-block;
    width: 30%;
    padding: 0px 20px;
    text-align: justify;
}
.menu-bar li {
    color: white;
    text-align: right;
    list-style: none;
    display: inline-block;
    font-size: 12px;
}
.menubar {
    background: black;
    padding: 0px;
}
.mega-menu {
    background-color: #05ffba;
}
.parent-menu a {
    color: white;
    display: inline-block;
    padding: 10px 10px;
    text-decoration: none;
}
.caret {
    margin-left: initial;
    margin-right: 2px;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

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

function pedram_scripts()
{
    //ADD Jquery JS (If your template does not have jQuery.)
    wp_enqueue_script('jquery');

    // ADD Custom JS
    wp_register_script( 'custom-script', get_template_directory_uri().'/assets/custom.js', array( 'jquery'), '1', false );
    wp_enqueue_script( 'custom-script' );

    // ADD Custom Style
    wp_register_style('megamenu', get_template_directory_uri().'/assets/megamenu.css');
    wp_enqueue_style('megamenu');
}
add_action( 'wp_enqueue_scripts', 'pedram_scripts' );