Modificar el menú canvas de woothemes con iconos

¡Compártelo!

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:

 

¿Cómo pones botones de youtube, correo, twitter… a la derecha del menu canvas?

 

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:

Menú de Hooks en la plantilla Canvas de Woothemes

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:

Menu 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.

Opt In Image
¿Quieres conseguir más suscriptores?
  • Descubre los secretos para que tu lista crezca rápidamente.
  • Recibe el PDF 7 estrategias para duplicar tu lista de correo.
  • Tendrás más suscriptores con las mismas visitas.

100% libre de SPAM.

Acerca de Luis Miguel Delgado

Emprendedor en cambio permanente. Buscando nuevos proyectos y actividades que desarrollar. "Vive cada día como si fuera el último". Si quieres saber más sobre mí puedes leer mi página acerca de.

Comentarios

  1. Muchas gracias Luis!! Excelente tip! Hace tiempo lo veo en otros blog y pensé que era muy difícil hacerlo y que tenia que tocar un montón de código. Esta tarde lo hago en el mio 🙂
    Un abrazo!

  2. hola me prodria ayudar a como poner un banner de 728×90 en mi pagina esstoy comenzando con este sitio y necesito un banner en el header lado derecho que quede centrado solo meja ponerlo en menor tamaño parece que esta limitado el espacio.

Opina

*