用户可以通过注册移动菜单、切换显示、确保移动菜单显示等步骤来进行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管理面板中创建一个新菜单。
现在添加菜单项并将其设置为移动菜单，记得保存所做的更改。
相关文章
-
外贸建站有哪些注意事项？外贸建站的建议
许多站长在进行外贸建站时，应该注意中外文化的差异性、中外用户访问环境的差异性等问题。诚然，对于新手建站来说会存在许多问题，而本文将为大家剖析外贸建站过程中的注意事项及其建议，为各位站长在建站时提供一定的指导。 一、外贸建站的注意事项 1、忽略中外用户访问环境的差异性 中英文网站全部放在国内服务器，不考虑国际出口带宽限制和海外客户访问国内服务器的速度很慢。 2、巨大而花哨的flash动画让客户望而生畏 耐心在等待中消逝，很多企业甚至为了展示企业的优良形象，将图文、音频、视频全部放在外贸网站上，客户…
-
如何使用WordPress编辑器进行外贸建站？
在用WordPress进行外贸建站时，必不可少会用到的工具便是WordPress编辑器，一个独特且体现企业形象的外贸网站离不开WordPress编辑器的深度开发。而WordPress编辑器分为WordPress页面编辑器与主题编辑器，二者的主要区别是什么，各自的特点在哪，以及怎样将二者结合建设高效专业的外贸网站，则是本文接下来的叙述要点。 1.WordPress页面编辑器和主题编辑器的基本特性 （1）WordPress页面编辑器的主要功能： 1）页面布局：你可以使用页面编辑器创建和设计每个页面的…
-
谷歌网站技术分析优化清单
谷歌网站的技术SEO分析是网站排名优化较为困难，但也是商家应该重视的一部分工作。为了帮助各位不懂谷歌网站技术SEO分析优化的商家，全面检查网站的技术问题，下文将为大家介绍抓取错误、移动优化、失效链接、HTTPS、网站加载速度、Canonical规范化标签等十大部分，助力各位商家谷歌外贸建站业务的顺利开展。 谷歌网站技术分析一：排除抓取错误 抓取错误就是谷歌爬虫不能正常访问网站内容，如果抓取不正常就不能把网站收录到谷歌的数据库当中，结果就是没有自然排名和流量。 可以在Google Search C…
-
外贸建站：外贸独立站团队需要几个人？
一个职责明确的外贸独立站团队最少需要4个人，在开始筹备外贸独立站之前，外贸独立站团队人员的人数应该成为各位站长应该考虑的因素之一，因为一个和谐且分工明确的建站团队有利于外贸建站工作的有序进行，实现1+1大于2的效果，那么外贸独立站的团队人员到底是怎么配置的呢，下文将为大家呈现。 外贸独立站团队成员一：程序员 如果卖家选择自己搭建网站的话，程序员就是必不可少的，其主要的工作负责就是网站的运行和维护；但若是卖家选择外包找建站公司的话，就不需要配置程序员了。对于新手卖家而言，外包不仅可以节约建站成本，…
-
WordPress插件：WP Activity Log活动日志插件使用教程指南
WP Activity Log活动日志插件是WordPress外贸建站必不可少的活动日志记录插件，它创建了一个详细的日志记录机制，为网站的安全维护和问题排查提供了有力地保障。所以本文接下来将为大家具体介绍一下该插件的使用方法。 WP Activity Log插件负责WordPress网站的日志记录，大多数安全插件都带有一组基本的日志记录功能，但它们都没有WP Activity Log插件的功能全面。对于较小的站点，其他插件的日志记录功能可能就足够了，但随着站点的增长，日志记录也需要改进。更多的用…
-
电商独立站是什么
电商独立站是什么？电商独立站的全称是“跨境电商独立站”，指的是企业或者商家通过互联网与消费者进行交易的网站。借助电商独立站，企业可以实现品牌的全球化宣传，消费者也可以实现随时随地的在线购物，是目前跨境商家品牌出海最火爆的渠道之一。本文为了让各位跨境商家更好的了解电商独立站的相关知识，接下来将围绕电商独立站是什么、作用及其类型进行叙述。 一、电商独立站是什么 要理解电商独立站是什么，首先需要拆解该词组，将其分为“电商”和“独立站两部分”。 1、电商：电商即电子商务，是通过互联网买卖产品和服务的一种…
