Menú personalizado de WordPress
WordPress es una de esas plataformas en las que se puede hacer casi todo. Todo lo que se necesita es pasar un par de minutos en el panel de administración, y usted puede hacer que su sitio se vea justo como usted quiere. Lo mismo ocurre con los menús personalizados. Crearlos y gestionarlos es realmente fácil, y cualquiera puede hacerlo.
Es muy importante tener menús intuitivos y bien organizados que faciliten a tus usuarios encontrar lo que necesitan en tu sitio. Organice y estructure bien sus categorías porque un menú debe funcionar como un mapa de su sitio web. Debe guiar a tus visitantes hacia el contenido que están buscando.
Para personalizar el menú por defecto de tu sitio web, tienes que entrar en el panel de control de WordPress, hacer clic en Apariencia y luego en Menús. Lo primero que tienes que hacer es darle un nombre al menú y luego hacer clic en el botón Crear menú.
Después de crearlo, puedes empezar a añadir tus elementos de menú. Todas las categorías, entradas y páginas de tu sitio web se reúnen en la columna de la izquierda, y desde ahí, puedes añadirlas a tus menús personalizados con sólo unos pocos clics.
Creador de menús gratis
En nuestra receta de menús, mostramos cómo construir varios tipos de menús con Kirby. Sin embargo, esos ejemplos funcionan con páginas principales y sus hijos y tienen sus límites cuando se trata de construir menús más flexibles donde la profundidad de una página no es importante o donde se necesitan múltiples menús con páginas seleccionadas.
En esta receta asumimos que estos menús están creados en site.yml, por lo que utilizamos el objeto $site al renderizarlos en la plantilla. Por supuesto, también puede utilizar estos menús en una página y ajustar el código de la plantilla en consecuencia.
En nuestra plantilla, recorremos todos los elementos y comprobamos si el enlace proporcionado es una página o una URL. Si se da el título del elemento de la estructura, se muestra el título de la página si se trata de un enlace de página o la URL acortada si se trata de un enlace externo.
El campo de estructura tiene un campo de páginas para el primer nivel de elementos del menú, y un segundo campo de páginas condicional para los elementos del submenú que sólo se muestra a los editores si establecen el campo de alternancia hasSubmenu en true. El campo de alternancia no es absolutamente necesario, pero ayuda a mantener el formulario conciso.
Diseño de menús
No importa qué tema de WordPress esté utilizando, casi seguro que le proporcionará al menos una ubicación de menú donde puede mostrar su menú (normalmente en la cabecera de su sitio web). Los menús pueden crearse fácilmente desde el área de administración y añadirse rápidamente a estas ubicaciones preestablecidas. Pero, ¿qué hacer si necesita otro menú para mostrar en otro lugar de su sitio web? En este tutorial vamos a ver cómo puede crear su propio menú de navegación que se puede mostrar en una ubicación de su elección sin tener que utilizar un plugin.
Lo primero que tenemos que hacer es registrar la ubicación de tu nuevo menú personalizado. Para ello, abre el archivo functions.php de tu tema activo con tu editor de texto preferido (como Sublime) y añade el siguiente código:
En este trozo de código hemos utilizado el gancho add_action() para añadir una función callback my_custom_menu(). Esto significa que la función my_custom_menu() se ejecutará junto con las funciones básicas por defecto que se ejecutan cada vez que se llama a la acción init. La cadena “Mi menú personalizado” es la versión legible que verá en la página de administración.
Creador de menús
Ahora que sabemos cómo crear un tema básico de WordPress desde cero, vamos a ver cómo crear un menú de navegación personalizado para nuestro tema. Este menú debe tener la capacidad de ser controlado desde el Dashboard de WordPress. En otras palabras, deberías poder ir al Dashboard y añadir o eliminar enlaces a las páginas, entradas o categorías que quieras. Al final de este tutorial, eso es exactamente lo que tendremos. Vamos a profundizar y ver cómo lograr este objetivo.
Adelante, abre el archivo header.php del tema en el que hemos estado trabajando. Nuestro objetivo será añadir un menú que viva por encima del contenido principal del sitio, pero por debajo del nombre del sitio y el área del eslogan. Para ello, podemos añadir el siguiente código:
Tenga en cuenta que hacemos uso de una función especial que nos proporciona WordPress de wp_nav_menu(). Esta función se encarga de todo el trabajo por usted en la construcción de un menú personalizado. No tienes que escribir manualmente todo el html, así que esto es bastante útil. Ahora no tenemos mucho en el camino de las páginas todavía, pero si visitamos nuestro sitio de prueba, la función ya es la salida de un enlace a la página de muestra que existe en nuestra instalación.