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

news2024/9/29 19:17:06

我正在使用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.coloradmin.cn/o/370809.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

熟悉GC常用算法,熟悉常见垃圾收集器,具有实际JVM调优实战经验

程序的栈和堆 栈先进后出&#xff0c;且里面的数据自动释放&#xff0c; 堆内的空间则需要手动释放 java python go 只管创建&#xff0c;不用像c,c需要手动释放空间&#xff0c; 因为他们都会开一个进程GC&#xff08;Garbage Collector&#xff09;&#xff0c;由垃圾回收…

从早吃到晚,才是我对旅行目的地最大的尊重

点击文末“阅读原文”即可收听本期节目剪辑、音频 / 卷圈 编辑 / SandLiu 卷圈 监制 / 姝琦 文案 / 粒粒 封面 / midjourney 产品统筹 / bobo 场地支持 / 声湃轩北京录音间摊牌吧&#xff0c;承认吧&#xff0c;有些地方&#xff0c;你就是冲着吃东西才去的&#xff0c;旅…

【python】main方法教程

嗨害大家好鸭&#xff01; 我是小熊猫~ 首先 if name "main": 可以看成是python程序的入口&#xff0c; 就像java中的main&#xff08;&#xff09;方法&#xff0c; 但不完全正确。 事实上python程序是从上而下逐行运行的&#xff0c; 在.py文件中&#xff0c; 除…

CSS数据类型以及符号

css数据类型定义的是css属性中具有代表性的值&#xff0c;在规范的语法格式中&#xff0c;使用关键字外加一对 <和>表示&#xff0c;例如数值类型<number>、色值类型<color>等。 举个例子&#xff1a;background-image这个css属性语法结构如下&#xff1a; …

【汇编】二、预备知识(一只 Assember 的成长史)

嗨~你好呀&#xff01; 我是一名初二学生&#xff0c;热爱计算机&#xff0c;码龄两年。最近开始学习汇编&#xff0c;希望通过 Blog 的形式记录下自己的学习过程&#xff0c;也和更多人分享。 这篇文章主要讲述学习汇编所需的基础知识。 话不多说~我们开始吧&#xff01; 目…

电信网上用户自管理系统的设计与实现

技术&#xff1a;Java等摘要&#xff1a;当今时代随着科技的飞速发展&#xff0c;用户信息的收集处理变得非常重要&#xff0c;因此用户自管理系统模式正迅猛发展并深入到各行各业中。在这个新的时代下&#xff0c;要求程序设计员能根据不同行业、不同需求的特点&#xff0c;来…

Spring MVC 源码- RequestToViewNameTranslator 组件

RequestToViewNameTranslator 组件RequestToViewNameTranslator 组件&#xff0c;视图名称转换器&#xff0c;用于解析出请求的默认视图名。就是说当 ModelAndView 对象不为 null&#xff0c;但是它的 View 对象为 null&#xff0c;则需要通过 RequestToViewNameTranslator 组件…

Flink高手之路1一Flink的简介

文章目录一、Flink简介1. Fink的引入2.Flink简介3.支持的编程语言4.Flink的特性5.Flink四大基石6.批处理和流处理二、Flink的架构1.Flink的角色2.编程模型一、Flink简介 1. Fink的引入 大数据的计算引擎&#xff0c;发展过程有四个阶段 第一代&#xff1a;Hadoop的MapReduce…

如何确定RocketMQ中消费者的线程大小

背景 随着物联网行业的发展、智能设备数量越来越多&#xff0c;随着设备活跃量过大&#xff0c;常常存在一些高并发的请求&#xff0c;形成了流量尖峰&#xff0c;过多的请求会压垮服务器&#xff0c;影响其他服务运行。因此&#xff0c;为了保护云端服务&#xff0c;需要对请求…

KALOS.art AI 作品每周精选 006

KALOS.art —— AI 和 数字艺术作品展示及销售平台。创作者们可以在这创建自己的主页和画廊&#xff0c;收取充电打赏、以图库模式出售作品。爱好者们可以在这里探索发现&#xff0c;购买作品图片&#xff08;带商用授权&#xff09;&#xff0c;跟艺术家们开启私信通道交流。具…

在外包公司熬了 3 年终于进了字节,竭尽全力....

其实两年前校招的时候就往字节投了一次简历&#xff0c;结果很明显凉了&#xff0c;随后这个理想就被暂时放下了&#xff0c;但是这个种子一直埋在心里这两年除了工作以外&#xff0c;也会坚持写博客&#xff0c;也因此结识了很多优秀的小伙伴&#xff0c;从他们身上学到了特别…

云镜CVE-2021-44983复现

CVE-2021-44983复现漏洞信息漏洞复现读取flag&#x1f349; shell来源&#xff1a;https://yunjing.ichunqiu.com/cve/detail/967?type1&pay2漏洞信息 漏洞名称taocms 3.0.1 登陆后台后文件管理处存在任意文件下载漏洞漏洞编号CVE-2021-44983危害等级中危漏洞类型任意文…

大学毕业后,送了2个月外卖,哭了一整晚

先简单介绍一下自己&#xff0c;我来自湛江&#xff0c;大学学的的物流管理专业&#xff0c;现在就职于一家互联网公司&#xff0c;从事软件测试工作。 我来自湛江的一个偏远农村&#xff0c;家里兄弟姐妹多&#xff0c;父母无力负担我的学费&#xff0c;很多时候学费都是靠姐…

戴尔Latitude 3410电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板戴尔Latitude 3410处理器英特尔酷睿i7-10510U已驱动内存8GB已驱动硬盘SK hynix BC511 NVMe SSD已驱动显卡Intel UHD 620Nvidia GeForce MX230(屏蔽)无法驱动声卡Realtek ALC236已驱动网卡Realtek RTL81…

哈希表以及哈希冲突

目录 哈希表 哈希冲突 1. 冲突发生 2. 比较常见的哈希函数 3. 负载因子调节(重点) 散列表的载荷因子概念 负载因子和冲突率的关系 冲突-解决-闭散列 线性探测 二次探测 冲突-解决-开散列 结尾 我们在前面讲解了TerrMap&#xff08;Set&#xff09;的底层是一个搜索…

雅思经验(十四)

剑10 test3 阅读p3这篇阅读比较难做下来&#xff0c;主要是这个题材我们不太熟悉&#xff0c;介绍了一种成为拉皮塔人&#xff0c;他们在太平洋上航行&#xff0c;很多岛屿上都有他们足迹&#xff0c;后来人们发掘、探索他们的历史的故事。1.derelict 与 abandoned 主要是前面的…

Mysql 语句优化 (Explain)

Mysql 语句优化 &#xff08;Explain&#xff09; 1. 概述 ​ 在 select 语句之前增加 explain 关键字&#xff0c; mysql 会在查询上设置一个标记&#xff0c;返回查询执行计划信息&#xff0c;而不是执行这条sql 字段formatjson时的名称含义idselect_id该语句的唯一标识sel…

图形编辑器:拖拽阻塞优化

大家好&#xff0c;我是前端西瓜哥。在图形编辑器中&#xff0c;想象这么一个场景&#xff0c;我们撤销了一些重要的操作&#xff0c;然后想选中一个图形&#xff0c;看看它的属性。你点了上去&#xff0c;然后你发现你再也无法重做了。 你以为你点了一下&#xff0c;但其实你…

Java知识复习(七)常见的设计模式(装饰、代理、观察、策略、建造)

前言 参考书籍&#xff1a;《秒懂设计模式》 1、装饰器模式&#xff08;Decorator&#xff09; 1、装饰器模式&#xff1a;对原始对象动态地进行“包装”&#xff0c;是对类实例“装饰”的结果&#xff1b;类似于继承的效果&#xff0c;但这个过程是动态的&#xff0c;是可设…

Java基础常见面试题-异常-泛型-反射-注解-SPI-序列化-IO流

Java基础常见面试题-异常-泛型 1 Exception 和 Error 有什么区别&#xff1f; 1**Exception** :程序本身可以处理的异常&#xff0c;可以通过 catch 来进行捕获。Exception 又可以分为 Checked Exception (受检查异常&#xff0c;必须处理) 和 Unchecked Exception (不受检查异…