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 llaman 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.

función wpb_widgets_init () {

register_sidebar (array (
‘nombre’ => ‘Área de widget de encabezado personalizado’,
‘id’ => ‘widget de encabezado personalizado’,
‘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 denominada “Á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 aún 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.

<?php

if (is_active_sidebar (‘widget-encabezado personalizado’)): ?>

<?php dynamic_sidebar (‘widget-encabezado personalizado’); ?>

<?php endif; ?>

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 más detalles, consulte nuestra revisión 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 ve los cambios aparecer 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 {
ancho: 100%;
color de fondo: # f7f7f7;
borde inferior: 1px sólido #eeeeee;
alinear texto: centro;
}
h2.chw-title {
margen superior: 0px;
alinear texto: izquierda;
transformación de texto: mayúscula;
tamaño de fuente: pequeño;
color de fondo: #feffce;
ancho: 130px;
acolchado: 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.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map