Cómo colocar iconos en el menú de 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.

¿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".

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"

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.

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.

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.

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.

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.

¡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ú.

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í