wordpress 如何将自定义 HTML 添加到 wp_nav_menu？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12250866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add custom HTML to wp_nav_menu?
提问by StephenMeehan
I'm familiar with WordPress and using the WordPress menu system. But I'm looking for a way to add custom HTML to wp_nav_menu().
我熟悉 WordPress 并使用 WordPress 菜单系统。但我正在寻找一种将自定义 HTML 添加到wp_nav_menu().
I'm trying to create a menu like this:
我正在尝试创建一个这样的菜单：
Notice how the drop down menu under products contains an image and a link. I'd like to re-create this. I've looked at a few plugins, but would rather code it.
请注意产品下的下拉菜单如何包含图像和链接。我想重新创建这个。我看过一些插件，但宁愿编码。
I don't mind hard coding the image and link, but I'd like to keep the flexibility of using WordPress to manage the menus.
我不介意硬编码图像和链接，但我想保持使用 WordPress 来管理菜单的灵活性。
回答by martinczerwi
The way WordPress goes through the menu pages to display the items, is using a walker object. In this case the specific class for this object is called Walker_Nav_Menu. You can find it in wp-includes\nav-menu-template.php.
WordPress 通过菜单页面显示项目的方式是使用 walker 对象。在这种情况下，此对象的特定类称为 Walker_Nav_Menu。你可以在wp-includes\nav-menu-template.php.
The Walker_Nav_Menuis a pretty simple class. You are able to see, how the links and the menu structure are built there. The functions start_eland end_elare used to build the menu-items. Functions start_lvland end_lvlare for nesting menus. In this approach we'll be mainly using start_eland end_el.
这Walker_Nav_Menu是一个非常简单的类。您可以看到链接和菜单结构是如何在那里构建的。函数start_el和end_el用于构建菜单项。函数start_lvl和end_lvl用于嵌套菜单。在这种方法中，我们将主要使用start_el和end_el。
In your functions.phpcreate a class, to extend Walker_Nav_Menuwith pretty similar methods to the parent class:
在您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
}
}
In those functions, the $itemis your menu-item, with which you can query additional contents according to the current menu-item, if you want to. Note that I didn't include start_lvland end_lvl, but that doesn't matter, since your class will automatically inherit the parent classes methods, if not overwritten.
在这些功能中，$item是您的菜单项，如果需要，您可以根据当前菜单项查询其他内容。请注意，我没有包含start_lvland end_lvl，但这并不重要，因为您的类将自动继承父类方法，如果没有被覆盖。
Then, in your theme files, you can call wp_nav_menu like this:
然后，在您的主题文件中，您可以像这样调用 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 will use your custom class and functions, so that you can modify what code is output.
WordPress 将使用您自定义的类和函数，以便您可以修改输出的代码。
