Agregue metaconfiguraciones personalizadas fáciles de usar a los elementos del menú de WordPress

En una actualización reciente de WordPress, ahora es posible y bastante simple agregar metacampos personalizados a los elementos del menú. En esta publicación, aprenderemos cómo agregar nuestra configuración personalizada a los elementos del menú, actualizar su configuración y, finalmente, cómo utilizar los metadatos.

Recientemente, WordPress anunció soporte para agregar campos personalizados a los elementos del menú en la versión 5.4. Se agregaron dos nuevas acciones que permiten a los desarrolladores agregar campos personalizados en la página de administración del menú de WordPress y en el editor de menú del Personalizador. En esta publicación nos centraremos en uno de ellos, el de la página de administración del menú de WordPress.

Con este cambio, ya no es necesario obligar a los usuarios de temas o complementos a recordar y escribir los nombres de las clases para activar la "configuración" de los elementos del menú. Hasta ahora, este ha sido un proceso común para cosas como hacer que un elemento del menú parezca un botón o cambiar entre diferentes diseños de menús desplegables. A menudo en combinación con un caminante de menús personalizado.

Tenga en cuenta que para que este código funcione se requiere la versión mínima de WordPress 5.4.0.

Lo que haremos en este tutorial

Con el nuevo enlace a los elementos del menú y el soporte de WordPress para agregar metadatos a los elementos del menú, realmente no hay límite en cuanto a qué tipo de configuración desea. El proceso depende de cuál sea el resultado final. En la mayoría de los casos, basta con agregar una clase CSS personalizada al elemento del menú.

Para mantenerlo simple, en esta publicación agregaremos una casilla de verificación etiquetada como "Mostrar como botón". En nuestro tema tenemos CSS que diseñará un elemento de menú para que parezca un botón (llamada a la acción) si el elemento tiene una clase determinada. En lugar de obligar al usuario del tema a escribir la clase de CSS "menú-elemento-botón" en el campo de clase de CSS del elemento de menú en el administrador, les ofrecemos una casilla de verificación fácil de usar.

Al final de esta publicación, encontrará algunas ideas para otras acciones y filtros que puede usar si desea hacer algo más que agregar una clase CSS.

¡Empecemos!

Agregar campos personalizados a los elementos del menú

El nuevo gancho agregado recientemente es [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). Es un gancho que se dispara justo encima de los botones de movimiento de un elemento del menú;

El gancho viene con no menos de cinco parámetros. En este post haremos cosas que solo requieren las dos primeras.

• item_id: El ID del elemento de menú actual
• item: objeto de datos del elemento de menú
• depth: La profundidad del elemento de menú dentro del menú, representada como un número entero
• args: un objeto de argumentos de elementos de menú
• nav_id: El ID del menú de navegación

Todas las entradas agregadas en este enlace deben tener un nameatributo (ya que el editor de menú es un formulario). El atributo de nombre puede tener el nombre que desee, pero debe ser único y debe agregar el ID del elemento de menú (primer parámetro) entre corchetes. Por ejemplo name="my-custom-field[<item ID>], «. Así es como lo hacen las otras configuraciones de elementos de menú estándar.

Comencemos con un ejemplo de agregar una casilla de verificación para hacer que el elemento del menú se vea como un botón cuando el menú se coloca como el menú principal. Nos conectaremos wp_nav_menu_item_custom_fieldssolo con los dos primeros parámetros y haremos lo siguiente:

add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {
    $show_as_button = get_post_meta($item_id, '_show-as-button', true);
    ?>
    <p class="awp-show-as-button description description-wide">
        <label for="awp-menu-item-button-<?php echo $item_id; ?>" >
            <input type="checkbox" 
                id="awp-menu-item-button-<?php echo $item_id; ?>" 
                name="awp-menu-item-button[<?php echo $item_id; ?>]" 
                <?php checked($show_as_button, true); ?> 
            /><?php _e('Show as a button', 'awp'); ?>
        </label>
    </p>
    <?php
}, 10, 2);

En la línea #2buscamos el valor actual de nuestro elemento de menú meta. Los elementos del menú usan post meta, por lo que usamos [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()los que probablemente ya esté familiarizado. Almacenamos los metadatos del elemento del menú con la tecla ‘ _show-as-button‘.

Entonces es cuestión de hacer eco de un buen HTML. El código anterior usa algunas de las clases que ya se usan para los elementos del menú para que se vea bien sin agregar un estilo personalizado (una petiqueta con las clases " description description-wide").

Las partes importantes suceden en línea #8y #9. Seguimos la regla del atributo de nombre, agregando $item_identre paréntesis, y nos aseguramos de que el valor guardado actual se refleje en la casilla de verificación. Puede agregar cualquier tipo de entradas, e incluso múltiples entradas aquí. Solo recuerde proporcionar el nameatributo apropiado y establecer su valor actual correctamente.

Con este código en el código de su tema functions.phpo complemento, ahora debería obtener una nueva casilla de verificación para todos los elementos del menú:

Actualmente no está salvando nuestro campo. Ese es el siguiente paso.

Actualización de los campos personalizados

Para actualizar los campos personalizados en los elementos del menú, usamos el gancho [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Viene con tres argumentos, pero solo necesitamos el segundo, que es el ID del elemento del menú.

La forma en que maneje guardar el valor de su(s) entrada(s) depende de usted. Elegí simplemente guardar ‘ _show-as-button‘ como verdadero o falso. Simplemente use [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()y/o [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().

add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
    $button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
    update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);

En el código anterior busco el valor del campo personalizado por su nombre en la $_POSTmatriz. Dado que es una casilla de verificación, no existirá en la $_POSTmatriz (sin marcar) o se devolverá como ‘ on‘. Luego actualizo la clave meta ‘ _show-as-button‘ como verdadera o falsa.

Con el código anterior, debería ver que su campo se actualiza correctamente al guardar el menú.

El siguiente paso es hacer algo con nuestros metadatos personalizados. Y cómo lo haga depende de cuál sea el resultado final. En cuanto a nuestro ejemplo, todo lo que tenemos que hacer es agregar una clase personalizada al elemento del menú.

Actualizar elemento de menú clase CSS

WordPress ofrece un filtro en las clases del elemento del menú: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Todo lo que tenemos que hacer es agregar una clase personalizada a la matriz mediante este filtro si nuestro meta personalizado es true. Usamos [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()para obtener el valor de ‘ _show-as-button‘ y si es cierto, agregamos la clase CSS ‘ menu-item-button‘:

add_filter('nav_menu_css_class', function($classes, $menu_item) {
    $show_as_button = get_post_meta($menu_item->ID, '_show-as-button', true);
    if ($show_as_button) {
        $classes[] = 'menu-item-button';
    }
    return $classes;
}, 10, 2);

El nav_menu_css_classfiltro viene con un total de cuatro argumentos, incluidos los argumentos del menú y la profundidad del elemento del menú. Si es necesario, puede hacer que los nombres de las clases se vean afectados por estos valores. Por ejemplo, normalmente no tendría sentido transformar un elemento de menú en un botón a menos que esté en el nivel superior (y no dentro de un menú desplegable).

Con el código anterior, ahora debería ver que cualquier elemento de menú que haya marcado "Mostrar como botón" obtendrá la clase ‘ menu-item-button‘.

Tenga en cuenta: es posible que experimente que el nav_menu_css_classfiltro no se aplica si el menú usa un menú personalizado que, por ejemplo, contiene el método start_el(). ¡ El caminante debe aplicar el nav_menu_css_classfiltro en las clases del elemento del menú (usando apply_filters()) para que funcione el filtro anterior!

Otros usos de los metacampos personalizados de elementos de menú

Como se mencionó, el proceso de usar los campos personalizados depende del resultado final. Es difícil hacer una publicación que cubra todas las posibilidades. Pero al menos esto debería darte algunas ideas. El ejemplo anterior mostró cómo simplemente agregar una clase personalizada al elemento del menú.

En otros casos, es posible que desee aprovechar los metadatos en un caminante de menú. En la mayoría de las funciones en un caminante de menús, tiene acceso a la ID del elemento del menú y, por lo tanto, puede obtener fácilmente los metadatos.

Una alternativa al uso de un caminante de menú personalizado puede usar el filtro [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)para tener más control sobre el objeto del elemento de menú.

O puede usar el filtro [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)para, por ejemplo, excluir elementos del menú, si su configuración es limitar la visibilidad del elemento del menú.