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á!
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>
