• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Diseñador web WordPress Freelance

Diseño web, WordPress y Marketing Online

  • Inicio
  • Portfolio
  • Blog
  • Contacto

Genesis · 11 enero, 2016

Añadir iconos sociales en Genesis sin plugins

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.

Carptetas-css-y-fonts

 

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.

Hooks de Genesis

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

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 😉

iconos sin estilo

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:

 

Iconos sociales en Genesis sin plugins

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.

¿Necesitas más ayuda?Si quieres seguir aprendiendo o necesitas mi ayuda, puedes:

  • 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 😉

 

Comparte si crees que le puede servir de ayuda alguien.

Archivado en:Genesis

Diego Fresno

Diego Fresno López

Diseñador web freelance especializado en WordPress y Genesis.

Interacciones con los lectores

Comentarios

  1. Eva dice

    15 diciembre, 2016 en 8:42 am

    Creo que el punto 4 se te ha descuajaringado 😉

    Responder
    • Diego Fresno dice

      15 diciembre, 2016 en 12:04 pm

      Muchas gracias por avisarme, Eva!!. Solucionado!.

      Responder

Deja una respuesta Cancelar la respuesta

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

diegofresno.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Diego Fresno López como responsable de esta web.
La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud.

  • Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Raiola (proveedor de hosting de diegofresno.com) dentro de la UE. Ver política de privacidad de Raiola.
  • Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@diegofresno.com así como el derecho a presentar una reclamación ante una autoridad de control.
    Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://diegofresno.com, así como consultar mi política de privacidad.

Barra lateral primaria

Últimas Entradas

Filtrar spam en Analytics

Cómo filtrar el spam de Analytics

Crear custom post types

Crear custom post types en WordPress

Pasar WordPress a SSL

Añadir áreas de widget personalizadas en WordPress

Añadir un nuevo área de widgets personalizado en WordPress

Importar y exportar widgets en WordPress

Importar y exportar widgets en WordPress

Suscríbete al blog

Footer

diegofresno.com Diseño web y Marketing Online Av. Argentina, 132. Oficina 239 33213 Gijón Asturias

  • Inicio
  • Portfolio
  • Blog
  • Contacto
  • Facebook
  • LinkedIn
  • Aviso Legal
  • Políticas de privacidad
Google ârtner Diego Fresno
DMCA.com Protection Status