用户可以通过注册移动菜单、切换显示、确保移动菜单显示等步骤来进行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成本 × 100%进行计算。SEO投资回报率作为衡量SEO效果的核心指标，是每一位想通过外贸独立站拓展业务，塑造品牌的必修之课，通过了解清楚SEO收益和成本之间的关系，进一部分配资源和优化运营策略，实现业务的可持续增长。 一、什么是SEO投资回报率 SEO投资回报率（ROI）是衡量SEO策略效果的核心指标，帮助了解每一元投入在SEO上的资金能带来多少收益。通过分析SEO ROI，可以评估SEO…
-
WordPress字体设置 WordPress怎么改字体？
在进行WordPress独立站自定义设置时，有些商家为了追求网站的个性化，会更改WordPress的默认字体，对于一些不熟悉WordPress后台操作的用户来说想要实现该功能，可能会有一些困难，所以下文将为大家介绍使用WordPress主题定制器、全站编辑、插件和CSS代码来更改字体的具体操作以供大家参考。 WordPress怎么改字体一：使用主题定制器 1、登录 WordPress 仪表板。 2、导航到 外观- 自定义打开主题定制器。 3、进入定制器后，单击 Fonts。 4、可以单独设置站点…
-
WooCommerce是免费的吗？
WooCommerce就其本身来说，与WordPress一样，都是属于开源免费的外贸建站工具，但是WooCommerce是一款依附于WordPress存在的电子商务插件。在外贸建站的过程中，用户通常将WordPress与WooCommerce结合在一起，以发挥二者最大的作用，下文将为大家具体介绍WooCommerce的有关内容，希望可以为大家提供一个有效参考。 一、WooCommerce是免费的吗？ WooCommerce本身是免费的，但是WooCommerce存在许多付费的主题或者插件，所以用…
-
WordPress PHP更新教程指南
PHP作为一种网站后端开发的解析工具，适用于各种类型网站服务器脚本的编写，具有较高的安全性与灵活性，而WordPress外贸网站建设所使用的编程语言便是PHP，WordPress PHP版本的新旧与否关系到网站运行的稳定性、兼容性和响应速度。所以如何在WordPress上将PHP更新至最新版本，是广大站长较为关心的问题，而本文接下来将以此来展开叙述。 注意：本文将以WordPress PHP?7.0版本更新为例。 一、检查WordPress PHP 版本 在WordPress后台找到tools，…
-
Shopify注册流程及注意事项
随着SaaS跨境电商独立站搭建的火爆，作为用户友好代表的Shopify建站平台受到了众多站长的追捧。为了帮助使用Shopify建站的商家更好的使用Shopify搭建独立站，下文将围绕Shopify注册流程和注意事项，为大家展开以下内容，进一步掌握Shopify独立站的搭建步骤。 一、Shopify注册流程 1、点击访问Shopify官网，点击首页的免费试用按钮，对于使用Shopify建站的用户来说，Shopify均赠送了3天的免费试用期限，在这三天的期限内，用户可以进一步了解Shopify建站的…
-
谷歌外贸建站多少钱
谷歌外贸建站多少钱？谷歌外贸建站费用主要包括域名、主机、网站设计、支付网关和其他费用，总成本在几百美元到几千美元之间。了解谷歌外贸建站的总体费用和费用组成，有利于商家更好的制定网站建策略，进一步开展企业的跨境出海业务，所以下文将围绕谷歌外贸建站的费用组成展开有关内容的介绍。 谷歌外贸建站多少钱一：域名费用 在Google外贸建站之前，需要注册一个域名，谷歌网站的域名成本可能因多种因素而异，例如顶级域名 （TLD）、用于购买域名的注册商以及该域名是否已注册。 通常标准 TLD（例如 .com、.n…
