wordpress主题开发之《首页导航栏制作》

小何 • • UI相关, 前端技术 • 677 阅读

​

 前言

昨晚一个简单的首页导航栏搞了我几个小时，时间是花了，但是还是学到了一些东西，例如：wordpress 动态导航栏制作，wordpress导航栏li样式去除及li样式自定义，wordpress导航栏a标签样式自定义。下面一一将这些知识分享给大家。

wordpress 动态导航栏制作

1. 后台菜单栏添加

如果没有添加地的请看我的上一篇文章有介绍

在添加菜单前需要先添加分类：后台-文章-分类-添加新分类

​

然后添加分类至菜单： 后台-菜单-添加菜单

​

2. functions.php函数注册菜单

​

3. 导航栏文件中添加菜单（前台调用的地方）

前台调用的地方添加代码。

上图中的：main_menu 和下面代码中的main_menu很重要。这个就是菜单栏的id（菜单设置中如果你勾选了主要菜单就调用本文的代码是没有问题的【可能大家不会注意这段话，当你菜单栏不显示可以看看】）

<?php

$defaults = array(
    'theme_location'  => 'main_menu',
    'container_class' => 'collapse navbar-collapse active',
    'container_id'    => 'topnav-menu-content',
    'menu_class'      => 'navbar-nav hr-navbar__nav',
    'menu_id'         => 'header-nav-main',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 1,
    'walker'          => '',
    'nav_menu_css_class' => '',
    'nav_menu_link_attributes' => ''
);

wp_nav_menu($defaults);

?>

4. 最后显示效果

​

附：wp_nav_menu参数说明

<?php 
wp_nav_menu( array(
    'theme_location'  => '',//导航别名
    'menu'   => '', //期望显示的菜单
    'container'  => 'div',  //容器标签
    'container_class' => '',//ul父节点class值
    'container_id'  => '',  //ul父节点id值
    'menu_class'   => 'menu',   //ul节点class值
    'menu_id'   => '',  //ul节点id值
    'echo'  => true,//是否输出菜单，默认为真
    'fallback_cb' => 'wp_page_menu',  //菜单不存在时，返回默认菜单，设为false则不返回
    'before' => '', //链接前文本
    'after'  => '', //链接后文本
    'link_before'  => '',   //链接文本前
    'link_after'  => '',//链接文本后
    'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>',   //如何包装列表
    'depth' => 0,   //菜单深度，默认0
    'walker' => ''  //自定义walker
  ) );
?>

​

版权声明：
作者：小何
链接：https://ligo100.cn/qianduanjishu/131.html
来源：小何博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录