Ahora que sabemos cómo crear un tema básico de WordPress desde cero, echemos un vistazo a cómo crear un menú de navegación personalizado para nuestro tema. Este menú debería poder controlarse desde el panel de WordPress. En otras palabras, debería poder ir al Panel de control y agregar o eliminar enlaces a las páginas, publicaciones o categorías que desee. Al final de este tutorial, eso es exactamente lo que tendremos. Profundicemos y veamos cómo lograr este objetivo.
Abrir header.php
Continúe y abra el archivo header.php del tema en el que hemos estado trabajando. Nuestro objetivo será agregar un menú que esté encima del contenido del sitio principal pero debajo del nombre del sitio y el área del lema. Para hacer esto, podemos agregar el siguiente código a continuación:
Tenga en cuenta que usamos una función especial que nos proporciona WordPress de wp_nav_menu () . Esta función se encarga de todo el trabajo preliminar a la hora de crear un menú personalizado. No tiene que escribir manualmente todo el html usted mismo, por lo que esto es muy útil. Ahora no tenemos muchas páginas todavía, pero si visitamos nuestro sitio de prueba, la función ya está generando un enlace a la página de muestra que existe en nuestra instalación.
Pasando argumentos a la función wp_nav_menu ()
Como la mayoría de las funciones en WordPress, puede pasar argumentos opcionales a la función wp_nav_menu (). Aquí configuraremos una matriz y configuraremos solo una opción. Usamos una matriz en caso de que queramos pasar múltiples opciones en el futuro. Así es como podemos agregar ese fragmento de código.
Esta opción nos da una forma de nombrar ciertos menús en nuestro tema. Es posible que deseemos tener más de un menú, y este es el método mediante el cual puede diferenciar entre varios menús.
Registrar la ubicación del menú en functions.php
Para hacer uso del menú que acabamos de crear en nuestro archivo header.php, desde el panel de administración de WordPress, debemos registrar la ubicación del menú en el archivo functions.php del tema. Entonces, ¿cómo podemos registrar nuestro nuevo menú con WordPress? Podemos hacer esto con la función register_nav_menus () integrada en WordPress. Registremos nuestro menú como tal.
Configure nuestro menú personalizado en WordPress Dashboard
Nuestro nuevo menú ahora debería estar registrado con el núcleo de WordPress. WordPress ahora conoce nuestro menú y su ubicación en el tema. Ahora podemos ir al panel, crear un nuevo menú y administrar su ubicación. Específicamente, queremos que aparezca donde hicimos uso de esa función wp_nav_menu (). Vamos a visitar Apariencia-> Menús y luego hacer clic en 'crear un nuevo menú'.
Podemos nombrar este menú como queramos. Simplemente elegiremos Menú principal para que sea más fácil y luego haremos clic en 'Crear menú'.
En este próximo paso, enlazaremos a todas nuestras categorías. Entonces podemos elegir Categorías, Seleccionar todo, actualizar la ubicación de la pantalla a 'Menú principal' y luego hacer clic en 'Guardar menú'. Probémoslo.
Visitar nuestro sitio nos muestra que ahora estamos obteniendo un enlace a cada categoría en el nuevo menú que hemos creado. Es solo una lista desordenada en este momento, y aún no es la más bonita, ¡pero está funcionando!
¿Cuál es el beneficio de registrar su menú personalizado?
Sé que sé. Estás pensando que ni siquiera tiene sentido pasar por todo este alboroto solo para obtener algunos hipervínculos a algunas categorías para mostrar en tu sitio. De alguna manera, tienes razón. ¿Por qué no crear manualmente algunas de estas cosas usted mismo? Claro, eso se puede hacer, pero cuando creamos nuestro menú como lo hicimos aquí, ahora tenemos el poder del Tablero de WordPress para controlar el código que hemos incluido en nuestro tema. Ahora podemos arrastrar y soltar fácilmente el orden de enlaces, entre otras cosas, directamente desde el Panel de control. Cambiemos el orden de WordPress, PHP, JavaScript a JavaScript, WordPress y luego PHP. ¡Muy fácil!
Ahora, cuando visita el sitio, se actualiza el orden de los enlaces en el menú. No se requiere jugar con el código subyacente con este enfoque.
Dale estilo a ese menú personalizado
¡Esa lista desordenada simplemente no va a ser suficiente! Necesitamos hacer las cosas un poco más ingeniosas que eso. Dediquemos un poco de tiempo a aplicar CSS personalizado para limpiar un poco ese menú. En primer lugar, queremos convertir la lista desordenada orientada verticalmente en un menú orientado horizontalmente. También nos gustaría eliminar las viñetas de cada elemento de la lista, agregar algo de relleno y margen, así como eliminar el subrayado de los enlaces. Aquí hay una idea de cómo crear ese efecto en nuestro archivo style.css.
Están sucediendo muchas cosas en el CSS mencionado anteriormente. Repasemos eso. En el primer selector ul .navigation-menu, estamos eliminando todo el relleno y el margen de la lista desordenada. A continuación, nos aseguramos de que la lista desordenada borre los flotantes de los elementos secundarios de la lista. En el selector ul li de .navigation-menu, eliminamos las viñetas de la lista, hacemos flotar los elementos de la lista hacia la izquierda y agregamos un pequeño margen a la derecha. Al final, apuntamos a los enlaces. Primero los convertimos en elementos de nivel de bloque con un relleno de 12px vertical y 17px horizontal. Agregamos un bonito efecto de borde y eliminamos el subrayado en los enlaces. Veámoslo ahora en el navegador.
¡Agradable! Ese menú se ve mucho mejor de lo que parecía inicialmente.
Cómo agregar un color personalizado al pasar el mouse al menú
Los estilos básicos en su lugar. Sería bueno tener un pequeño efecto de desplazamiento cuando se mueve el mouse sobre cada enlace. Esto es muy fácil de configurar usando el siguiente fragmento:
¡Eso se ve bastante bien!
Cómo apuntar al estado activo de un elemento del menú
Otra cosa que nos gustaría agregar es la capacidad de personalizar el color de un enlace activo. Esto es diferente del simple efecto de desplazamiento. En este caso, cuando visitamos un enlace en particular del menú, queremos que WordPress sepa que esta es ahora la página activa que se está viendo y que actualice la representación visual para reflejar el enlace activo. Para hacer esto, podemos hacer uso de una clase especial que está integrada en WordPress para abordar esto mismo. Esta es la clase de elemento de menú actual. Así es como podemos incorporarlo a nuestro menú personalizado.
Si visitamos nuestro sitio ahora y probamos visitar los diversos enlaces en el menú personalizado, podemos ver que se ve muy bien. Ahora tenemos un aspecto particular para el estado de desplazamiento y un aspecto diferente para el estado activo de los enlaces en nuestro menú. Esta es una excelente manera de asegurarse de que los visitantes de su sitio sepan dónde se encuentran actualmente manteniendo el menú activo iluminado, por así decirlo.
Cómo crear un menú personalizado en el resumen de WordPress
En este tutorial, vimos bien cómo agregar un menú personalizado a nuestro tema personalizado en WordPress. Hicimos uso de algunas funciones de WordPress para ayudarnos. El primero que usamos fue wp_nav_menu (). Esta función puede crear automáticamente una lista desordenada y elementos secundarios para crear la estructura de un menú agradable al que puede aplicar estilo. Hay muchos argumentos que puede pasar a esta función, pero aquí nos centramos en los conceptos básicos. La siguiente función que usamos fue la función register_nav_menus (). Esta función nos permite informar a WordPress sobre nuestro nuevo menú y conectarnos a él en el panel de WordPress. Una vez que nuestro nuevo menú se registró con WordPress, descubrimos que era fácil agregar o eliminar cualquier cosa que quisiéramos de ese menú, directamente desde el panel de WordPress y sin necesidad de editar ningún código en nuestros archivos de tema.
0 Comentarios