¿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
Ver comentarios (53)
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/