WordPress添加自定義字段到菜單項

在《WordPress 5.4可將自定義字段添加到菜單項》中，我們簡單介紹了添加自定義字段到菜單項的鉤子，但是其中的例子太簡單了。今天看到朋友評論問到：如何添加輸入框字段。倡萌Google了一下，找到了 Nav Menu Roles 插件作者的一篇文章，里面完整介紹了一個例子。

從WordPress5.4開始，新增了wp_nav_menu_item_custom_fields 鉤子，讓我們可以通過這個鉤子添加自定義字段到菜單項。

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

添加自定義字段

首先，我們將回調(diào)函數(shù)附加到新的鉤子上，并使用它來顯示文本輸入框。因為Walker顯示了多個菜單項，所以我們必須確保輸入內(nèi)容是菜單項的ID：

/**
* Add custom fields to menu item
*
* This will allow us to play nicely with any other plugin that is adding the same hook
*
* @param  int $item_id 
* @params obj $item - the menu item
* @params array $args
*/
function kia_custom_fields( $item_id, $item ) {

	wp_nonce_field( 'custom_menu_meta_nonce', '_custom_menu_meta_nonce_name' );
	$custom_menu_meta = get_post_meta( $item_id, '_custom_menu_meta', true );
	?>

	<input type="hidden" name="custom-menu-meta-nonce" value="<?php echo wp_create_nonce( 'custom-menu-meta-name' ); ?>" />

	<div class="field-custom_menu_meta description-wide" style="margin: 5px 0;">
	    <span class="description"><?php _e( "Extra Field", 'custom-menu-meta' ); ?></span>
	    <br />

	    <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />

	    <div class="logged-input-holder">
	        <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 ); ?>" />
	        <label for="custom-menu-meta-for-<?php echo $item_id ;?>">
	            <?php _e( 'Custom menu text', 'custom-menu-meta'); ?>
	        </label>
	    </div>

	</div>

	<?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'kia_custom_fields', 10, 2 );

注意：上面的示例用的字段id是 _custom_menu_meta，請注意根據(jù)你的實際需要去修改字段的id。下文的代碼也一樣記得修改為統(tǒng)一的字段id。

保存字段設置

由于菜單項是WordPress的一種自定義文章類型，因此處理數(shù)據(jù)與添加和檢索常規(guī)文章或頁面的post_meta相同。

/**
* Save the menu item meta
* 
* @param int $menu_id
* @param int $menu_item_db_id	
*/
function kia_nav_update( $menu_id, $menu_item_db_id ) {

	// Verify this came from our screen and with proper authorization.
	if ( ! isset( $_POST['_custom_menu_meta_nonce_name'] ) || ! wp_verify_nonce( $_POST['_custom_menu_meta_nonce_name'], 'custom_menu_meta_nonce' ) ) {
		return $menu_id;
	}

	if ( isset( $_POST['custom_menu_meta'][$menu_item_db_id]  ) ) {
		$sanitized_data = sanitize_text_field( $_POST['custom_menu_meta'][$menu_item_db_id] );
		update_post_meta( $menu_item_db_id, '_custom_menu_meta', $sanitized_data );
	} else {
		delete_post_meta( $menu_item_db_id, '_custom_menu_meta' );
	}
}
add_action( 'wp_update_nav_menu_item', 'kia_nav_update', 10, 2 );

如何調(diào)用自定義字段的數(shù)據(jù)

上面的數(shù)據(jù)可以保存在數(shù)據(jù)中了，那我們該如何調(diào)用呢？

其實，這個和文章的meta是一樣的，畢竟菜單就是一種自定義文章類型。我們可以通過get_post_meta()函數(shù)獲取，比如：

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

相信做過WP開發(fā)的人，就非常熟悉這個函數(shù)了。

下面是一個簡單的示例，將我們這個例子的字段值，用作標題后面的一個描述文字：

/**
* Displays text on the front-end.
*
* @param string   $title The menu item's title.
* @param WP_Post  $item  The current menu item.
* @return string      
*/
function kia_custom_menu_title( $title, $item ) {

	if( is_object( $item ) && isset( $item->ID ) ) {

		$custom_menu_meta = get_post_meta( $item->ID, '_custom_menu_meta', true );

		if ( ! empty( $custom_menu_meta ) ) {
			$title .= ' - ' . $custom_menu_meta;
		}
	}
	return $title;
}
add_filter( 'nav_menu_item_title', 'kia_custom_menu_title', 10, 2 );

總結

只要你始終記得 菜單 是一種自定義文章類型，那很多邏輯就比較好理解了，畢竟作為WP開發(fā)者，對文章的自定義字段應該比較熟悉。

以上就是一個很好的例子，代碼參考出自：https://www.kathyisawesome.com/add-custom-fields-to-wordpress-menu-items/