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

如何在wordpress中使用wp菜单数组添加额外的div

在WordPress中使用wp菜单数组添加额外的div可以通过以下步骤实现:

  1. 首先,打开WordPress的主题文件夹,通常位于wp-content/themes/目录下。
  2. 在主题文件夹中找到并打开functions.php文件。
  3. 在functions.php文件中,可以找到一个名为register_nav_menus的函数。这个函数用于注册主题中的导航菜单。
  4. 在register_nav_menus函数的参数中,可以添加额外的菜单位置。例如,可以在参数数组中添加一个新的菜单位置,如下所示:
  5. 在register_nav_menus函数的参数中,可以添加额外的菜单位置。例如,可以在参数数组中添加一个新的菜单位置,如下所示:
  6. 在上面的例子中,我们添加了一个名为extra_menu的额外菜单位置。
  7. 保存并关闭functions.php文件。
  8. 在WordPress后台,进入外观 -> 菜单页面。
  9. 在菜单页面中,可以看到新添加的额外菜单位置。点击“创建菜单”按钮来创建一个新的菜单。
  10. 创建菜单后,可以将需要添加的页面、分类目录或自定义链接添加到菜单中。
  11. 在菜单编辑页面的右上角,可以看到一个“显示选项”链接。点击该链接展开显示选项。
  12. 在显示选项中,可以看到一个名为“菜单CSS类”的输入框。在这个输入框中,可以添加自定义的CSS类名。
  13. 在这个输入框中,输入你想要添加的div的CSS类名,例如“extra-div”。
  14. 保存菜单。
  15. 在主题的模板文件中,找到显示菜单的代码。通常是在header.php或其他模板文件中。
  16. 在显示菜单的代码中,找到wp_nav_menu函数的调用。这个函数用于输出菜单的HTML代码。
  17. 在wp_nav_menu函数的参数数组中,可以添加一个名为'container_class'的键值对,用于指定菜单容器的CSS类名。例如:
  18. 在wp_nav_menu函数的参数数组中,可以添加一个名为'container_class'的键值对,用于指定菜单容器的CSS类名。例如:
  19. 在上面的例子中,我们指定了菜单容器的CSS类名为extra-div,与之前在菜单编辑页面中添加的CSS类名相同。
  20. 保存并关闭模板文件。

现在,在WordPress中使用wp菜单数组添加额外的div的步骤已经完成。当你在菜单编辑页面中为额外菜单添加了自定义CSS类名后,在模板文件中调用wp_nav_menu函数时,会自动为菜单容器添加相应的CSS类名。这样,你就可以通过CSS样式表来对这个额外的div进行样式设置了。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能开放平台(AI):https://cloud.tencent.com/product/ai
  • 云函数(SCF):https://cloud.tencent.com/product/scf
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WordPress 自定义菜单功能介绍和使用详解

如果仅仅是调用文章分类 或者页面链接作为导航的话,会比较难控制,无法自由添加链接等。当然,成熟 WordPress 系统已经为我们考虑到了这一点,添加了一个 “自定义菜单” 功能。...使用这个功能,可以在 后台 > 外观 > 菜单 编辑,当然最好前提是你使用主题支持这一个功能。...在 WordPress 后台使用自定义菜单 当我们在后台打开 “菜单时候,通常会看到类似这样界面: 没有配置之前,是无法使用。我们需要先输入一个菜单名称才能继续使用。...让 WordPress 主题支持自定义菜单功能 下面来详细讲解如何在主题中,添加这个功能。也很简单,只需要在两个地方,添加两小段代码即可!...wp_nav_menu 之后,在主题中添加自定义菜单。在主题中合适位置,添加下面的函数: <?

1.1K20

WordPress 自定义字段 自定义域使用方法

WordPress自定义字段是个非常有用功能,自定义域是对wp文章功能扩展和补充,通过使用WP自定义字段功能,可以给文章增加些额外内容,如用WP做淘客模板时给产品添加商品价格显示,添加购买链接等...下面博客吧详细介绍wp自定义字段使用方法步骤。...WordPress自定义字段使用方法: 在使用WordPress撰写文章时候,在内容输入框下面有一个“自定义栏目”(没有发现童鞋,在后台顶部,点击“显示选项”——勾选“自定义栏目”) 点击“输入新栏目...”,在名称里输入自定义字段名称,link,然后在值里输入自定义字段值,https://qintia.com 然后点击“添加自定义栏目”,最后直接发表文章即可。...提示:每个自定义字段添加一次即可,下次使用可直接在下拉菜单中选择。 自定义字段调用: <?php echo get_post_meta($post_id, $key, $single); ?

1.8K20
  • WordPress主题开发,从入门到精通。

    2.get_template_part get_template_part( slug,  name = null, 要将此功能与主题目录子文件夹一起使用,只需在 slug 之前添加文件夹名称即可。...update_option 更新WP设置选项 delete_option,从 WordPress 选项数据表安全删除“选项/值”对方法。...esc_url() – 在输出 URL 时,使用此函数,包括在src和href属性 URL。 esc_js() – 对内联 JavaScript 使用此函数。...相对于使用 echo 输出数据,我们应该更多使用 WordPress 本地化能力, _e() 或 __() 15.简码 add_shortcode() remove_shortcode() shortcode_exists...> 18.get_posts函数 指定参数查询文章,返回一个wp_Query对象数组,代表所有符合条件文章: 支持参数:https://developer.wordpress.org/reference

    10.6K40

    wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML

    WordPress 中有一个导航菜单函数wp_nav_menu,通过这个函数可以控制菜单输出HTML 结构,一般开发者用这个函数一般是在输出HTML 自定义一些id 或者class 而已,整体HTML...项目的需求是各种各样,了解如何自定义导航菜单HTML 结构就十分重要了。 wp_nav_menu 函数 囿于篇幅,本文不会教你怎么使用wp_nav_menu 函数,请自行补习。.../ul> 这个默认菜单HTML 结构有非常大限制(比如说我想在每个li前面添加个标签办不了,一些class名称也定义不了),如果只这么用根本不能适应各种各样项目需求...例子: 比如说WordPress 输出二级菜单的话,ul 类名默认是sub-menu,那我想改为child-menu,怎么办?...> 上诉只是举了个简单例子来告知Walker_Nav_Menu 类使用,实际项目中肯定不单单那么简单,这么来讲,除了基本WordPress 知识、html+CSS,还需要一些PHP 知识。

    2.5K70

    WordPress主题制作(四):制作头部模板header.php

    当我们用文本编辑器打开从WordPress主题制作:开始前准备下载Yii-Candy .php 文件,不难看出他们头部代码都非常相似!...在我们之前创建主题目录wp-content\themes\Yii-Candy下新建一个文件header.php,我们提取出index.php头部代码复制粘贴到header.php即可,下面的是目前...>" /> 添加wp_head 有些插件需要在网页头部执行一些类添加一些js或css动作,要让这些插件能够正常工作,也让你主题有更好兼容性,你应该添加wp_head()函数。...打开header.php,在之前添加以下代码即可: 添加Description 和 Keywords 在之前添加以下代码: " /> 显示菜单栏 这里只在菜单列出页面page,将header.php以下代码: <a href="contact.html

    1.2K20

    使用 WordPress 导航菜单

    使用 WordPress 导航菜单 如何激活 WordPress 自带导航菜单使用 WordPress 导航菜单功能,首先要给当前主题注册导航菜单,从上面我们知道,我们可以注册一个或者多个导航菜单主题位置...register_nav_menus():注册多个主题位置(使用数组形式)。...这里我们只注册一个导航菜单主题位置: register_nav_menu( 'nav-menu', '导航菜单'); nav-menu 是这个导航菜单名字,用来在函数定义身份,而“导航菜单”则是名称...添加和显示导航菜单 注册好之后,就可以到 WordPress 后台 > 外观 > 菜单 添加菜单添加菜单顺序是这样: 首先定义好一个单独菜单。 然后吧这个菜单赋给一个主题位置。...然后我们到主题显示菜单位置通过以下 wp_nav_menu() 就能把刚才定义菜单显示出来,当然 wp_nav_menu() 这个函数可以有非常详细参数,但是这里只要简单使用就可以,在特殊情况下才可能使用

    2K10

    WordPress 6.0 提升了分类模式性能

    WordPress 6.0 对性能提升还是做了很多工作,比如昨天文章介绍新增了批量添加、设置和删除一组缓存函数,对分类模式下各种查询也进行提升。...另外对传递给 WP_Term_Query 查询参数处理也进行了优化,比如 slug 字段可能是字符串,也可能是数组,现在统一转换成数组,这样无论你传递什么类型参数,缓存 keys 相同可能性更高...提高导航菜单性能 在获取导航菜单 wp_get_nav_menu_items 函数,首先使用简单 taxonomy query 代替 get_objects_in_term 函数,这个替换首先可以把两次数据库查询降低到一次...此外如果菜单中含有分类和文章数据,wp_get_nav_menu_items 会改成使用 _prime_term_cache 和 _prime_post_cache 来准备 term 和 post 缓存...,这两个函数使用会使得获取菜单数据库请求变得更少,效率更高。

    32830

    WordPress后台仪表盘“概览”小工具添加其他文章类型数据

    WordPress 自定义文章类型是非常好一个功能,允许我们根据需求创建和文章等类似的文章类型,每种文章类型都有自己管理菜单和功能。...如果你网站拥有自定义文章类型,你肯定希望可以向文章、页面和评论一样,在仪表盘【概览】小工具显示其他文章类型数据,如下图所示: 这就是WordPress大学今天要分享教程:如何在WordPress...后台仪表盘“概览”小工具添加其他文章类型数据。...你只需要根据自己实际情况,修改第四行代码 array() 数组文章类型别名,然后添加到当前主题 functions.php 即可。...如果你要查看文章类型值,可以在后台点击对应文章类型导航菜单第一个子菜单,比如页面-全部页面,就可以在网址中看到 /wp-admin/edit.php?

    41820

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

    本文就是讲解如何在自己网站上增加一个像下图一样分类搜索功能: 增加分类搜索功能 强大 WordPress 搜索模块,通过一定参数来实现按照分类搜索。...WordPress 已经提供了这样一个输出网站分类目录函数 wp_dropdown_categories ,具体使用说明可以看一下官方文档,对于本例,我们只需要使用下面一句代码即可输出目录: <?...潜行者m 这次就是用这种方法,下面就来介绍一下。 输出对应结构 先要自己做一个结构,然后使用 CSS 进行修饰,达到你想要下拉菜单样式。这里我是用了两个 div 和 ul 来模拟。...其中一个表示当前选项,另一个表示下拉菜单内容。 然后在下拉菜单里面,使用一段 php 来调用输出对应 分类目录名称 和对应 目录id 。...一开始想到使用 JavaScript 按照 WordPress 搜索格式构造一个 URL,然后发现这是多么白痴。直接使用 jQuery 同步 select 选项就好了。

    1.3K10

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

    离线 WordPress 增加了多重页面链接是为了测试最低级别的链接看起样子,注意到我已圈出在底部有不必要额外填充,这是一个非常好关于样式继承例子。这里不是10像素而是20。...现在我们知道日历是在一个 TABLE 标签并以 wp-calendar 作为 id。那么如何在 style.css 文件锁定 wp-calendar table 呢?...答案是 table#wp-calendar{}。为什么?早前,你学了使用 # 号当样式化使用 id 而不是 class 命名 DIV。...在这里,是 table 而不是 DIV,跟着是 id 值,wp-calendar。...如果仅仅 #wp-calendar{} 也是可以因为它是唯一而且 WordPress 不会使用 #wp-calendar 给别的标签。但是你应该试着特定化当能够时候。

    1K20

    使用 WordPress 快速打造个人 Wiki

    在之后,我也写过几篇 “如何使用容器技术搭建 WordPress文章,据官方数据称 WordPress 目前已经占据了互联网 34% 应用,写作体验和插件生态其实还是很棒,那么我们为何不使用...使用 Docker 和 Traefik 搭建 WordPress(Nginx) 使用 Docker 和 Traefik 搭建 WordPress 当然,你也可以使用传统方案进行搭建。...接着打开 设置菜单阅读页面,将主页显示调整为静态页面,并选择静态页面为示例页面。 ? 当前展示页面看起来还是不像一个Wiki,那么我们继续进行调整。...> 当你在 Wiki 适当填充一些内容之后,你会得到这样页面。 ?...在 wp-config.php require_once ABSPATH.'wp-settings.php'; 前,添加下面一段代码。

    1.8K40

    知更鸟begin主题美化

    顶部菜单栏改为渐变背景色 在wp后台→主题选项→定制风格→自定义样式添加以下代码: #header-top { background: linear-gradient(-30deg,rgba(255,...Admin改成博主 在begin/inc/inc.php找到那一行 Admin (如果找不到,直接Ctrl+F搜索:// admin),改成你想改字符(“博主”二字),或者加其他图标,样式都可以...WordPress有新评论微信提醒管理员 查看文章:WordPress实现微信推送评论消息 WordPress关注微信公众号获取密码 查看文章:WordPress关注微信公众号获取密码 表格自适应 <h3...如果你要两栏,把宽度改成50%,四栏就25% 侧边栏添加广告位代码 外观→小工具→侧边栏,然后点击添加小工具选择增强文本添加,将下面代码放在增强文本内容里面即可。.../uploads/2019/03/370x245.jpg" /> 以上就是爱游博客一些改造,如有好建议或是那里有问题,请在下方留言。

    1.2K40

    WordPress 6.2 引进了速度更快 HTML 处理 API

    所以 WordPress 6.2 引进了 WP_HTML_Tag_Processor,一个给 WordPress 开发者调整 HTML 标签属性工具,他是 WordPress HTML 处理 API...添加一个可能已经存在 CSS 类, 设置一个属性值而没有确保已有相同重复属性值 所以不必担心代码会将  内容或者属性值,甚至 HTML 注释误认为是一个标签。...运行速度经测试已足够快,可以在关键代码运行,它不会产生额外内存开销,在 WordPress 6.2 ,可以使用它取代容易出错正则表达式和字符搜索串代码 ,来执行相同 HTML 更新。...当然它还有一些更高级用法,在 WordPress 6.2 发布之后,可以直接阅读 class 相关文档来学习如何使用。...未来 WordPress HTML 相关功能会给予这个 class 之上,使得可以查看所有标签,使用 CSS 选择器查找标签,并使用新标签修改 HTML 结构,删除标签和修改内部结构等。

    46240

    Display Posts : 按条件显示WordPress文章最强插件

    使用方法主要有两种: 可以通过在WordPress编辑器插入短码形式。...比如 用 jQuery 和 Bootstrap 在 WordPress 添加进度条 这里介绍用法 也可以通过在主题文件中使用函数do_shortcode() 。...比如这篇文章中介绍过:在WordPress添加简书风格连载目录和文章导航 Display Post支持参数特别全面。...jQuery最佳方法 WordPress免费插件选择指南 WP Plugin Info Card : 用于展示WordPress插件信息最佳插件 使用Vue.js在WordPress创建单页面应用...,也可以通过增加wrapper="div" 把每一个结果都包如一个div标签,以便更好结合其他工具进行自定义CSS,通过这种方式可以把结果显示成表格、栅格(Grid)等等其他形式,可以玩出花来。

    3.5K10

    WordPress面试题

    下面是关于如何在 WordPress 源码开发主题和插件基本指南: 开发 WordPress 主题: 创建主题目录: 在 WordPress wp-content/themes/目录下创建一个新文件夹...自定义主题功能: 在functions.php文件添加自定义功能和钩子。 使用add_theme_support函数来启用特定功能,自定义菜单、特色图像等。...模板标记和循环: 使用 WordPress 模板标记,the_title()、the_content()等,在模板显示文章标题、内容等。...添加后台页面: 使用add_menu_page等函数来添加插件在 WordPress 后台菜单页面。 在页面添加表单和处理逻辑,保存设置。...> 在实际环境,请使用更强大哈希算法, bcrypt。 更新数据库密码: 在wp_users表,找到用户行并更新user_pass列值为新 MD5 散列值。

    35240

    大胆尝试 | 不懂php用ai-kimi花2小时写一个wordpress网站采集微信文章插件

    >编写插件功能代码在article-collector.php文件添加以下代码,用于实现文章采集功能:// 添加菜单页面function article_collector_menu() { add_menu_page...现在,您可以在WordPress后台“Article Collector”菜单下输入目标文章网址,点击“Collect Article”按钮,即可将目标文章采集到您WordPress网站。...然后在WordPress后台“Article Collector”菜单下输入目标文章链接,点击“Collect Article”按钮,插件将获取正确标题、正文内容,并处理文章图片资源,然后将文章成功采集到您...修改文章采集功能代码在`article-collector.php`文件`article_collector_page`函数使用XPath定位获取标题和内容元素,并添加异常处理以及保留源页面的样式和排版...插件开发步骤:AI助手Kimi为作者提供了详细步骤和代码,包括创建插件目录、编写插件基本信息、添加菜单页面、创建插件页面内容以及实现文章采集功能。

    22210
    领券