X
Jhon Marreros Guzmán

Agregar redes sociales en la cabecera de WordPress

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.

 

Si no quieres añadir una nueva posición o zona de widgets a tu theme, podrías agregar directamente código HTML en los archivos del theme, puedes buscar el archivo header.php. Sin embargo no te recomiendo esta opción.

 

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.

 

La estructura HTML anterior sería similar si decides usar imágenes para los iconos de las redes sociales.

 
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;
}

 

Artículos Relacionados

Categorías: Themes
Etiquetas: optimizaciónsocial

Ver comentarios (11)

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

  • Que increible manera de explicar, desde mi casi nula experiecia, e seguido cada paso y logre entender mucho del funcionamiento de mi plantilla, gracias, me gustaria hacerte una pregunta, y es lo siguiente, logro añadir el contenedor para mis widgets, y alli, sin codigo, solo arrastrando kis widgets al contenedor se muestran correctamente, el unico inconveniente, es que todos los widgets se muestran sobre un fon do negro, es decir, en toda la zona del contenedor me cubre la visualizacion de la imagen del header, podrias por favor indicarme, como cambiar ese background para que sea transparente? te lo agradeceria muchisiomo, es mi primera vez trabajando en este tipo de proyectos

    • Hola, envía la url de tu sitio web para verificar lo que comentas, es posible que con código CSS se solucione. Saludos.

      • hola, buen dia, gracias de antemano, y gracias sobre todo por tu atencion, la web en cuestion es: https://waraoink.com/
        en este caso segui todos tus pasos, la diferencia es que añadi las redes sociales con un widgets, probe con un widgets de buscaador y otro de llamar al whatsapp, en toddas el background es de color negro, me gustaria que fuese transparente, la idea de tener este contenedor en esa zona es añadir un boton de whatsapp, iconos redes sociales, el carrito de compra y una lupa de busqueda, es decir me gustaria añadir varios widgets a esa zona

        • Hola, prueba con el siguiente código CSS:

          #cabecera{
  padding: 10px;
}

@media(min-width:990px){
   #cabecera{
    position: absolute;
    top: 10px;
    right: 10px;;
    z-index: 9999;
    padding: 0;
  } 
}
Deja un comentario