• Saltar a la navegación principal
  • Saltar al contenido principal
  • Servicios
  • Marco de Pensamiento

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:

 

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

No te voy a regalar NADA

Que tienes el armario lleno y algún resto arqueológico.
Si de todas formas decides apuntarte te contaré como me busco la vida en internet.
Y alguna idea podría NO cambiarte la vida.

Interacciones con los lectores

Comentarios

  1. Andrés dice

    15 de diciembre de 2013 a las 15:51

    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!

    Responder
    • Luis Miguel Delgado dice

      16 de diciembre de 2013 a las 15:54

      Me alegro de que te gustase. Espero que con este y otros consejos ayude a más gente.

      Un abrazo.

      Responder
  2. Rafael Liscano dice

    15 de julio de 2016 a las 18:30

    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.

    Responder
    • Luis Miguel Delgado dice

      15 de julio de 2016 a las 19:09

      Lo siento mucho, yo ya no me dedico a estos temas. Ha sido un placer.

      Responder

Deja una respuesta Cancelar la respuesta

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

hola after

Copyright © 2023 · Tu Negocio En La Nube - Ideas que podrían hacerte pensar · Acceder

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR