Cómo agregar iconos en el menú personalizado de WordPress
Tabla de contenidos
Buenas amigos, ¿Qué tal el finde? Yo he estado preparando este artículo sobre cómo agregar iconos en el menú personalizado de WordPress.
Añadir iconos al menú de navegación de tu sitio ofrece a tus visitantes algunas pistas visuales sobre el contenido.
Y también añade un toque de diseño agradable a tu sitio web.
Vamos a realizar algunos ajustes al menú de navegación a través del administrador de WordPress y, a continuación, agregar algún código en tu archivo de tema.
Cuando hayas terminado tendrás algunos iconos simples al lado de cada elemento en tu menú de navegación.
Y la mejor parte es que no tendrás que cargar ninguna imagen o archivos que podrían ralentizar tu sitio.
Éstos son los pasos que tomarás si sigues este tutorial:
- Activar la biblioteca Font Awesome del archivo de funciones de tu tema.
- Agregar las clases CSS a los elementos de tu menú de navegación, a través del administrador de WordPress.
- Agregar CSS a la hoja de estilos de tu tema para obtener el diseño y las fuentes adecuadas.
- Todo lo anterior pero con plugin.
Empecemos.
¿Qué es Font Awesome?
Antes de hacer eso, echemos un vistazo rápido a Font Awesome:
Font Awesome es una biblioteca de iconos creados con una fuente de icono.
Esto significa que no utiliza imágenes de fondo, como podrías haber hecho en el pasado al agregar iconos a tu sitio.
En su lugar, utiliza clases CSS, agregando un pseudo-elemento a cualquier cosa con una clase de icono.
Este pseudo-elemento añade un carácter especial antes del elemento, con el estilo del icono.
Lo que acabas haciendo es un icono que se emite inmediatamente antes del elemento al que hayas añadido la clase CSS.
Si deseas obtener más información sobre cómo Font Awesome utiliza CSS, echa un vistazo a la página de ejemplos en su sitio web.
Activar la biblioteca Font Awesome en su tema
En tu carpeta de temas, busca o crea un nuevo archivo llamado functions.php.
Agrega este código a tu archivo de funciones:
function wmpudev_enqueue_icon_stylesheet() {
wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
wp_enqueue_style( 'fontawesome');
}
add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );
Echemos un vistazo a lo que hace:
- Crea una función llamada
wmpudev_enqueue_icon_stylesheet (). - Dentro de esa función, utiliza
wp_register_style ()para registrar la hoja de estilo Font Awesome, que está alojada fuera de su sitio. - Puede encontrar este enlace en la página de inicio de Font Awesome.
- A continuación, utiliza
wp_enqueue_style ()para en rasear el estilo que acaba de registrar. - Finalmente, engancha la función al gancho de acción
wp_enqueue_scripts, que indica a WordPress cuándo ejecutar la función.
Ten en cuenta que en la página de Getting Started de Font Awesome, te dan instrucciones para llamar a la hoja de estilos de la sección de tus páginas web (que estarían en el archivo header.php de un tema de WordPress.)
Ahora guarda tu archivo functions.php.
Ahora que tenemos Font Awesome registrado, podemos usar las clases CSS que proporciona para agregar iconos a los elementos de nuestro menú.
En el Admin de WordPress, haz clic en Aspecto> Menús para que puedas editar tu menú de navegación.
Si aún no has creado un menú de navegación, crea uno ahora y asegúrate de haber marcado la casilla de verificación en la pantalla de menús para que esté en la ranura de «Navegación principal» del tema.
WordPress nos deja agregar una clase CSS a cada elemento de nuestro menú, pero no podemos ver el campo, deberás activarlo.
En la parte superior de la pantalla, haz clic en la pestaña Opciones de pantalla.
Asegúrate de que la casilla junto a «Clases CSS » esté marcada.
Cierra la pestaña Opciones de pantalla.
Ahora puedes agregar una clase a cada uno de tus elementos de menú.
Comienza con el elemento de menú «Inicio».
Junto al elemento del menú, haz clic en la flecha hacia abajo para ver más opciones relacionadas con ese elemento de menú.
En el campo ‘CSS Classes’, escribe lo siguiente:
fa fa-lg fa-home
Esto agrega tres clases a tu elemento de menú:
fase utiliza para todos los elementos con un icono de Font Awesome.fa-lgajusta el tamaño del icono a grande.fa-homese refiere al icono específico que desea mostrar.
La interfaz de administración de su menú se verá así:
Ahora haz lo mismo para cada uno de tus elementos de menú.
Encontrarás más iconos y sus clases en la página de iconos de Font Awesome.
Puedes usar los iconos que desees.
Sólo asegúrate de agregar fa fa-lg y luego la clase para el icono de cada elemento del menú de navegación en el campo «CSS Classes».
Ahora guarda tu menú haciendo clic en el botón Guardar menú.
Ahora echa un vistazo al menú de tu sitio en la parte delantera.
¡Eso es un desastre!
Seguramente las fuentes de tu menú han cambiado, los iconos están encima del texto cuando querrás que estén a la izquierda o no.
Si estás trabajando con tu propio tema, puedes encontrar que en tu menú se ve mejor (o peor!)
Nota: si está trabajando con su propio tema, es posible que tengas que orientar diferentes clases o IDs para tu menú, dependiendo de cómo se codifique tu tema. Te aconsejo que te pongas en contacto con un profesional.
Utiliza el inspector web de tu navegador para identificar las clases a las que va dirigido.
Una vez termines, el menú se verá un poco mejor.
Esta forma es mucho más sencilla, puesto que no requiere de ningún conocimiento de programación ni editar ningún archivo.
Lo primero que vamos a necesitar es el plugin, para ello, hacemos clic en Plugins>Añadir nuevo y en la caja de búsqueda escribimos «Menu Icons».
Hacemos clic en Instalar ahora y luego Activar.
Ahora hacemos clic en Apariencia>Menús para añadir los iconos en nuestro menú.
Una vez dentro, empezamos con Inicio y hacemos clic en Selección.
Luego elegimos el icono de la casa y hacemos clic en Elegir.
Debería de quedar así:
Ahora deberás hacer lo mismo con el resto de elementos de tu menú.
NOTA: Te aconsejo que marques todas las casillas en las opciones de Ajustes de Menu Icons, como en la imagen siguiente:
Resumen
Añadir iconos a tu sitio es un proceso muy diferente de lo que era hace un año o dos.
Ahora, en lugar de cargar imágenes y usar el estilo para colocarlas en el fondo de los elementos de la página, puedes agregar iconos utilizando una biblioteca de iconos basada en fuentes.
En este post has aprendido a usar la biblioteca Font Awesome para agregar iconos a los elementos del menú y hacer lo mismo pero utilizando un plugin.
Puedes utilizar estas técnica con otros elementos de tu sitio, como listas, menús y botones, simplemente utilizando las clases CSS proporcionadas por la biblioteca Font Awesome.
¿Utilizas iconos en tus menús? Hazlo saber en los comentarios!
Me ha encantado tu post, lo he puesto en práctica en mi web y funciona a las mil maravillas.
Muchas gracias por toda la ayuda que prestas.
Me alegro que mis tutoriales ayuden 🙂 y que sean fáciles de entender y poner en práctica. De nuevo, gracias por la visita y por comentar.