• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar redes sociales en la cabecera de WordPress

Agregar redes sociales en la cabecera de WordPress

Redes sociales en la cabecera WordPress

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

optimización social

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Theme Twenty Seventeen con redes sociales en cabecera

 

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.

Pantalla de zona de Widgets con una posición de cabecera existente

 

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

 

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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Guadalupe

    26 mayo, 2018

    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

    • Jhon Marreros Guzmán

      26 mayo, 2018

      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.

  2. Julio César

    16 noviembre, 2018

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

    • Jhon Marreros Guzmán

      16 noviembre, 2018

      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/

  3. Jimmy

    18 noviembre, 2018

    estoy usando Storefront, y no se donde poner el codigo Para el archivo template-parts/header/header-image.php

    • Jhon Marreros Guzmán

      19 noviembre, 2018

      Hola, busca directamente un archivo header.php

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Contenidos de texto a voz en WordPress

Subtítulo desde título de la entrada en WordPress

Ordenar alfabéticamente el contenido de WordPress

Personalizar página de gracias de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados