تابع wp_nav_menu در وردپرس

تابع wp_nav_menu() یکی از پرکاربردترین توابع در وردپرس است که برای نمایش منوهای ناوبری (Navigation Menus) استفاده می‌شود. این تابع به توسعه‌دهندگان اجازه می‌دهد تا منوهای دلخواه ایجاد شده در پنل مدیریت وردپرس را در بخش‌های مختلف قالب نمایش دهند. در این آموزش به بررسی کامل ساختار، پارامترها، مثال‌های کاربردی و نکات حرفه‌ای مربوط به این تابع می‌پردازیم.

کاربرد تابع wp_nav_menu() چیست؟

زمانی که شما در وردپرس از بخش نمایش → فهرست‌ها (Menus) یک منو می‌سازید، باید آن را در قالب خود نمایش دهید. برای این کار تابع wp_nav_menu() به کمک شما می‌آید. این تابع داده‌های منو را از دیتابیس گرفته و در قالب HTML خروجی می‌دهد.

ساختار کلی تابع wp_nav_menu()

wp_nav_menu( array $args = array() );

تابع wp_nav_menu() تنها یک آرایه پارامتری می‌گیرد که تمام تنظیمات منو از طریق آن انجام می‌شود. در ادامه مهم‌ترین پارامترها را معرفی می‌کنیم.

پارامترهای مهم تابع wp_nav_menu()

مثال ساده از wp_nav_menu()

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container'      => 'nav',
    'container_class'=> 'main-navigation',
    'menu_class'     => 'nav-menu',
) );
?>

در این مثال، منویی که در مکان primary ثبت شده است در یک تگ nav با کلاس main-navigation نمایش داده می‌شود. تگ ul داخل آن نیز کلاس nav-menu دارد.

ثبت محل منو در قالب وردپرس

قبل از استفاده از تابع wp_nav_menu() باید محل نمایش منو را در فایل functions.php قالب خود ثبت کنید.

<?php
function mytheme_register_menus() {
    register_nav_menus( array(
        'primary'   => __( 'منوی اصلی', 'mytheme' ),
        'footer'    => __( 'منوی فوتر', 'mytheme' )
    ) );
}
add_action( 'after_setup_theme', 'mytheme_register_menus' );
?>

در این کد دو محل منو به نام‌های primary و footer ثبت می‌شوند که بعداً می‌توانید در قالب از آن‌ها استفاده کنید.

نمایش منو در فوتر یا هدر قالب

<?php
wp_nav_menu( array(
    'theme_location' => 'footer',
    'container'      => 'div',
    'container_class'=> 'footer-menu',
    'menu_class'     => 'footer-links',
) );
?>

در این مثال منوی فوتر با کلاس‌های اختصاصی برای استایل‌دهی جداگانه نمایش داده می‌شود.

جلوگیری از نمایش تگ container

اگر نمی‌خواهید هیچ تگ HTML دور منوی شما قرار بگیرد، کافی است مقدار پارامتر container را برابر با false قرار دهید:

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container'      => false,
) );
?>

با این کار خروجی فقط شامل تگ <ul> منو خواهد بود و هیچ container اضافه‌ای وجود ندارد.

تغییر ساختار HTML منو با Walker Class

وردپرس از کلاسی به نام Walker_Nav_Menu برای تولید HTML منو استفاده می‌کند. شما می‌توانید یک کلاس سفارشی بنویسید که از این کلاس ارث‌بری کند و ساختار HTML دلخواه خود را ایجاد کنید. برای مثال، اگر بخواهید در هر آیتم منو آیکن Font Awesome قرار دهید، می‌توانید از Walker اختصاصی استفاده کنید.

<?php
class My_Custom_Walker extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $icon = '<i class="fa fa-chevron-right"></i>';
        $output .= '<li><a href="' . esc_url( $item->url ) . '">' . $icon . esc_html( $item->title ) . '</a></li>';
    }
}
?>

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker'         => new My_Custom_Walker(),
) );
?>

در این نمونه، کلاس سفارشی My_Custom_Walker در خروجی هر آیتم منو یک آیکن اضافه می‌کند. این روش برای طراحی‌های خاص بسیار مفید است.

بررسی fallback_cb برای زمانی که منو تعریف نشده است

اگر مدیر سایت هنوز منویی برای مکان موردنظر ثبت نکرده باشد، وردپرس به صورت پیش‌فرض از تابع wp_page_menu() استفاده می‌کند. اما می‌توانید این رفتار را تغییر دهید:

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'fallback_cb'    => false
) );
?>

با تنظیم مقدار false برای fallback_cb، در صورت نبود منو، هیچ چیز نمایش داده نخواهد شد.

استفاده از wp_nav_menu() بدون theme_location

در بعضی مواقع، ممکن است بخواهید مستقیماً یک منوی خاص را بدون ثبت مکان نمایش دهید. در این حالت می‌توانید از پارامتر menu استفاده کنید:

<?php
wp_nav_menu( array(
    'menu' => 'main-menu',
    'menu_class' => 'custom-menu',
) );
?>

در اینجا نام منو main-menu مستقیماً از دیتابیس فراخوانی شده و در قالب نمایش داده می‌شود.

نکات بهینه‌سازی و بهترین شیوه‌ها

• همیشه از theme_location استفاده کنید: این کار باعث می‌شود کاربران بتوانند منوها را از پنل مدیریت جایگزین کنند.
• از esc_html() و esc_url() در Walker اختصاصی استفاده کنید: برای امنیت و جلوگیری از تزریق کدهای مخرب.
• از کلاس‌ها و شناسه‌های (ID) CSS مناسب استفاده کنید: تا استایل‌دهی منو در آینده راحت‌تر انجام شود.
• در قالب‌های واکنش‌گرا (Responsive): منوها را با CSS یا جاوااسکریپت به حالت موبایل تغییر دهید.

جمع‌بندی

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

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

ارسال