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.phpfunction 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;
}
Hola, me gustaría saber si se puede poner otro espacio a la derecha para poner el logo de la web. Perdona, es decir, a la izquierda. Yo ya puse los iconos sociales a la derecha y quedan muy bien. Gracias de nuevo
Hola, si, podrías agregar las posiciones que creas necesarias, para que se muestren en donde deseas tendrías que usar CSS, tal como se indicó en el código CSS de este artículo, si tienes dudas adicionales sobre CSS mejor contáctame a través del formulario de contacto.
Una pregunta… en los iconos de redes sociales que por defecto trae el tema yo quiero agregar tripadvisor y airbnb y no tengo forma de que aparezcan los iconos de estos sitios, solo me salen el icono de enlace. Pudiera resolver esto??
Hola Julio, posiblemente se tenga que modificar algún archivo(s) del theme que usas, envíame un mensaje a través del formulario de contacto con más detalles, incluye la url de tu sitio. https://decodecms.com/contacto/
estoy usando Storefront, y no se donde poner el codigo Para el archivo template-parts/header/header-image.php
Hola, busca directamente un archivo header.php