Los menús de WordPress son una funcionalidad bastante completa, intuitiva y fácil de utilizar para crear menús. Pero a veces se nos pueden quedar cortos, sobre todo cuando el equipo de diseño da rienda suelta a su creatividad y utiliza el lienzo en blanco del que suelen partir para generar una estructura compleja.
A lo largo de los años, me ha tocado integrar multitud de menús, y llega un momento donde tienes que crear ajustes adicionales para que, por un lado el usuario pueda elegir la configuración que desee, y por otro pintar la salida HTML que corresponda.
Desde la versión 5.4 de WordPress tenemos a nuestra disposición el hook wp_nav_menu_item_custom_fields para crear nuestros propios campos personalizados para los menús.
Veamos con un ejemplo práctico cómo añadir un campo personalizado a los menús de WordPress. Añadamos un campo para permitir al usuario subir una imagen a los items de menú. Lo primero agrega al functions.php:
Este hook acepta 5 parámetros, y con ellos podremos (como en el ejemplo) evitar añadir el custom field en el primer nivel de menú. El HTML de este hook se añadirá al item de menú en el dashboard de WordPress:
Para que el botón de «Subir imagen» funcione como la galería de medios, será también necesario incluir unas librerías de JavaScript y un JS personalizado:
Nuestro archivo JavaScript personalizado (nav-menus.js) tendrá el siguiente contenido:
jQuery(document).ready(function ($) {
$('.nav-menu-item-upload').on("click", function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
wp.media.editor.send.attachment = function(props, attachment) {
$(button).next().show();
$(button).next().next().val(attachment.id).show();
$(button).closest('.menu-item-image-buttons').next().find('img').attr('src', attachment.url).show();
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
$('.nav-menu-item-delete').on("click", function() {
var button = $(this);
$(button).hide();
$(button).next().val('');
$(button).closest('.menu-item-image-buttons').next().find('img').attr('src', '').hide();
return false;
});
});Esto básicamente lo que hace es dotar de la funcionalidad de la librería de medios al botón «Subir imagen». También añadiremos funcionalidad al botón «Eliminar», vaciando el input correspondiente para que cuando guardemos el menú, se borre la configuración que estuviera establecida.
Para manejar el guardado de datos, tendremos que añadir también la siguiente función:
Y con esto ya estaría todo. Ahora el siguiente paso será crear un Walker para generar el menú, y donde podrás consultar si el item correspondiente tiene imagen o no para pintarlo en el HTML resultante.
La entrada Cómo añadir campos personalizados a los menús de WordPress se publicó primero en Desarrollo WordPress en Español: trucos, tutoriales, guías, noticias, consejos....
