如何将自定义 HTML 添加到 wp_nav_menu?

更新于 2022年1月11日 wordpress教程

我熟悉 WordPress 并使用 WordPress 菜单系统。 但我正在寻找一种将自定义 HTML 添加到wp_nav_menu()

如何将自定义 HTML 添加到 wp_nav_menu?

我正在尝试创建一个这样的菜单:在此处输入图片说明

请注意产品下的下拉菜单如何包含图像和链接。 我想重新创建这个。 我看过一些插件,但宁愿编码。

我不介意硬编码图像和链接,但我想保持使用 WordPress 来管理菜单的灵活性。

解决方案

WordPress 通过菜单页面显示项目的方式是使用 walker 对象。 在这种情况下,此对象的特定类称为 Walker_Nav_Menu。 您可以在wp-includesnav-menu-template.php找到它。

Walker_Nav_Menu是一个非常简单的类。 您可以看到链接和菜单结构是如何在那里构建的。 函数start_elend_el用于构建菜单项。 函数start_lvlend_lvl用于嵌套菜单。 在这种方法中,我们将主要使用start_elend_el

在您的functions.php创建一个类,使用与父类非常相似的方法来扩展Walker_Nav_Menu

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Copy all the start_el code from source, and modify
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    // Copy all the end_el code from source, and modify
  }
}

在这些函数中, $item是您的菜单项,如果您愿意,您可以使用它根据当前菜单项查询其他内容。 请注意,我没有包含start_lvlend_lvl ,但这并不重要,因为您的类将自动继承父类方法,如果没有被覆盖。

然后,在您的主题文件中,您可以像这样调用 wp_nav_menu:

wp_nav_menu(array(
  'theme_location' => 'main',
  'container' => false,
  'menu_id' => 'nav',
  'depth' => 1,
  // This one is the important part:
  'walker' => new Custom_Walker_Nav_Menu
));

WordPress 将使用您自定义的类和函数,以便您可以修改输出的代码。

你可能还喜欢下面这些文章

WordPress admin bar添加自定义链接菜单WordPress admin bar添加自定义链接菜单

$wp_admin_bar->
add_action(‘admin_bar_menu’, ‘custom_toolbar_link’, 999);

wordpress自动关键词插件wpkws,长尾词聚合必备wordpress自动关键词插件wpkws,长尾词聚合必备

网站获取流量需要依靠长尾词,但我们不可能把所有的长尾词都堆在标题或者正文中。
现在我开发了一款能自动匹配长尾词的插件wpkws,他的功能是找到和文章相似的长尾词,自动添加为标签。

wordpress文章自动配图、缩略图插件:wpacwordpress文章自动配图、缩略图插件:wpac

现在写点文章不配图总觉得文章质量不太高。
于是萌生了写一款文章自动配图的插件的想法。
文章页自动加一张图比较简单,从候选集中选择一张图片拼接在正文中即可。
又比如在图片中添加文章标题,摘要或者自定义的文字。

wordpress开启多站点方法wordpress开启多站点方法

本文介绍一下wordpress开启多站点以及开启多站点之后nginx的配置。
rewrite (.*) $1/index.php;
rewrite (.*) /index.php;

WordPress怎么新建导航菜单WordPress怎么新建导航菜单

WordPress怎么新建导航菜单?
WordPress菜单设置在哪

想要设置WordPress导航菜单,首先要找到它在哪里。
设置WordPress菜单

设置wordpress菜单显示位置

WordPress怎么新建导航菜单WordPress怎么新建导航菜单

WordPress怎么新建导航菜单?
WordPress菜单设置在哪想要设置WordPress导航菜单,首先要找到它在哪里打开仪表盘,选择 外观 – 菜单进入菜单设置界面,可以看到这里有2个区域,左侧是网站的内容,包括页面、文章、分类目录、自定义链接,右侧是具体的菜单设置界面,用来调整、编辑菜单创建新的WordPress菜单WordPress中默认没有菜单,所以我们必须先创建一个菜单才能进行设置设置新建菜单的名称点击上方的创建新菜单链接,然后在右侧的文本框中随便输入一个名称,比如可以设置一个”导航菜单”,然后点击创建菜单菜单创建成功这样一个新的菜单就创建成功了,但是这时候菜单内并没有任何内容,接下来将对对菜单进行设置设置WordPress菜单接下来对导航菜单进行设置添加项目到菜单中在左侧找到想要添加到菜单的项目,用鼠标勾选,然后点击添加到菜单wordpress添加菜单项目你会看到在右侧的菜单结构中就会出现刚刚添加的内容在菜单中,你可以添加左侧的所有包括内容,页面、自定义链接等都可以加入到菜单中,这就是WordPress的灵活之处调整菜单的顺序有时候我们需要一些菜单靠前,不重要的菜单放到最后边,这个时候可以调整菜单的顺序用鼠标在右侧按住想要修改顺序的项目,然后拖动到正确的位置调整WordPress菜单顺序让菜单显示在网站前台菜单已经设置好了,有的朋友可能已经保存过,但是却发现网站前台并没有发生任何变化那么如何让菜单显示在前台呢设置wordpress菜单显示位置在菜单设置的下方,有一个显示位置的选项,这里为菜单分配显示位置的地方,默认的主题选择顶部菜单就行,如果是其他主题,可能名称会有不同设置好以后,点击保存菜单如果显示位置区域有多个菜单,就需要找到合适的位置添加,有些主题会包含顶部菜单、导航菜单、底部菜单等多个区域的导航菜单,这个时候就需要添加对个菜单填充这些位置wordpress菜单设置好后的效果最后前台的显示效果如图上,这样我们的菜单已经设置好了更多WordPress技术文章,请访问WordPress教程栏目!

WordPress怎么增加文章排序方式WordPress怎么增加文章排序方式

WordPress怎么增加文章排序方式?
实现过程也比较简单,一个是构造链接,另外一个是使用query_posts来改变一下主循环就可以了。
$orderby, ‘order’ =>

wordpress如何在一个页面显示所有文章wordpress如何在一个页面显示所有文章

让WordPress一个页面显示全部分类的文章

cat=’ . $cat->
php echo $cat->
a href=”<
$cats = get_categories(array(‘include’ =>

好看 (0) 很好看 (0) 非常好看 (0)
赞赏

微信赞赏支付宝赞赏