Agregar redes sociales en la cabecera de WordPress

[ 28 junio 2017 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

optimización social

Anteriormente vimos cómo agregar redes sociales sin plugins para compartir contenido, sin embargo, es probable que también quieras mostrar tus redes sociales en la cabecera de tu sitio.

Resultado Final

1- Generalidades

Veremos cómo añadir iconos de redes sociales a través de código HTML para crear enlaces externos a los sitios de las redes que usas, usaremos el theme Twenty Seventeen como ejemplo.

2- Widget Area para colocar las redes sociales

Es importante que primero definas la ubicación de las redes sociales en el theme que usas, tienes dos opciones:

• El theme tiene una posición en la cabecera para añadir Widgets: revisa en Apariencia > Widgets, si existe una posición adecuada para mostrar las redes sociales en el front-end del sitio.
• El theme no tiene una posición en la cabecera o quieres añadir una nueva posición: en este caso te sugiero revisar el artículo para añadir una nueva zona de widgets en un theme WordPress. En el caso del theme Twenty Seventeen agregaremos el código:
   
  Para el archivo functions.php

  
  function dcms_agregar_encabezado_zona_widgets() {
    register_sidebar( array(
      'name' => 'Encabezado',
      'id' => 'id-encabezado',
      'description' => 'Posición de encabezado para colocar redes sociales',
      'before_widget' => '<section id="cabecera">',
      'after_widget'  => '</section>',
      ) );
  }
  
  add_action( 'widgets_init', 'dcms_agregar_encabezado_zona_widgets', 0);
  
  

  Para el archivo template-parts/header/header-image.php

  
  dynamic_sidebar( 'id-encabezado' );
  
  

 
Al final la idea es que exista una zona en donde se pueda colocar un Widget HTML dentro del cual colocaremos nuestro código HTML.

3- Código HTML para iconos de redes sociales

Desde Apariencia > Widgets, agrega un Widget HTML a la posición de cabecera de tu theme.

En caso tu theme ya cargue algún tipo de fuente de iconos, como por ejemplo FontAwesome, felicidades, te ahorrarás el trabajo de cargar una fuente de iconos . Sin embargo, en caso tu theme no tenga una fuente de iconos, puedes agregarla tal como lo vimos en el artículo insertar una fuente de iconos en WordPress.

El código para FontAwesome mostrando algunos iconos de redes sociales será similar a lo siguiente:

Código HTML

<ul class="social-icons">
<li>
	<a class="google-plus" href="#" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</li>
<li>
	<a class="twitter" href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li>
	<a class="facebook" href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li>
	<a class="youtube-play" href="#" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
</li>
</ul>

En el código anterior:

• Tenemos un lista principal con la clase social-icons, nos servirá para dar estilos CSS
• Cada botón esta dentro de una etiqueta de enlace, se diferencia con una clase única.
• El ícono se crea con la etiqueta HTML i, la cual también tiene clases diferenciadas.

 
El código CSS basado en la posición agregada y el código HTML anterior sería:

#cabecera{
	position: absolute;
	width:100%;
	z-index: 999;
}

.social-icons{
	list-style: none;
	text-align: right;
	margin-top: 15px;
	margin-right: 20px;
}

.social-icons li{
	display: inline-block;
	margin-right: 10px;
}

.social-icons i{
	font-size:18px;
	color:white;
}

.social-icons a{
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
}

.social-icons .google-plus,
.social-icons .youtube-play{
	background-color:#D7482A;
}

.social-icons .twitter{
	background-color: #00D7D5;
}

.social-icons .facebook{
	background-color: #305FB3;
}

¿Aún con dudas?, en el siguiente video se explica en detalle los puntos tratados anteriormente.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...