为 WordPress 菜单添加自定义选项打造超级菜单

知更鸟 2022年5月9日15:31:39WordPress6303阅读模式

最近疫情期间静止在家,终于有时间研究这个超级菜单,上篇是利用小工具创建超级菜单,再介绍一个通过为WordPress 菜单添加自定义选项,再利用短代码打造超级菜单的方法,废话不说直接上代码。文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

为 WordPress 菜单添加自定义选项打造超级菜单

效果演示

将代码添加到当前主题函数模板 functions.php 中:文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

展开代码文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

展开收缩
文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html
// 设置添加字段
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 );

文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

之后,会在菜单选项设置中增加一个复选表单,用于为顶级菜单添加特定CSS类,一个文本框为菜单子项添加短代码并添加CSS类,方便编写配套样式。文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

为 WordPress 菜单添加自定义选项打造超级菜单文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

 文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

上述,只是基本代码,并加了简单的注释,还需要编写短代码及相应的样式。文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

举一反三,能添加短代码,当然也能添加更多的自定义选项设置。文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

具体效果可以参阅我主题的超级菜单。文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

如果不想折腾代码可以安装相似功能的插件:WP Menu Custom Fields文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

为 WordPress 菜单添加自定义选项打造超级菜单文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

不过用插件,最后也需要折腾代码,因为在原菜单中强行加入自定义内容,不重写样式是肯定不行的。文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

 文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

 文章源自知更鸟-https://zmingcx.com/add-menu-item-in-wordpress.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 评论显示用户角色 WordPress

WordPress 评论显示用户角色

通过本文的方法,可以在WordPress每条评论显示注册用户角色标签。 代码一,自动在评论者名称后面添加 代码添加到当前主题函数模板 functions.php 中: if ( ! class_exi...
判断 WordPress 文章内容是否为空 WordPress

判断 WordPress 文章内容是否为空

如想在 WordPress 文章正文内容为空时,显示或隐藏某些内容,可以用下面的判断代码。其中比较有用的是文章中无图片时,在文章列表显示不同的样式。 方法一 <?php $content = g...
评论  6  访客  5  作者  1
    • 四五设计网
      四五设计网 1

      大佬这个不会贵在下个版本中出现呢

      • 微誓言
        微誓言 1

        这个功能很香,我也去尝试尝试

        • 造价圈
          造价圈 4

          好功能,坐等更新

          • 轨魅网
            轨魅网 1

            已升级~很香,很好吃。

          匿名

          发表评论

          匿名网友 填写信息

          :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

          确定