Como añadir Inicio al menú de WordPress

Read this article in English

Una de las dudas más frecuentes que recibimos en el foro de soporte de nuestros temas WordPress es como añadir la página de inicio (home) al menú de navegación. Y es que al menos que hayas seleccionado una página estática como página inicial, no encontrarás en el editor de menús de WordPress ninguna opción para añadir un elemento “Inicio” o “Home” a tu blog.

La solución es muy sencilla, en vez de buscar el elemento en el apartado de “Páginas” o “Entradas” necesitamos añadir un elemento personalizado. Para ello seleccionamos “Enlace Personalizado” y en la opciones que debemos rellenar añadimos lo siguiente:

Añadir elemento Inicio al Menú WordPess

URL: el enlace de nuestra home. Debe de ser el dominio raíz de nuestra web. Si tienes un dominio propio, será algo parecido a http://www.midominio.com. En nuestro caso, el enlace es http://www.silocreativo.com. Si tu blog está alojado en WordPress.com (puedes comprobar que versión usas aquí), será similar a

Texto del enlace: el texto que queremos que se muestre en nuestro menú. Puedes usar “Home”, “Inicio” o cualquier otra opción para indicar a tus usuarios que haciendo clic en este enlace vuelven a la página inicial.

Ya solo tenemos que hacer clic en “añadir al menú” y ubicar el nuevo elemento en el orden que queramos arrastrando y soltando el nuevo cuadro creado.

Un icono para volver a la home.

Alternativamente a este procedimiento puedes añadir un icono que sustituya el texto “Inicio”, siempre que tu tema WordPress lo permita. Por ejemplo, en nuestra plantilla Paulie, que tiene cargada el paquete de iconos Font-awesome, podemos añadir un icono de una casa como enlace para la Home. Así conseguimos ocupar menos ancho, reservar espacio para el resto de páginas y añadir un elemento distintivo a nuestra web.

Añadir icono al menu WordPress

Para añadir un icono hay que repetir los pasos anteriores, pero en lugar de añadir un texto en el apartado “Texto de enlace”, añadiremos el HTML necesario para dicho icono. En nuestro caso, vamos a usar el icono de la casa, pero puede realizarse con cualquier icono incluido en el tema.

La web de fontawesome nos da el código para el icono de la casa.

<i class="fa fa-home" aria-hidden="true"></i>

Y añadimos al menú el nuevo elemento creado.

código HTML icono en WordPress

Resaltar el elemento de Inicio del menú WordPress

Adicionalmente podemos tener la necesidad de resaltar el nuevo elemento “Inicio” creado. Para ello puedes seguir este tutorial para resaltar el fondo o el color del mismo mediante CSS.

En nuestro caso vamos a cambiar el color del texto al nuevo icono creado. Para ello, siguiendo el tutorial, activamos la opción de añadir clases al menú, y añadimos la clase destacado-menu al elemento del menu que hemos creado y que enlazará con nuestra home.

Clase CSS al menu WordPress

Ya solo nos queda añadir el CSS usando la forma correcta de agregar CSS a WordPress:

.destacado-menu a {
   color: #FF9800 !important;
}

Con esto ya tendremos nuestro icono resaltado para que llame la atención a nuestros visitantes en caso de que quieran volver a la página de inicio.

Resaltar icono del menu WordPress

Espero sean de ayuda estos consejos!

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

2 Comentarios en “Como añadir Inicio al menú de WordPress

  1. zuha

    Super bueno este post, no tienes idea cómo me ayudó!
    Era justo lo que andaba buscando, exitos y gracias por orientarnos a aprender wordpress de manera sencilla 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *