DecodeCMS

Tu WordPress a otro Nivel ...

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

[ ] [ Actualizado: ] [ Autor: ][ Themes - Intermedio] [ ]

¿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

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando…

Interacciones del lector

Comentarios

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

  2. 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 Jhon, de acuerdo, sigo tus cordiales instrucciones, un abrazo y felicitaciones compañero. =)

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

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

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

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

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

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

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

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

  11. 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 ?

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

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

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

*