วิธีเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเองให้กับรายการเมนูใน WordPress แอตทริบิวต์ข้อมูลที่กำหนดเองช่วยให้คุณสามารถแนบข้อมูลเพิ่มเติมให้กับรายการเมนู ซึ่งอาจมีประโยชน์สำหรับวัตถุประสงค์ต่างๆ เช่น การติดตาม การจัดรูปแบบ หรือการปรับปรุงการทำงาน เราจะทำสิ่งนี้ได้โดยไม่ต้องแก้ไขไฟล์ธีมหลักโดยใช้ธีมย่อยและปฏิบัติตามมาตรฐานการเขียนโค้ดของ WordPress ในบทช่วยสอนนี้จะไม่มีการใช้ปลั๊กอินเพื่อรักษาความเรียบง่ายและความยืดหยุ่นของโค้ด

เพิ่มฟิลด์ที่กำหนดเองให้กับตัวแก้ไขรายการเมนู

สมมติว่าคุณได้ตั้งค่า child theme ไว้แล้ว ให้เปิดไฟล์ function.php ของ child theme ของคุณในโปรแกรมแก้ไขโค้ด ภายในไฟล์ function.php ให้เพิ่มโค้ดต่อไปนี้:

// Add custom fields to menu item.
function add_custom_fields_to_menu_item( $item_id, $item, $depth, $args ) {
	$data_attribute_value = get_post_meta( $item_id, '_menu_item_data_attribute', true );
	?>
	<div class="field-custom-description description-wide">
		<label for="edit-menu-item-data-attribute-<?php echo esc_attr( $item_id ); ?>">
			<?php esc_html_e( 'Data Attribute', 'your-theme-text-domain' ); ?>
			<br />
			<input type="text" id="edit-menu-item-data-attribute-<?php echo esc_attr( $item_id ); ?>"
				class="widefat edit-menu-item-data-attribute"
				name="menu-item-data-attribute[<?php echo esc_attr( $item_id ); ?>]"
				value="<?php echo esc_attr( $data_attribute_value ); ?>" />
			<p class="description"><?php esc_html_e( 'Enter custom data attribute(s) in the format "data-attribute1=value1&data-attribute2=value2". Separate multiple attributes with an ampersand (&).', 'your-theme-text-domain' ); ?></p>
		</label>
	</div>
	<?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'add_custom_fields_to_menu_item', 10, 4 );

รหัสนี้จะเพิ่มฟิลด์ที่กำหนดเองให้กับตัวแก้ไขรายการเมนูในแบ็กเอนด์ WordPress ฟิลด์นี้อนุญาตให้ผู้ใช้ป้อนแอตทริบิวต์ข้อมูลที่กำหนดเองในรูปแบบที่ระบุ คำอธิบายมีไว้เพื่อแนะนำผู้ใช้เกี่ยวกับรูปแบบอินพุตที่ถูกต้อง

บันทึกฟิลด์ที่กำหนดเอง

หากต้องการบันทึกฟิลด์ที่กำหนดเองที่ผู้ใช้ป้อน ให้เพิ่มโค้ดต่อไปนี้ใต้โค้ดก่อนหน้า:

// Save custom fields.
function save_custom_fields( $menu_id, $menu_item_db_id, $menu_item_args ) {
 if ( isset( $_POST['menu-item-data-attribute'][ $menu_item_db_id ] ) ) {
 $data_attribute_value = sanitize_text_field( $_POST['menu-item-data-attribute'][ $menu_item_db_id ] );
 update_post_meta( $menu_item_db_id, '_menu_item_data_attribute', $data_attribute_value );
 }
}
add_action( 'wp_update_nav_menu_item', 'save_custom_fields', 10, 3 );

โค้ดนี้จัดการการบันทึกข้อมูลฟิลด์แบบกำหนดเองเมื่อมีการอัพเดตรายการเมนู โดยจะดึงค่าที่ป้อน ฆ่าเชื้อ และบันทึกเป็นฟิลด์ที่กำหนดเอง “_menu_item_data_attribute” โดยใช้ฟังก์ชัน update_post_meta()

แสดงแอตทริบิวต์ข้อมูลที่กำหนดเองบนส่วน frontend

หากต้องการแสดงแอตทริบิวต์ข้อมูลที่กำหนดเองในเมนูส่วน frontend ให้เพิ่มโค้ดต่อไปนี้ใต้โค้ดก่อนหน้า:

// Add attribute frontend.
function add_custom_data_attribute_to_menu_items( $atts, $item, $args, $depth ) {
 $custom_data_attribute = get_post_meta( $item->ID, '_menu_item_data_attribute', true );
 if ( ! empty( $custom_data_attribute ) ) {
 parse_str( $custom_data_attribute, $custom_atts );
 $atts = array_merge( $atts, $custom_atts );
 }
 return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_custom_data_attribute_to_menu_items', 10, 4 );

รหัสนี้จะดึงข้อมูลแอตทริบิวต์ข้อมูลที่กำหนดเองที่บันทึกไว้สำหรับแต่ละรายการเมนู และเพิ่มลงในแอตทริบิวต์ของลิงก์เมนูที่ส่วนหน้า ฟังก์ชัน parse_str() ใช้เพื่อแยกวิเคราะห์สตริงแอตทริบิวต์ข้อมูลที่กำหนดเองและแปลงเป็นอาร์เรย์ของคู่ค่าแอตทริบิวต์ จากนั้นแอตทริบิวต์จะถูกรวมเข้ากับแอตทริบิวต์ที่มีอยู่โดยใช้ array_merge()

บันทึกและทดสอบ

บันทึกไฟล์ function.php ที่แก้ไขแล้ว และอัปโหลดไปยังไดเร็กทอรีธีมย่อยของคุณ ตอนนี้ไปที่แบ็กเอนด์ WordPress และแก้ไขรายการเมนู คุณควรเห็นช่องแอตทริบิวต์ข้อมูลที่กำหนดเอง ป้อนแอตทริบิวต์ข้อมูลที่กำหนดเองที่คุณต้องการในรูปแบบที่ระบุและบันทึกรายการเมนู

https://hoolite.be/wordpress/add-custom-data-attributes-to-wordpress-menu-items