¿Le gustaría 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 de WordPress.

En este tutorial, le mostraremos cómo agregar fácilmente un widget de WordPress al encabezado de su sitio web.

Note: Este es un tutorial de nivel intermedio. Deberá agregar código al archivos de tu tema de WordPress y dominar un poco de CSS.

Pero antes de cualquier modificación descubra nuestro plugins de WordPress para 5 copia de seguridad de tu blog y Cómo instalar un tema de WordPress et ¿Cuántas plugins debería instalar en WordPress.

Entonces volvamos a por qué estamos aquí. 

¿Por qué y cuándo necesita agregar un widget en el encabezado?

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 de" widgets".

Se puede usar un área de widgets en el encabezado para mostrar anuncios, artículos recientes o lo que desee.

Este dominio particular se utiliza en todos los sitios web populares para mostrar información realmente importante.

Descubrir también Cómo agregar widgets personalizados después de publicar en WordPress

En general, Temas de WordPress agregue barras laterales al lado del contenido o en el área de pie de página. Muy pocos temas de WordPress agregan áreas de widgets sobre el contenido o en el encabezado.

También aconsejamos descubrir nuestro MailChimp tutorial en francés: la guía completa para crear un boletín de noticias

Es por eso que en este tutorial le mostraremos cómo agregar un área de widget al encabezado de su sitio web de WordPress.

Paso 1: crea un área de widgets

En primer lugar, necesitamos crear un área de widgets personalizada. Este paso le permitirá ver un área de widget personalizada en " Apariencia> Widgets En su panel de WordPress.

Deberá agregar este código al archivo functions.php De tu tema.

function bpc_widgets_init () {register_sidebar (array ('name' => 'Área de widget de encabezado personalizado', 'id' => 'widget de encabezado personalizado', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Este código guarda una nueva barra lateral o área de widgets en su tema de WordPress.

Si nunca ha instalado WordPress localmente, averigüe Cómo instalar WordPress localmente en un PC / Windows con XAMPP

Puedes ir a " Apariencia> Widgets Y verá una nueva área de widgets marcada " Cabecera área de widget personalizada ".

Continúe y agregue un widget de texto a esta área recién creada y guárdela.

Prueba tambien nuestra guía para agregar widgets.

Paso 2: muestra tu widget en el encabezado

Si visita su sitio web, no podrá ver el widget de texto que acaba de agregar.

Debido a que aún no le hemos mostrado cómo mostrar las zonas de widgets personalizados WordPress.

Esto es lo que haremos en este paso.

Aquí también hay una lista de Complementos críticos de 5 WordPress para aumentar las ganancias de tu blog

Necesitarás editar el archivo header.php En su tema de WordPress y agregue este código donde desea mostrar los widgets.

No olvide guardar sus cambios.

Luego puede visitar su sitio web y verá el widget de texto en su encabezado.

El resultado no será necesariamente el más atractivo. Es por eso que necesitará CSS para que se muestre correctamente.

Paso 3: Dale estilo a tus encabezados CSS

Dependiendo de su tema de WordPress, deberá agregar código CSS para controlar cómo se muestran el encabezado y el área del widget.

Una de las formas más fáciles de hacer esto es usar CSS Hero. Este último le permite utilizar una interfaz de usuario intuitiva para modificar el CSS de un tema de WordPress.

También te aconsejamos que descubras esto ¿Qué se puede hacer con el complemento Yellow Pencil WordPress?

Si no desea utilizar un complemento, puede agregar CSS personalizado a su tema de WordPress visitando " Apariencia »Personalizar Para personalizar el tema de WordPress.

Lea también nuestro artículo sobre Complementos de 10 WordPress para mejorar el tráfico de un blog

Esto le permitirá mostrar la interfaz del Personalizador de WordPress. Deberá hacer clic en el " CSS adicional ".

La pestaña « CSS adicional " en el " Personalizador Le permite agregar su CSS personalizado mientras ve los cambios en la vista previa a la derecha.

Por razones inherentes a este tutorial, asumimos que usará esta área para agregar un solo widget para mostrar anuncios de banner o un widget de menú personalizado.

Aquí hay un ejemplo de CSS para comenzar:

div # header-widget de área {width: 100%; background-color: #f7f7f7; border-bottom: 1px #eeeeee sólido; text-align: center; } H2.chw-título {margin-top: 0px; text-align: left; text-transform: mayúsculas; font-size: small; background-color: #feffce; anchura: 130px; padding: 5px; }

Así es como nuestro widget personalizado se mostrará en el encabezado del tema Twenty Seventeen.

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Información sobre herramientas de Smart4y

Smart4y Tooltip es una Plugin de WordPress herramienta flexible dedicada a la creación de información sobre herramientas modernas sin ninguna dependencia de la biblioteca Javascript. Es totalmente responsive y ofrece la posibilidad de insertar contenido HTML.

Su editor WYSIWYG le permitirá crear visualmente cada información sobre herramientas sin tener que ingresar ningún código, pero si lo desea, siempre puede hacerlo.

Descubre también nuestro Complementos de 10 WordPress para evaluar artículos de tu blog

Sus otras características son: Soporte de página de constructor, un diseño bastante receptivo, la capacidad de definir parámetros globales para todas las sugerencias o para definir parámetros específicos para cada información sobre herramientas, soporte para efectos visuales predefinidos, el cálculo de la posición de la información sobre herramientas en la ventana redimensionada, documentación detallada, etc….

Descargar | Demo | alojamiento web

2. justificado

Le Plugin de WordPress Justified es un complemento de galería receptivo que alinea sus miniaturas en una cuadrícula justificada usando jQuery, como en Flickr. 

¡Trae características que distinguirán sus galerías de las de sus competidores!

Sus características principales son: diseño receptivo, efectos especiales de paso elevado, realineación automática de la cuadrícula,  un editor de shortcode, apariencia ecompletamente personalizable, el soporte de pespectadores y muchos otros…

Descargar | Demo | alojamiento web  

3. Programar correos electrónicos

ce Plugin de WordPress Como sugiere el nombre, le permite programar la publicación de correo electrónico en su sitio web. Es parte de las extensiones del complemento de WordPress “Seguir mi publicación de blog”.

Ahora podrá programar la publicación de sus correos electrónicos según horas, días o semanas.

Lea también nuestro artículo sobre Complementos de 10 WordPress para usar mapas en su sitio web

Ofrece la posibilidad de enviar un correo electrónico combinado para todas las notificaciones en lugar de cada correo electrónico para cada notificación y también permite definir diferentes plantillas de correo electrónico para diferentes correos electrónicos, finalmente para hacer más digerible la recepción de sus correos electrónicos. .

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

• Cómo crear documentos de Excel y Word en WordPress
• Cómo personalizar el logotipo de WordPress del tablero
• ¿Cómo encontrar los archivos para editar un tema de WordPress
• Cómo personalizar el CSS de tu sitio web de WordPress

Conclusión

Listo ! Eso es todo para este tutorial, espero que te ayude a agregar un área de widget en el encabezado de tu tema de WordPress. No dude en comparte con tus amigos en tus redes sociales favoritas. 

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.

...