TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar y personalizar íconos sociales en WordPress?

4

WordPress tiene un límite para los desarrolladores de complementos y temas. Esto ayuda a no mezclar las funciones del tema con las funciones de los complementos. Ayuda mucho a la hora de cambiar un tema que solo afecta la apariencia y no las funciones. Sin embargo, muchos temas populares utilizan íconos para compartir y seguir en redes sociales como parte de las plantillas de temas. También tiene sentido no instalar un complemento social adicional para mejorar la velocidad y la privacidad. Finalmente, WordPress incluyó un widget de iconos sociales como parte del editor de Gutenberg desde la versión 5.4. En este artículo, exploremos cómo insertar íconos sociales en el sitio de WordPress.

Relacionado: ¿Cómo insertar y personalizar íconos sociales en Weebly?

Iconos de compartir y seguir en redes sociales

Los íconos sociales tienen dos funciones: una permite a los usuarios compartir la página y la otra permite que los usuarios sigan sus perfiles sociales. Los íconos de seguimiento social son simples y contienen una URL de perfil estática. Sin embargo, los íconos para compartir necesitan algún script para incluir la URL de la página actual cuando el usuario hace clic en ella para compartir. También necesita recoger la imagen y la descripción destacadas para crear un widget para compartir (como un gráfico abierto en las tarjetas de Facebook o Twitter ).

Ahora, conoces la diferencia entre compartir y seguir íconos sociales. Desde la perspectiva de la usabilidad, los íconos para compartir deben estar en el mismo lugar en el diseño del sitio, mientras que los íconos de seguimiento deben ser un widget que el usuario puede insertar donde quiera.

Insertar iconos sociales en WordPress

WordPress introdujo un widget de iconos sociales en la versión 5.4. Sin embargo, el nombre "Iconos sociales" puede confundirte. Es un bloque simple de iconos de seguimiento social que puedes insertar en cualquier lugar de tu publicación o página y agregar las URL de tu perfil social.

  • Primero, asegúrese de actualizar su versión de WordPress a 5.4 o posterior y use el editor o complemento de Gutenberg.
  • Cuando esté en el editor de Gutenberg, haga clic en "Agregar bloque" + icono.
  • Escriba "social" y busque el bloque "Iconos sociales" en la sección "Widgets".
  • Haga clic en el bloque "Iconos sociales" para insertar en su contenido.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Insertar iconos sociales en WordPress

Personalización de widgets de iconos sociales en Gutenberg

De forma predeterminada, el bloque "Iconos sociales" mostrará algunos iconos con el icono de WordPress como el primero.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Bloque de iconos sociales en Gutenberg

Puede personalizar los iconos de forma similar a cualquier otro bloque de Gutenberg.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Personalizar el bloque de iconos sociales en WordPress

  • Haga clic en el icono para agregar el enlace de su perfil social para ese icono.
  • Puede cambiar la etiqueta en la barra lateral de configuración de "Bloquear". La etiqueta es útil para que las personas con discapacidades visuales la utilicen en el lector de pantalla.
  • Puede agregar una clase CSS personalizada en la opción "Avanzado".
  • Mueva la flecha en el bloque para mover el icono seleccionado hacia la izquierda o hacia la derecha. De esta forma, puede ajustar la posición de los iconos a su gusto.

Al hacer clic fuera del bloque, solo serán visibles los íconos con la URL. Puede agregar íconos adicionales haciendo clic en el botón + dentro de los bloques de íconos sociales. Funciona como un bloque dentro de un bloque (como un bloque de columnas). También te permite buscar el ícono social entre los íconos disponibles.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Buscar bloques sociales

Además, también puede insertar enlaces personalizados utilizando el bloque "Enlace". Dado que cada icono es un bloque, puede eliminar los iconos sociales no utilizados del widget. Le recomendamos que elimine los iconos no utilizados para mantener limpio el código de backend.

Cambio de pantalla

Cuando haya terminado de agregar enlaces de perfil, tiene la opción de alinear los íconos a la izquierda, a la derecha o al centro. Además, puede cambiar el estilo de los iconos eligiendo una de las opciones disponibles.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Cambiar el estilo de los iconos sociales

El widget de iconos sociales actual tiene tres estilos:

  • Predeterminado: icono dentro de un círculo lleno
  • Solo logotipos: muestra solo el logotipo de la marca sin relleno
  • Forma de píldora: cambie el estilo a píldora ovalada para compartir con iconos y relleno

Esperamos que en el futuro haya más opciones para diseñar tus íconos.

Reutilización de iconos sociales

La mejor parte es que puede hacer clic en la configuración de los tres puntos e incluir los íconos sociales para incluirlos en "Bloques reutilizables".

¿Cómo agregar y personalizar íconos sociales en WordPress?

Agregar a bloques reutilizables

Puede insertar el bloque de íconos sociales reutilizables en cualquier lugar de su sitio, sin la necesidad de volver a crearlo cada vez.

Error al ver el código HTML

En este momento, no puede obtener el código HTML del widget social y muestra un error irresoluble.

  • Haga clic en el icono de configuración de tres puntos en el bloque de iconos sociales y seleccione "Editar como HTML".
  • Nuevamente, haga clic en el botón de tres puntos y seleccione "Editar visualmente" para volver a colocar los iconos visualmente.

Desafortunadamente, el bloque tiene algún error y le mostrará un error de contenido no válido cuando cambie los modos HTML y visual.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Error de bloque de iconos sociales

Tampoco vemos ninguna posibilidad de resolver el error y recuperar el bloqueo.

¿Cómo agregar y personalizar íconos sociales en WordPress?

Error al alternar HTML y código visual

Esperamos que este error se resuelva en futuras versiones. Porque, puede usar el HTML en la barra lateral o en el widget de pie de página si eso funciona.

Insertar iconos para compartir en redes sociales

WordPress no tiene opciones predeterminadas para insertar íconos para compartir en redes sociales en su sitio. Si su tema no tiene íconos para compartir incorporados, la única forma es buscar complementos de terceros y tiene muchos disponibles de forma gratuita y premium. Uno de nuestros favoritos son los botones premium fáciles de compartir en redes sociales que puede comprar por $ 22. Si desea instalar un complemento gratuito, consulte esta lista de complementos sociales gratuitos para encontrar uno adecuado para usted.

Como se mencionó, no tiene sentido tener un bloque para compartir en redes sociales en Gutenberg, ya que no es conveniente insertar los íconos en cada publicación.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More