¿Te gustaría añadir una nueva zona para colocar widgets?, anteriormente vimos cómo añadir una nueva posición de menú, en este artículo complementaremos esto y veremos cómo añadir nuevas posiciones de Widgets o Widget Áreas.
Usaremos el theme Twenty Seventeen y agregaremos la nueva zona de Widgets en la parte superior, debajo del menú principal.
1- Generalidades
Antes de empezar te recomiendo revisar el artículo cómo configurar el theme Twenty Seventeen, verás entre otras cosas que este theme sólo tiene tres posiciones para Widgets, tal como se muestra en la siguiente imagen de la pantalla Apariencia > Widgets.
Para agregar una nueva zona de widgets necesitarás modificar los archivos del theme.
2- Registro de la nueva zona de Widgets
El registro de la nueva zona lo puedes hacer en el archivo functions.php del theme, el código genérico sería algo como lo siguiente:
function dcms_agregar_nueva_zona_widgets() {
register_sidebar( array(
'name' => 'Nueva Zona Widget',
'id' => 'id-nueva-zona',
'description' => 'Descripción de la nueva Zona de Widgets',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'dcms_agregar_nueva_zona_widgets' );
En el código anterior:
- Usamos la función add_action() con el hook de widgets_init para llamar a la función dcms_agregar_nueva_zona_widgets() dentro de la cual se registrará la nueva zona.
- register_sidebar() es la función que registra la nueva zona de widgets, acepta un array con diferentes valores:
- name : Es el nombre que aparecerá en la parte superior de la nueva zona en la pantalla de Widgets, se puede usar funciones de traducción para este texto.
- id: Identificador único de la nueva zona, este id servirá para mostrar la zona y sus Widgets dentro del theme.
- description: Este texto también se puede traducir y aparecerá debajo del nombre en en la pantalla de Widgets.
- before_widget y after_widget: A todos los Widgets de esta zona se les aplicará lo que se coloque en estas dos variables, en nuestro ejemplo se envolverá con una etiqueta HTML section. Vemos que incluye dos parámetros, %1$s y %2$s , estos se completarán de acuerdo al Widget insertado.
- before_title y after_title: A todos los títulos de los Widgets de esta zona se les aplicará lo que se coloque en estas variables, en nuestro ejemplo los títulos estarán envueltos por una etiqueta HTML h2
Sin embargo para nuestro caso, que estamos trabajando con el theme Twenty Seventeen, tenemos ya un registro de zonas en el archivo functions.php aproximadamente a partir de la lína 313 del archivo functions.php, por lo que sólo agregaremos la nueva zona llamada header, tal como se muestra en el siguiente código:
/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function twentyseventeen_widgets_init() {
// Nueva Zona Agregada
register_sidebar( array(
'name' => __( 'Header', 'twentyseventeen' ),
'id' => 'sidebar-4',
'description' => __( 'Add widgets here to appear in your header.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => __( 'Sidebar', 'twentyseventeen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => __( 'Footer 1', 'twentyseventeen' ),
'id' => 'sidebar-2',
'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => __( 'Footer 2', 'twentyseventeen' ),
'id' => 'sidebar-3',
'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
Si agregas el código anterior, verás una nueva zona de Widgets llamada Header en la pantalla de Apariencia > Widgets
3- Mostar la nueva Zona de Widgets en el theme.
Has agregado un Widget en la nueva zona, te diriges al front-end de tu sitio y te das cuenta de que aún no se muestra. Para mostrar la nueva zona será necesario hacer un cambio adicional en el theme, de manera general la función que debes usar para mostrar la nueva zona es:
dynamic_sidebar( 'id-nueva-zona' );
En donde id-nueva-zona es el ID del registro de la zona que realizaste anteriormente.
Para nuestro ejemplo el código para mostrar la nueva zona Header en el theme Twenty Seventeen sería usando el id sidebar-4:
dynamic_sidebar( 'sidebar-4' );
Puesto que queremos colocar la nueva zona en la parte superior, colocaremos este código al final del archivo header.php del theme.
4- Resultado Final
Si añades un Widget de calendario de ejemplo en esta nueva zona, verás que ya se muestra en el front-end de tu sitio, tal como se muestra en la siguiente imagen
¿Aún tienes dudas?, revisa el siguiente video en donde se detalla los puntos anteriores
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
amigo y que puedo hacer si en apariencia no me aparece widgets? como tendría que ponerlo
Hola, siempre deberían aparecer Widgets, por ejemplo los del propio WordPress en : Apariencia > Widgets, sino te aparecen es porque tienes algún problema del core de WordPress.
Hola y gracias por la info. Si yo solo requiero que me quede la nueva zona de widgets únicamente sobre las entradas en vez de sobre las entradas y la barra derecha como en el ejemplo. Que debo hacer?
Hola, quieres que siempre aparezca?, en los siguientes archivos:
404.php, archive.php, front-page.php, index.php, page.php, search.php, single.php
Puedes colocar el código PHP debajo de la etiqueta HTML main
Hola, fascinantes en verdad tus consejos.
En este post se refiere a «header»
¿Sigo las mismas instrucciones para incrustar el área «home page»?
Pienso que esa forma podría incluir testimoniales.
Anoto el sitio específico en el campo inferior.
Por tu cordial ayuda un millón de gracias. Saludos.
Hola
En el ejemplo el header.php se mostrará siempre, puedes usar el header.php y poner tu widget de testimonios, pero se verá siempre, tendrías que usar un plugin para que sólo se muestre en el home.
Otra opción es poner el dynamic_sidebar() en otro archivo como el : home.php o front-page.php, revisa: https://decodecms.com/jerarquia-de-archivos-de-plantilla-en-wordpress/
Hola Jhon, de acuerdo, sigo tus cordiales instrucciones, un abrazo y felicitaciones compañero. =)
hola, no entiendo como descargar el archivo del tema? donde o como se descarga? gracias
Te refieres al functions.php?, debería ser parte de los archivos de tu theme, revisa el video.
Hola! Yo quiero poner un widget en el header pero no abajo del menu, si no arriba. Como seria?
Busca en el archivo header.php de tu theme el registro de menú y agrega el código antes, para buscar el registro del menú te sugiero revisar: https://decodecms.com/anadir-una-nueva-ubicacion-de-menu-a-un-theme-wordpress/ , tendrías que buscar la función que muestra el menú wp_nav_menu()
Intento añadir una zona nueva y en apariencia wordpress parece que la acepta, pero el theme la oculta en todas las páginas. Hay un aviso en el editor en vivo de «Tu página tiene 6 areas de widget más, pero el tema las oculta» o algo así. Ayuda!! Y gracias por adelantado.
Hola, por lo que comentas puede ser que tu theme tenga alguna forma diferente de manejar nuevas áreas de Widgets, te sugiero revisar la documentación de tu theme, por ejemplo los themes que usannGantry 5 las posiciones pueden ser añadidas desde la propia configuración del theme.
Hola, gracias por el video y la información… pero quisiera subir el widget entre el top bar y el main header ( en todas las pginas) donde encuentro esta sección? gracias!!
Hola, depende mucho de la estructura que tiene tu theme, no puedo darte una respuesta porque no se que theme estas usando, sin embargo de manera general podrías buscar en el archivo header.php de tu theme.
buenas, para poner en el archivo header.php dynamic_sidebar( ‘sidebar-4’ ); como seria?
Hola, puedes poner ese código en cualquier parte, bajo la etiqueta <body>, sin embargo tienes que usar etiquetas PHP para colocarlo.
Saludos, mi tema tiene un sidebar al lado derecho, sin embargo, quiero añadir otro al lado izquierdo, es posible?
Hola si es posible aunque posiblemente tendrás que hacer muchas modificaciones, ten en cuenta que depende de que tan fácil te lo ponga la estructura del theme que usas. Otra opción sería que evalúes algún tipo de constructor como Page Builder para crear una estructura lateral dentro de una página.
Hola. Si ya tengo la zona de widget pero la quiero mostrar en el sidebar de una determinada categoría?
Hola, tal vez debas añadir tu zona de Widgets en un archivo que sólo se cargue cuando cargue tu categoría, te sugiero revisar: https://decodecms.com/jerarquia-de-archivos-de-plantilla-en-wordpress/
Buenas noches amigo una consulta estoy trabajando con la plantilla de twenty seventeen pero al estar modificando la plantilla llegue en punto de que la barra lateral del blog se me desaparece al dar clic en la pagina de inicio. Y no puedo agregar entradas porque al dar clic en la pagina de inicio es como que hace un clear (limpiar) esas entradas.
Hola, mejor detalla un poco más tu problema a través del formulario de contacto https://decodecms.com/contacto/
Hola, acabo de probar el tutorial, sobre una construcción desde cero, en la cual ya había creado una zona de widget para el sidebar. le he agregado otra zona como indicas, y veo que en el administrador de widgets de WordPress, me aparece la opción y puedo colocar widgets dentro de la nueva zona, pero al actualizar la pagina no aparecen los widgets y veo que no se guardan los cambios en la zona (en el administrador de wordpress) es decir es como si no se hubiera guardado, ya que en la zona aparece nuevamente vacío ¿que puede ser?
Es muy raro que no guarde los widgets, al menos debería guardarlos. Tal vez has usado una zona con un nombre que ya existe. Prueba igual con otro theme y verifica si te sucede lo mismo.
A mi me pasó exactamente igual, al nuevo Widget le meto cualquier cosa y al guardar, no me guarda nada, será por la reciente versión de wordpress ?
Excelente me sirvió full!!!!!
Hola Jhon!
Un artículo muy interesante y muy clara la explicación!
Me ha surgido un problema justo al final.
He seguido los pasos tal cual dices pero al poner el código
dynamic_sidebar( ‘sidebar-4’ );
justo al final del archivo header.php como has explicado, lo único que consigo es ver ese código justo encima del h1 de la página.
No entiendo que ocurre. He revisado bien el código por si no lo había escrito igual, pero esta todo exacto.
Al ponerlo al final de header.php hay que hacer algo especial? Yo me pongo al final de la última línea de código y hago enter, entonces pego…
Una ayudita!!
😀
Un saludo!
Hola, depende de cómo es la estructura del theme, asumo que en tu caso quieres colocar la posición debajo de h1, en este caso tendrías que buscar algún archivo de tu theme en donde se defina la etiqueta h1 y colocar el código debajo.
Me encanta tu blog y tu canal de youtube!, te sigo desde que que tenias no sé 20 suscriptores jeje. Tenía una duda, y si lo que quieres es meter anuncios por ejemplo, después del párrafo 15 de todos los post de tu web?como lo harías? Como te creas un widget html que encaje en esa zona?
Muchaas gracias
Hola Pablo, de manera general podrías revisar el hook «the_content» , y dentro puedes buscar un lugar en donde colocar la zona de widgets.
Creo que lo tendré en cuenta para un futuro tutorial ya que creo que es un tema interesante.
Saludos.
Hola Pablo, he creado un artículo en donde trato el tema de cómo agregar una zona de widgets dentro del contenido de artículos: https://decodecms.com/zona-de-widgets-en-el-contenido-de-articulos-en-wordpress/
Hola, queria consultarte sobre como asignar el tamaño de la nueva zona de widget. Para ser claros, agregue una zona para colocar un slider con logos y ocupa el ancho total del sitio.
Saludos y muchas gracias por TODO.
Hola, una vez tienes la estructura HTML de la zona del Widget generada con el código PHP, el tamaño u otras opciones de diseño lo haces con CSS. Usas el ID o la clase del contenedor para eso y posiblemente la propiedad width.
Hola, segui el tutorial paso a paso y logre hacerlo sin inconveniente en el tema Zerif pro. Pero ahora estoy haciendolo el Zerif-lite y no he logrado q se vea mi widget en la pagina.
en el personalizador de widgets aparece la nueva zona y se deja agragar el widget sin problema pero no lo puedo ver.
Me podrias ayudar por favor
Hola, en qué archivo agregaste la función dynamic_sidebar ?, asegúrate de que el id sea escrito en minúscula y sin espacios.
Buenas, pude hacer casi todo, lo unico que lo que yo queria era agregar una galeria de imagenes al comienzo de la pagina de tienda y que ocupara todo el ancho de la pantalla. Siguiendo esos pasos logre que apareciera en todos los headers y ademas solo en un costado. Como puedo solucionar esto? muchas gracias
Hola, entiendo que tu página de tienda esta asignada a alguna página de WordPress, por lo tanto puedes hacer una comprobación cuando muestras la nueva zona para que sólo se muestre en esa página, puedes usar la función is_page() de WordPress agregando el ID de la página como parámetro.
Impecable explicación Jhon!!!
Gracias Alvaro. Saludos.
Mil gracias porque me has solucionado un problema enorme. Gran aporte!!
Aconsejo ver el vídeo porque está perfectamente explicado y con la explicación en texto no lo conseguía. Gracias.
Gracias María 🙂
Hola! En tu video, en la linea 18 (12:02) a mi me aparece algo diferente:
if ( is_active_sidebar( ‘sidebar-2’ ) ) : ?>
De todas maneras, solamente debo trasladar al Header ?
Yo quiero colocarlo en el home de CiudadMascotera.com.ar, entre (About Us) «Sobre CiudadMascotera» (abajo de la foto) y (Services) «¿Qué ofrecemos?»
He pegado este codigo abajo de todo en el header.php Pero no ha salido nada aun.
Me puedes ayudar, por fa!!!
Hola, para mostrar el widget tienes que hacerlo con dynamic_sidebar(), sin embargo sería mejor que detalles un poco más, si aún tienes problemas mejor escríbeme a través del formulario de contacto. Saludos.
Perfecto! Ahí te escribo! Un millón de gracias!!!
Buen día! yo lo monte y quedo perfecto pero yo necesito que queden 4 imágenes no solo una, cómo puedo hacer que queden horizontalmente y no vertical?. saludos
Hola, supongo que agregaste cuatro widgets en la posición, efectivamente por defecto se colocarán uno debao de otro, sino quieres este comportamiento tendrías que cambiarlo por CSS, por ejemplo con flex, revisa: https://css-tricks.com/snippets/css/a-guide-to-flexbox/