WordPress建站

WordPress 网站上添加移动手机菜单的 4 个简单步骤

发布时间:2024-06-17 10:40:34

本文作者:

最后更新时间为 2024年6月17日

在构建 WordPress 网站时,您一定遇到过这些术语之一。考虑到近 50% 的访问者一定会在移动设备上查看网站,因此移动友好、响应迅速的主题至关重要。

那么为什么您的网站菜单应该被抛弃呢? 

现在,菜单的显示方式是使菜单响应的一部分。因此,如果您的主导航菜单在桌面设备上采用列表形式,则同一菜单可以在移动设备上显示为汉堡菜单。

我们有一篇很棒的文章,解释了如何在主题中添加推送导航菜单。

但是!为了使菜单适合移动设备,您可能需要更改菜单中显示的内容。

例如,WisdmLabs 网站!如果您在移动设备上浏览该网站(或者您现在正在使用移动设备),您会注意到主菜单不是超级菜单。另一方面,桌面设备上的主菜单是彻头彻尾的超级菜单。

现在,要在移动设备上显示不同的菜单,您的主题需要允许您创建不同的移动菜单

如何在 WordPress 网站上创建移动菜单

要添加特定于移动设备的菜单,您需要执行以下操作:

  1. 注册移动菜单
  2. 根据屏幕宽度切换显示
  3. 确保移动菜单显示
  4. 创建并设置移动菜单

您所需要的只是一点 jQuery 知识和一些 PHP 编码,然后您就会拥有无限的可能性。

需要进行更改的文件如下:

#1 注册移动菜单

如果您的 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' );

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

#2 切换菜单显示

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

#3 确保显示移动菜单

我们需要遵循最后一步,以确保菜单无缝显示。此步骤基本上负责在菜单设置中设置移动菜单后显示移动菜单。此代码需要添加到当前主题的 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 的支持。将以下 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;
    }
}

#4 创建并设置移动菜单

一旦我们创建了移动菜单设置并切换显示,我们就需要创建一个菜单并将其设置为移动菜单。

为此,在您的 WordPress 管理面板中创建一个新菜单

创建新菜单

现在,添加菜单项并将其设置为移动菜单。记得保存所做的更改。

添加移动菜单

结论

就这样!您刚刚为 WordPress 主题添加了一个移动菜单!很简单,不是吗?您可以根据不同的屏幕尺寸添加不同的菜单,或者注册页脚菜单。

如果您想在不编写代码的情况下将移动菜单添加到您的 WordPress 网站,请让我们的 WordPress 专家(他们也是 WordPress 核心贡献者)为您轻松完成这项工作。他们使用可扩展的代码,并确保您的网站经过优化,可在移动设备和桌面上实现快速加载!

2024年如何创建WordPress网站

小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为10万多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

WordPress主题模板

价格便宜(200-2500元不等),时间快, 图文内容后台自己控制。
一对一指导安装、终身免费升级。

全部模板

XSwm外贸营销型主题

XSwm主题助力外贸企业快速搭建全球销售的外贸独立网站

XSmic外贸引流模板

wordpress仿make in china(中国制造)的店铺引流模板

XS2021外贸模板

颜值与内涵并重的独立站、精准的广告投放、社交媒体推广和谷歌SEO

XS2020中文模板

帮助客户以最低的成本进去互联网,并且以最快的效率去做互联网营销。

XSnm中文营销型模板

网站布局规范清晰,内容完整,营销力十足

XSzq站群模板

做最踏实、最稳定、最长效的站群系统,让客户找到你,爱上你,成交你

XSzeng企业性价比主题

简约高端企业通用产品展示WordPress主题,功能上可满足任意企业官网的使用

XShuan企业主题

SEO排名最好的wordpress企业主题,百度最喜欢的wordpress主题

XSkobe营销型主题

XSkobe帮你拥有一个媲美中联重科官网的企业网站

XSpx教育培训主题

主题功能模块丰富,可以充分展示教育培训机构的特点和功能

XStie科技主题

精致简约风格的wordpress企业模板,为科技IT公司量身打造

XStop定制型主题

wordpress企业主题制作历史以来,水平最高的一款主题。

XShw公司展示主题

面向公司官网搭建需求的中小型企业公司的WordPress企业主题

XSgr集团官网主题

打造高品质官网,设计美观大方

XSdj品牌宣传主题

结构清晰,界面简洁,核心产品展示全面,中小企业建站首选

XSdd外贸主题

wordpress外贸主题适用于任何类型的站点,本主题远低于定制一个网站的价格

WordPress模板建站常见问题

主题模板建站是一次性付费,后续不需要费用。
域名,服务器,素材比如文案,图片等。域名和服务器是公司知识产权,你最好用自己的信息去购买,免得日后有权限问题。
在代码质量,性能,安全性,SEO和可靠性方面,我们所有的主题模板都是一样的。
所有主题,后台功能都一样(文章发布,产品发布),只是前端界面显示模块多与少的区别。
售后服务包含WordPress主题模板的使用问题,我们可以协助你安装并调试购买的WordPress主题模板,一对一售后服务,支持远程协助。
文章、产品、分类等无限添加,后期可以进行增、删、改、查。
肯定是的!在开发过程中我们非常注重搜索引擎的优化,并借助WordPress平台的SEO优势,可以不需要任何插件即可自动获取也可自定义每个页面的SEO机制。
WordPress是世界上最安全的程序,注意密码复杂度和不随意安装免费插件就能让网站安全性大大提高。
可以的,我们可以在文章中添加视频和文档。
是的,WordPress 对初学者很友好,提供直观的界面。借助预先设计的主题和插件,即使没有技术知识的人也可以建立一个功能齐全的网站。
可以签合同,提供普通发票,如需其他发票,请提前告知。

WordPress定制案例

按照你的行业属性、特点,设计符合该行业风格和需求的网站。
利于百度推广、谷歌推广,提升网站获客能力。

全部案例

WordPress定制建站常见问题

可以签合同,提供普通发票,如需其他发票,请提前告知。
不包含域名和空间。如需代购,可以提前说明,我们提供一条龙服务。
备案制度仅仅限于服务器在大陆的主机;服务器在国外和香港等不需要备案;国内购买的com域名需要实名制才能解析。
定制建站是一次性付费,第二年不需要续费。
域名服务器是采用年度付费,您可以自行续费。域名一般是80元/年,主机一般1000元/年(需要看配置)
售后服务仅包含网站的使用问题,我们可以协助你安装并调试网站,一对一售后服务,支持远程协助。
肯定是的!在开发过程中我们非常注重搜索引擎的优化,并借助WordPress平台的SEO优势,可以不需要任何插件即可自动获取也可自定义每个页面的SEO机制。
WordPress是世界上最安全的程序,注意密码复杂度和不随意安装免费插件就能让网站安全性大大提高。
除开前期的沟通准备,网站定制开发上线一般要15个工作日。

制作专业WordPress网站的最快方法

使用入门模板在几分钟内创建专业设计的网站。响应式网站模板在任何设备上都具有最佳外观和性能。

  • 步骤1

    挑选wordpress主题,上传启动

    准备好服务器和域名,在服务器上安装好wordpress程序,在到纳姆网络外贸模板中心挑选适合自己的外贸模板并上传。

  • 步骤2

    无需编码,设置网站内容

    根据企业已有的文案素材,您可以使用我们易于使用的外贸模板轻松定制网站的各个方面,无需编码知识。

  • 步骤3

    阅读主题文档,设置更多功能

    更加深入的了解wordpress模板,您可以得到一对一的模板使用文档,以确保您可以逐步设置自己的wWordPress网站。

  • 步骤4

    网站上线,开启外贸营销

    你的互联网资产已经建立完成,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

如何让线上业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

189-0733-7671

返回顶部