为 WordPress 菜单添加自定义选项打造超级菜单-小四运营

最近疫情期间静止在家，终于有时间研究这个超级菜单，上篇是利用小工具创建超级菜单，再介绍一个通过为WordPress 菜单添加自定义选项，再利用短代码打造超级菜单的方法，废话不说直接上代码。

效果演示

将代码添加到当前主题函数模板 functions.php 中：

展开代码

// 设置添加字段
function zm_menu_custom_fields( $item_id, $item ) {
	$menu_code = get_post_meta( $item_id, \'zm_menu_code_checkbox\', true );
	$menu_shortcode = get_post_meta( $item_id, \'zm_menu_shortcode\', true );
	?>

	<p class=\"zm-menu-code-label description\" style=\"margin: 10px 0\">
		<label for=\"zm-menu-code-<?php echo $item_id; ?>\" >
			<input type=\"checkbox\" id=\"zm-menu-code-<?php echo $item_id; ?>\" name=\"zm_menu_code[<?php echo $item_id; ?>]\" <?php checked( $menu_code, true ); ?> />
			为顶级菜单添加CSS类（仅在顶级菜单勾选）
		</label>
	</p>

	<p class=\"zm-menu-shortcode-label description\">
		<label for=\"zm-menu-shortcode-<?php echo $item_id; ?>\">
			输入短代码（仅在菜单子项目中使用）
		</label>
		<input type=\"hidden\" class=\"nav-menu-id\" value=\"<?php echo $item_id; ?>\" />
		<div class=\"logged-input-holder\">
			<input type=\"text\" name=\"zm_menu_shortcode[<?php echo $item_id; ?>]\" id=\"zm-menu-shortcode-<?php echo $item_id ;?>\" value=\"<?php echo esc_attr( $menu_shortcode ); ?>\" style=\"width: 100%;\">
		</div>
	</p>
	<?php
}

add_action( \'wp_nav_menu_item_custom_fields\', \'zm_menu_custom_fields\', 10, 2 );

// 保存字段
function zm_save_menu_custom_item_meta( $menu_id, $menu_item_db_id ) {
	$button_value = ( isset($_POST[\'zm_menu_code\'][$menu_item_db_id] ) && $_POST[\'zm_menu_code\'][$menu_item_db_id] == \'on\' ) ? true : false;
	update_post_meta( $menu_item_db_id, \'zm_menu_code_checkbox\', $button_value );

	if ( isset( $_POST[\'zm_menu_shortcode\'][$menu_item_db_id] ) ) {
		$sanitized_data = sanitize_text_field( $_POST[\'zm_menu_shortcode\'][$menu_item_db_id] );
		update_post_meta( $menu_item_db_id, \'zm_menu_shortcode\', $sanitized_data );
	} else {
		delete_post_meta( $menu_item_db_id, \'zm_menu_shortcode\' );
	}
}

add_action( \'wp_update_nav_menu_item\', \'zm_save_menu_custom_item_meta\', 10, 2 );

// 前端输出
function zm_menu_custom_output( $title, $item ) {
	if( is_object( $item ) && isset( $item->ID ) ) {
		$menu_shortcode = get_post_meta( $item->ID, \'zm_menu_shortcode\', true );

		// 输出菜单标题，可以删除
		if ( ! empty( $menu_shortcode ) ) {
			$title = \'<span class=\"zm-menu-custom-title\">\'.$title.\'</span>\';
		}

		// 输出短代码
		if ( ! empty( $menu_shortcode ) ) {
			$title .= \'<span class=\"show-menu-shortcode\">\' . do_shortcode( $menu_shortcode ) . \'</span>\';
		}
	}

	return $title;
}

add_filter( \'nav_menu_item_title\', \'zm_menu_custom_output\', 10, 2 );

// 添加CSS类
function zm_menu_custom_add_class( $classes, $menu_item ) {
	$menu_code = get_post_meta( $menu_item->ID, \'zm_menu_code_checkbox\', true );
	$menu_shortcode = get_post_meta( $menu_item->ID, \'zm_menu_shortcode\', true );

	// 为顶级菜单添加CSS类
	if ( ! empty( $menu_code ) ) {
		$classes[] = \'zm-menu-code\';
	}
	// 为子菜单添加CSS类
	if ( ! empty( $menu_shortcode ) ) {
		$classes[] = \'zm-menu-shortcode\';
	}

	return $classes;
}
add_filter( \'nav_menu_css_class\', \'zm_menu_custom_add_class\', 10, 2 );

之后，会在菜单选项设置中增加一个复选表单，用于为顶级菜单添加特定CSS类，一个为菜单子项添加短代码并添加CSS类，方便编写配套样式。

上述，只是基本代码，并加了简单的注释，还需要编写短代码及相应的样式。

举一反三，能添加短代码，当然也能添加更多的自定义选项设置。

具体效果可以参阅我主题的超级菜单。

效果演示

如果不想折腾代码可以安装相似功能的插件：WP Menu Custom Fields

不过用插件，最后也需要折腾代码，因为在原菜单中强行加入自定义内容，不重写样式是肯定不行的。