ElegantThemes

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

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

Los widgets le permiten agregar fácilmente 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 agregar fácilmente un widget de WordPress al encabezado de su sitio web.

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

¿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 verán sus visitantes cuando visiten su sitio web de WordPress. Al agregar un widget de WordPress a su encabezado, puede optimizar esta área para ayudar a captar la atención del lector.

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

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

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

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

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.

Nota del editor: Si su tema no tiene un área de encabezado lista para widgets, ahora puede crear temas de WordPress completamente personalizados desde cero (sin ningún tipo de codificación).

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 ir directamente al método que desea usar.

Método 1. Agregue un widget de WordPress al encabezado de su sitio web en la configuración del tema de WordPress

Muchos de los mejores temas de WordPress incluyen un área de widgets de encabezado que puede personalizar a su gusto.

Primero, querrá 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 al área de widgets de su panel de administración de WordPress.Para hacer esto, navegue a 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.

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

Si hace clic aquí, lo lleva a una pantalla para editar su encabezado y agregar widgets.

En la parte inferior de la pantalla, puede personalizar completamente el encabezado, junto con las áreas arriba y debajo del encabezado. Simplemente coloque el cursor sobre una de las áreas vacías y haga clic en el ícono ‘Más’.

Haga clic en el icono más
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 20

Esto abre un menú emergente donde puede seleccionar ‘Widget 1’.

Hay opciones adicionales para elegir, pero deberá seleccionar una de las opciones de ‘Widget’ para que el encabezado esté listo para el widget.

Seleccione la opción del widget 1
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 21

Para agregar un área de widget a su encabezado, haga clic en el cuadro ‘Widget 1’ que se encuentra en la sección del personalizador de encabezado.

Esto abre la opción de agregar un widget.

Haga clic en widget 1 cuadro
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 22

A continuación, haga clic en el ícono de agregar bloque ‘Más’ en el menú de la izquierda.

Esto abre una ventana emergente donde puede seleccionar un widget para agregar a su encabezado.

Haga clic en el ícono más y seleccione el widget
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 23

Puede continuar personalizando su encabezado y agregar tantos widgets como desee.

Una vez que haya terminado, asegúrese de hacer clic en el botón ‘Publicar’ para guardar los cambios.

Publicar cambios en el widget de encabezado
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 24

Ahora puede ver su área de encabezado con el widget o widgets que agregó.

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

¿No estás usando Astra?

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

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

Ir a la sección de widgets para el widget de encabezado
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 26

Si lo hay, simplemente haga clic en el ícono de agregar bloque ‘Más’ para que aparezca el menú de widgets.

Luego puede agregar cualquier widget que desee haciendo clic en él.

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

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

Método 2. Agregue un widget de WordPress al encabezado de su sitio web agregando código a WordPress

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

Si no lo ha hecho antes, consulte nuestra guía sobre cómo 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 mediante el uso de 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 un área lista para widgets para su tema.

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

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

Ahora, puede agregar sus widgets a esta nueva área. Para obtener más detalles, consulte nuestra guía sobre cómo agregar y usar widgets en WordPress.

Sin embargo, su widget de encabezado no se mostrará en vivo en su sitio web todavía. Le mostraremos cómo hacerlo a continuación.

Mostrar su widget de encabezado personalizado en WordPress

Ahora que ha creado el área del widget de encabezado, debe decirle a WordPress dónde mostrarlo en su sitio web.

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


    


Este código agregará 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.

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

Dale estilo a tu área de widget de encabezado de WordPress usando CSS

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

Para obtener más información, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.

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

Esto abre el panel de personalización de temas de WordPress.Debes hacer clic en la pestaña ‘CSS adicional’.

CSS adicional del personalizador de WordPress
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 30

Esto le permite agregar CSS adicional directamente a su tema y ver los cambios en tiempo real.

Aquí hay un ejemplo de código CSS para ayudarlo a comenzar:

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 agregue el código CSS al cuadro ‘CSS adicional’.

Agregar código CSS y publicar
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 31

Una vez que 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 con los cambios de CSS en vivo.

Ejemplo de widget de encabezado después de CSS
Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) 32

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 puede consultar nuestra guía sobre cómo elegir el mejor alojamiento de WordPress y nuestras selecciones expertas del mejor software de chat en vivo para pequeñas empresas.

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

La publicación Cómo agregar un widget de WordPress al encabezado de su sitio web (2 formas) apareció por primera vez en AprenderWP.

Artículo Recomendado:  Descargue un encabezado y pie de página GRATIS para el paquete de diseño de servicios de seguridad de Divi

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *