Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas)

¿Quiere agregar un widget de WordPress al área de encabezado de su sitio web?

Los widgets facilitan la adición de bloques de contenido a secciones específicas de su tema, pero no todos los temas incluyen un área de widget de encabezado.

En este artículo, le mostraremos cómo puede agregar fácilmente un widget de WordPress al encabezado de su sitio web.

¿Por qué agregar un widget de encabezado a su sitio de WordPress?

El encabezado de su sitio web es una de las primeras cosas que ven sus visitantes cuando visitan su sitio web de WordPress. Al agregar un widget de WordPress a su encabezado, puede optimizar esta área para captar la atención de los lectores.

La mayoría de los encabezados de sitios web incluyen un logotipo personalizado y un menú de navegación para ayudar a los visitantes a navegar por su sitio.

También puede agregar un widget de encabezado encima o debajo de esta área para mostrar contenido útil, anuncios publicitarios, ofertas por tiempo limitado, formularios de una línea y más.

Aquí en AprenderWP, tenemos un llamado a la acción en el encabezado justo debajo del menú de navegación.

La mayoría de los temas de WordPress tienen áreas listas para widgets en la barra lateral y las áreas de pie de página del sitio, pero no todos los temas agregan áreas listas para widgets en el encabezado.

Pero primero, echemos un vistazo a cómo agregar un widget de WordPress al encabezado de su sitio web en su tema existente. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar.

Muchos de los mejores temas de WordPress vienen con un área de widgets de encabezado que puedes personalizar a tu gusto.

Primero, debe ver si su tema actual de WordPress admite un área de widgets de WordPress en el encabezado.

Puede encontrar esto yendo al personalizador de temas de WordPress o a la sección de widgets de su panel de administración de WordPress Apariencia » Personalizar y vea si hay una opción para editar el encabezado.

En este ejemplo, el tema gratuito de Astra tiene una opción llamada "Creador de encabezados". Le mostraremos cómo usar esta función en Astra, pero tenga en cuenta que se verá diferente según el tema que esté usando.

Al hacer clic en esto, accederá a una pantalla donde puede editar su encabezado y agregar widgets.

En la parte inferior de la pantalla, puede personalizar completamente el encabezado y las áreas arriba y debajo del encabezado. Simplemente coloque el cursor sobre una de las áreas en blanco y haga clic en el ícono "más".

Esto abrirá un menú emergente donde puede seleccionar "Widget 1".

Hay opciones adicionales para elegir, pero debe seleccionar una de las opciones de "Widget" para tener listo el widget de encabezado.

Para agregar un área de widget a su encabezado, haga clic en el cuadro Widget 1 en la sección Personalización del encabezado.

Esto abrirá la opción para agregar un widget.

A continuación, haga clic en el icono más para agregar bloques en el menú de la izquierda.

Esto abrirá una ventana emergente donde puede elegir un widget para agregar a su encabezado.

Puede personalizar aún más su encabezado y agregar tantos widgets como desee.

Cuando haya terminado, asegúrese de hacer clic en el botón "Publicar" para guardar los cambios.

Ahora puede mostrar su encabezado con el widget o widgets agregados.

¿No usas un Astra?

Otra forma de ver si su tema ya tiene un widget de encabezado de WordPress es navegar a Apariencia » Widgets en su área de administración de WordPress.

Luego vea si hay una sección de widgets etiquetada como "Encabezado" o algo similar.

Si este es el caso, simplemente haga clic en el ícono más para agregar bloques para que aparezca el menú de widgets.

Luego puede agregar cualquier widget haciendo clic en él.

Asegúrese de hacer clic en el botón "Actualizar" para guardar los cambios en el área del widget de encabezado.

Si su tema de WordPress actualmente no tiene un área de widgets de WordPress en el encabezado, deberá agregarlo manualmente agregando el código de WordPress.

Si aún no lo ha hecho, consulte nuestra guía para copiar y pegar código en WordPress.

Luego puede agregar el siguiente fragmento de código a su archivo functions.php en un complemento específico del sitio o usando un complemento de fragmentos de código.

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 área lista para widgets para su tema.

Si vas a... Apariencia » Widgetsluego verá una nueva área de widget denominada "Área de widget de encabezado personalizado".

Ahora puedes agregar tus widgets a esta nueva área. Para obtener más información, consulta nuestra guía para agregar y usar widgets en WordPress.

Sin embargo, su widget de encabezado aún no está activo en su sitio web. Le mostraremos cómo a continuación.

Mostrar su widget de encabezado personalizado en WordPress

Después de crear el área del widget de encabezado, debe decirle a WordPress dónde desea que aparezca en su sitio.

Para hacer esto, debe editar el archivo header.php de su tema y pegar el siguiente código donde desea que aparezca el widget.

Este código agrega el área de widgets que creó anteriormente al área de encabezado de su sitio web.

Ahora puede visitar su blog de WordPress para ver el área de widgets de encabezado en vivo.

Dale estilo a tu área de widgets de encabezado de WordPress con CSS

Dependiendo de su tema, es posible que también deba agregar CSS a WordPress para controlar, como el área del widget de encabezado y cada widget que contiene Si no sabe CSS, puede usar un complemento como CSS Hero en su lugar.

Consulte nuestra guía para agregar fácilmente CSS personalizado a su sitio de WordPress para obtener más información.

A continuación, navegue hasta Apariencia » Personalizar en su área de administración de WordPress.

Esto abrirá la ventana de personalización del tema de WordPress. Debe hacer clic en la pestaña "CSS adicional".

De esta manera, puede agregar CSS adicional directamente a su tema y ver los cambios en tiempo real.

Aquí hay un ejemplo de código CSS para que comiences:

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

Simplemente pegue el código CSS en el campo CSS adicional.

Cuando haya terminado de agregar su CSS, asegúrese de hacer clic en el botón "Publicar" para guardar los cambios.

Así es como se ve el widget de encabezado personalizado en vivo con los cambios de CSS.

Esperamos que este artículo lo haya ayudado a aprender cómo agregar un widget de WordPress al encabezado de su sitio web. También le puede interesar nuestra guía para elegir el mejor alojamiento de WordPress y nuestras selecciones expertas del mejor software de chat en vivo leído para pequeñas empresas.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.