Redes sociales en el menú de WordPress: Menu Image Plugin

Para añadir los iconos de redes sociales en el menú principal de navegación de WordPress, lo más fácil es usar el plugin Menu Image. Permitirá añadir iconos predeterminados de cualquier red social como elementos adicionales del menú. Luego solo será cuestión de personalizar el resultado con CSS para dejarlo a nuestro gusto, aunque en este caso debes tener conocimientos básicos sobre CSS y HTML. En este caso se hará la implementación en el tema Genesis Sample.

Uso de plugin Menu Image

1. Descarga, instala y activa el plugin desde el panel de WordPress. Se te presentarán los tamaños por defecto de las imágenes de los iconos en el plugin. Solo haz clic en Guardar Cambios.
2. A continuación ve al menú de tu WorPress (desde la opción Apariencia) y verifica que esté visible tu menú principal. En ese menú deberás añadir un Enlace personalizado (desde el bloque de «añadir elementos» que está a la izquierda). Añade la URL de tu red social y ponle el nombre. Guarda el menú (esto es importante!).
3. A continuación posa el cursor sobre el elemento añadido y verás la opción de color azul «Menu Image». Haz clic allí y verás la ventana para configurar el icono de la red social así como quitar el texto. Podrás escoger una imagen o icono para la red social. En mi caso yo escogí icono. Guardas los cambios y listo. Ya tendrás el icono de tu red social como un elemento más del menú en el header de tu WordPress.
4. Repite este proceso para las otras redes sociales que quieras añadir al menú.

CSS modificar el ancho del header

El menú de los diseños responsive normalmente se colapsa a determinado ancho. Al aumentar el ancho del menú con los iconos, este diseño se suele dañar. Por eso hay que aumentar ese ancho mínimo. La mejor solución es editar la hoja de estilos original del tema. Básicamente hay que coger los estilos de la versión móvil del header del sitio e insertarlo en un condicionante «media query» con un ancho más grande.

Busca el estilo del diseño móvil del sitio, que suele estar bajo algo como «@media only screen and (max-width: 960px)«. Debería ser parecido al código que se ve arriba. Selecciona y corta toda la sección que se relacione con el header y menú (únicamente el código en amarillo, no la media query). El código relacionado al body y footer quedará allí mismo.

Pega esta sección integrándola dentro de una nueva sección de código «media query», que será igual a la anterior, solo que con un ancho mayor, o sea algo así: @media only screen and (max-width: 1015px). Tendrás que hacer prueba y error para ver el ancho de pixeles que debes usar. Puedes guiarte con la información de ancho del navegador, cuando tienes activado el depurador.

CSS personalizar iconos sociales

Color del icono al pasar el cursor

Al añadir iconos al menú, estos se pintarán de azul cuando se pase el cursor sobre ellos, que no se ve bien en iconos que no sean de ese color. El siguiente código sirve para pintar los iconos de un color neutro, como el gris, mismo que hay que pegar en el CSS adicional del menú Personalizar de WordPress.

#menu-item-34011 > a:hover {
	color:grey;
}

#menu-item-34012 > a:hover {
	color:grey;
}

#menu-item-34013 > a:hover {
	color:grey;
}

#menu-item-34014 > a:hover {
	color:grey;
}

#menu-item-34011 > a es una variante del selector de cada icono de red social, que nos servirá para pintar el icono cada vez que pase el cursor sobre él. Este se obtiene en Google Chrome, cuando haces clic derecho sobre cada icono y seleccionas «Inspeccionar». Cuando detectas el código que visualiza el icono, haces clic derecho en esa línea y eliges «Copiar selector» como se ve en la ilustración arriba.

El :hover es el selector que se usa para detectar cuando el cursor pasa sobre el icono, y el color:grey es el color que usamos para pintar el icono bajo la condición anterior.

Alinear iconos sociales horizontalmente

Los iconos también quedan uno bajo otro en la versión móvil del sitio, cuando se expande el menú móvil. Para ponerlos uno a lado de otro, este es el código a usar, que igualmente debe colocarse en el CSS adicional del personalizador de WordPress.

@media only screen and (max-width: 1015px) {
	.social-menu {
		display: flex;
	}
	
#menu-item-34013 {
		float: left; 
		width: 36px;
		text-align: center;
		margin: 0 5px 0 -10px;
	}
	
#menu-item-34011 {
		float: left; 
	  width: 36px;
		text-align: center;
		margin: 0 5px;
	}

#menu-item-34012 {
		float: left; 
		width: 36px;
		text-align: center;
		margin: 0 5px;
	}

#menu-item-34014 {
		float: left; 
		width: 36px;
		text-align: center;
		margin: 0 5px;
	}
	
}

En este caso los selectores ya no tienen la «a» porque ahora se modificará su contenedor completo #menu-item-3401X. El float:left en cada elemento es necesario para alinear cada icono horizontalmente y funciona en conjunto con la propiedad display:flex del principio del código para lograr este propósito. El resto es código complementario.

Todo este código debe colocarse dentro de la media query @media only screen and (max-width: 1015px), para indicar al navegador que solo queremos aplicar estos estilos cuando entre en ejecución el menú móvil.

Dentro de la media query anterior, el primer selector css es .social-menu. Este selector debe añadirse en el campo «Clases CSS (opcional)» de cada elemento personalizado en el menú, en nuestro caso en cada icono que añadimos en el menú.

El resultado con todo lo dicho es el mostrado al principio, tanto en la versión de escritorio como en la versión para móvil. Así es como pones los iconos sociales en el menú de WordPress, en mi caso en mi tema Genesis Sample, completamente gratis o sin necesidad de pagar 75 dólares por algo tan sencillo.

SIN plugin Menu Image: WordPress Dashicons

Esto incluso podría hacerse sin el plugin Menu Image. Los iconos que usa este plugin son los mismos que ya tiene WordPress integrado en su núcleo: los «dashicons». El truco consiste en añadir soporte para estos dashicons en tu tema (unas cuantas líneas de código en el functions.php; algunos temas ya vienen incluso con eso y no hay que hacer nada). Luego solo es cuestión de añadir un elemento personalizado al menú, copiar el HTML del dashicon de la red social que deseas (desde la web oficial de los WordPress Dashicons) y pegar este código en la «Etiqueta de navegación» del elemento del menú. Todo esto suena un lío, pero es más fácil de lo que se oye. Lo haré en un próximo tutorial si hay suficientes likes 😀

Plugin Menú Image: Link, Vía: WPBegginer

Encabezado fijo en WordPress: Cómo desactivar en el tema Genesis Sample

Cómo poner botones de compartir en Facebook, Twitter y WhatsApp (WordPress)

Códigos útiles para WordPress (Genesis Framework)