WordPress外贸建站：WordPress移动端菜单怎么建？-科灯跨境

用户可以通过注册移动菜单、切换显示、确保移动菜单显示等步骤来进行WordPress移动端菜单的建设。此外值得一提的是，WordPress移动端菜单的构建不仅是外贸建站的重要步骤之一，而且是促进网站SEO优化，给予客户更好的使用体验的重要渠道，那么WordPress移动端菜单到底该怎么构建呢，接下来将大家具体了解一下。

一、注册WordPress移动端菜单

如果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’ );

添加此代码后，会注意到菜单设置中有一个“移动菜单”选项。

建WordPress移动端菜单

二、切换WordPress移动端菜单显示

现在菜单只能在移动设备上显示。因此站长需要根据屏幕尺寸或浏览器宽度切换其外观，为此可以将使用一些 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’ );

一旦将脚本加入队列，它将在每个页面上加载，现在必须在其中添加以下JS代码，因此需将以下代码添加到“mobile-menu-toggle.js”。

// hide or display the mobile menu /* let’s consider we want to toggle the menu displayed at 800 screen width, here’s what we need to do (you can accordingly replace 800 with to a screen width you would need)..*/ 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(); } );

三、确保WordPress移动端菜单显示

大家需要遵循最后一步，以确保菜单无缝显示。此步骤基本上负责在菜单设置中设置移动菜单后显示移动菜单，此代码需要添加到当前主题的header.php中，用户可以在添加“main-menu”后将其添加到“wp_nav_menu”函数下方。

/* 以下代码检查菜单设置中是否从后端设置了移动菜单。如果已设置菜单，它将显示在标题中。否则，如果未设置菜单，则显示一条消息。*/ 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’>未设置移动菜单</font> </ul>” ; }

确保将“桌面菜单”作为附加类添加到主菜单，此类将用于切换菜单的显示，并将以下 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; } }