A veces puede encontrar un tema impresionante sólo para darse cuenta de que sería genial si tuviera un menú de navegación adicional con enlaces importantes o de uso frecuente para aumentar la usabilidad de su sitio de WordPress.
Con sólo un poco de codificación podría tener la base de su nuevo menú configurado rápidamente, y listo para que el estilo para que coincida con su tema.
Si usted prefiere no meterse con el código, hay muchos plugins que pueden hacer el trabajo pesado para usted, y también proporcionar opciones de estilo.
No importa la opción que elija, la guía de abajo le ayudará a hacer que suceda.
Basic Housekeeping
Para crear un nuevo menú que necesita para editar sus archivos de tema. Antes de hacer cambios en cualquiera de sus archivos principales, es mejor hacer una copia de seguridad de todo su sitio en caso de que algo salga mal en el camino. Podrás restaurar tu sitio rápidamente y será como si nunca hubiera pasado nada.
Puedes hacer una copia de seguridad manual de tu sitio a través de FTP o utilizando un plugin, como nuestro propio Snapshot. Sólo asegúrese de guardar una copia tanto de su base de datos como de los archivos en una ubicación separada de su sitio para minimizar el riesgo de perder su copia de seguridad.
Construcción de un tema hijo
Para crear nuevos menús con código, necesita hacer cambios que se perderían al actualizar su tema. La creación de un tema hijo se encarga de este problema.
Puedes encontrar los detalles que necesitas para crear un tema hijo consultando un par de nuestros otros posts Cómo crear un tema hijo de WordPress y Cómo crear automáticamente temas hijos en WordPress.
También puedes optar por crear un tema completamente nuevo por ti mismo o probarlo en un sitio local o de prueba.
Puedes consultar estos posts para obtener más detalles sobre cómo crear una instalación local de WordPress:
- Cómo desarrollar WordPress localmente con MAMP
- Cómo instalar XAMPP y WordPress localmente en PC/Windows
- Cómo configurar WordPress localmente en 5 minutos con DesktopServer
- La Guía Rápida y Fácil para Migrar una Instalación Local de WordPress a un Sitio Vivo
- Cómo Mover WordPress para Desarrollo Local con XAMPP
Una vez que hayas configurado una de estas opciones, eres libre de empezar a crear tus menús de navegación adicionales. Aunque, si decides usar un plugin o framework de tema, no necesitas crear un tema hijo.
Crear nuevos menús
Para añadir una opción de ubicación de menú seleccionable en tu panel de administración bajo Apariencia > Menús necesitas hacer lo que se llama «registrar un menú». Todo lo que se necesita es añadir un fragmento de código a su archivo functions.php ubicado en wp-content > themes > your-theme.
En cPanel, haga clic en el icono del Administrador de archivos en la sección Archivos de la página principal. Si no has configurado previamente tu Administrador de Archivos para que se cargue en la raíz de documentos de tu sitio, navega allí ahora.
Hay un archivo functions.php en tu carpeta /wp-includes/, pero ese no es el que necesitas editar. Asegúrate de encontrar el archivo functions.php que se encuentra en el tema que estás utilizando. De lo contrario, terminaría con errores al tratar de añadir el código encontrado más tarde.
Localice su archivo functions.php y haga clic en él una vez seguido por hacer clic en el botón Editar en la parte superior de la página.
Si se abre una ventana emergente, simplemente haga clic en el botón Editar en la parte inferior, a la derecha. Es posible que no vea ninguna si la ha desactivado previamente.
Desplácese hasta la parte inferior del archivo. Si quieres añadir sólo un menú, añade el siguiente código en una nueva línea:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
En este ejemplo, New Menu es el nombre que aparecerá en la página de menús de tu panel de administración para que sea comprensible para los ojos humanos. El nombre new-menu es lo que WordPress entenderá para ejecutar su código correctamente.
Puede llamar a su menú como quiera, pero asegúrese de que sólo el nombre legible para los humanos contenga espacios y letras mayúsculas.
Si desea añadir varios menús a su sitio, añada este código en una nueva línea en su lugar:
Puede añadir tantos menús nuevos como desee con este método. Se aplicarán las mismas reglas a la hora de nombrarlos.
Guarda los cambios realizados en el archivo. Ahora todo lo que queda es añadir el nuevo menú a su sitio.
Añadir ubicaciones de menú a su tema
Aquí es donde tiene que decidir dónde le gustaría colocar su menú. Si desea que su menú aparezca en la parte superior de su página, tendrá que editar el archivo header.php. También puedes ponerlo en el pie de página, lo que significa que debes editar el archivo footer.php.
Incluso puedes mostrar un menú en una página editando su archivo de plantilla o en una barra lateral, editando su archivo sidebar.php.
Puedes colocar tu nuevo menú donde quieras. Aquí está la cantidad mínima de código que necesita para agregar a cualquiera de estos lugares:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Sólo tiene que reemplazar new-menu con el nombre legible de WordPress que eligió. Probablemente quieras estilizar tu menú con CSS para que vaya más allá de la funcionalidad básica y también se vea bien. Para ello, tendrás que crear una clase y añadirla a tu tema con el siguiente código.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Al igual que antes, sustituye new-menu por el nombre que hayas elegido. En este ejemplo, llamé a la clase que creé new_menu_class. Usted puede cambiar esto, pero sólo asegúrese de actualizar este código para reflejar el ajuste.
Haga clic en el botón Guardar y diríjase a Apariencia > Menús en su tablero de instrumentos. Usted notará que sus nuevos menús se enumeran en Ubicaciones del tema en la sección de Configuración del menú.
Ahora podrá ver sus nuevas ubicaciones de menú listadas. Cuando añada un menú, puede seleccionar una o todas las ubicaciones.
Para que se muestren los enlaces en las ubicaciones de su menú recién hecho, haga clic en crear un nuevo menú en la parte superior de la página.
Si aún no tiene un menú, puede introducir un nombre para su menú en el campo de la página, y luego hacer clic en crear menú. Si ya tiene un menú previamente creado, puede hacer clic en el enlace crear un nuevo menú hacia la parte superior de la página.
Una vez que haya creado un nuevo menú, también puede administrar las ubicaciones donde se muestran en la pestaña «Administrar ubicaciones».
Estilización, plugins y menús responsivos
Su nuevo menú está ahora listo para ser estilizado usando CSS. La codificación requerida es específica para el tema que está utilizando por lo que no voy a entrar en ella en este post, pero tenemos otro post que usted puede comprobar hacia fuera para que llamado Cómo crear un impresionante menú de respuesta para su tema de WordPress. También le muestra cómo crear menús sensibles que están listos para móviles.
Si desea una opción más fácil, hay muchos plugins que crearán menús sensibles basados en los estilos de su tema. Uno de los mejores que he encontrado es Responsive Menu.
Algunas menciones notables que también pueden ser útiles son ShiftNav, WP Responsive Menu y Max Mega Menu.
Recursos para ir más allá
Ahora tienes la base sólida que necesitas para crear menús adicionales para tu tema y recursos para ayudarte a ir más allá. Tanto si lo codificas tú mismo, como si utilizas un plugin o un framework de temas, ahora tienes un nuevo menú en tu sitio de WordPress.
Si tienes problemas, sigue adelante y pregunta a nuestros héroes del soporte. Ellos pueden darle consejos y apoyo de expertos para ayudar a resolver casi cualquier problema. Puedes abrir un ticket en nuestro foro de soporte y enseguida te ayudaremos.
Para más información sobre cómo dar estilo a tu nuevo tema, hay muchos recursos que puedes consultar y puedes encontrarlos todos en nuestro post Una mega guía para aprender y referenciar CSS para WordPress: 150+ Resources.
También puedes consultar algunos de nuestros otros posts 10 Simple Tips for Learning CSS for WordPress, 25 Expert Tips for Cleaner CSS Coding for WordPress, 25 Pro Tips for Improving Your CSS Workflow y 5 Free CSS Plugins for Live Editing Your WordPress Site para más detalles sobre la codificación de algunos CSS para tu tema.
Etiquetas:
- menús
- navegación