Cómo colocar iconos en el menú de WordPress

WordPress

WordPress nos tiene acostumbrados a su facilidad de manejo, podemos ampliar sus características con la instalación de innumerables plugins y podemos confeccionar nuestro sitio con sus widgets. Pero aún hay pequeños detalles que a muchos nos gustaría que se incluyeran en futuras versiones. Una de ellas es la utilización de iconos en el menú de wordpress.

Suscríbete a mi canal: 

 

¿Te gustaría colocar algún icono en el menú de WordPress?

Seguramente exista alguna plantilla muy determinada que permita la inclusión de iconos, pero seguramente estos iconos sean fijos y no se puedan elegir.

También existen plugins que incrementan las funcionalidades de nuestra web permitiendo realizar esta opción, pero es un extra de código excesivo que abre una puerta a vulnerabilidades y ralentiza la carga de la página.

Te asombrará lo sencillo que es colocar los iconos en el menú, WordPress utiliza palabras para generar los menús, por lo tanto, hay que conseguir meter los iconos que nos gustan en una tipografía que podamos cargar y utilizar en nuestro sitio. Y de eso es de lo que trata este post. Vamos a ver los pasos que hay que seguir y lo que necesitamos.

Necesitamos:

  1. Acceso a la zona administración de nuestra web.
  2. Acceso a los archivos del servidor, a través de un cliente FTP (puedes descargarte FileZilla) o a través del gestor de archivos de tu CPanel.

Pasos a seguir:

  1. Generar el archivo de la fuente con los iconos elegidos.
  2. Subir al servidor los archivos de la fuente.
  3. Pegar el código CSS en la hoja de estilos de nuestra plantilla
  4. Colocar los iconos en el menú de WordPress

¿Todo OK?, vamos a desarrollar cada punto

 

Buscar los Iconos y generar la fuente

Para conseguir los archivos necesarios tenemos que ir a una página web que nos ayudará a generarlos, esa web se llama IcoMoon, podéis buscar otras con otros iconos, pero a mí me gusta esta. Una vez dentro, pinchamos en el botón rojo superior que pone "IcoMoon App".

menu de wordpress iconos 1

 

Se abrirá una ventana en la que tenemos que buscar el enlace "Add Icons From Library…", que nos llevará a la página donde se encuentran todas las librerías de iconos.

Por defecto aparece una librería seleccionada, para empezar de cero podemos eliminarla antes de elegir otra librería, pinchamos en el menú desplegable de la derecha y elegimos "Remove set"

menu de wordpress iconos 2

 

En la página donde se encuentran todas las librerías disponibles, podemos pinchar encima de la imagen para ir a la página del autor y saber un poco más sobre esos iconos concretos, para añadir los iconos que nos han gustado o que vemos que nos sirven para nuestra web, pinchamos en "Add", hay librerías de pago para las que hay que registrarse para acceder a ellas.

menu de wordpress iconos 3

 

Seleccionamos todos los iconos que vamos a necesitar, podemos elegir iconos de distintas librerías y generar un mismo archivo, también podemos seleccionar todos los iconos pinchando en el menú desplegable y seleccionando "Select All".

Seguidamente pinchamos en "Generate Font F" y nos descargamos el archivo comprimido con los iconos convertidos en fuente.

Tenemos la opción de subir iconos creados por nosotros y convertirlos en fuente con este recurso, hay un botón en la parte superior que pone "Import Icons" que nos ofrece esta posibilidad.

menu de wordpress iconos 4

 

Subir los archivos necesarios al servidor

Para poder insertar los iconos en el menú de WordPress necesitamos subir algunos archivos al servidor, al descomprimir el archivo generado en el apartado anterior, tenemos una carpeta que pone "fonts", esta carpeta hay que colocarla en una localización a la que podamos acceder fácilmente, por ejemplo "wp-content/uploads".

Podemos subir los archivos a través de un cliente FPT como FileZilla o similares, o a través del "Administrador de archivos" del panel de control del servidor.

menu de wordpress iconos 5

menu de wordpress iconos 6

 

Configurar la hoja de estilos de la plantilla

Proceso antiguo

Ya desfasado y poco utilizado, es muy recomendable realizar los cambios sobre el archivo de un tema hijo, por seguridad y para no perder los cambios con las actualizaciones.

Yo sigo recomendando este sistema para los que, además de este código, añaden un montón más. Por la sencilla razón que es más fácil cargar la información de un archivo que enviar peticiones a la base de datos donde se almacena el CSS del personalizador.

Hay dos vías para insertar este código: a través del "Editor" del menú "Apariencia", o descargando el archivo para realizar la modificación en el ordenador y volver a subirlo, esta segunda opción lleva más trabajo pero es más segura. Como a mí me gusta el riesgo realizaré la primera, pero aconsejo hacerlo descargando el archivo 😉

¡Vamos a por ello!, de los archivos que descomprimimos anteriormente, abrimos con un editor de código, si tenemos, o un simple editor de texto como el "Wordpad" de Windows, el archivo llamado "style.css", copiamos su contenido y vamos a "Apariencia>Editor", lo pegamos en la hoja de estilos de nuestra plantilla, al final de todo el código que haya.

menu de wordpress iconos 7

 

Antes de pinchar en "Actualizar archivo", tenemos que modificar la ruta de localización de la carpeta "fonts" que subimos al servidor, recordad que la guardamos en "/wp-content/uploads/", por lo que debemos indicar esa URL en todos los sitios donde aparece la ruta "fonts". Una vez cambiado ya podemos pinchar en "Actualizar archivo".

 

Proceso actual

Es mucho más sencillo, tan sólo tenemos que colocar el código en la pestaña "CSS adicional" de las opciones del personalizador de WordPress.

Antes:

Después:

 

Colocar los iconos en nuestro menú de WordPress

Ya tenemos toda la configuración interna terminada, ahora sólo queda decir dónde queremos poner los iconos y cuáles. El formato para insertar los iconos es una línea de código HTML con el siguiente formato:

La etiqueta "span" aísla el icono del resto de etiquetas por si queremos darle alguna propiedad diferente, y la función "class" llama al archivo de la hoja de estilos que hemos modificado anteriormente y donde pone "nombre del icono" es donde hay que poner la referencia propia de cada icono.

Para saber cómo se llaman los iconos para colocar el adecuado en su sitio, dentro del archivo que descomprimimos al principio, hay uno que se llama "demo.html", lo podemos abrir pinchando dos veces sobre él y nos aparecerá el nombre de cada icono con su dibujo correspondiente.

menu de wordpress iconos 8

 

¡Listo!, sólo queda colocar los iconos en el menú de WordPress, tenemos que colocar la línea de código HTML con la referencia del icono delante del nombre del menú en "Apariencia>Menús".

Seleccionamos el menú principal (o en el que queramos colocar los iconos) y procedemos a pegarlo. Hay que hacerlo en cada opción del menú.

menu de wordpress iconos 9

 

El resultado podéis verlo en esta misma web, mi menú de WordPress ahora luce unos iconos, y sin usar plugins de ningún tipo.

¿Quieres saber más sobre wordpress? Pincha aquí

 

Juan Martín

Juan Martín

Soy el creador y autor del blog "J Solución creativa", una persona como tú que intenta ganarse la vida en internet. Intento llenar mi blog con contenido útil que pueda ayudar a quien lo necesite y conseguir, con esfuerzo, generar autoempleo y vivir de ello. Si te parece interesante puedes apuntarte a mi newsletter.

Deja un comentario

2 Comentarios

  1. Fernando Rutia

    Hola he seguido todos los pasos, pero tengo un problema, al colocar el icono me cambia la fuente que uso en el theme.
    Cree un child theme para poder hacer modificaciones y que cuando se actualice el theme se mantengan estos cambios. Entonces, no sé como puedo hacer para que se mantenga la fuente original y además tenga los iconos.
    La web está en desarrollo por lo que tengo el modo mantenimiento y no verás el menú.
    ¿Me podrías ayudar con esto?
    Gracias

    Responder
    • Martín

      Hola Fernando Rutia, comprueba que has puesto todos los signos de puntuación a la hora de colocar el código, tanto en el archivo como en los enlaces del menú. No sería la primera vez que por no poner un punto y coma, de los del final de línea, la web se vuelve loca.
      En este tutorial muestro cómo colocar los iconos en el menú sin utilizar plugins, pero no hay que tener miedo a los plugins y existen opciones para no tener que tocar el código. Puedes echar un hojo a uno llamado "menú icons" (https://es.wordpress.org/plugins/menu-icons/).
      En este vídeo lo utilizo para configurar unos menús de una web: https://youtu.be/jvYGBPHCN6E

      Responder

Enviar un comentario

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

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad.

Responsable de los datos: Juan Martín Pascual. Finalidad: Controlar spam, gestión y moderación de comentarios. Legitimación: Tu consentimiento expreso. Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos