Con motivo de mi participación en la WordCamp Santander 2017, Natalia de la Peña, de enclaveproductiva.es, me propuso participar en un post colaborativo sobre trucos para WordPress aportados por varios ponentes de la WordCamp.
Agradezco mucho a Natalia la iniciativa y que contase conmigo junto a unos cuantos cracks del mundillo WordPressero, ¡todo un honor!.
Dándole vueltas sobre qué podría yo aportar en formato «truco», se me ocurrió algo que, más que un truco en sí, es hacer, con elementos nativos de WordPress, algo que habitualmente se suele llevar a cabo con un plugin.
Ahí va el truquillo
Un pequeño añadido que, en numerosas ocasiones, se la hace a un sitio web es un menú de redes sociales, el cual sirve para darle al usuario de nuestro sitio web una lista de los perfiles sociales de la persona o entidad del site, para que vaya a visitarlos si quiere.
Habitualmente se utiliza algún plugin para crear estos menús e insertarlos en las páginas. Sin embargo, es muy sencillo hacerlo utilizando los menús nativos de WordPress:
Modus operandi:
Solo tenemos que crear un nuevo menú desde Apariencia > Menús y llamarlo como queramos, por ejemplo social_menu.
Añadimos a ese menú un Enlace personalizado por cada perfíl social al que queramos linkar. A cada uno de estos enlaces del menú (y aquí viene el alma del truco) podemos ponerle una clase CSS diferente, que luego usaremos para hacer que cada uno muestre el icono correspondiente.
Si no vemos inicialmente esta opción tendremos que habilitarla en el menú Opciones de pantalla, arriba a la derecha:
Luego creamos las reglas CSS necesarias para que esos links se muestren con el icono de cada red social:
.menu-social-container .menu-item {
display: inline-block;
}
.menu-social-container a {
display: block;
text-indent: -9999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.facebook a {
background-image: url("icon-facebook.png");
}
.twitter a {
background-image: url("icon-twitter.png");
}
.instagram a {
background-image: url("icon-instagram.png");
}
.youtube a {
background-image: url("icon-youtube.png");
}
.googleplus a {
background-image: url("icon-googleplus.png");
}
.linkedin a {
background-image: url("icon-linkedin.png");
}Añadimos tantas clases CSS como links a redes queramos mostrar.
Lo que hace estos estilos es que los links se muestren en bloque, que se oculte su texto y tengan como imagen de fondo el icono de la red social correspondiente, que puede ser un .png, como en el ejemplo, o mejor, un .svg.
Finalmente solo tenemos que incluir nuestro menú social donde queramos que se muestre (la cabecera, el footer, el sidebar…). Dependiendo del tema que estemos usando esto podrá acerse a través de Apariencia > Menús > Ubicaciones, desde las opciones del personalizador, o a través de un widget.
Con esto ya tenemos el mismo resultado que nos dan ciertos plugins sin su sobrecarga de archivos, scripts y demás. De una forma más limpia, optimizada y fácil de editar.
Enfoque conceptual
Hay mucha tendencia de querer situar este tipo de links sociales en un lugar muy visible y privilegiado del sitio web.
Desde mi punto de vista esto es un error, ya que lo que menos queremos es que el usuario se vaya de nuestro site, así que ¿por qué propiciarlo? Aunque se vaya a uno de nuestros perfiles sociales, nunca será preferible a tenerlo en nuestra casa (si, nuestra casa online es nuestro site, no las redes sociales).
Lo más recomendable es mostrarlos en una ubicación secundaria, que no llame demasiado la atención. Consiero que lo mejor es utilizarlo a modo de créditos o información adicional, por ejemplo en el footer o, incluso, mostrarlo solamente en la sección de «Contacto», «Sobre nosotros» o similar.