Cómo agregar un widget de WordPress a la cabecera de tu sitio web

¬ŅDesea agregar un widget de WordPress al √°rea de encabezado de su sitio web? Los widgets le permiten agregar f√°cilmente bloques de contenido en secciones designadas de su tema. En este art√≠culo, le mostraremos c√≥mo agregar f√°cilmente un widget de WordPress al encabezado de su sitio.

Agregue un widget de WordPress al encabezado de su sitio

Nota: Este es un tutorial de nivel intermedio. Deberá agregar código a sus archivos de tema de WordPress y escribir CSS.

¬ŅPor qu√© y cu√°ndo necesita un widget de encabezado en su sitio?

Los widgets le permiten agregar f√°cilmente bloques de contenido a un √°rea designada en su tema de WordPress. Estas √°reas designadas se denominan barras laterales o √°reas listas para widgets.

Se puede usar un área lista para widgets en el encabezado o antes del contenido para mostrar anuncios, artículos recientes o cualquier cosa que desee.

Esta √°rea en particular se llama “Debajo del pliegue” y todos los sitios populares la usan para mostrar cosas realmente importantes.

La sección de encabezado en el popular sitio web List25

Por lo general, los temas de WordPress agregan barras laterales al lado del contenido o en el √°rea de pie de p√°gina. No muchos temas de WordPress agregan √°reas listas para widgets sobre el contenido o en el encabezado.

Es por eso que en este artículo, cubriremos cómo agregar un área de widget al encabezado de su sitio web de WordPress.

Paso 1. Crear un √°rea de widget de encabezado

Primero, necesitamos crear un √°rea de widget personalizada. Este paso le permitir√° ver su √°rea de widget personalizada en Apariencia ¬ĽWidgets p√°gina en su panel de WordPress.

Deberá agregar este código al archivo functions.php de su tema.

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );

Este código registra una nueva barra lateral o un área lista para widgets para su tema.

Ahora puedes ir a Apariencia ¬ĽWidgets p√°gina, y ver√° una nueva √°rea de widgets etiquetada como “√Ārea de widgets de encabezado personalizado”.

√Ārea de widget de encabezado personalizado

Contin√ļe y agregue un widget de texto a esta √°rea de widget reci√©n creada y gu√°rdela. Consulte nuestra gu√≠a sobre c√≥mo agregar y usar widgets en WordPress para obtener instrucciones detalladas sobre c√≥mo agregar widgets.

Paso 2: muestra tu widget de encabezado personalizado

Si visita su sitio web ahora, no podrá ver el widget de texto que acaba de agregar a su widget de encabezado recién creado.

Esto se debe a que todavía no le hemos dicho a WordPress dónde mostrar esta área de widgets.

Hagamos eso en este paso.

Deberá editar el archivo header.php en su tema y agregar este código donde desea mostrar su área de widget personalizada.


    
	


No olvides guardar tus cambios.

Ahora puede visitar su sitio web y ver√° el √°rea del widget de encabezado.

Widget de encabezado sin estilo

Notarás que se ve un poco sin pulir. Ahí es donde necesitará CSS para que se vea mejor.

Paso 3: Dise√Īe el √°rea del widget de encabezado con CSS

Dependiendo de su tema, necesitará agregar CSS para controlar cómo se muestra el área del widget de encabezado y cada widget dentro de él.

La forma m√°s f√°cil de hacerlo es mediante el uso del complemento CSS Hero. Le permite utilizar una interfaz de usuario intuitiva para cambiar CSS de cualquier tema de WordPress. Para obtener m√°s detalles, consulte nuestra rese√Īa de CSS Hero.

Si no desea utilizar un complemento, puede agregar CSS personalizado a su tema visitando Apariencia ¬ĽPersonalizar p√°gina.

Esto lanzar√° la interfaz del personalizador de temas de WordPress. Deber√° hacer clic en la pesta√Īa “CSS adicional”.

Agregar CSS personalizado a un tema de WordPress

La pesta√Īa CSS adicional en el personalizador de temas le permite agregar su CSS personalizado mientras observa los cambios que aparecen en la vista previa en vivo.

Por el bien de este tutorial, estamos asumiendo que solo usar√° esta √°rea para agregar un solo widget para mostrar anuncios de banner o un widget de men√ļ personalizado.

Aquí hay algunos ejemplos de CSS para ayudarlo a comenzar.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}	
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Así es como se veía nuestro área de widget de encabezado personalizado en el tema predeterminado Twenty Seventeen.

Vista previa del widget de encabezado

Es posible que deba ajustar el CSS para que coincida con su tema. Eche un vistazo a nuestra guía sobre cómo agregar estilos personalizados a los widgets de WordPress.

Esperamos que este art√≠culo te haya ayudado a aprender c√≥mo agregar un widget de WordPress al encabezado de tu sitio. Tambi√©n puede ver nuestra lista de los 25 widgets de WordPress m√°s √ļtiles para su sitio.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.