WordPress 菜单栏添加额外内容

WordPress 菜单栏添加额外内容

WordPress 强大的地方在于有很多好用的钩子可以自定义想要的功能。WordPress 主题在菜单栏追加额外的内容时，例如搜索框等时，可以使用 wp_nav_menu_items，本文主要介绍这个钩子的使用方法。

WordPress菜单栏添加搜索框

从上面的文章中我们可以了解如何在项中菜单追加搜索框或者搜索按钮，并保持和菜单项相同的CSS，这里使用了add_filter('wp_nav_menu_items', <em>string </em>$items, <em>stdClass</em> $args);这个过滤钩子函数，用于过滤导航菜单中的HTML 内容列表。

/**
 * 过滤菜单中 HTML 列表内容
 * @author 智慧宫
 * @link   https://lerm.net
 *
 * @param {*} string
 * @returns {array}
 */
add_filter('wp_nav_menu_items', string $items, stdClass $args);

参数解释

  • $item 　(字符串) 菜单项的 HTML 列表内容
  • $args (数组) 导航菜单参数数组

$args 可选参数

  • ‘menu’ (整数|字符串|WP_Term) 想要的菜单，可以是菜单ID，别名，名称，或者一个对象。
  • ‘menu_class’ (字符串) 应用于格式化ul元素的class类名，默认 ‘menu’ 。
  • ‘menu_id’ (字符串) 应用于ul元素的菜单ID，默认为菜单别名，是递增的。
  • ‘container’ (字符串) 包含ul元素得容器元素名称，默认’div’。
  • ‘container_class’ (字符串) 、容器元素class类名，默认’menu-{menu slug}-container’。
  • ‘container_id’ (字符串) 容器元素的 ID 名.
  • ‘fallback_cb’ (回调|布尔值) 如果菜单不存在将触发一个回调函数，默认为’wp_page_menu’，将其设置为false，将取消回调。
  • ‘before’ (字符串) 链接标记a前的文本。
  • ‘after’ (字符串) 链接标记a后的文本。
  • ‘link_before’ (字符串) 链接文本之前的文本。
  • ‘link_after’ (字符串) 链接文本之后的文本。
  • ‘echo’ (布尔值) 输出菜单或者返回菜单，默认true。
  • ‘depth’ (整数) 菜单要包含多少层级。0表示所有，默认为0。
  • ‘walker’ (对象) 自定义walker类的实例.
  • ‘theme_location’ (字符串) 菜单位置，必须首先使用’register_nav_menu()’进行注册。
  • ‘items_wrap’ (字符串) 菜单列表项应该被怎样包围，默认为一个ul以及id 和class。使用 printf() 输出
  • ‘item_spacing’ (字符串) 是否在菜单的HTML中保留空白。接受“保留”或“放弃”。默认“保留”。
  • 默认值: array()。

用法示例

在菜单中添加HTML 5 搜索框

将下面的代码添加到 functions.php 中，您可以根据自己的需求随意修改输出内容，并且可以自定义你喜欢的文本框 CSS。
请记住替换其中的 theme_location 将其后面的菜单名称修改成你自己的菜单名称，否则无法使用。
例如, 如果你的菜单ID是 “main-menu”，那么你应该写成

if( $args->theme_location === 'main-menu' )

$items 表示所有菜单项的HTML ，下面的代码时在所有菜单项的最后添加搜索框，您也可以在所有菜单项的最前面添加搜索框。

/**
 * 菜单中添加HTML 5搜索框
 * @author 智慧宫
 * @link   https://lerm.net
 *
 * @param {$items} string {$args} array
 * @returns {$items} string
 */

function add_search_form( $items, $args ) {
	if ( 'menu-1' === $args->theme_location ) {
		$items .= '<li class="menu-item">'
			. '<form role="search" method="get" class="search-form" action= "' . home_url( '/' ) . '">'
			. '<label>'
			. '<span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>'
			. '<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />'
			. '</label>'
			. '<input type="submit" class="search-submit" value="' . esc_attr_x( 'Search', 'submit button' ) . '" />'
			. '</form>'
			. '</li>';
	}
	return $items;
}
add_filter( 'wp_nav_menu_items', 'add_search_form', 10, 2 );

给 WordPress 菜单添加额外的菜单项

你可以用下面的代码片段在WordPress 菜单中添加额外的菜单项，比如，有一种情况是，当用户没有登陆时，我想添加一个 登陆/注册 链接，而当用户已经登陆后，添加一个我的账户页面链接。

/**
 * 给 WordPress 菜单添加额外的菜单项
 * @author 智慧宫
 * @link   https://lerm.net
 *
 * @param {$items} string {$args} array
 * @returns {$items} string
 */

function add_extra_item_to_nav_menu( $items, $args ) {
	if ( is_user_logged_in() && 303 === $args->menu ) {
		$items .= '<li><a href="' . get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) .'">My Account</a></li>';
	} elseif ( ! is_user_logged_in() && 303 === $args->menu ) {
		$items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Sign in  /  Register</a></li>';
	}
	return $items;
}
add_filter( 'wp_nav_menu_items', 'add_extra_item_to_nav_menu', 10, 2 );

如何正确使用以上代码？

  1. 如果您想在子主题中使用，则需要将上面的代码添加到当前激活的子主题的functions.php 文件中，否则，添加到目前激活的主题的 functions.php 文件中；你可以使用例如 Code Snippets（https://wordpress.org/plugins/code-snippets/)）这样的插件添加代码，从而避免直接修改主题文件。
  2. 你可以在主题位置导航菜单的 theme_location 或者 ID 如果情况 如果你添加特殊的菜单项到。以上的代码中试了了ID ，如果你也想使用ID，那么僵303改成你自己的菜单的ID即可。你可在在WordPress 管理面板中选择 外观 >菜单 然后选择要编辑的菜单的下拉列表中选择菜单，点击选择按钮，你就可以在浏览器的地址栏中看到您的菜单号例如：https://myexampleshopsite.com/wp-admin/nav-menus.php?action=edit&menu=303.你在最后看到的这个 303 就是你的菜单的ID。

发表评论

游客欢迎您123