Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

¿Cómo agregar un widget de WordPress a su encabezado de 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.

Nota: Este es un tutorial de nivel intermedio. Necesitará 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.

Un área de widgets en el encabezado o antes del contenido se puede usar para mostrar anuncios, artículos recientes o cualquier cosa que desee.

Esta área en particular se llama ‘Below the fold’ y todos los sitios populares la usan para mostrar cosas realmente importantes.

Normalmente, los temas de WordPress agregan barras laterales al lado del contenido o en el área del pie de página. No muchos temas de WordPress agregan áreas para widgets encima del 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 en el encabezado

Primero, necesitamos crear un área de widget personalizada. Este paso le permitirá ver su área de widget personalizada en la página Apariencia »Widgets en su tablero 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 crea una nueva barra lateral o un área para widgets para su tema.

Ahora puede ir a la página Apariencia »Widgets, y verá una nuevo área de widget etiquetada como “Custom Header Widget Area”.

Siga adelante y agregue un widget de texto a esta área de widgets recién creada y guárdelo.

Paso 2: muestre 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.

Eso es porque aún no le hemos dicho a WordPress dónde mostrar esta á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 widget 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 se olvide de guardar sus cambios.

Ahora puede visitar su sitio web y verá su área de widget en el encabezado.

Probablemente notará al inicio que le falta pulir un poco su apariencia. Ahí es donde necesitará CSS para que se vea mejor.

Paso 3: Mejore la apariencia del área del widget de encabezado con CSS

Dependiendo de su tema, tendrá que 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 uso del plugin CSS Hero que le permite usar una interfaz de usuario intuitiva para cambiar el CSS de cualquier tema de WordPress.

Si no desea utilizar un plugin, puede agregar un CSS personalizado a su tema visitando la página Apariencia » Personalizar.

Esto le permitirá ver la interfaz del personalizador de temas de WordPress. Deberá hacer clic en la pestaña ‘CSS Adicional’.

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

Por el bien de este tutorial, asumimos que solo utilizará esta área para agregar un único widget para mostrar anuncios publicitarios o un widget de menú personalizado.

Aquí hay un ejemplo de CSS 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;

}

Es posible que deba ajustar el CSS para que coincida con su tema.


 

SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

Leave a Reply