En el artículo de hoy vamos a ver como añadir iconos sociales al menú de navegación del Theme Canvas de Woothemes. El proceso es sencillo y lo único que tendremos que ver es si el resultado se adapta a lo que queremos o no. Este proceso también es válido para cualquier plantilla de WordPress, solo que hay algún detalle diferente.
Los iconos de redes sociales deben estar visibles en cualquier web actualmente, aunque yo todavía no los haya incluido. Para poder añadir las redes sociales que queramos al menú de navegación, solo tenemos que tocar algunas opciones y CSS.
Nota Importante: Si tu Plantilla de WordPress está usando imágenes de fondo en el menú puedes tener problemas con el código que vamos a explicar. También es importante tener en cuenta que si tu Tema no es el Canvas de Woothemes, y quieres modificarlo en otro, debido a la gran cantidad de opciones en las Plantillas, tendrás que tener algunos conceptos de CSS para poder implementar todo lo que expliquemos en tu web. Para esto será necesario tener unos conocimientos básicos de CSS, pero si quieres que lo implemente para tí, estaré feliz de trabajar contigo e implementar este concepto en tu web.
Hacerlo con plugins. Hay un plugin en el repositorio de WordPress que realiza la funcionalidad que vamos a ver en este pequeño artículo. Puedes hacerlo con Nav Menu Images.
Paso uno: Obtén tus iconos
La primera cosa que necesitarás será seleccionar los iconos sociales que quieres usar en tu web. Iconfinder es una web para encontrar iconos muy interesante. Consejo: Encuentra el icono que quieres, entonces haz click en las colecciones para descubrir la web donde esta y poder obtener el resto de iconos de las otras redes sociales. Una vez que tengas tus iconos, guardalos en tu carpeta de imágenes de iconos.
Paso dos: Activa las propiedades CSS de los menús.
Para poder activar las propiedades CSS, nos vamos al menú Apariencia, a la zona de los menús y abrimos el panel Opciones de pantalla seleccionando Classes CSS.
Con esto nos aparecerá en los menús las siguientes opciones:
Creamos un nuevo enlace que añadimos al menú y ponemos el enlace a Twitter. Al seleccionar Classes CSS nos aparecerá en cada menú la posibilidad de seleccionar Abrir enlace un una nueva ventana/pestaña y dar nombre a la Clase CSS. En este caso vamos a nombrar la clase con «menu-twitter».
Nota: No es necesario añadir una clase personalizada. Cada elemento de menú en WordPress ya tiene su propio ID específico de clase CSS. Pero al hacerlo de esta manera va a ser más fácil modificar el código con cualquier plantilla
Paso tres: Añadiendo el Icono al Menú
Una vez que guardemos el menú, podemos ver como aparece con los demás menús que tenemos. En este punto que tenemos un nuevo menú con el texto Twitter que enlaza con tu cuenta de twitter. Ahora eliminaremos el texto y lo cambiaremos con un icono usando CSS.
Usamos el siguiente código:
.menu-twitter { text-indent: -9999px; background-image: url(images/twitter.png) !important; background-repeat: no-repeat !important; margin-left: 100px !important; width: 50px;}Texto guión empuja la etiqueta del menú de la pantalla a la izquierda 9999 píxeles por lo que no se muestra en la parte superior del icono de Twitter.
Imagen de fondo pone el icono de Twitter como fondo del menú, que todavía se puede hacer clic.
Background-repeat asegura que el icono sólo aparece una vez.
Margen izquierda pone 100 píxeles de espacio entre el icono y el resto del menú. Es probable que sólo lo hace para el primer icono social.
Ancho restringe el ancho del elemento de menú a 50px, que es mucho para mostrar el icono y dejar un poco de espacio para la siguiente.
Explicación de lo que hace el código:
- La clase .menu-twitter es lo que hemos añadido al menú personalizado en el paso dos.
- El text-indent desplaza la etiqueta del menú a la derecha de la pantalla 9999 píxeles por lo que no se mostrará sobre el icono de Twitter.
- La imagen de fondo (background-image) pone el icono de Twitter como fondo del menú, donde se puede hacer click.
- La opción baground-repeat asegura que el icono solo aparece una vez.
- La opción margin-left establece un margen izquierdo con un valor de 100 pixeles de espacio entre el icono y el resto del menú. Seguramente solo será necesario para el primer icono que pongamos.
- La opción Width restringe el ancho del elemento de menú a 50px, que es suficiente para mostrar el icono y dejar un poco de espacio para el siguiente.
Aquí están los Resultados
Puedes repetir este proceso para cada uno de los iconos de redes sociales que quieras añadir. En este caso la plantilla requiere un poco más de ajuste para colocar el icono en el centro del menú. Yo no lo he conseguido ya que no soy experto en CSS, pero supongo que no sería mucho trabajo.
Hazlo portable
Una gran utilidad que tiene este código es que podemos utilizarlo en otras webs, simplemente cambiando el enlace de la imagen a una dirección con nuestro dominio. Tendríamos que poner los iconos sociales en una dirección accesible (como por ejemplo http://tudominio.com/social) y cambiar los enlaces en el CSS para el icono de esta nueva localización de la siguiente manera:
El resultado es que puedes pegar este código sin cambiar nada en cada web que quieras añadir los iconos sociales. Solo tendrás que añadir los menús personalizados para hacer que los iconos aparezcan.
¿Te ha gustado? ¿Lo utilizarías? Espero tus repuestas en los comentarios.
perdona pero lo que no me ha quedado claro es como pones botones de youtube, correo, twitter… a la derecha del menu
Buenas,
Siento el retraso en responder, pero he estado trabajando en la pregunta que me has hecho y aquí está el resultado, espero que entiendas todos los pasos: http://tunegocioenlanube.net/modificar-el-menu-canvas-de-woothemes-con-iconos/
Un saludo.
Todo muy claro hasta el punto 3… ¿dónde hay que meter el código?
Buenas Pablo, tienes que añadirlo en el archivo style.css de la plantilla. Saludos.
He hecho todo perfectamente e incluso me sale al final el icono social en el menú, el problema viene que en cuanto agrego el código ese que dices deja de ser un enlace y me aparece como una simple imagen en el menu
Buenas, hace ya tiempo de este artículo y no se como habrá cambiado la plantilla. Tendría que mirarlo un experto para ver que es lo que no funciona. Prueba con distintos códigos si alguno funciona. Saludos.