En la entrada de hoy vamos a ver cómo añadir iconos sociales en Genesis sin utilizar ningún plugin. Con un poquito de código PHP y CSS lograremos tener una barra de iconos sociales en cualquier lugar de nuestra web, sin necesidad de instalar ningún plugin que haga nuestra web más pesada.
Para los iconos vamos a usar la librería Font Awesome, que es la más utilizada. Vamos por partes:
1. Descargar Font Awesome
Lo primero que tenemos que hacer es descargar la librería. Podéis descargarla desde aquí.
Una vez la tenemos descargada, la descomprimimos y subimos, vía FTP, las carpetas css y fonts a la raiz de nuestro Child Theme de Genesis.
2. Agregamos la llamada al archivo CSS de Font Awesome
Para llamar al archivo CSS que acabamos de colocar en la raiz de nusetro theme, tendremos que insertar éste código en el archivo functions.php
1 | add_action( 'wp_enqueue_scripts', 'afn_enqueue_awesome' ); function afn_enqueue_awesome() { if ( !is_admin() ) { wp_enqueue_style( 'afn-font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.0.3' ); } } |
Bien, ya tenemos instalada la librería en nuestro theme!.
Ahora tenemos que decidir en qué sitio de la web vamos a colocar los iconos. El ejemplo que voy a poner es el de esta misma web. Yo he elegido el footer, pero podemos ponerlo en cualquier sitio, para ello vamos a utilizar los Hooks de Genesis.
3. Elegir el Hook
Hook en inglés significa “gancho”. Así pues, un hook es una parte de nuestra web donde podemos “enganchar” cualquier cosa, texto, imágenes, código, etc. Gracias a los hooks podemos personalizar nuestro child theme hasta donde queramos.
Para saber en qué parte de la página esta cada hook, podéis echar un vistazo a esta guía de hooks , o podéis instalar el plugin Genesis Visual Hook Guide , que una vez instalado, os mostrará gráficamente dónde está cada hook.
Hay 2 tipos de hooks:
- Action hooks: Nos permiten añadir cualquier tipo de contenido en partes de la página que por defecto, vienen vacías.
- Filter hooks: Nos permiten “filtrar” o sustituir contenido ya existente.
En mi caso, voy a utilizar un Filter Hook, ya que lo voy a insertar en el footer, donde ya hay contenido. El hook en concreto se llama genesis_footer_creds_text
4. Insertamos el código en el hook
Para insertar los iconos en ese hook, debemos añadir en el archivo functions.php de nuestro theme el siguiénte código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | add_filter ('genesis_footer_creds_text', 'mis_creditos'); function mis_creditos() { echo '<h5>También me encuentras en:</h5>'; echo '</p></div>'; echo '<div class="enlaces_sociales"><p>'; echo'<ul> <li><a href="http://www.facebook.com/diegofresnoweb" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="http://twitter.com/dixdee" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="http://plus.google.com/u/0/115200460565946744475" target="_blank"><i class="fa fa-google-plus"></a></i></li> <li><a href="http://es.linkedin.com/in/diego-fresno-lópez-022ba661" target="_blank"><i class="fa fa-linkedin"></a></i></li> '; |
En el código, obviamente, debéis cambiar las direcciones de mis redes sociales por las vuestras 😉
Y voilà, tenemos nuestros iconos sociales. Lo sé, están bastante cutres, pero ahora le daremos una mano de “chapa y pintura” con CSS.
5. Aplicamos los estilos CSS
Llega lo más divertido, que es darle la apariencia que nosotros queramos, con CSS. Os dejo el código que yo he puesto, con cada línea comentada, para que podáis cambiar los valores y personalizarlos a vuestro gusto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .enlaces_sociales ul { list-style: none; /* Quitamos los "topos" de los elementos de la lista */ text-align: center; /* Alineamos los iconos al centro horizontal de su contenedor */ } .enlaces_sociales ul li { display: inline; /* Mostramos los elementos de la lista en horizontal */ } .enlaces_sociales ul li a{ font-size: 20px; /* Tamaño de los iconos */ margin: 0 7px 20px !important; /* Margen entre cada icono*/ background: #3481a2; /* Color de fondo de los iconos */ padding: 12px; /* Espacio entre el icono y el fondo*/ border-radius: 50%; /* Convertimos el fondo en un círculo */ transition: all 0.4s; /* Transición de 0.4 segundos al pasar el ratón por encima del icono */ -webkit-transition: all 0.4s; /* Transición de 0.4 segundos al pasar el ratón por encima del icono */ } .enlaces_sociales ul li a:hover{ background: #2a7697; /* Color de fondo al pasar el ratón por encima */ } .fa { color: #fff; /* Color de los iconos */ width: 25px; /* Ancho de los círculos */ height: auto; } .enlaces_sociales { margin-top: 20px; /* Margen superior que hay entre los iconos y los créditos del Footer */ } |
Y ya está, éste es resultado:
Sé que puede parecer bastante tedioso hacer todo esto,pudiendo instalar un plugin que lo haga, pero ahorrándonos la instalación de ese plugin, la web será más ligera y cargará más rápido. Además, el crearlo tú mismo siempre da más satisfacción 😉
Otra ventaja de hacerlo así, es que te puede llevar algo de tiempo la primera vez, pero una vez has hecho uno, luego es cosa de copiar-pegar, y modificarlos a tu gusto en 5 minutos.
- Contactar para ver cómo puedo ayudarte.
- Suscribirte para no perderte ninguna de mis publicaciones.
- Si quieres comentar, adelante, te responderé encantado.
Muchas gracias por leerme 😉
Creo que el punto 4 se te ha descuajaringado 😉
Muchas gracias por avisarme, Eva!!. Solucionado!.