Modificar el menú canvas de woothemes con iconos

Hace poco un lector se ha puesto en contacto conmigo preguntándome como pongo los iconos de redes sociales a la derecha del menú de la plantilla Canvas de Woothemes. La pregunta básicamente ha sido esta:

Pues aunque la solución es muy simple, si no sabes donde está cada cosa y lo que tienes que hacer, lo más probable es que no lo encuentres nunca. Tienes que saber que para poder hacer esto es necesario tener algunos conocimientos básicos de WordPress, luego los iconos que quieres poner en el menú y por último un código html básico para esta sección.

En este blog además de hablar de negocios online queremos dar pautas para que entiendas la tecnología que hay detrás de cualquier estructura que montes en internet, conociendo algo de código y además entendiendo cuando le pidas a otras persona lo que quieres que haga en tu web. Así que vamos a poner los iconos en el menú de la plantilla Canvas.

¿Qué son los Hooks de WordPress?

Los Hooks son una funcionalidad de WordPress que nos permite añadir o modificar cualquier componente de este sin necesidad de modificar ningún código de WordPress. Básicamente es como si llamáramos a la puerta de WordPress y le dijésemos: mira que quiero que pongas este código en la ventana de la casa, en vez de las cortinas tan bonitas que tienes, y WordPress nos aceptase el código sin problema.

Tipos de Hooks

Tenemos la posibilidad de utilizar dos tipos de Hooks:

• Action hooks. Son acciones que WordPress aplica en puntos específicos durante la ejecución del código, o cuando ocurre algún evento específico.
• Filter hooks. Son filtros que WordPress aplica para modificar los diferentes tipos de texto antes de añadirlos a las bases de datos o enviarlos al navegador.

Y aunque esto te parezca de otro planeta, nos va a servir para añadir lo que necesitamos al menú de canvas. Tendremos que irnos a la plantilla, específicamente al Menú Canvas e irnos al apartado de Hooks:

A partir de aquí necesitarás los iconos que quieras poner en el menú de la plantilla Canvas.

Una vez que tengas subidos a tu plantilla los iconos, y estés en el apartado de Hooks, solo necesitarás irte a la pestaña navigation de los hooks de la plantilla Canvas:

¿Y cual es el código?

El código a añadir en este hook – Executed at the top, inside the #navigation DIV tag. – es el siguiente:

<code>
<!-- BEGIN SOCIAL -->
    <div>
  <a href="https://twitter.com/luismidelgado" target="_blank"><img src="http://tu_URL_del_icono/twitter.png" width=24 height=24 alt="Twitter" title="Twitter" /></a>
</div>
<!-- END SOCIAL -->
</code>

Con esto ya tendrías funcionando un icono en el menú, solo sería necesario que fueras añadiendo el resto de iconos, copiando la línea <a href=…

Para finalizar solo nos quedaría añadir este código al archivo custom.css de nuestra plantilla Canvas de WooThemes. El codigo a añadir sería el siguiente:

.social {float:right; padding:10px;}

Y ya tendríamos los iconos en el menú de navegación de nuestra plantilla Canvas.

¿Te ha gustado el artículo? ¿Usas la plantilla Canvas de Woothemes? Cuentame en los comentarios que opinas y hablamos.