Cómo crear iconos de redes sociales en WordPress sin plugin

¡Buenos días! En este vídeo os voy a enseñar cómo crear iconos de redes sociales en WordPress sin utilizar plugins, con la técnica SVG Sprite. ¡Vamos allá!

YouTube video

Antes de empezar, si quieres aprender a crear botones para compartir entradas en redes sociales en WordPress, échale un vistazo a este otro artículo 🙂

Dicho esto vamos a repasar los pasos que hemos seguido para insertar estos iconos.

Paso 1: definimos los iconos SVG

La web donde extraemos los iconos es la IcoMoon pero también hay otras opciones como por ejemplo Flaticon.

Podemos utilizar tanto el archivo functions.php como el plugin de Snippets, que siempre recomiendo. El código que utilizo en el vídeo es el siguiente:

function bps_sprite_svg () {?>
<svg display="none" xmlns="http://www.w3.org/2000/svg">

//Etiquetas <symbol> aquí

</svg>
<?php }

add_action('wp_head', 'bps_sprite_svg');

Sólo faltaría insertar las etiquetas <symbol> dentro de la etiqueta <svg> en la función, tal como vemos en el vídeo

Paso 2: mostramos los iconos en la página

Ahora nos vamos al editor HTML de la página o entrada donde queremos insertar los iconos y utilizamos el código proporcionado por IcoMoon, que en mi caso ha sido el siguiente:

<svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
<svg class="icon icon-instagram"><use xlink:href="#icon-instagram"></use></svg>
<svg class="icon icon-linkedin2"><use xlink:href="#icon-linkedin2"></use></svg>

Paso 3: personalizamos los iconos SVG con CSS

Aquí cada uno lo puede poner a su gusto, pero os comparto el código que he utilizado en el vídeo para tener una referencia:

.icon {
width:45px;
height:45px;
background-color:#6cc;
padding:8px;
fill:#fff;
margin:20px 10px;
border:3px solid #6cc;
transition:0.5s all
}

.icon:hover {
background-color:transparent;
fill:#6cc;
transition:0.5s all
}

Importante: arreglar el stripping de HTML

Hay varias formas para evitar que WordPress edite nuestro HTML:

  • Crear un shortcode de WordPress con el HTML de los iconos dentro.
  • Utilizar el Widget de HTML en una zona de Widgets o con un Page Builder
  • Utilizar un plugin que mantiene nuestro HTML intacto.

En el vídeo he optado por el último método y el plugin que he utilizado es el siguiente: Preserved HTML Editor Markup Plus. Aunque esté desactualizado es un plugin que funciona perfectamente para esta tarea.

Paso 4: añadimos los enlaces a redes sociales

Aquí no hay mucho misterio, simplemente envolvemos nuestras etiquetas <svg> con un enlace <a> y ya lo tenemos listo 🙂 También os recomiendo añadir el atributo target=”_blank” para que las redes sociales se abran en una nueva pestaña, tal que así:

<a href="#" target="_blank"><svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></a>
<a href="#" target="_blank"><svg class="icon icon-instagram"><use xlink:href="#icon-instagram"></use></svg></a>
<a href="#" target="_blank"><svg class="icon icon-linkedin2"><use xlink:href="#icon-linkedin2"></use></svg></a>
¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web