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

使用Wordpress Nav-walker类在下拉列表的第一个<li>之前添加标题<li>

WordPress Nav-walker类是一个用于自定义导航菜单的类。它允许开发人员在导航菜单中添加自定义的HTML标记和样式。

在使用WordPress Nav-walker类时,要在下拉列表的第一个<li>之前添加标题<li>,可以按照以下步骤进行操作:

  1. 创建一个自定义的Nav-walker类,继承自WordPress的Walker_Nav_Menu类。可以在主题的functions.php文件中添加以下代码:
代码语言:txt
复制
class Custom_Nav_Walker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';

        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';

        $output .= $indent . '<li' . $class_names . '>';

        // 添加标题<li>
        if ($depth === 0) {
            $output .= '<li class="menu-title">标题</li>';
        }

        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
        $attributes .= ($args->walker->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= ($depth === 0 && $args->walker->has_children) ? ' <b class="caret"></b></a>' : '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}
  1. 在主题的模板文件中调用自定义的Nav-walker类。可以在导航菜单的代码中添加以下参数:
代码语言:txt
复制
<?php
wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'nav-menu',
    'walker' => new Custom_Nav_Walker(),
));
?>

这样,就可以在WordPress的导航菜单中,在下拉列表的第一个<li>之前添加一个标题<li>

注意:以上代码仅为示例,具体的实现方式可能因主题的不同而有所差异。在实际使用时,需要根据主题的结构和需求进行相应的调整。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云云数据库MySQL。

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

相关·内容

前端|Bootstrap——导航组件

向 元素添加一个标题class="active",则表示当前默认菜单选项,添加class=“navbar-header”,会让文本看起来更大一号如下图就是现在效果图: ?...第一个标签页必须添加 .in ,以便淡入显示初始内容。如下代码就可以实现跳转到B页面: <!...下来菜单实现需要使用到触发器“dropdown”,向标签添加添加data-toggle="dropdown" 就可以实现切换下拉菜单功能。...如果没有data-toggle="dropdown"的话,即使被定义为dropdown-toggle,也不能实现动态菜单下拉和收回效果。...当添加 data-toggle="dropdown" 属性,就可以让下拉菜单默认隐藏,只有点击按钮或链接时,它才显示出来。 此外,这里下拉菜单,还使用使用来指示按钮作为下拉菜单。

6.6K10

WordPress 主题教程 #13:样式化侧边栏

第2步:给 LI 添加填充 .sidebar ul{} 下输入: .sidebar ul li{ padding: 10px 0 10px 0; } 这是现在填充: 进行这步之前,搜索框和日历之间以及日历和页面之间是没有空间...,如何给这些模块之间添加空间呢,我们需要给 .sidebar ul li{} 添加10像素顶部和底部填充。...: 14px; } 还记得我们已经样式化了 .post{} 下标题,但是这个是不会对侧边栏标题起作用,因为前面我们仅仅样式化 .post{} 下标题?...如果仅仅 #wp-calendar{} 也是可以因为它是唯一而且 WordPress 不会使用 #wp-calendar 给别的标签。但是你应该试着特定化当能够时候。...好使用 .sidebar ul li#calendar table#wp-calendar{}. 因为列表条目(LI)包含日历子标题和一个 id 被命名为 calendar 日历表格。

1K20

WordPress 主题教程 #6:侧边栏

开始侧边栏之前,这是现在 index.php 文件样子。... - 开始无序列表 - 结束无序列表 第3步:给这个无序列表添加原属 增加一个列表元素(LI)到无序列表(UL)中间并把一个子标题添加到这个列表中。 注意添加制表符到 和 标签之前为了代码缩进。 - 开始列表元素 - 开始子标题 <?php _e('Categories'); ?...现在应该可以看到 Categories 子标题结构应该这样: 子标题前面的小圆点指明这个子标题一个列表元素中(LI)。如果无序列表(UL)有两个列表元素,那么将有两个小点。...> 放入 和 标签中呢? 当我们使用 wp_list_cats() 这个函数调用链接列表函数时候,它会自动附上一组 和 (列表条目)标签在每个链接左右。

99840

编写自己 WordPress 模板

也许 你之前已经使用过它,但不知道如何从头开始制作主题。或者,也许你是一个完整新手。无论如何,这篇文章是给你。 先决条件:我们开始之前, 你需要满足以下一组要求。...我们例子中,我们将使用存档链接和社交媒体链接。同样,WordPress 小部件比“硬编码”垃圾要好得多!但为了清楚起见,我们将坚持后者。...Loop是一种功能, 你可以使用它动态地将内容插入到 你主题中。我们本教程中目标是将所有博客文章呈现为一个用户友好列表,以便读者可以选择其中任何一篇。让我们看看我们是如何做到。...> 如果有任何帖子,而没有剩下,显示它们。此循环中任何内容都将重复,直到页面用完所有帖子。我们可以使用这个概念来显示我们列表。这就是我做法。...因此,请分享指向 你第一个 WordPress 主题链接。 你第一步可以使新来者振作起来。

1.4K30

制作一个只显示特定类别的导航栏

很多博客导航栏是显示特定分类,如果你也想这样做,你可以添加下面这行代码和按照你自己想法去样式化它。...默认情况下,wp_list_categories() 产生一个嵌套无序列表(UL),它在一个标题为“Categories”列表元素(li)中。你可以通过 CSS 选择其莱样式化它。...其他解决方案: Display categories in horizontal Drop-Down menu -- 这个教程将说明如何使用 CSS 和 JavaScript 制作横向显示主要类别,下拉显示子类别的导航栏...Multi-level Navigation Plugin for WordPress -- 这个插件能够产生必要代码去创建一个 Son of Suckerfish 似的横向下拉菜单,纵向弹出或者横向滑动导航栏...你可以通过插件选项页面控制什么项目(页面,分类,存档,友情链接等等)可以显示在你下拉菜单中。

87920

一文入门jQuery

如果操作是元素固有属性,则建议使用prop 如果操作是元素自定义属性,则建议使用attr 对class属性操作 addClass():添加class属性值 removeClass():删除class...如果元素对象上不存在class=“one”,则添加 css(): CRUD操作: append():父元素将子元素追加到末尾 对象1.append(对象2): 将对象2添加到对象1元素内部,并且末尾...内部,并且末尾 prependTo(): 对象1.prependTo(对象2):将对象1添加到对象2内部,并且开头 after():添加元素到元素后边 对象1.after(对象2): 将对象2添加到对象...$(function () { //toRight $("#toRight").click(function () { //获取右边下拉列表对象,append...(左边下拉列表选中option) $("#rightName").append($("#leftName > option:selected")); });

3.5K20

BootStrap应用开发学习入门1

.dropdown-menu-right 下拉菜单右对齐 .dropdown-header 向下拉菜单标签区域添加标题提示 .disabled 下拉菜单中禁用项 .divider 下拉菜单中分割线...-- .dropup 用于指定一个向上下拉菜单 .dropdown-menu 用于创建下拉菜单。...导航元素 描述:进行首页导航栏菜单进行设置,导航菜单与下拉菜单使用相似的语法; 默认情况下,列表锚与一些数据属性协同合作来触发带有 .dropdown-menu class无序列表。...列表组(list-group) 描述:列表组件用于以列表形式呈现复杂和自定义内容,我们还可以向任意列表添加徽章组件,它会自动定位到右边; Class说明: .list-group...#a标签 使用 .alert-link 实体来快速提供带有匹配颜色链接。

44.3K30

BootStrap应用开发学习入门1

.dropdown-menu-right 下拉菜单右对齐 .dropdown-header 向下拉菜单标签区域添加标题提示 .disabled 下拉菜单中禁用项 .divider 下拉菜单中分割线...-- .dropup 用于指定一个向上下拉菜单 .dropdown-menu 用于创建下拉菜单。...导航元素 描述:进行首页导航栏菜单进行设置,导航菜单与下拉菜单使用相似的语法; 默认情况下,列表锚与一些数据属性协同合作来触发带有 .dropdown-menu class无序列表。...列表组(list-group) 描述:列表组件用于以列表形式呈现复杂和自定义内容,我们还可以向任意列表添加徽章组件,它会自动定位到右边; Class说明: .list-group...WeiyiGeek. 3.下拉菜单(Dropdown) 使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单 基础用法: (1)通过 data

44.7K21

Jump Start Bootstrap 第4章

上一章,导航栏只包含一个简单链接列表本节中,我们将使用一些BootstrapJavaScript插件帮助扩展我们网站现有组件功能。...href="#">Messages 我们已经第二个元素中添加了一个下拉插件。...在这种情况下,您可以show.bs.dropdown事件中向服务器发出Ajax请求,并在显示之前填充下拉菜单。...选项卡窗格数量应该等于显示导航栏中链接数。nav-tabs包裹一个元素中添加一个”active”,将使它成为默认选项卡。 就是这样!你有了一个可以工作选项卡插件。...对于每个图像,我们可以添加相关标题和一些额外文本数据。这些标题由一个元素包装,它有一个carousel-caption。

28.3K40

WordPress设置首页页脚友链(附wp_list_bookmarks配置)

> 默认情况下(没有添加任何参数)用法: 链接被划分为不同类别,每个类别有一个名称 包含所有链接,无论是链接分类名称还是ID 按名称排列链接列表 如果有图片,包含图片 图片和链接文本间应有空格 显示链接描述...category_after (字符串)放置链接分类目录后文本。默认值为''。 class (字符串)链接分类列表所在。默认值为'linkcat'。...有效值包括: ASC ——默认值 DESC title_li (字符串)链接列表标题。...默认值为 '__('Bookmarks')',显示标题为“Bookmarks”(the_(' ')用于本地化。)只有将categorize设为0(false)时,才可使用该参数(否则将使用分类名称)。...若将title_li设为空(0),则不显示列表标题,且链接列表不会被 , 标签围绕(要确保将categorize选项设为0,以使title_li生效)。

1.1K10

Bootstrap学习笔记上(带源码)

.pre-scrollable { max-height: 340px; overflow-y: scroll; } 表格: 表格行:元素中添加上表对应名,就能达到你自己需要效果...js .open > .dropdown-menu { display: block; } 下拉分割线:添加一个空,并且给这个添加名“divider” .dropdown-menu...(下拉按钮除外),其他按钮都取消圆角效果 3、第一个按钮只留左上角和左下角是圆角 4、最后一个按钮只留右上角和右下角是圆角 对应源码如下: .btn-group > .btn:not(:first-child...特别声明:制作等分按钮组时,请尽量使用标签元素来制作按钮,因为使用标签元素时,使用display:table部分浏览器下支持并不友好。...按钮下拉菜单项 按钮下拉菜单项 解析 按钮向下三角形,我们是通过<button

3.8K20

BootStrap应用开发学习入门

页面标题(Page Header) 它会在网页标题四周添加适当间距。当一个网页中有多个标题且每个标题之间需要添加一定间距时,页面标题这个功能就显得特别有用。...列表BS中支持有序列表、无序列表和定义列表。 有序列表:有序列表是指以数字或其他有序字符开头列表。 无序列表:无序列表是指没有特定顺序列表,是以传统风格着重号开头列表。...偏移列 描述:偏移是一个用于更专业布局有用功能, 可用来给列腾出更多空间; 为了大屏幕显示器上使用偏移,请使用 .col-md-offset-*,其中 * 范围是从 1 到 11。...注意: 如果是 元素, 你需要在外层使用 .btn-group 来包裹 # 内嵌下拉菜单按钮组 .dropdown-toggle #按钮组内嵌按钮可以设置下拉菜单 , 还需要...,元素获取焦点时显示(如:键盘操作用户) .close #显示关闭按(使用通用关闭图标来关闭模态框和警告框) .caret #显示下拉式功能(下拉菜单) 基础示例: <div class

14.5K30

WordPress 增加按分类搜索功能并自定义外观

'; } ?> 这样就输出了一堆 li 并且把对应分类目录名称和 id 添加进去了。...具体代码和修饰之后效果如下图: 成功输出对应内容之后,我们就可以直接给 select 加一个 display:none; 使其隐藏,然后使用我们自定义下拉列表。...实现模拟下拉列表对应功能 结构和样式是做好了,但是你会发现无法使用这个模拟下拉列表,没错这本来就只是一个结构又不是 select 。那怎么增加类似 select 功能呢?...一开始想到使用 JavaScript 按照 WordPress 搜索格式构造一个 URL,然后发现这是多么白痴。直接使用 jQuery 同步 select 选项就好了。...:点击某项目自动添加到上面然后下拉框消失、同步对应 select 内容 这些功能,这当然难不倒强大 jQuery 了。

1.3K10

BootStrap应用开发学习入门

页面标题(Page Header) 它会在网页标题四周添加适当间距。当一个网页中有多个标题且每个标题之间需要添加一定间距时,页面标题这个功能就显得特别有用。...列表BS中支持有序列表、无序列表和定义列表。 有序列表:有序列表是指以数字或其他有序字符开头列表。 无序列表:无序列表是指没有特定顺序列表,是以传统风格着重号开头列表。...偏移列 描述:偏移是一个用于更专业布局有用功能, 可用来给列腾出更多空间; 为了大屏幕显示器上使用偏移,请使用 .col-md-offset-*,其中 * 范围是从 1 到 11。...注意: 如果是 元素, 你需要在外层使用 .btn-group 来包裹 # 内嵌下拉菜单按钮组 .dropdown-toggle #按钮组内嵌按钮可以设置下拉菜单 , 还需要...,元素获取焦点时显示(如:键盘操作用户) .close #显示关闭按(使用通用关闭图标来关闭模态框和警告框) .caret #显示下拉式功能(下拉菜单) 基础示例: <div class

17.5K20

前端入门学习--CSS

class选择器HTML中以class属性表示,CSS中,选择器以一个点“.”号显示: 下面的例子中,所以拥有centerHTML元素均为居中。...CSS 部分: .dropdown使用 position:relative, 这将设置下拉菜单内容放置在下拉按钮 (使用 position:absolute) 右下角位置。....dropdown-content 中是实际下拉菜单。默认是隐藏鼠标移动到指定元素后会显示。 注意 min-width 值设置为 160px。你可以随意修改它。...(like div) 并添加 “tooltip” 。...tooltiptext 用于实际提示文本。模式是隐藏鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。CSS3 border-radius 属性用于为提示框添加圆角。

27.6K20
领券