Iconos sociales en WordPress: el menú como mejor opción

Debe existir una estadística real sobre el uso en WordPress de los iconos sociales con enlaces externos a los perfiles sociales. No la conozco, pero debe de ser muy alto. Algunos temas incluyen los iconos en la cabecera, otros en el sidebar o en el footer (como nuestra web), pero lo cierto es que es un elemento muy recurrente.

La cuestión principal respecto a esto es que no existe una forma concreta de añadirlos. Las opciones son múltiples:

Plugins: hay multitud, mejores y peores, más ligeros y más pesados. Personalmente no soy muy amigo de los plugins para una funcionalidad tan concreta como esta. Me parecen un poco invasivos y normalmente no casan bien con el diseño de la plantilla. No obstante, si me tuviera que quedar con alguno, simple-social-icons tiene muchas opciones de personalizar el diseño.

Theme options: (opciones del tema). Es lo más usado en los temas premium de WordPress, y en la mayoría de los casos funcionan bastante bien. Vienen incluidos de basa con un diseño ligado a la plantilla, y aunque su posición suele estar definida (cabecera o footer) también hay opciones de modificación. Un par de ejemplos de esto: MusicHall (Pie de página) o Dessert (en la cabecera)

Consisten simplemente en rellenar el campo con la url para dicha red social y listo. Guardar y los iconos aparecerán en el sitio ubicado. Sencillo si ya nos hemos familiarizado con la plantilla o framework que estemos utilizando.

Menús: Pues sí, esta es la tercera vía y te voy a contar por qué es la mejor. Su uso se gestiona a través de los propios menús personalizados de WordPress (en el panel de Escritorio > Apariencia > Menús) y normalmente traen ligada una ubicación (cabecera o footer) aunque siempre puedes agregarla también al sidebar como widget.

iconos sociales como menu en WordPress

¿Por qué un menú de iconos sociales es la mejor opción?

Por varias razones. Pensemos en el usuario:

No tienen que familiarizarse con el panel de opciones personalizadas del tema. Al realizar la gestión desde el área de menús personalizados de WordPress, está en un entorno conocido y cuyo aprendizaje puede reutilizar. Igual sucede con la opción del plugin.

El diseño de dichos botones viene predefinido por la plantilla, por lo que estamos seguros que siguen un mismo esquema de colores y paletas. Con la opción de utilizar plugins no sucede esto, y el diseño puede verse alterado por unos elementos con otro estilo.

Al cambiar de tema o plantilla no se pierde la información (siempre que el tema de destino tenga registrado dicho menú). Esto es lo más importante. Podemos hacer cambios de plantilla sin preocuparnos de volver a introducir los enlaces sociales en cada uno de las opciones del tema. Ahorramos tiempo y esfuerzo al usuario. Esta es la mejor noticia, un +1 para la UX.

menu social en WordPress

En este combate a tres asaltos, la opción del menú tiene tres puntos, mientras que la opciones del tema y la opción de utilizar plugins solo obtienen uno respectivamente. Veamos cómo llevarlo a cabo.

Integrando un menú de iconos sociales en nuestro WordPress.

Nos enteramos de esta opción gracias a Fränk Klein, que nos mostró los artículos al respecto de Konstantin Kovshenin y de Justin Tadlock. Fantástico, enhorabuena a los dos.

El funcionamiento es muy simple, registramos un nuevo menú en nuestro functions.php para que los usuarios puedan utilizarlo en su panel de administración. Dichos usuarios añaden items a dicho menú, en forma de enlace personalizado (URL), donde van añadiendo sus redes sociales (facebook.com/nombre, twitter.com/nombre,…)

Perfecto, una vez tengamos todos las redes sociales añadidas, es hora de darle estilo, para diferenciar una de otra (ahora mismo tenemos un HTML con varios enlaces en una lista). Y ahí es donde aparece la magia de los nuevos selectores de CSS, concretamente [attribute*=value], que nos selecciona cualquier elemento que contenga un valor determinado para el atributo requerido. Básicamente:

#menu-social li a[href*="twitter.com"] {color: #33ccff; }

Es decir, seleccionamos todo elemento a que contenga dentro de su atributo href la url twitter.com. Fantástico!

Entonces ahora solo queda dar estilo! Para ello en nuestro caso vamos a utilizar la web font Font Awesome, que es la que habitualmente utilizamos en nuestros temas. Así pues, incluiremos cada uno de las redes sociales elegibles. Si trabajas con CSS en WordPress, dale un vistazo a las opciones que tienes para agregarlo a tu tema. Os comparto el snippet que hemos creado:

#menu-social li a::before {
	content: "\f135";
	display: inline-block;
	padding: 0 5px;
	font-family: FontAwesome;
	font-size: 20px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#menu-social li a[href*="facebook.com"]::before {
	content: "\f09a";
}
#menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}
#menu-social li a[href*="dribbble.com"]::before {
	content: "\f17d";
}
#menu-social li a[href*="plus.google.com"]::before {
	content: "\f0d5";
}

La cosa se complica un poco, pues si te fijas, añadimos contenidos mediante los pseudo-elementos :after y :before, para definir el icono social que lleve cada enlace. Lo genial de este método es que además está soportado por navegadores antiguos (hasta Internet Explorer 7). Otro punto a su favor.

Una última cuestión. En caso de que no coincida un enlace con los predefinidos en nuestro CSS, está bien que utilicemos un icono por defecto, tipo una estrella, carita sonriente…algo, que al menos tengamos soportes para servicios futuros.

Pensar en la UX de nuestro tema WordPress antes, durante y después.

Una reflexión acerca de por qué creo que este método es el más óptimo para el usuario.

Todos los autores de temas WordPress tenemos una responsabilidad importante no solo con el diseño final de los mismos y la UX de los futuros visitantes, sino también con la experiencia de usuario de los administradores y configuradores de dichos themes. Y dicha responsabilidad no sólo está presente mientras el usuario utiliza nuestro tema: continúa durante el proceso de cambio de tema, o Theme Switching

Eso es algo muy discutido ya, y se trata al final de definir los límites entre funcionalidades del tema y funcionalidades de los plugins. Un ejemplo concreto: un tema que incluye un custom post type “Portfolio”, ¿Que sucede cuando cambiamos de tema? Pues que el contenido de ese CPT o entrada personalizada se pierde, a menos que la plantilla de destino tenga habilitada dicha funcionalidad (CPT de igual nomenclatura)

Rara vez sucede. Lo mejor en estos casos es trabajar con plugins que sean independientes de los temas, y que podamos cambiar la parte visual de nuestros WordPress sin preocuparnos de si el contenido se queda o se pierde. En este aspecto, Ghost lo está haciendo muy bien al delimitar mucho el límite que no pueden cruzar los temas y plantillas.

Una buena idea sería tener predefinidos algunos CPT dentro de plugins, y que los temas pudiesen o no dar soporte a los mismos. Un ejemplo claro de esto es lo que hace Automattic con wordpress.com, donde han habilitado una entrada personalizada para “portfolio”, pero que es independiente del tema, por lo tanto son los autores de las plantillas los que deciden si dar soporte y diseño a esos artículos o no.

Por ello, personalmente pienso que usar un menú social como el explicado anteriormente dentro de nuestra plantilla, va a facilitar la vida a nuestros usuarios, ahorrarle tiempo y hacer nuestras plantillas y temas más robustos y compatibles, ¿no te parece? ;)

Espero que te hayan servido los consejos, sería de gran ayuda que me dejaras tu opinión como comentario para poder testear de boca de usuarios de WordPress como tú como se percibe esta opción de los menús sociales. Gracias de antemano!


Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

3 Comentarios en “Iconos sociales en WordPress: el menú como mejor opción

  1. Hola Ricardo.

    Me ha parecido muy interesante la idea de introducir redes sociales en nuestros menús de WordPress.

    Curiosamente hoy he estado trasteando con la creación de menús así que me has dado un nuevo enfoque.

    Una vez más un post súper interesante.

    Saludos!

    1. Genial! Me alegro que te sirva, todo lo que sea hacerle la vida más fácil al usuario es bien :)

      Un saludo y muchas gracias por comentar, ya me contarás tus avances con la creación de menús. Saludos

  2. Pedro Pérez

    Pequeñas grandes aportaciones que van dándole más valor a nuestros humildes proyectos.
    Buen trabajo!.
    Muchas gracias.

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>