在搭建好WordPress 網(wǎng)站后，因為不管是博客網(wǎng)站還是商店網(wǎng)站；大部分的用戶都是來自移動端。所以WordPress 網(wǎng)站上添加移動手機菜單就很重要了。

為什么您的網(wǎng)站菜單應該被放棄？

在構(gòu)建WordPress網(wǎng)站時，移動友好、響應迅速的主題至關(guān)重要，因為近50%的訪問者會在移動設(shè)備上查看網(wǎng)站。對于菜單的顯示方式，特別是在移動設(shè)備上，可能需要進行調(diào)整。例如，在桌面設(shè)備上采用列表形式的主導航菜單可以在移動設(shè)備上顯示為漢堡菜單。為此，您的主題要可以讓您創(chuàng)建不同的移動菜單。

如何在WordPress網(wǎng)站上創(chuàng)建移動菜單

步驟1：注冊移動菜單

如果您的WordPress主題尚未提供移動菜單，您可以使用以下代碼注冊一個。將代碼添加到子主題或自定義插件的 functions.php 文件中。

// register a mobile menu
function wdm_register_mobile_menu() {
    add_theme_support( 'nav-menus' );
    register_nav_menus( array('mobile-menu' => __( 'Mobile Menu', 'wdm' )) );
}
add_action( 'init', 'wdm_register_mobile_menu' );

添加此代碼后，您會注意到菜單設(shè)置中有一個“移動菜單”選項。

步驟2：切換菜單顯示

為了根據(jù)屏幕尺寸切換菜單顯示，您需要使用一些 jQuery。將以下代碼添加到每個頁面上加載的 JS 文件中。例如，可以將代碼添加到 mobile-menu-toggle.js 并在 functions.php 中加載：

// load the JS file
function wdm_mm_toggle_scripts() {
    wp_enqueue_script( 'wdm-mm-toggle', get_stylesheet_directory_uri() . '/js/mobile-menu-toggle.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'wdm_mm_toggle_scripts' );

然后，在 mobile-menu-toggle.js 中添加以下代碼：

// hide or display the mobile menu
function toggle() {
    if ( jQuery( window ).width() >= 800 ) {
        jQuery( '.nav.mobile-menu' ).hide();
        jQuery( '.nav.desktop-menu' ).show();
    } else {
        jQuery( '.nav.desktop-menu' ).hide();
        jQuery( '.nav.mobile-menu' ).show();
    }
}

// on page load set the menu display initially
toggle();

// toggle the menu display on browser resize
jQuery( window ).resize( function () {
    toggle();
} );

步驟3：確保顯示移動菜單

在當前主題的 header.php 文件中，添加以下代碼，以確保移動菜單在菜單設(shè)置中被設(shè)置后顯示：

/* 以下代碼檢查菜單設(shè)置中是否從后端設(shè)置了移動菜單。如果已設(shè)置菜單，它將顯示在標題中。否則，如果未設(shè)置菜單，則顯示一條消息。*/ 
if ( function_exists ( 'has_nav_menu' ) && has_nav_menu( 'mobile-menu' ) ) { 
    wp_nav_menu( array (
       'depth'  =>  6 ,
       'sort_column'  =>  'menu_order' ,
       'container'  =>  'ul' ,
       'menu_id'  =>  'main-nav' ,
       'menu_class'  =>  'nav mobile-menu' ,
       'theme_location'  =>  'mobile-menu' 
    ) ); 
} else {
    echo  "<ul class='nav mobile-menu'> <font style='color:red'>未設(shè)置移動菜單</font> </ul>" ; 
}

確保將“桌面菜單”作為附加類添加到主菜單，以用于切換菜單的顯示。

步驟4：創(chuàng)建并設(shè)置移動菜單

最后，創(chuàng)建一個新菜單并將其設(shè)置為移動菜單。在您的WordPress管理面板中：

1.創(chuàng)建一個新菜單。

創(chuàng)建新菜單

2.添加菜單項并將其設(shè)置為移動菜單。

3.保存所做的更改。

添加移動菜單

CSS 支持

將以下 CSS 添加到子主題的 style.css 中，以支持菜單顯示切換：

.mobile-menu{
    display: none;
}
@media only screen and (min-width: 800px){
    .desktop-menu{
        display: block !important;
    }
    .mobile-menu{
        display: none !important;
    }
}

@media only screen and (max-width: 799px){
    .desktop-menu{
        display: none !important;
    }
    .mobile-menu{
        display: block !important;
    }
}

結(jié)論

通過以上步驟，您可以為WordPress主題添加一個移動菜單，使您的網(wǎng)站在不同設(shè)備上都能有良好的用戶體驗。如果您不想自己編寫代碼，可以尋求WordPress專家的幫助，他們可以確保您的網(wǎng)站經(jīng)過優(yōu)化，在移動設(shè)備和桌面上都能快速加載。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息