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

Como añadir iconos sociales al menú de navegación de canvas

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.

Propiedades CSS de los menús de WordPress

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:

Selección de Menú con configuración CSS en WordPress

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ú

Menu de una plantilla de WordPress

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;
}
 He aquí una explicación del código:La. Clase menu-twitter es lo que hemos añadido al menú personalizado en el paso cuatro.
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

Menu de WordPress con Twitter

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:

background-image: url(http://yourdomain.com/social/twitter.png) !important;

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.

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. victor dice

    3 de diciembre de 2013 a las 22:35

    perdona pero lo que no me ha quedado claro es como pones botones de youtube, correo, twitter… a la derecha del menu

    Responder
    • Luis Miguel Delgado dice

      12 de diciembre de 2013 a las 16:34

      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.

      Responder
  2. PAblo dice

    23 de marzo de 2015 a las 18:47

    Todo muy claro hasta el punto 3… ¿dónde hay que meter el código?

    Responder
    • Luis Miguel Delgado dice

      23 de marzo de 2015 a las 18:57

      Buenas Pablo, tienes que añadirlo en el archivo style.css de la plantilla. Saludos.

      Responder
  3. Ricardo dice

    28 de septiembre de 2015 a las 21:09

    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

    Responder
    • Luis Miguel Delgado dice

      28 de septiembre de 2015 a las 22:43

      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.

      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