向 WordPress 菜单项添加自定义字段

已发表: 2021-03-23

在设计网站时，网站的菜单经常被忽略。 这可能是因为传统上定制化在技术上具有挑战性。 现在，WordPress 5.4 改变了这种情况，它引入了一些新的钩子，可以让您相对轻松地添加 WordPress 菜单自定义字段。

有问题的钩子是wp_nav_menu_item_custom_fields和wp_nav_menu_item_custom_fields_customize_template动作钩子。 使用这些，您现在可以轻松地将自己的自定义字段添加到管理菜单编辑页面和定制器选项面板中的菜单项。

在本文中，我们将介绍一些简单的方法，您可以使用wp_nav_menu_item_custom_fields钩子将您自己的自定义字段添加到菜单项，以及查看两个也可用于添加自定义字段而无需编码的插件.

我们走吧。

WordPress 菜单自定义字段挂钩

wp_nav_menu_item_custom_fields挂钩特定于菜单屏幕，描述如下：

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • 整数$id是菜单项 ID
  • $menu_item对象是菜单项数据对象
  • $depth整数是菜单项的深度
  • $args是菜单项参数的对象

该钩子在菜单编辑器中导航菜单项的移动按钮之前触发，并在wp-admin/includes/class-walker-nav-menu-edit.php文件中的第 242 行引入。

您可以通过一个非常简单的示例在实践中证明这一点。 打开活动主题的functions.php文件并添加以下代码：

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

现在，如果您进入菜单编辑管理页面，您将在每个菜单项下看到回显的字符串，如下面的屏幕截图所示。

当然，这根本没有任何功能，但显示了如何编辑菜单。 现在让我们通过以自定义字段的形式添加一些简单的功能来尝试更有用的东西。

使用代码添加 WordPress 菜单项自定义字段

在此示例中，我们将创建一个 WordPress 菜单自定义字段，允许我们将描述插入任何菜单项。

第一步：添加输出

首先，我们首先要做的是创建回调函数，该函数将显示管理员用户可以填写描述的输入字段。 这是执行此操作的代码：

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

将此代码添加到您的functions.php文件并保存。 现在，如果您重新登录 WordPress 网站的管理区域并打开菜单屏幕，您应该会看到您的字段显示。 在我们的例子中，我们称之为“项目描述”。 您当然可以自由编辑上面的代码，以根据您的需要命名您的字段。 请记住，它必须是一个唯一的名称。

第二步：保存输入

接下来，我们将在下面插入一段代码，它将更新数据库 post 元表中的字段值，这意味着我们的输入将被保存。

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

将此代码保存在您的functions.php文件中，您可以返回 WordPress 管理员，打开一个菜单项并在该字段中添加描述。 接下来，前往您的 phpMyAdmin 数据库，您应该能够在 post 元数据库表中看到该条目。

如果您更改菜单管理中的值，它应该反映在数据库中。 同样，如果您删除该值，它应该完全消失。

第三步：显示菜单字段值

接下来，我们将展示如何使用get_post_meta函数和nav_menu_item_title挂钩检索保存的菜单字段数据并将其显示在前端菜单中。 将以下代码添加到您的functions.php文件中。

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

nav_menu_item_title钩子过滤菜单项的标题，可以在wp-includes/class-walker-nav-menu.php文件的第 225 行附近找到。

它接受 4 个参数，菜单项的标题字符串、当前菜单项、wp_nav_menu() 参数的对象和一个整数，它是菜单项的深度。

您现在应该在菜单项标题下看到描述，并且使用适当的 CSS，您当然可以设置适合您网站的样式。

使用插件添加 WordPress 菜单项自定义字段

如果您不想卷入编写代码以向您的 WordPress 菜单添加自定义字段，那么好消息……有插件可以为您做到这一点。

高级自定义字段

广受欢迎且用途广泛的高级自定义字段插件再次展示了它的强大功能，能够将自定义字段添加到 WordPress 菜单。

安装并激活它后，打开插件，然后单击“添加新”按钮添加您的字段。 在位置规则下选择“菜单项”。 按照说明操作并根据需要更新字段。

发布字段后，您可以从管理区域前往 WordPress 菜单，查看您创建的新字段。 相当容易！

WP 菜单自定义字段

WP Menu Custom Fields 插件是一个相对较新的插件，顾名思义，它将帮助您向菜单项添加自定义字段。 您可以添加自定义文本、图像、简码或自定义 HTML。

WP Menu Custom Fields 不是通过专用插件界面创建自定义菜单项（就像您使用高级自定义字段所做的那样），而是将可编辑选项直接添加到管理菜单编辑区域中的任何菜单项。

它使用起来非常容易解释，并且是一种向菜单项添加自定义字段和其他内容的简单方法。 插件文档还提供了插件的钩子，您可以使用它来进一步自定义生成的每个功能的 HTML。

结论

向 WordPress 菜单添加自定义字段非常有用，可以帮助您增强网站中这个经常被忽视的区域。 如果你是一个自信的编码员，那么使用 WordPress 5.4 中提供的新钩子应该会相对容易，而非编码员可以充分利用可用的插件来完成这项任务。

也可以看看

  • 向 WordPress 菜单项添加字段 – 自定义插件