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

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

我熟悉 WordPress 并使用 WordPress 菜单系统。 但我正在寻找一种将自定义 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 将使用您自定义的类和函数,以便您可以修改输出的代码。

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

安全禁用 WP REST API安全禁用 WP REST API

//developer.wordpress.org/rest-api/using-the-rest-api/frequently-asked-questions/#can-i-disable-the-rest-接口据此,Wordpress。

WordPress数据库中存储 wp_cron 任务的字段是什么WordPress数据库中存储 wp_cron 任务的字段是什么

wp_next_scheduled(‘my_awesome_cron_hook’)。_get_cron_array()或get_option(‘cron’)。

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

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

如何在 WordPress 中查找 wp_head() 渲染的 HTML ?如何在 WordPress 中查找 wp_head() 渲染的 HTML ?

我查了很多,大部分人都说wp_head() 位于 wp-includes/general-template.phpwp_head() 位于 wp-includes/general-template.php。

如何自动为WordPress文章添加特色图像如何自动为WordPress文章添加特色图像

add_action(‘the_post’, ‘wpforce_featured’);

如何为WordPress后台管理界面添加新的配色如何为WordPress后台管理界面添加新的配色

wp_admin_css_color( ‘classic’, __( ‘Classic’ ), admin_url( “css/colors-classic.css” ), array( ‘#fff’, ‘current’ =>

如何在古腾堡的“文档”下添加新面板如何在古腾堡的“文档”下添加新面板

我正在尝试在文档选项卡下添加一个新的组件面板,例如类别、特色图像等。UTM ссылка (необязательно)<input type=”text” name=”utm-post-class” id=”utm-post-clas

Wordpress 主循环 - 如何在指定文章数之前添加classWordPress 主循环 – 如何在指定文章数之前添加class

有没有办法在 WordPress 循环代码中获取多个项目: if ($count<a href=”https://stackoverflow.com/questions/19303556/wordpress-loop-how-to-co