用户可以通过注册移动菜单、切换显示、确保移动菜单显示等步骤来进行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移动端菜单显示
现在菜单只能在移动设备上显示。因此站长需要根据屏幕尺寸或浏览器宽度切换其外观，为此可以将使用一些 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; } } |
四、创建并设置WordPress移动端菜单
一旦创建了移动菜单设置并切换显示，就需要创建一个菜单并将其设置为移动菜单，此时可以在WordPress管理面板中创建一个新菜单。
现在添加菜单项并将其设置为移动菜单，记得保存所做的更改。
相关文章
-
独立站SEO优化是做什么？独立站SEO必备清单分享
独立站SEO优化可以说是网站是否能成功走出去的关键因素，一个好的且有效的外贸独立站SEO优化策略不仅可以提升用户体验感，而且可以深刻的塑造品牌形象，提高品牌传播力。那么独立站SEO优化是做什么呢？下文将围绕独立站技术SEO优化、关键词SEO优化、站内和站外SEO优化角度，为大家详细阐释独立站SEO优化的具体操作步骤。 独立站SEO必备清单分享一：技术SEO优化 网站速度优化：通过压缩图片、优化代码、使用 CDN（内容分发网络）等方式，提高网站加载速度，一般建议页面加载时间不超过 3 秒。 移动端…
-
独立站是什么 独立站核心要素是什么？
独立站是什么？独立站是一种通过独立网站的搭建实现企业品牌推广与营销的商业模式，其核心要素是网站定位、内容优化营销、数据分析监控这三方面，所以独立站究其本质来说应该围绕品牌两个字来进行一系列的运营推广工作，以实现维护企业形象，塑造企业品牌，扩大品牌影响力的目的，下文也将为大家展现一些关于独立站的有关内容，希望可以为大家的外贸建站工作提供一个参考。 独立站核心要素一：网站定位 独立站的网站定位可以从目标受众、网站设计和用户体验这三方面入手。 1、目标受众：目标受众就是独立站想要给哪些人看的意思，用户…
-
SaaS建站和开源建站的区别
SaaS建站和开源建站的区别主要存在于所有权、定制化程度、维护更新等方面，对于想要外贸建站的用户来说，应该仔细辨别二者的差异，进而选择出最适合自己的建站方式。SaaS建站以定制选项为代价提供便利、易用性和持续维护，开源建站提供更大的灵活性、所有权和定制功能，但需要更多的技术专业知识和维护工作。它们之间的选择取决于用户的具体需求、预算和技术能力。 一、SaaS建站和开源建站的区别 1、所有权 使用SaaS建站，用户不拥有建站平台，基本上是通过互联网租用和访问它，该软件由 SaaS 提供商管理和维护…
-
五大受欢迎的WordPress用户注册插件推荐
在进行外贸建站的工作时，WordPress用户注册插件的使用可以帮助商家收集用户画像，提高独立站的管理效率，尤其是对于外贸营销类网站而言，所以下文为大家具体介绍了五款市场比较受欢迎的WordPress用户注册插件，希望可以为大家在管理网站时提供一个有意义的参考。 WordPress用户注册插件推荐一：WPForms WPForms标准表单字段包括姓名、电子邮件、电话、日期/时间和评论。此外还有添加复选框、多选、文件上传、验证码、支付字段、签名等功能，适合创建多功能、用户友好的注册表单，拖放操作简…
-
WordPress优化教程：网站锚文本怎么做
在进行WordPress优化时，用户经?；岷鍪油久谋镜挠呕?，但网站锚文本通常也会影响到网站在谷歌搜索引擎中的索引权重，那么既然网站锚文本那么重要，网站锚文本到底该怎么做呢？各位站长可以通过保持锚文本的简洁和精准性，又或是通过关注锚文本周围的上下文语境等实现锚文本的优化，对于WordPress网站锚文本优化感兴趣的用户，可以通过阅读下文了解详细操作。 一、网站锚文本是什么 锚文本（也称为链接文本）是一段可见且可点击的文本，用作从一个页面到另一个页面的超链接，它通常通过具有不同的颜色或下划线来区…
-
如何使用WordPress编辑器进行外贸建站？
在用WordPress进行外贸建站时，必不可少会用到的工具便是WordPress编辑器，一个独特且体现企业形象的外贸网站离不开WordPress编辑器的深度开发。而WordPress编辑器分为WordPress页面编辑器与主题编辑器，二者的主要区别是什么，各自的特点在哪，以及怎样将二者结合建设高效专业的外贸网站，则是本文接下来的叙述要点。 1.WordPress页面编辑器和主题编辑器的基本特性 （1）WordPress页面编辑器的主要功能： 1）页面布局：你可以使用页面编辑器创建和设计每个页面的…
