Cómo añadir un widget de WordPress a la cabecera de su sitio web

¿Quieres añadir un widget de WordPress al área de cabecera de tu sitio web? Los widgets le permiten agregar fácilmente bloques de contenido en las secciones designadas de su tema. En este artículo, le mostraremos cómo añadir fácilmente un widget de WordPress al encabezado de su sitio.

Nota: Este es un tutorial de nivel intermedio. Necesitarás añadir código a tus archivos de tema de WordPress y escribir CSS.

¿Por qué y cuándo necesita un widget de cabecera 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.

Un área lista para widgets en el encabezado o antes de que el contenido pueda ser utilizado para mostrar anuncios, artículos recientes, o cualquier cosa que desee.

Esta área en particular se llamaDebajo del pliegue y todos los sitios populares la usan para mostrar cosas realmente importantes.

Normalmente, los temas de WordPress añaden barras laterales al lado del contenido o en el área de pie de página. No muchos temas de WordPress añaden á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 tu sitio web de WordPress.

Paso 1. Creación de un área de widgets de encabezado

Primero, necesitamos crear un área de widgets personalizada. Este paso le permitirá ver su área de widgets personalizada en la página Apariencia " Widgets en su panel de WordPress.

Necesitará añadir este código al archivo functions.php de su tema.

12345678910111213functionwpb_widgets_init() { register_sidebar( array( name => `` Custom Header Widget Area, `id => ` custom-header-widget, ` before_widget=> , ` after_widget => , ` before_title => .

después del_título =>

); }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 puede ir a la página Apariencia " Widgets , y verá una nueva área de widgets llamadaCustom Header Widget Area.

Adelante, agregue un widget de texto a esta área de widgets recién creada y guárdelo. Vea nuestra guía sobre cómo añadir y usar widgets en WordPress para obtener instrucciones detalladas sobre cómo añadir widgets.

Paso 2: Mostrar su widget de encabezado personalizado

Si visita su sitio web ahora, no podrá ver el widget de texto que acaba de añadir a su nuevo widget de cabecera.

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

Hagámoslo en este paso.

Tendrás que editar el archivo header.php en tu tema y añadir este código donde quieras que aparezca tu área de widgets personalizada.

12345678 "header-widget-area "role="complementary">

No olvides guardar los cambios.

Ahora puedes visitar tu sitio web y verás tu área de widgets de cabecera.

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

Paso 3: Estilice su área de widgets de encabezado utilizando CSS

Dependiendo de su tema, necesitará agregar CSS para controlar cómo se muestra el área del widget de cabecera y cada uno de los widgets que contiene.

La forma más fácil de hacerlo es usando el plugin CSS Hero. Le permite utilizar una interfaz de usuario intuitiva para cambiar el CSS de cualquier tema de WordPress. Para más detalles vea nuestra revisión de CSS Hero.

Si no desea utilizar un plugin, puede añadir css personalizados a su tema visitando la página Apariencia " Personalizar .

Esto iniciará la interfaz del personalizador de temas de WordPress. Tendrá que hacer clic en la pestañaCSS Adicional.

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

Por el bien de este tutorial, suponemos que sólo utilizará esta área para añadir un único widget a los anuncios de banner, o un widget de menú personalizado.

Aquí hay algunos ejemplos de CSS para ayudarle a empezar.

12345678910101112131415div#header-widget-area { width: 100%; background-color: #f7f7f7;borde-bajo:1pxsolid#eeeeeeee; texto-alineación: centro;} h2.chw-title { margen-tapa: 0px; texto-alineación: izquierda; texto-transformar: mayúsculas; tamaño de fuente: pequeño; color de fondo: #feffce; anchura: 130px; acolchado: 5px; }

Así es como se veía nuestra área del widget de cabecera personalizada en el tema por defecto Twenty Seventeen.

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

Esperamos que este artículo le haya ayudado a aprender a añadir un widget de WordPress a la cabecera de su sitio. También puede ver nuestra lista de los 25 widgets de WordPress más útiles para su sitio.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

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

Subir