Los widgets son una parte tan integral de los temas de WordPress que es difícil imaginar un tema de WordPress sin ellos. Los widgets son scripts ejecutables que puedes simplemente arrastrar y soltar en tus barras laterales o cualquier otra área lista para widgets en tu tema. Muchos de nuestros lectores utilizan widgets para agregar elementos personalizados a su barra lateral. Sin embargo, este artículo es para aquellos usuarios curiosos que desean aprender cómo agregar barras laterales dinámicas listas para widgets o áreas listas para widgets en temas de WordPress.
Registrar barras laterales o áreas listas para widgets en WordPress
Lo primero que debes hacer es registrar tu barra lateral o área lista para widgets para tu tema. Puedes registrar múltiples barras laterales y áreas listas para widgets. Copia y pega este código en el archivo functions.php de tu tema
function wpb_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'wpb' ),
'id' => 'sidebar-1',
'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' =>__( 'Front page sidebar', 'wpb'),
'id' => 'sidebar-2',
'description' => __( 'Appears on the static front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
En este código, hemos registrado dos barras laterales. Les hemos dado nombres y descripciones para identificarlas en la pantalla de Widgets. El parámetro de descripción se puede usar para decirle a los usuarios dónde aparece esta barra lateral en el tema. wpb es el nombre del tema en el que estamos trabajando, se usa aquí para hacer que estas cadenas sean traducibles. Debes reemplazarlo con el nombre de tu tema.
Agregar barras laterales dinámicas listas para widgets en los archivos del tema de WordPress
Hasta ahora solo hemos registrado Barras Laterales Dinámicas. Los usuarios pueden arrastrar y soltar widgets en estas barras laterales desde la pantalla de Apariencia » Widgets. Sin embargo, estas barras laterales no aparecerán en tu sitio hasta que se llamen en una plantilla como sidebar.php o en cualquier otro lugar donde desees mostrarlas. Para agregar estas áreas de widgets, edita el archivo de plantilla donde deseas mostrarlas y pega este código:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div> <?php endif; ?>
En este código de ejemplo, hemos utilizado el ID de la barra lateral para llamar a la barra lateral que queremos mostrar aquí. Cambie el ID de la barra lateral para mostrar otra barra lateral. Por ejemplo, puede registrar tres barras laterales para el área del pie de página y luego llamarlas una por una en la plantilla footer.php de su tema.
Los widgets pueden ser muy potentes. Puede agregar widgets al contenido de sus publicaciones y páginas, hacer que sus widgets de texto sean coloridos, o extender el poder de los widgets predeterminados de WordPress. Las barras laterales listas para widgets, colocadas correctamente, permiten a los usuarios agregar elementos personalizados a sus sitios web utilizando una simple interfaz de arrastrar y soltar.
Esperamos que este artículo le haya ayudado a aprender cómo agregar barras laterales dinámicas listas para widgets en WordPress. Le recomendamos que estudie el código en frameworks de temas como Genesis para aprender cómo los profesionales los utilizan en sus productos. Para preguntas y comentarios, deje un comentario a continuación.
nabil
¡hola, necesito dos columnas en la barra lateral! ¿cómo puedo hacer eso con CSS?
Jason
¿Dónde puedo extender la funcionalidad de mis widgets de WordPress?
Milada
Hola equipo de nuevo,
disculpa la molestia, pero me gustaría especificar que necesitaría un widget encima del widget de barra lateral principal actual de los temas a la derecha y el otro widget en el lado izquierdo del artículo en el medio.
¿Cómo debo proceder?
Gracias,
Milada
Milada
Hola equipo de nuevo,
¿cómo agrego un campo en el widget y dónde y dónde pego un código de campo para tener enlaces de afiliados allí?
Gracias,
Milada
Tanmay Bala
Quiero aprender a usar el plugin DB en WordPress y el framework Redux.
Marc
Este tutorial fue de gran ayuda.
He estado intentando lograr esto durante aproximadamente una semana.
Claro y directo al grano.
¡Gracias!
Laura
Solo me preguntaba, antes de pegar el código, ¿funciona esto en un tema que originalmente no viene con una barra lateral? Estoy usando Book Lite, que solo tiene pies de página.
Soporte de WPBeginner
Sí, lo hace.
Administrador
Laura
Gracias hasta ahora – intenté registrar la barra lateral pero cada vez que presiono "guardar" me sale la pantalla blanca de la muerte – lo cual nunca antes me había pasado. ¿Alguna sugerencia de qué podría estar mal?
Lohith
Thanks Alot
Its really wonderful and simple method to explain….
Bakopu
Muchas gracias, señor. ¿Dónde está, señor? Queremos recibir sus bendiciones tocando sus pies.
akhilesh
gracias señor, estas publicaciones me han sido muy útiles
Marcos Nakamine
Funcionó perfectamente
Gracias
gWorldz
Tengo problemas para que se muestre el widget o.O
El widget se está registrando y mostrando correctamente en el backend sin problemas, sin embargo, solo mostrará el contenido de mi widget si incluyo contenido en el widget anterior.
Estoy usando un tema hijo de 2011 y registrando un área de pie de página adicional.
Fragmento de functions.php:
https://gist.github.com/gWorldz/76273b5901e1b5c4759b#file-functions-php
sidebar-footer.php
https://gist.github.com/gWorldz/b6177ccc9734718dd636#file-sidebar-footer-php
style.css
https://gist.github.com/gWorldz/0f24a9350da164ee2f29#file-style-css
¿Tienes alguna idea de lo que estoy haciendo mal o qué está causando este problema?
Tiger
¿Alguna vez recibiste ayuda con esto? Estoy teniendo el mismo problema.
MJ
Solo quería decir gracias por esto. Busqué en Google para saber cómo registrar una barra lateral en WordPress, y encontré algunos otros sitios antes que este, y el tuyo tenía las mejores, más claras y comprensibles instrucciones. Bien hecho.
arvind
tu publicación me es útil,
¡¡¡¡¡¡gracias!!!!!!
Dharmendra Prajapati
Finalmente tengo mi widget dinámico listo en la barra lateral después de 23 días... Busqué en todos los sitios... y finalmente me redirigí a tu sitio.
Gracias
Kevin
En el segundo fragmento, donde estás insertando el código del widget en la plantilla, donde tienes
div id=”secondary”
¿Debería cambiar ese id con cada área de widget?
Por ejemplo:
Primero, Segundo, Tercero, Cuarto, etc.
Soporte de WPBeginner
Kevin, sí deberías, y debería llamarse como el área de widget o la barra lateral que representa.
Administrador
SS
Funciona para registrar las barras laterales, pero cuando voy a la pantalla Apariencia » Widgets, veo todos mis widgets pero nada para arrastrarlos.
Soporte de WPBeginner
SS, cuando hayas registrado con éxito una barra lateral dinámica lista para widgets, aparecerá en la pantalla de Widgets. Esto significa que el registro de las barras laterales probablemente no funcionó.
Administrador
Steve Smart
Hola –
Esta es una publicación muy útil. ¡Gracias!
He tenido éxito usando un área de widget dinámica, ahora estoy intentando implementar más de una. Todo parece funcionar como se espera, excepto un problema extraño en el panel. Si arrastro un widget de texto a mi segunda área de widget dinámica, puedo agregar contenido como esperarías y guardarlo, y produce resultados en mis páginas como se espera; sin embargo, si vuelvo a visitar la página de widgets del panel, el segundo área de widget no parece contener ningún widget.
Estoy usando un tema hijo de twentytwelve y Wordpress 3.7.1.
¿Alguna idea?
Jackson
Hearty thanks….You have done such a wonderful work…thanks thanks thanks…
JP
gracias, encontré esto útil. directo al grano.
Praveen Prasad
¿Puedes decirme dónde está la Llamada a la Función Iniciada?
Ed Du
También puedes usar Headway con un bloque adicional y se encargará de todo esto. O pagelines para el caso.