• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Añadir una nueva zona de Widgets a un theme WordPress

Añadir una nueva zona de Widgets a un theme WordPress

Agregar nueva zona Widgets WordPress

[ 26 enero 2017 ] [ Actualizado: 9 junio 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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.

Zonas Widgets por defecto

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

Nueva Zona 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

Nueva zona resultado final

 
¿Aún tienes dudas?, revisa el siguiente video en donde se detalla los puntos anteriores

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Zona de widgets en el contenido de artículos en WordPressZona de widgets en el contenido de artículos en WordPress
  • Estilos de editor en GutenbergEstilos de editor en Gutenberg
  • Ancho Ampliado y Ancho Completo en GutenbergAncho Ampliado y Ancho Completo en Gutenberg
  • Cambiar el logo en cabecera fija en un tema WordPressCambiar el logo en cabecera fija en un tema WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. oscar

    22 mayo, 2017

    amigo y que puedo hacer si en apariencia no me aparece widgets? como tendría que ponerlo

    • Jhon Marreros Guzmán

      22 mayo, 2017

      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.

      • hans

        3 agosto, 2017

        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?

        • Jhon Marreros Guzmán

          4 agosto, 2017

          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

  2. Fernando Vázquez

    2 octubre, 2017

    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.

    • Jhon Marreros Guzmán

      2 octubre, 2017

      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/

      • Fernando Vázquez

        3 octubre, 2017

        Hola Jhon, de acuerdo, sigo tus cordiales instrucciones, un abrazo y felicitaciones compañero. =)

  3. karol

    11 octubre, 2017

    hola, no entiendo como descargar el archivo del tema? donde o como se descarga? gracias

    • Jhon Marreros Guzmán

      11 octubre, 2017

      Te refieres al functions.php?, debería ser parte de los archivos de tu theme, revisa el video.

  4. f5estudio

    12 diciembre, 2017

    Hola! Yo quiero poner un widget en el header pero no abajo del menu, si no arriba. Como seria?

    • Jhon Marreros Guzmán

      12 diciembre, 2017

      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()

  5. Carlos Aragón Pelayo

    8 marzo, 2018

    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.

    • Jhon Marreros Guzmán

      8 marzo, 2018

      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.

  6. maria jose

    23 julio, 2018

    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!!

    • Jhon Marreros Guzmán

      24 julio, 2018

      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.

  7. Jonathan

    9 agosto, 2018

    buenas, para poner en el archivo header.php dynamic_sidebar( ‘sidebar-4’ ); como seria?

    • Jhon Marreros Guzmán

      10 agosto, 2018

      Hola, puedes poner ese código en cualquier parte, bajo la etiqueta <body>, sin embargo tienes que usar etiquetas PHP para colocarlo.

  8. Uverley Ramirez

    23 septiembre, 2018

    Saludos, mi tema tiene un sidebar al lado derecho, sin embargo, quiero añadir otro al lado izquierdo, es posible?

    • Jhon Marreros Guzmán

      23 septiembre, 2018

      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.

  9. Mari Vasquez

    25 septiembre, 2018

    Hola. Si ya tengo la zona de widget pero la quiero mostrar en el sidebar de una determinada categoría?

    • Jhon Marreros Guzmán

      25 septiembre, 2018

      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/

  10. Jefferson Fernando Burbano Godoy

    3 noviembre, 2018

    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.

    • Jhon Marreros Guzmán

      6 noviembre, 2018

      Hola, mejor detalla un poco más tu problema a través del formulario de contacto https://decodecms.com/contacto/

  11. Carlos

    11 febrero, 2019

    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?

    • Jhon Marreros Guzmán

      12 febrero, 2019

      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.

    • Francisco A.

      25 mayo, 2019

      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 ?

  12. Cristian Freire

    17 febrero, 2019

    Excelente me sirvió full!!!!!

  13. Manu

    4 marzo, 2019

    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!

    • Jhon Marreros Guzmán

      5 marzo, 2019

      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.

  14. Pablo

    31 mayo, 2019

    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

    • Jhon Marreros Guzmán

      1 junio, 2019

      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.

    • Jhon Marreros Guzmán

      4 junio, 2019

      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/

  15. LeoIglesias

    17 julio, 2019

    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.

    • Jhon Marreros Guzmán

      19 julio, 2019

      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.

  16. Paola

    23 julio, 2019

    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

    • Jhon Marreros Guzmán

      25 julio, 2019

      Hola, en qué archivo agregaste la función dynamic_sidebar ?, asegúrate de que el id sea escrito en minúscula y sin espacios.

  17. Diego

    12 noviembre, 2019

    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

    • Jhon Marreros Guzmán

      15 noviembre, 2019

      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.

  18. Alvaro

    10 marzo, 2020

    Impecable explicación Jhon!!!

    • Jhon Marreros Guzmán

      10 marzo, 2020

      Gracias Alvaro. Saludos.

  19. María

    3 abril, 2020

    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.

    • Jhon Marreros Guzmán

      3 abril, 2020

      Gracias María 🙂

  20. Ariel

    18 abril, 2020

    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!!!

    • Jhon Marreros Guzmán

      18 abril, 2020

      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.

  21. Ariel

    18 abril, 2020

    Perfecto! Ahí te escribo! Un millón de gracias!!!

  22. Juan

    24 abril, 2020

    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

    • Jhon Marreros Guzmán

      25 abril, 2020

      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/

  23. Jorge

    28 octubre, 2020

    Me ha funcionado perfectamente para añadir un widget área en un loop de un custom post type y que no era capaz de que me funcionara con ningún otro snippet.

    Muchas gracias y enhorabuena por la explicación!!!

    • Jhon Marreros Guzmán

      30 octubre, 2020

      Que bueno que te sirvió. Saludos.

  24. David León

    9 diciembre, 2020

    Hola. El widget lateral en el computador se ve debajo del contenido en el móvil. 1. Hay algún plugin para forzar ver el widget debajo del header en el móvil?. 2. Hay que crear el widget en HTML o CSS para verlo bien en el móvil? o 3. Hay que programar la posición del widget actual?

    • Jhon Marreros Guzmán

      9 diciembre, 2020

      Si tu theme esta bien hecho ya debería considerar esto. Sin embargo puedes corregir ese comportamiento con CSS, o con javascript (en el caso extremo), revisa la funcionalidad Flex en CSS allí puedes establecer un orden y con media queries cambiar el comportamiento.

  25. Paulina

    21 diciembre, 2020

    Hola, cómo estás Jhon.
    Antes que todo agradezco el tiempo que tomas para responder a nuestras consultas.
    Tengo un problema con los widgets, hasta hace unos días la página de inicio o principal, me mostraba todos los widgets que utilizo, tres en el homepage main content sin embargo desde hace unos días, sólo me muestra los temas de entrada y una lista que se ve super feo. Es una fundación sin fines de lucro. http://www.corporacionacj.cl
    He intentado arreglarlo, eliminando y volviendo a crear los widgets, pero en la página no muestra los cambios. Me puedes ayudar por favor.
    Desde ya, muchas gracias.
    saludos
    P.

    • Jhon Marreros Guzmán

      22 diciembre, 2020

      Hola, el inicio según veo el inicio esta mostrándose como blog, posiblemente hayas cambiado la configuración de página de inicio accidentalmente, revisa: https://decodecms.com/pagina-inicio-pagina-entradas-wordpress/ , puedes probar con una página de inicio.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cómo internacionalizar un plugin en WordPress

Redireccionar las páginas de adjuntos en WordPress

Post Meta desde la API de WordPress

Manejo de Sesiones en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados