当前位置: 首页 > news >正文

如何在Wordpress中使用wp_nav_menu()在<li>及a标记中添加Class

我正在使用wp_nav_menu($args),我想将my_own_classCSS类名添加到<li>元素中以获得以下结果:

<li class='my_own_class'><a href=''>Link</a>

怎么做?

wp_nav_menu()在<li>标记中添加Class

方法一:只需使用其他参数并为nav_menu_css_class设置过滤器.

$args = array('container'     => '','theme_location'=> 'your-theme-loc','depth'         => 1,'fallback_cb'   => false,'add_li_class'  => 'your-class-name1 your-class-name-2'  //这里自定义样式);
wp_nav_menu($args);

注意新的'add_li_class'参数.

并在functions.php上设置过滤器

function add_additional_class_on_li($classes, $item, $args) {if(isset($args->add_li_class)) {$classes[] = $args->add_li_class;}return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

方法二:将Class添加到<li>标记而不编辑functions.php文件:

  1. 转到外观 - >菜单 - >屏幕选项 - > CSS类

  1. 您将在Menu ItemsWindow中启用CSS Class选项

wp_nav_menu()在a标记中添加Class

WordPress的wp_nav_menu是不能给a标签添加额外的属性的,比如class,data等,所以就需要另外在添加函数了。方法如下:

在wp后台中外观——主题文件编辑器——找到functions.php文件中添加以下代码到 ?>内即可:

//自定义nav菜单中a链接样式function df_menu_link_atts( $atts, $item, $args ) {$atts['class'] = 'sf-with-ul';$atts['data-link-alt'] = $item->title;return $atts;}add_filter( 'nav_menu_link_attributes', 'df_menu_link_atts', 10, 3 );
http://www.lryc.cn/news/20486.html

相关文章:

  • Chat Support Board WordPress聊天插件 v3.5.8
  • 2022年网络安全竞赛——数字取证调查attack.pcapng
  • 2023最新MongoDB规范
  • gcc的使用,调试工具gdb的使用
  • Python变量的定义和使用
  • SSM框架-AOP概述、Spring事务
  • 一文搞定Android Vsync原理简析
  • 第八届蓝桥杯省赛 C++ B组 - K 倍区间
  • UDP与TCP协议
  • rosbag相关使用工具
  • 数据结构与算法—栈stack
  • 【学习笔记】[ARC150F] Constant Sum Subsequence
  • Node.js实现大文件断点续传—浅析
  • Spring Cloud Nacos源码讲解(九)- Nacos客户端本地缓存及故障转移
  • MySQL知识点小结
  • MySQL关于NULL值,常见的几个坑
  • OllyDbgqaqazazzAcxsaZ
  • Elasticsearch7.8.0版本进阶——自定义分析器
  • spring事务-创建代理对象
  • Linux 配置NFS与autofs自动挂载
  • 【编程入门】应用市场(Python版)
  • 异常信息记录入库
  • Spring Batch 高级篇-分区步骤
  • ES数据迁移_snapshot(不需要安装其他软件)
  • 【Vue3 第二十章】异步组件 代码分包 Suspense内置组件 顶层 await
  • 「媒体邀约」四川有哪些媒体,成都活动媒体邀约
  • @Autowired和@Resource的区别
  • Linux系列:glibc程序设计规范与内存管理思想
  • Redis 集群
  • EF 框架的简介、发展历史;ORM框架概念