首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在wordpress的“<li></li>”菜单项中添加span元素?

在WordPress的菜单项中添加<span></span>元素,可以通过以下步骤实现:

  1. 登录WordPress后台,进入“外观” -> “菜单”页面。
  2. 在菜单编辑器中,找到需要添加<span></span>元素的菜单项。
  3. 点击该菜单项,在右侧展开的选项中,找到“CSS类”字段。
  4. 在“CSS类”字段中输入一个自定义的类名,例如“menu-span”。
  5. 点击“保存菜单”按钮,保存修改。

接下来,我们需要通过自定义CSS来添加<span></span>元素:

  1. 在WordPress后台,进入“外观” -> “主题编辑”页面。
  2. 在右侧的文件列表中,找到并点击“样式表(style.css)”文件。
  3. 在样式表中的末尾添加以下CSS代码:
代码语言:txt
复制
.menu-span > a {
  position: relative;
}

.menu-span > a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
}
  1. 点击“更新文件”按钮,保存修改。

现在,你的WordPress菜单项中的<li></li>元素就会添加一个<span></span>元素。你可以根据需要自定义<span></span>元素的样式,例如修改背景颜色、大小等。

注意:以上步骤是基于默认的WordPress主题进行的操作,如果你使用的是自定义主题,可能需要根据主题的结构和样式进行相应的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在keras添加自己优化器(adam等)

\Anaconda3\envs\tensorflow-gpu\Lib\site-packages\tensorflow\python\keras 3、找到keras目录下optimizers.py文件并添加自己优化器...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...super(Adamsss, self).get_config() return dict(list(base_config.items()) + list(config.items())) 然后修改之后优化器调用类添加我自己优化器...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

45K30
  • 何在 wordpress 网站添加搜索框

    前端刷题(面经大全)网站:点击跳转到网站 博主前些天发现了一个巨牛巨好用刷题网站,忍不住分享一下给大家,点击跳转到网站 如果你主题不提供在你 WordPress 网站包含搜索框功能,请按照以下步骤了解如何做到这一点...转到添加新插件部分并搜索 Ivory Search (by Ivory Search)。 单击立即安装,然后激活它们。 一个新象牙搜索选项卡出现在左侧仪表板上。...Includes 部分允许你包含你希望用户搜索所有内容。例如,你可以只允许用户搜索电子商务网站产品,也可以允许他/她搜索某些页面或附件。...当你在 Ivory Search 表单工作时,将鼠标悬停到 Settings 选项(在 Ivory Search 下仪表板左侧面板上),以设置搜索框位置。这可以在页眉或页脚或水平菜单等。...菜单搜索部分可用选项是特定于主题。 在“Settings”部分,你可以设置搜索框外观。

    3.8K31

    Bootstrap学习笔记上(带源码)

    .pre-scrollable { max-height: 340px; overflow-y: scroll; } 表格: 表格行类:元素添加上表对应类名,就能达到你自己需要效果...="#">下拉菜单项 .dropdown-menu { position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/...top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*...js .open > .dropdown-menu { display: block; } 下拉分割线:添加一个空,并且给这个添加类名“divider” .dropdown-menu...href="##">按钮下拉菜单项 解析 按钮向下三角形,我们是通过在标签添加一个“”标签元素,并且命名为“caret

    3.8K20

    自定义按钮~自适应布局~常见bug

    > 80 81 82 下拉式菜单项 83...下拉式菜单项 84 下拉式菜单项 85 </li...二、BUG 问题:如果参照物没有触发haslayout,那么在ie6“绝对定位容器”left和bottom就会有问题 解决方案:在“相对定位父容器”上加入 zoom:1 来触发iehaslayout...问题:IE6下参照物宽高为奇数时,绝对定位元素设置了位置为0或100%时,仍会有1px空隙 解决方案:设为偶数 问题:浮动时margin加倍 解决:设置为inline 三、布局 全局自适应 所有元素绝对定位...表头固定内容滚动表格 给内容设置最大高度值,超出时使用滚动条 注意:overflow-y是用来给div进行裁剪,所以tbody部分需要在div table>head,div(table>tbody

    1.2K20

    WordPress通过Ajax评论分页实现方法

    就知道了自己问题所在。 说来惭愧,用了这么久wordpress了,竟然没注意过“WordPress 后台 – 设置 – 讨论,在“其他评论设置”勾选分页显示评论”这一项。。。设置后竟然好了。...二.开启 WordPress 评论分页 打开 WordPress 后台 – 设置 – 讨论,在“其他评论设置”勾选分页显示评论,设置一下评论数目,这里评论数目仅计算主评论,回复评论不作计算。...在后台开启评论分页后,在 comments.php 需要添加分页导航地方加入以下代码(主题中有类似代码则无须再添加,另外代码 nav 标签为 HTML5 标签,若主题没有使用 HTML5 则有...> 四.Ajax 评论分页 根据上文所述,现在主题中已经有评论分页了,要做到 Ajax 评论分页,只需 JavaScript 配合,不过在这之前首先要在评论列表前加入一个元素,用于在显示新一页评论列表时表示列表正在加载...– 显示正在加载新评论 –> Loading… <!

    1.2K20
    领券