WordPress教程

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

阿里云

从 WordPress5.4 开始,新增了 wp_nav_menu_item_custom_fields 钩子,让我们可以通过这个钩子添加自定义字段到菜单项。

注意:本文代码只能在 WordPress 5.4+ 的版本中才可用。

也想出现在这里?联系我们
创客主机

section

一、添加自定义字段,我们将回调函数附加到新的钩子上,并使用它来显示文本输入框。因为 Walker 显示了多个菜单项,所以我们必须确保输入内容是菜单项的 ID:

  1. function kia_custom_fields( $item_id, $item ) {
  2.  
  3.     wp_nonce_field( 'custom_menu_meta_nonce', '_custom_menu_meta_nonce_name' );
  4.     $custom_menu_meta = get_post_meta( $item_id, '_custom_menu_meta', true );
  5.     ?>
  6.  
  7.     <input type="hidden" name="custom-menu-meta-nonce" value="<?php echo wp_create_nonce( 'custom-menu-meta-name' ); ?>"/>
  8.  
  9.     <div class="field-custom_menu_meta description-wide" style="margin: 5px 0;">
  10.             <span class="description"><?php _e( "Extra Field", 'custom-menu-meta' ); ?></span>
  11.             <br/>
  12.  
  13.             <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>"/>
  14.  
  15.             <div class="logged-input-holder">
  16.                     <input type="text" name="custom_menu_meta[<?php echo $item_id ;?>]" id="custom-menu-meta-for-<?php echo $item_id ;?>" value="<?php echo esc_attr( $custom_menu_meta ); ?>"/>
  17.                     <label for="custom-menu-meta-for-<?php echo $item_id ;?>">
  18.                             <?php _e( 'Custom menu text', 'custom-menu-meta'); ?>
  19.                     </label>
  20.             </div>
  21.  
  22.     </div>
  23.  
  24.     <?php
  25. }
  26. add_action( 'wp_nav_menu_item_custom_fields', 'kia_custom_fields', 10, 2 );

注意:上面的示例用的字段 id 是 _custom_menu_meta,请注意根据你的实际需要去修改字段的 id。下文的代码也一样记得修改为统一的字段 id。

二、保存字段设置,由于菜单项是 WordPress 的一种自定义文章类型,因此处理数据与添加和检索常规文章或页面的 post_meta 相同。

  1. function kia_nav_update( $menu_id, $menu_item_db_id ) {
  2.  
  3.     // Verify this came from our screen and with proper authorization.
  4.     if ( ! isset( $_POST['_custom_menu_meta_nonce_name'] ) || ! wp_verify_nonce( $_POST['_custom_menu_meta_nonce_name'], 'custom_menu_meta_nonce' ) ) {
  5.         return $menu_id;
  6.     }
  7.  
  8.     if ( isset( $_POST['custom_menu_meta'][$menu_item_db_id] ) ) {
  9.         $sanitized_data = sanitize_text_field( $_POST['custom_menu_meta'][$menu_item_db_id] );
  10.         update_post_meta( $menu_item_db_id, '_custom_menu_meta', $sanitized_data );
  11.     } else {
  12.         delete_post_meta( $menu_item_db_id, '_custom_menu_meta' );
  13.     }
  14. }
  15. add_action( 'wp_update_nav_menu_item', 'kia_nav_update', 10, 2 );

section

上面的数据可以保存在数据中了,那我们该如何调用呢?

其实,这个和文章的 meta 是一样的,毕竟菜单就是一种自定义文章类型。我们可以通过 get_post_meta()函数获取,比如:

  1. get_post_meta( $item->ID, '_custom_menu_meta', true );

相信做过 WP 开发的人,就非常熟悉这个函数了。

下面是一个简单的示例,将我们这个例子的字段值,用作标题后面的一个描述文字:

  1. function kia_custom_menu_title( $title, $item ) {
  2.  
  3.     if( is_object( $item ) && isset( $item->ID ) ) {
  4.  
  5.         $custom_menu_meta = get_post_meta( $item->ID, '_custom_menu_meta', true );
  6.  
  7.         if ( ! empty( $custom_menu_meta ) ) {
  8.             $title .= ' - ' . $custom_menu_meta;
  9.         }
  10.     }
  11.     return $title;
  12. }
  13. add_filter( 'nav_menu_item_title', 'kia_custom_menu_title', 10, 2 );

只要你始终记得 菜单 是一种自定义文章类型,那很多逻辑就比较好理解了,毕竟作为 WP 开发者,对文章的自定义字段应该比较熟悉。

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

已有 231 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!