Agregar campos personalizados a los elementos del menú de WordPress

El menú de un sitio web a menudo se descuida al diseñar un sitio. Esto podría deberse a que tradicionalmente ha sido técnicamente difícil de personalizar. Esto ahora ha cambiado con WordPress 5.4, que introdujo algunos ganchos nuevos que le permitirán agregar campos personalizados al menú de WordPress con relativa facilidad.

Los ganchos en cuestión son los ganchos de acción wp_nav_menu_item_custom_fields y wp_nav_menu_item_custom_fields_customize_template . Con estos, ahora puede agregar fácilmente sus propios campos personalizados a los elementos del menú tanto en la página de edición del menú de administración como en el panel de opciones del Personalizador.

En este artículo, veremos algunas formas simples en las que puede usar el wp_nav_menu_item_custom_fields para agregar sus propios campos personalizados a los elementos del menú, así como también veremos dos complementos que también se pueden usar para agregar campos personalizados sin tener que codificar .

Vámonos.

El gancho de campo personalizado del menú de WordPress

El wp_nav_menu_item_custom_fields es específico de la pantalla Menú y se describe a continuación:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );

• El entero $id es el ID del elemento del menú
• El objeto $menu_item es el objeto de datos del elemento de menú
• El entero $depth es la profundidad del elemento del menú
• El $args es el objeto de los argumentos del elemento del menú.

El gancho se activa justo antes de los botones de movimiento de un elemento del menú de navegación en el editor de menú y se introduce en el archivo wp-admin/includes/class-walker-nav-menu-edit.php alrededor de la línea 242.

Puede demostrar esto en la práctica con un ejemplo muy simple. Abra el archivo functions.php de su tema activo y agregue este fragmento de código:

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

Ahora, si ingresa a la página de administración de edición del menú, verá la cadena repetida debajo de cada elemento del menú, como se muestra en la captura de pantalla a continuación.

Por supuesto, esto no tiene ninguna funcionalidad, pero muestra cómo es posible editar el menú. Probemos ahora algo más útil agregando alguna funcionalidad simple en forma de un campo personalizado.

Agregue un campo personalizado de elemento de menú de WordPress usando código

En este ejemplo, vamos a crear un campo personalizado de menú de WordPress que nos permita insertar una descripción en cualquier elemento del menú.

Paso uno: agregar la salida

Para comenzar, lo primero que haremos es crear la función de devolución de llamada que mostrará el campo de entrada donde el usuario administrador puede completar la descripción. Aquí está el código para hacer esto:

 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 );

Agregue este código a su archivo functions.php y guárdelo. Ahora, si vuelve a iniciar sesión en el área de administración de su sitio web de WordPress y abre la pantalla Menús, debería ver su campo mostrado. En nuestro caso, lo hemos llamado 'Descripción del artículo'. Por supuesto, puede editar el código anterior para nombrar su campo como mejor le parezca. Solo tenga en cuenta que debe ser un nombre único.

Paso dos: Guardar su entrada

A continuación, insertaremos el fragmento de código a continuación que actualizará el valor del campo en la metatabla de publicación de la base de datos, lo que significa que nuestra entrada se guardará.

 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 );

Con este código guardado en su archivo functions.php , puede regresar a su administrador de WordPress, abrir un elemento de menú y agregar una descripción al campo. A continuación, diríjase a su base de datos phpMyAdmin y debería poder ver la entrada en la tabla de la metabase de datos posterior.

Si cambia el valor en el menú de administración, debería reflejarse en la base de datos. Del mismo modo, si elimina el valor, debería desaparecer por completo.

Paso tres: mostrar el valor del campo del menú

A continuación, mostraremos cómo podemos recuperar los datos de nuestros campos de menú guardados y mostrarlos en el menú frontal mediante el uso de la función get_post_meta y el gancho nav_menu_item_title . Agregue el siguiente código a su archivo 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 );

El gancho nav_menu_item_title filtra el título de un elemento de menú y se puede encontrar dentro del archivo wp-includes/class-walker-nav-menu.php alrededor de la línea 225.

Acepta 4 parámetros, la cadena de título del elemento del menú, el elemento del menú actual, un objeto de argumentos wp_nav_menu() y un número entero que es la profundidad del elemento del menú.

Ahora debería ver la descripción debajo del título del elemento del menú y, utilizando el CSS apropiado, puede, por supuesto, diseñarlo para que se adapte a su sitio web.

Agregue un campo personalizado de elemento de menú de WordPress usando un complemento

Si no quiere verse envuelto en la escritura de código para agregar un campo personalizado a su menú de WordPress, entonces buenas noticias... hay complementos que pueden hacer esto por usted.

Campos personalizados avanzados

El complemento de campos personalizados avanzados, enormemente popular y siempre versátil, demuestra una vez más su poder aquí con la capacidad de agregar campos personalizados al menú de WordPress.

Después de instalarlo y activarlo, abra el complemento y luego haga clic en el botón 'Agregar nuevo' para agregar sus campos. Seleccione 'Elemento de menú' en las reglas de ubicación. Siga las instrucciones y actualice los campos según sea necesario.

Una vez que publique el campo, puede dirigirse a su menú de WordPress desde el área de administración para ver el nuevo campo que ha creado. ¡Muy fácil!

Campos personalizados del menú WP

El complemento WP Menu Custom Fields es un complemento relativamente nuevo que, como su nombre indica, lo ayudará a agregar campos personalizados a los elementos de su menú. Puede agregar un texto personalizado, una imagen, un código abreviado o un HTML personalizado.

En lugar de crear elementos de menú personalizados a través de una interfaz de complemento dedicada (como lo hace con los campos personalizados avanzados), los campos personalizados de menú de WP agregan opciones editables directamente a cualquier elemento de menú en el área de edición del menú de administración.

Es bastante autoexplicativo de usar y una buena manera fácil de agregar campos personalizados y otro contenido a los elementos de su menú. La documentación del complemento también proporciona los ganchos del complemento que puede usar para personalizar aún más el HTML generado para cada característica.

Conclusión

Agregar campos personalizados a los menús de WordPress puede ser realmente útil y puede ayudarlo a mejorar esta área a menudo descuidada de su sitio web. Si eres un programador seguro, usar los nuevos ganchos provistos en WordPress 5.4 debería resultar relativamente fácil, mientras que los que no son programadores pueden aprovechar al máximo los complementos disponibles para lograr esta tarea.

Ver también

• Agregar campos a los elementos del menú de WordPress: complemento personalizado