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!

Comentarios (20)

  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. Gracias por el consejo, no sabía que se podía con un menú, pero me topé con la opción pero no me salía y creí que lo estaba haciendo mal. Con la guía me di cuenta que sí era como lo estaba haciendo.

    Al final me di cuenta que el error era porque escribí http:// y debía ser httpS:// en el caso de Twitter, pero con copiar y pegar quedó

  3. Hola Ricardo, necesito ayuda con esto, tengo los links de las redes sociales puestos, pero no consigo que se abran en pestañas nuevas, he intentado buscar el html y mtp aparece…estoy muy pez en todo esto, pero poco a poco a ver si consigo sacar un proyectillo bonito. como lo hago?

    1. Saludos Mónica,

      en la pantalla de Apariencia > Menús deberás hacer clic en un pestañita que se encuentra en la parte superior derecha llamada «Opciones de pantalla». Una vez abierta debes activar «Destino del enlace»
      Con esto ya puedes decidir en cada elemento añadido al menú si quieres que se abra en la misma pantalla o en otra nueva.

      Gracias!

  4. Hola!
    Muy buen tutorial, gracias!!!
    La verdad que era exactamente lo que buscaba, aunque me surge una duda, cómo elimino el texto de la etiqueta para dejar únicamente el icono…quizá sea muy evidente pero no lo consigo.
    Muchas gracias!

    1. Saludos Alicia, gracias por comentar.
      Es una muy buena pregunta. Lo que nosotros hacemos es incluir el texto dentro de elemento span, tal que así:

      <a href="https://twitter.com/silocreativo" rel="nofollow"><span class="screen-reader-text">Twitter</span></a>

      Y después por CSS:

      .screen-reader-text {
      position: absolute;
      top: -9999em;
      left: -9999em;
      }

      Con esto conseguimos que no aparezca el texto y solo el pseudo-elemento que contiene el icono 🙂

      Espero te sirva. Saludos!

  5. Hola,

    El tema que tengo por defecto ya tiene una ubicación footer social, que supongo que será para incluir los iconos para redes, pero al asociar un menú a esta ubicación no veo dónde indicar los enlaces a los iconos, sólo puedo crear un enlace personalizado con una url para cada red social. ¿Cómo podría hacerlo?

    ¡Gracias!

    1. Hola Clara,

      en principio basta con añadir las urls de tus espacios sociales como enlaces personalizados. El tema se encargaría automáticamente de asignarle e icono correcto leyendo la url que has añadido. Si esto no funcionase, entonces el tema está usando una configuración distinta. Para conocer como funciona puedes preguntar en el soporte del tema. Aquí te explico somo encontrar dicho soporte.

      Suerte!

      1. Hola Ricardo,

        Ya intenté a ver si «sonaba la flauta» y veía algo distinto introduciéndolos; desgraciadamente no fue el caso, aparece el nombre de la etiqueta con el enlace.

        Preguntaré en el soporte del tema como dices, te agradezco la información del artículo y tu respuesta, ha sido todo muy útil.

  6. Me quede perdido en la parte de como agregar un correo o un numero de telefono, ya que estos 2 items no son redes sociales en si, Mi duda esta en como agregarlos como URL?

  7. Guau, muy buena esta guía sobre iconos sociales en WordPress :O Todo el asunto CMS y WP es un tema súper interesante, pero a veces puede resultar demasiado amplio. Tu post es muy útil para ordenar parte de estas ideas y tomar una buena decisión 😀 Muchas gracias!!

  8. Hola, intento realizar el cambio de color en el menú de redes sociales con el ejemplo que nos diste:
    #menu-social li a[href*=»twitter.com»] {color: #33ccff; }
    Qué estoy haciendo mal?

  9. hola, en personalización tengo una «opción» de entrar en «medios sociales» y ahí veo que aparecen diferentes medios en los que tendría que poner la url correspondiente.
    Pero luego, no veo donde aparecen ya que no veo ni en widgets ni en el menú esa opción y estoy bastante perdido.
    ¿Me podrías ayudar?

Deja una respuesta

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