¿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.
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 ‘Por debajo de la página’ y todos los sitios populares la usan para mostrar cosas realmente importantes.
Normalmente, los temas de WordPress añaden barras laterales junto al contenido o en el área del 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 widgets al encabezado de su sitio web de WordPress.
Paso 1. Creación de un área de widget de encabezado
Primero, necesitamos crear un área de widgets personalizada. Este paso le permitirá ver su área de widgets 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' => '<div class="chw-widget">', 'after_widget' => '</div>', 'before_title' => '<h2 class="chw-title">', 'after_title' => '</h2>', ) ); } 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 con la etiqueta ‘Área de widgets de encabezado personalizado’.
Continúe, agregue un widget de texto a esta área de widgets recién creada y guárdelo. 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 el 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.
Eso es porque aún no le hemos dicho a WordPress dónde mostrar este área de widgets.
Hagámoslo en este paso.
Deberá editar el archivo header.php en su tema y agregar este código donde desee mostrar su área de widgets personalizada.
<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary"> <?php dynamic_sidebar( 'custom-header-widget' ); ?> </div> <?php endif; ?>
No olvide guardar sus cambios.
Ahora puede visitar su sitio web y verá el área de su widget de encabezado.
Notarás que se ve un poco sin pulir. Ahí es donde necesitará CSS para que se vea mejor.
Paso 3: Estilo de su área de widget de encabezado usando CSS
Dependiendo de su tema, deberá agregar CSS para controlar cómo se muestra el área del widget de encabezado y cada widget dentro de él.
La forma más sencilla de hacerlo es mediante el complemento CSS Hero. Le permite utilizar una interfaz de usuario intuitiva para cambiar el CSS de cualquier tema de WordPress. Para obtener 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 iniciará la interfaz de personalización de temas de WordPress. Deberá hacer clic en la pestaña «CSS adicional».
La pestaña CSS adicional en el personalizador de temas le permite agregar su CSS personalizado mientras observa los cambios aparecer en la vista previa en vivo.
Por el bien de este tutorial, asumimos que solo usará esta área para agregar un único widget para mostrar anuncios publicitarios o un widget de menú personalizado.
Aquí hay algunos CSS de muestra 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 nuestra área de widget de encabezado personalizado en el tema predeterminado Twenty Seventeen.
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 le haya ayudado a aprender cómo agregar un widget de WordPress al encabezado de su sitio. Es posible que también desee ver nuestra lista de los 25 widgets de WordPress más útiles para su sitio.