Tutorial para aprender a colocar unos iconos en nuestro menú de wordpress. Por lo general, wordpress no nos permite insertar ninguna imagen ni ningún logotipo ni icono delante de nuestras palabras o nuestras secciones del menú. Esto no tiene nada que ver con la apariencia del tema wordpress que estamos utilizando. Hay una forma de insertar los iconos, si creamos una fuente que contenga esos símbolos. Existe una página gratuita que se llama www.icomoon.io, no hace falta registrarse para lo que vamos a realizar. Pero si queremos acceder a otros recursos, quien quiera hacerlo que investigue un poco. Pinchando en el botón rojo de «IcoMoon App», nos lleva a una sección en la que podemos crear nuestra fuente con unos iconos preestablecidos. Aquí por defecto suelen aparecer algunos ya seleccionados, pero si queremos elegir otros, podemos borrarlos y empezar de cero. Pinchamos en «Add Icons From Library…» y nos lleva a un menú donde existen unas librerías que podemos seleccionar. Unas son de pago, otras hay que registrarse para acceder a ellas, pero hay otras que son gratuitas Las gratuitas, para lo que queremos hacer nos valen de sobra, pinchamos en la librería que pueda ser interesante para seleccionar los iconos que queremos y los añadimos.
Podemos ir pinchando en la imagen, y al pinchar en la imagen se nos va a la página del autor en la que aparecen los iconos. Una vez que hemos buscado los iconos que nos gustan, damos añadir «Add», y nos aparecerán aquí todos los iconos que existen y que podemos utilizar. Podemos seleccionar de varias librerías, podemos coger esta, bajamos para abajo, añadimos otra librería, seleccionamos otra distinta y se nos van a poner una encima de otra. Para crear el archivo podemos seleccionar, pues dos de esta, por ejemplo, y otras tantas de esta. Y a la hora de generar el archivo, nos generará un archivo único con esos iconos, aunque sean de librerías distintas. Yo, como lo que quiero son tres iconos muy sencillos, voy a buscar tres iconos que me vengan bien de una misma librería. Vamos a empezar de cero, vamos a remover el ejemplo que os he puesto para seleccionar las librerías y buscamos una que nos guste que tenga unos iconos que me puedan valer.
Por ejemplo, la página de Inicio, vamos a seleccionar esta para los contenidos de texto y este para el contacto. Una vez que tenemos seleccionado los iconos, podemos crear la fuente. Tenemos otra opción, en vez de generar iconos de esta forma, sería haberlos dibujado nosotros en «Illustrator» o «CorelDraw» y subirlos e importar los iconos. Este programa lo que hará, que esos iconos nos los transformará en un archivo de fuente y que podemos utilizar para insertar después los logotipos en nuestro menú. Nosotros de momento lo vamos a hacer así. Queremos una cosa rápida y sencilla. Una vez seleccionados los tres iconos, podríamos seleccionar todos, le damos a generar fuente. Se nos abre una ventana, en la que nos aparecen unas características de cada icono que hemos elegido, que no nos interesan de momento. Vamos a darle a descargar el archivo, vamos a descargarlo en una carpeta y le damos a guardar.
En esta parte ya hemos acabado, ahora falta insertarlas en nuestra página de wordpress. Vamos a abrir la carpeta donde se encuentra nuestro archivo descargado y lo descomprimimos. Aquí, de todos estos archivos, los únicos que nos interesan son la hoja de estilos y la carpeta en la que se encuentran las fuentes y los archivos que necesitamos. Esta carpeta hay que subirla a nuestra página de wordpress, a nuestro servidor. Para ello necesitamos de un cliente FTP, yo uso como cliente para acceder a mi servidor, el FileZilla. Es gratuito y podéis descargarlo de Internet haciendo una búsqueda en Google. Lo que tenemos que hacer, es localizar el sitio donde queremos subir los archivos, yo normalmente lo subo en «wp-content» y en «uploads», en uploads arrastro la carpeta completa de fuentes, que ocupa muy poquito, y ya la tenemos aquí.
Ahora hay que saber y recordar dónde hemos colocado la carpeta, porque hay que hacer referencia, ahora que editemos el archivo de la hoja de estilos, hay que hacer referencia a esta carpeta. Cerramos ya el cliente FTP y ahora nos toca abrir la hoja de estilos. La hoja de estilos podemos abrirla perfectamente con el Wordpad de Windows. Se nos abre las propiedades CSS que copiamos tal cual, enteras. Le damos a copiar y nos las llevamos ahora a WordPress, a nuestra página. Nos vamos a nuestra zona de administración y en apariencia nos vamos a la última opción que es «Editor». Dentro de editor se nos abrirá la hoja de estilos, fijaros que esté seleccionada la hoja de estilos, y al final del todo, yo como tengo una plantilla hija, pues to tengo nada, todo lo que escriba aquí es nuevo, pero el que no posea una plantilla hija pues tendrá un montón de texto, un montón de código CSS. Lo que tiene que hacer es irse abajo del todo y copiar el código al final.
Lo copiamos y si os fijáis, aquí aparece una ruta, esta ruta es la que hay que cambiar para que haga referencia al archivo que hemos subido, pues si sabemos que es http://www.comprarahorrando.com/wp-content/uploads y a continuación la carpeta que hemos subido «fonts» con su contenido. Todo esto, lo copiamos y lo pegamos en todos los sitios donde aparezca la ruta. Abajo, como siempre pasa en WordPress, hay que guardar o actualizar el archivo. Ya hemos acabado la parte más difícil, ahora toca insertar los iconos. Si os fijáis aquí tenemos, en las hojas de estilo unos nombres, estos nombres hay que quedarse con ellos, «icon-home», «icon-compose», «icon-newspaper». Nos vamos ahora a los menús, «Apariencia-Menús», nos vamos al menú principal, y aquí por ejemplo vamos a poner el icono de la ofertas que es la página principal, pues entonces, escribiendo código HTML, los iconos se insertan con la etiqueta «span». Escribiríamos , (haciendo referencia a la hoja de estilos, que era la primera, cerramos la etiqueta y lo único que tenemos que hacer es guardar menú.
Ahora, si nos vamos a la página del sitio, veremos que nos ha aparecido el icono al lado, se nos ha quedado pegado, esto es muy fácil de solucionar, volvemos otra vez a la página de administración, nos vamos a «Apariencia-Editor» y volvemos a la hoja de estilos, nos ponemos debajo del icono que hemos creado y añadimos otra nueva característica, que va a ser un «margin-right» de 10 pixeles. Vamos a copiarlo y a pegarlo para tenerlo ya para los siguientes iconos. Le damos a actualizar archivo Y ahora si nos vamos a visitar el sitio, vemos que lo tenemos separado y con nuestro icono delante. Vamos a colocar los dos iconos que faltan. Nos vamos a escritorio, nos vamos a «Apariencia-Menús» y hacemos el mismo proceso, delante del nombre escribimos la etiqueta «span», la clase para hacer referencia a la hoja de estilos, y esta se llamaba «icon-compose», cerramos la etiqueta. Y vamos a poner también ya el de la hoja de contacto. Abrimos etiqueta class=»icon-newspaper»> y cerramos etiqueta. Ahora, al darle a guardar, deberíamos tener nuestros iconos en nuestro menú.
Como véis, tenemos las ofertas, el icono de como realizar las compras y el de la hoja de contacto. Cada vez que pinchemos en uno pues se nos iluminará o se nos apagará si está desactivado el menú. Esto es una opción muy buena ya que no consume recursos apenas de nuestra página web, no la va hacer más lenta ya que son tipografías, son vectores, podemos darles el tamaño que queramos, podemos modificar la hoja de estilos y crear el aspecto que nosotros queramos.
Podemos subir los iconos que queramos de la web «icomoon» si queremos o buscar alguna página que nos ofrezca el mismo servicio. Espero que os haya gustado, que os sirva para hacer más atractiva vuestra página web. Gracias por estar ahí, y hasta la próxima entrega..
