wordpress要调用自定义菜单首先要注册菜单,将代码添加到主题文件夹下的function.php中,比如wordpress自带主题2019的定义如下

// This theme uses wp_nav_menu() in two locations.
register_nav_menus(
array(
'menu-1' => __( 'Primary', 'twentynineteen' ),
'footer' => __( 'Footer Menu', 'twentynineteen' ),
'social' => __( 'Social Links Menu', 'twentynineteen' ),
)
);

  这个表示导航栏的名称,左边是别名,右边是名称。别名会用在导航栏的调用上,名称则显示在菜单后台页面上

  添加上述函数后,进入wp后台,在左侧菜单的“外观”里即多了“菜单”选项,primary,footer menu,social links menu就是可选的显示位置

  在主题的header.php对应位置,引用导航栏。需要用到下面这个函数

<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
<?php
wp_nav_menu( array $args = array(
'menu' => "", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
'menu_class' => "", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
'menu_id' => "", // (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
'container' => "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'container_class' => "", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
'container_id' => "", // (string) The ID that is applied to the container.
'fallback_cb' => "", // (callable|bool) If the menu doesn't exists, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
'before' => "", // (string) Text before the link markup.
'after' => "", // (string) Text after the link markup.
'link_before' => "", // (string) Text before the link text.
'link_after' => "", // (string) Text after the link text.
'echo' => "", // (bool) Whether to echo the menu or return it. Default true.
'depth' => "", // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
'walker' => "", // (object) Instance of a custom walker class.
'theme_location' => "", // 指定显示的导航名,如果没有设置,则显示第一个(如果调用多个菜单这项一定要加)(string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'items_wrap' => "", // (string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
'item_spacing' => "", // (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
) );
?>
<?php endif; ?>

  当然有些参数是可选的,可根据实际需要进行调用

  2019主题的调用比较简单

<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
<?php
wp_nav_menu(
array(
'menu_class' => 'menu clearfix',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
<!-- #site-navigation -->
<?php endif; ?>

  更多详情可参考https://developer.wordpress.org/reference/functions/wp_nav_menu/

<?php if ( has_nav_menu( 'footer' ) ) : ?>
<?php
wp_nav_menu(
array(
'theme_location' => 'footer',//调用具体的位置菜单,否则默认显示第一个创建的菜单
'menu_class' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
<!-- #site-navigation -->
<?php endif; ?>

  来个中文版的,更容易理解

<?php
$parameter = array(
'theme_location' => '',//指定显示的导航名,如果没有设置,则显示第一个
'menu' => 'header-menu',
'container' => 'nav',//最外层容器标签名
'container_class' => 'primary',//最外层容器class名
'container_id' => '',//最外层容器id值
'menu_class' => 'sf-menu',//ul标签class
'menu_id' => 'topnav',//ul标签id
'echo' => true,//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false
'fallback_cb' => 'wp_page_menu',//备用的导航菜单函数,用于没有在后台设置导航时调用
'before' => '',//显示在导航a标签之前
'after' => '',//显示在导航a标签之后
'link_before' => '',//显示在导航链接名之后
'link_after' => '',//显示在导航链接名之前
'items_wrap' => '<ul id="%1$s">%3$s</ul>',
'depth' => 0,//显示的菜单层数,默认0,0是显示所有层
'walker' => ''//调用一个对象定义显示导航菜单
);
wp_nav_menu($parameter);
?>

相关文章:给 wp_nav_menu函数添加缓存提高页面效率  

wordpress调用自定义菜单的更多相关文章

  1. wordpress去掉自定义菜单的外层div

    wordpress调用自定义菜单时自动会在外层加一个<div class="menu-nav-container">,如下图所示,nav是后台定义的菜单名称,如果想把这 ...

  2. [wordpress]后台自定义菜单字段和使用wordpress color picker

    Wordpress Version 4.4.2 参考链接 插件使用wordpress color picker:Add A New Color Picker To WordPress 后台菜单自定义字 ...

  3. wordpress调用自定义post_type文章

    前面我们讲了wordpress添加post_type自定义文章类型,我们现在来讲一下如何把自定义文章调用出来,我们以product为例,虽然我们自定义好了 Post Type 同时也编写了一些内容,但 ...

  4. WordPress自定义菜单和修改去除多余的css

    这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了. 所以我们在模板制作过程中,需要自定义WordPress菜单. 在functions.php文件中 ...

  5. wordpress自定义菜单间添加分隔符

    我们知道wordpress自定义菜单每个item是用<li></li>来固定的,那如果想在</li>加分隔符要如何操作呢?如下图所示.我们可以用PHP的str_re ...

  6. wordpress自定义菜单高级属性设置

    我们在创建wordpress自定义菜单时,右上角有一个screen option,点击展开可以选择显示菜单的高级属性,包括:链接目标Link Target.标题属性Title Attribute.CS ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(74)-微信公众平台开发-自定义菜单

    系列目录 引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜 ...

  8. 《C#微信开发系列(2)-自定义菜单管理》

    2.0自定义菜单管理 ①接口说明 微信服务号聊天窗口下面的菜单项(有的公众号有启用有的则没有),这个可以在编辑模式简单配置,也可以在开发模式代码配置.微信公众平台开发者文档:微信公众号开发平台创建自定 ...

  9. 微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷

    今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也 ...

随机推荐

  1. Word 插入页码 -- 视频教程(7)

    1. 以本科做的一个课程设计为例 >> 视频教程链接:B站,速度快,清晰 未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文)

  2. zookeeper从入门到精通视频教程(含网盘下载地址)

    Zookeeper视频教程链接:https://pan.baidu.com/s/1V9YZN5F3sTKQJOhiDt9hnA 提取码:rtgl

  3. ZooKeeper学习笔记(一)——概述

    zookeeper学习笔记(一)--概述 1. 概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目.zookeeper从设计模式的角度来理解:是一个基于观察者设计 ...

  4. 使用Nginx的X-Accel-Redirect实现大文件下载

    在实现文件下载功能时通常有以下几种方式: 1.直接给出下载地址,例如http://****.com/test/test.rar,这种是最直接的方式,任何人都可以下载,无法控制用户的权限. 2.验证权限 ...

  5. oracle 分页sql

    select * from ( SELECT A.*, ROWNUM RN FROM ( SELECT A.*,B.USERPWiD from 测试表2 A left join 测试表3 B on A ...

  6. 77.JS本地保存数据的几种方法

    1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...

  7. vue请求简单配置

    简单记录一下vue的http请求配置相关 测试环境请求接口设置: 1.  config/dev.env.js添加: module.exports = merge(prodEnv, { NODE_ENV ...

  8. scrapy 爬虫中间件 httperror中间件

    源码 class HttpErrorMiddleware(object): @classmethod def from_crawler(cls, crawler): return cls(crawle ...

  9. django 上传头像并预览 3选1

    注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...

  10. RocketMQ在CentOS7上安装

    需要先以下组件 1.64bit OS, Linux/Unix/Mac is recommended;2.64bit JDK 1.8+; 安装了 Java JDK 就可以运行 RocketMQ 了 3. ...