Iconos bonitos en el menú de WordPress

  • Myddna 

Hola de nuevo!

El otro día se me ocurrió, que el menú principal quedaría más mono con iconos representativos de cada sección.

Pues resulta que ayer me puse con ello, y no se tarda más de 10 minutos. ¡Vamos allá!

¡Cuidao! WordPress autoalojado necesario

Para este tutorial necesitarás que tu blog esté alojado en alguna plataforma que te permita instalar plugins. El alojamiento gratuito en WordPress.com no lo permite. Para más información, en SiloCreativo explican muy bien las Diferencias entre WordPress.com y WordPress.org, y también las tienes en el propio WordPress.com en Com VS Org.

Plugins necesarios

Únicamente necesitarás un plugin que te permita añadir código html al <head> de tu blog.

Yo para eso utilizo uno muy tonto que se llama Head & Footer Code, pero hay muchísimos que realizan esta función. Incluso puede que ya tengas alguno de este tipo instalado.

Cómo poner iconos bonitos en el menú de WordPress

Primero de todo, visualicemos nuestro menú:

El menú se presenta inicialmente sin iconos

Hay unas cuantas librerías de iconos con la que podríamos alegrar el patio. Es posible hasta que tengas ya una en el tema de tu blog. Como este tema que estoy usando no tiene, vamos a añadir FontAwesome 5, porque es awesome.

Insertar librería de FontAwesome

Accediendo al enlace de FontAwesome, podemos configurar los iconos que vamos a utilizar. En principio elegiremos la opción Free, All y Webfont.

Configurar y copiar el enlace de FontAwesome para insertar los iconos bonitos en el menú de WordPress

Volvemos a nuestro blog, en concreto a los ajustes del plugin que nos permita introducir código en el elemento <head> de nuestra web, y lo pegamos tal que así, a continuación de cualquier otro código que tuviéramos de manera adicional, y guardamos:

Insertar el código de los iconos

Configurar los iconos del menú

Nos vamos a Apariencia -> Menús en nuestro blog.Por otro lado abrimos el buscador de iconos de FontAwesome (en su página, en el buscador de arriba del todo). En este caso, quier empezar poniendo el logo de WordPress a la sección del mismo nombre:

Selección del icono deseado

Hacemos clic en el icono, y después en el pequeño código HTML de la parte superior. Esto lo copiará a nuestro portapapeles.

Copiar el código del icono

Volvemos a nuestro editor de menús de WordPress y Desplegamos el elemento de menú que queremos colocar. En su nombre pegaremos el código donde queremos que aparezca el menú seguido de un espacio especial   para crear una pequeña separación entre el icono y el texto:

Modificar la configuración para insertar el código del icono elegido

Podemos configurar ahora todos nuestros elementos de menú de golpe, guardar y ¡Listo!

Resultado final: Iconos bonitos en tu menú de WordPress

¿Te ha gustado? ¿Lo vas a poner en práctica?

Deja un comentario

You have to agree to the comment policy.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.