¿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.
Notar: 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?
Contents
Los widgets le permiten agregar fácilmente bloques de contenido a un área designada de 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, publicaciones recientes o lo que desee. Esta área en particular se llama «Under the Fold» 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. Pocos temas de WordPress agregan áreas listas para widgets sobre el contenido o en el encabezado. Es por eso que en este artículo, explicaremos cómo agregar un área de widgets al encabezado de su sitio web de WordPress.
Paso 1. Crea un área de widget de encabezado
Primero, necesitamos crear un área de widgets personalizada. Este paso le permitirá ver el área de su widget personalizado 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’ => ‘Área de widget de encabezado personalizado’, ‘id’ => ‘widget de encabezado personalizado’, ‘before_widget’ => ‘
‘,’ before_title ‘=>’
‘,’ after_title ‘=>’
‘,)); } add_action (‘widgets_init’, ‘wpb_widgets_init’); Este código guarda una nueva barra lateral o área lista para widgets para su tema. Ahora puedes ir a Apariencia »Widgets página, y verá una nueva área de widgets titulada «Á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 paso a paso sobre cómo agregar widgets.
Paso 2: vea su 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 este á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 widgets personalizada.
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. Aquí es donde necesitará CSS para mejorarlo.
Paso 3: Diseñe el área del widget de encabezado usando CSS
Dependiendo de su tema, deberá agregar CSS para controlar la visualización del área del widget de encabezado y cada widget dentro. La forma más sencilla de hacerlo es utilizar 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 del tema 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. Para los propósitos de este tutorial, asumimos que solo usará esta área para agregar un solo widget para mostrar anuncios publicitarios o un widget de menú personalizado. Aquí hay algunos ejemplos de CSS para comenzar. div # header-widget-area {ancho: 100%; color de fondo: # f7f7f7; borde inferior: 1px sólido #eeeeee; alineación de texto: centro; } h2.chw-title {margin-top: 0px; alineación de texto: izquierda; text-transform: mayúsculas; tamaño de fuente: pequeño; color de fondo: #feffce; ancho: 130px; relleno: 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. También puede consultar nuestra lista de los 25 widgets de WordPress más útiles para su sitio. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 13:55:35.
