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

[ 26 enero 2017 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

mejoras

¿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'            => 'idNuevaZona',
		'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( 'idNuevaZona' );

En donde idNuevaZona 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

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando…