Cómo crear un widget de encabezado personalizado en WordPress

Publicado: 2021-11-16

¿Está buscando formas de crear un widget de encabezado en su sitio? Has venido al lugar correcto. Le mostraremos cómo puede crear fácilmente un widget de encabezado personalizado en WordPress .

Tener un encabezado atractivo es clave para impresionar a tus visitantes. Además, puede ser el lugar perfecto para mostrar ofertas por tiempo limitado u oportunidades especiales. Si su tema no es compatible con esta área de widgets, puede crear uno manualmente. En esta guía, le mostraremos cómo crear un widget de encabezado personalizado en WordPress .

Antes de ver cómo hacerlo, comprendamos mejor los beneficios de los widgets de encabezado personalizados.

¿Por qué crear un widget de encabezado personalizado en WordPress?

El encabezado es lo primero que ven los visitantes cuando llegan a su sitio web. Es una de las cosas a las que los usuarios prestan más atención, por lo que la mayoría de los sitios muestran su contenido más importante, como ofertas especiales y menús, en los encabezados.

encabezado de cuatro capas

Si ese es el lugar al que los usuarios prestan atención, es tentador agregar mucho contenido allí. Sin embargo, debe evitar tener demasiados enlaces en su menú principal (encabezado). Tener demasiado contenido en el menú del encabezado no es una práctica recomendada porque puede confundir a los usuarios y hacer que su sitio se vea mal. Ahí es donde un widget de encabezado puede ser útil. Puede agregar un widget de encabezado personalizado debajo de la barra de navegación principal y agregar widgets adicionales a este espacio sin sobrecargar el menú principal.

La creación de un widget de encabezado personalizado le permite mostrar cualquier cosa, ya sea un anuncio, un widget de boletín informativo, un banner, contenido de texto, ofertas de WooCommerce y widgets personalizados sin ningún problema. De esta manera, puede agregar contenido a su encabezado mientras lo mantiene organizado.

Ahora que comprendemos mejor la importancia de un widget de encabezado personalizado, aprendamos a crear uno con el mínimo esfuerzo.

Cómo crear un widget de encabezado personalizado en WordPress

Anteriormente hemos visto diferentes métodos para personalizar el encabezado de WordPress. En esta sección, sin embargo, aprenderemos a editar el encabezado creando un widget de encabezado personalizado. Para eso, usaremos fragmentos de PHP y CSS.

NOTA : Antes de continuar, como editaremos algunos archivos principales, le recomendamos que genere una copia de seguridad completa de su sitio web e instale un tema secundario. Para crear un tema secundario, puede seguir este tutorial o usar cualquiera de estos complementos dedicados.

Una vez que hayas hecho eso, pasa a la siguiente sección.

1) Creación de un widget personalizado

Primero, debe crear una nueva área de widgets. Para eso, en tu tablero de WordPress , ve a Apariencia > Widgets .

crear un widget de encabezado personalizado en WordPress - todos los widgets

Una vez allí, verá todas las áreas de widgets disponibles en su tema activo. Esto puede cambiar según su tema, pero en la mayoría de los casos, verá varias áreas aquí. Para esta demostración, estamos usando GeneratePress, y viene con muchas áreas de widgets que ya están registradas y diseñadas.

crear un widget de encabezado personalizado en WordPress - todas las áreas de widgets

Debe crear una nueva área de widgets donde agregaremos nuestro widget de encabezado personalizado. Para hacer esto, debe modificar el archivo functions.php de su tema secundario. Para eso, puede usar el archivo directamente o usar un complemento como Code Snippets.

Para esta demostración, usaremos Fragmentos de código, por lo que vamos a Complementos > Agregar nuevo y buscamos el complemento Fragmentos de código. Luego, lo instalamos y lo activamos como se muestra a continuación.

instalar el complemento de fragmentos de código

Después de la activación, verá la configuración del complemento en el lado izquierdo. Vaya a Todos los fragmentos y presione Agregar nuevo para crear un nuevo fragmento.

crear un widget de encabezado personalizado en WordPress: crear un nuevo fragmento

Asigne un nombre al fragmento y luego pegue el siguiente fragmento en la sección Código :

 función quadlayers_widgets_init() {
registrarse_barra lateral (matriz (
'name' => 'Widget de encabezado de cuatro capas',
'id' => 'quadlayers-header-widget',
'before_widget' => '<div class="ql-widget">',
'después_widget' => '</div>',
'before_title' => '<h2 class="ql-title">',
'después_del_título' => '</h2>',
) );
}
add_action('widgets_init', 'quadlayers_widgets_init');

Este fragmento crea un nuevo widget en su sitio de WordPress llamado Quadlayers Header Widget.

crear un widget de encabezado personalizado en WordPress - crear un widget personalizado

A continuación, guarde los cambios y, después de la activación, verá una nueva área de widgets en la sección de widgets de WordPress.

widget de encabezado de cuatro capas

De esta manera, puede registrar un nuevo widget. Después de esto, debe agregar el widget al encabezado de su sitio web. Veamos cómo hacer eso.

2) Agregar el widget al encabezado

Ha creado con éxito un nuevo widget en su sitio web, pero no ha especificado la ubicación. En esta sección, le mostraremos cómo agregar este nuevo widget personalizado al encabezado de WordPress.

Para hacer esto, necesita editar el archivo header.php . Puede encontrar este archivo en el directorio de temas yendo a Apariencia > Editor de temas > Encabezado de tema (header.php) . Antes de editar el archivo, asegúrese de estar utilizando un tema secundario. Si su tema secundario no tiene un archivo header.php , abra la carpeta del tema principal, descargue el archivo header.php desde allí y luego cárguelo en la carpeta del tema secundario.

Después de eso, pegue el siguiente código en el archivo header.php :

 <?php

if (is_active_sidebar('quadlayers-header-widget' ) ) : ?>
<div class="ql-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'quadlayers-header-widget' ); ?>
</div>

<?php endif; ?>

Una vez que haya pegado el código, actualice el archivo.

pegar el widget de encabezado en el archivo

Si no está seguro de dónde agregar el código, puede probar diferentes ubicaciones o ponerse en contacto con el equipo de soporte de su tema y pedirles la mejor ubicación según sus necesidades. Después de agregar el código, pruebe el área del widget agregándole un widget. En este ejemplo, hemos agregado un bloque de párrafo con contenido ficticio.

bloque de texto de muestra

En la interfaz del sitio web, verá el encabezado como se muestra a continuación.

widget de encabezado de muestra

Esto significa que el widget y el código están funcionando. ¡Estupendo!

Así es como puede agregar un widget de encabezado personalizado en WordPress. Puede usar esa área para mostrar un banner, anuncios, una oferta por tiempo limitado o cualquier cosa que desee.

Pero eso no es todo. El widget es funcional pero aún puede mejorarlo. Veamos cómo podemos diseñar el widget con un poco de CSS para que coincida con la apariencia de su sitio.

3) Personalización del widget con CSS

Después de agregar el widget al archivo de encabezado, es hora de hacer que se vea mejor con un poco de CSS. Puede ingresar su código CSS en el archivo style.css del tema o usar el Personalizador de WordPress. Ambos métodos funcionan bien, pero le recomendamos que agregue el código CSS utilizando la sección CSS adicional en el panel de administración. De esta manera, verá instantáneamente los cambios en el asistente de vista previa en vivo. Sin embargo,

Ahora echemos un vistazo a un script de ejemplo para que pueda personalizar el widget de encabezado personalizado que creó en la sección anterior. Copie el siguiente código, vaya a Apariencia > Editor de temas > CSS adicional y péguelo.

 div#quadlayers-header-widget {
ancho: 100%;
color de fondo: #f5f5f5;
borde inferior: 1px sólido #eeeeee;
alineación de texto: centro;
}

.ql-widget {
ancho: 100%;
color de fondo: #f5f5f5;
alineación de texto: centro;
}

h2.ql-título {
margen superior: 0px;
alineación de texto: izquierda;
transformación de texto: mayúsculas;
tamaño de fuente: pequeño;
color de fondo: #feffce;
ancho: 130px;
relleno: 5px;
}

secuencia de comandos css

Una vez que haya actualizado el CSS, se verá así:

widget de encabezado css

Este es solo un código de muestra. Puedes tomarlo como base y personalizarlo para adaptarlo al estilo y requerimientos de tu sitio web.

¡Eso es! Así es como puede crear un widget de encabezado personalizado en WordPress con un poco de código. No fue tan difícil, ¿verdad?

Conclusión

En resumen, el encabezado es una de las secciones más destacadas de cualquier sitio web y donde debe tener contenido importante que desea que vean los visitantes. Es por eso que agregar un widget de encabezado es una excelente opción para captar la atención del usuario y mostrar una oferta por tiempo limitado, las secciones más importantes de su sitio, etc.

En esta publicación, le mostramos cómo crear un widget de encabezado personalizado y personalizarlo con un poco de código. Incluso si no tiene conocimientos de programación, puede seguir el tutorial y agregar el widget a su sitio. Sin embargo, para cambiar su estilo, es posible que necesite algunos conocimientos básicos de CSS. Editar el archivo header.php puede ser complicado según su tema, por lo que si tiene algún problema con él, puede comunicarse con el autor de su tema.

¿Has creado un widget de encabezado? ¿Cómo fue tu experiencia? Háganos saber en la sección de comentarios.

Para obtener más formas de personalizar su encabezado, eche un vistazo a las siguientes guías:

  • 3 Métodos para personalizar el encabezado en WordPress
  • Cómo hacer que el encabezado Divi sea pegajoso