用户可以通过注册移动菜单、切换显示、确保移动菜单显示等步骤来进行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管理面板中创建一个新菜单。
现在添加菜单项并将其设置为移动菜单，记得保存所做的更改。
相关文章
-
WordPress优化教程：网站锚文本怎么做
在进行WordPress优化时，用户经常会忽视网站锚文本的优化，但网站锚文本通常也会影响到网站在谷歌搜索引擎中的索引权重，那么既然网站锚文本那么重要，网站锚文本到底该怎么做呢？各位站长可以通过保持锚文本的简洁和精准性，又或是通过关注锚文本周围的上下文语境等实现锚文本的优化，对于WordPress网站锚文本优化感兴趣的用户，可以通过阅读下文了解详细操作。 一、网站锚文本是什么 锚文本（也称为链接文本）是一段可见且可点击的文本，用作从一个页面到另一个页面的超链接，它通常通过具有不同的颜色或下划线来区…
-
WordPress插件：CAPTCHA 4WP验证插件使用教程
CAPTCHA 4WP验证插件可以轻松地在WordPress网站上实施CAPTCHA，它具有高度的可定制性，可以直接与几个不同的验证码服务提供商集成，此外CAPTCHA 4WP还允许访问者轻松地与表单和登录行为进行交互，同时阻止垃圾邮件和恶意机器人的操作。本入门指南将介绍在WordPress网站上安装和配置CAPTCHA 4WP插件所需的步骤。 一、下载并激活CAPTCHA 4WP插件 当购买WordPress插件CAPTCHA 4WP时，用户应该已经收到一封包含许可证密钥和插件下载链接的电子邮…
-
跨境电商应该怎么做
在全球范围内在线销售商品和服务的跨境电商市场正变得越来越庞大。据预测，到2030年全球跨境电商B2C市场的价值将达到79380.1亿美元?；チ尤氲脑黾雍腿蚧耐贫俳丝缇车缟痰呐畈⒄?。 一、什么是跨境电商 跨境电商是指在线销售商品和服务的过程，不受地域限制，可以涵盖B2B、C2C或B2C贸易。销售渠道仅限于线上，而实体店并非必须?？缇车缟痰墓丶谟谙矍赖脑谙咝灾?。例如，一家本土企业可以通过外贸平台或者独立站建立线上商店，向美国消费者销售产品，而无需实体店或实体经营。 二、跨境电商的…
-
Rank Math SEO插件使用教程
Rank Math是一款功能强大的WordPress SEO插件，不但提供了全面的SEO设置，包括关键词优化、元标签优化、网站结构优化等；而且还提供了内部链接建设工具，帮助网站建立良好的内部链接结构，提升网站的用户体验和SEO效果。本文为大家介绍下Rank Math SEO插件使用教程，让大家的网站在搜索引擎的排名中脱颖而出。 1、安装并打开Rank Math设置向导 首先确保WordPress网站上已安装Rank Math 插件并已激活；一旦安装并激活，插件将提示使用其配置向导?？梢酝ü己降健?/p>
-
点击率CTR如何优化：解锁独立站高点击率优化密码
在做网站SEO优化时，点击率CTR是用户衡量网站优劣的重要因素之一，外贸独立站点击率DTR代表了该网页吸引用户注意力的程度，如果点击率高，则代表该网页的转化比较好，反之，该网页未能做好转化。对于一些不知道点击率如何优化的用户来说，可以通过优化优化标题标签、改进元描述、优化URL结构等方法实现独立站高点击率的解密。 一、为什么要优化独立站点击率CTR 高点击率不仅能够带来更多流量，还能显著提升用户转化率。当用户点击网页时，他们更有可能停留更长时间并采取行动，例如购买产品或填写表单。优质内容搭配吸引…
-
5大独立站搭建注意事项
随着我国对外走出去步伐的加快，越来越多成熟的跨境电商卖家，选择通过搭建独立站实现品牌出海业务的部署目标。但在独立站搭建过程中也有一些注意事项需要关注，例如网页设计、域名选择、图片显示、独立站更新优化以及网站上线前的测试，这些看似无关紧要的工作，但是却关系到独立站是否能正常运行及业务是否能长期开展。本文将从五大独立站搭建注意事项入手，为大家扫除外贸建站路上的“拦路虎”。 独立站搭建注意事项一：网页设计 网页设计最重要的是要按照目标市场消费者的审美来设计，不同的国家审美差异是比较大的。比如说欧美消费…
