Registrando sidebars para nuestros Widgets

Clase 9 de 13 • Curso de Creación de Temas para WordPress

Jesús Velázquez Jiménez

student•

Añadir sidebar

function plz_add_sidebar(){
    register_sidebar(
        array(
            'name' => 'Pie de página',
            'id' => 'pie-pagina',
            'before_widget' => '',
            'after_widget' => '',
        ));
}
add_action("widgets_init", "plz_add_sidebar");

Invocar

<?php dynamic_sidebar('widget-id') ?>

Rodrigo Alles

student•

Apuntes

Registrando Sidebars para Widgets en WordPress

Los sidebars son áreas en el sitio web donde se pueden agregar widgets, como un formulario de búsqueda o una lista de publicaciones recientes. A continuación, se explican los pasos para registrar sidebars en un tema de WordPress.

register_sidebar

Para registrar un nuevo sidebar en WordPress, se utiliza la función register_sidebar en el archivo functions.php del tema.

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar Principal', 'my-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Este es el sidebar principal', 'my-theme' ),
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

En este ejemplo, se registra un nuevo sidebar con el nombre Sidebar Principal. El ID del sidebar es sidebar-1 y se proporciona una descripción del sidebar.

add_action widget_init

Para asegurarse de que el nuevo sidebar se registre correctamente, se utiliza la función add_action para llamar a la función my_theme_widgets_init en el gancho widgets_init.

add_action( 'widgets_init', 'my_theme_widgets_init' );

dynamic_sidebar

Para mostrar los widgets en el nuevo sidebar, se utiliza la función dynamic_sidebar en el archivo sidebar.php.

<div id="sidebar">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div>

En este ejemplo, se muestra el contenido del sidebar con el ID sidebar-1.

Conclusión

Registrar sidebars para widgets en WordPress es una tarea sencilla que se puede realizar utilizando la función register_sidebar y el gancho widgets_init. Al agregar el código correspondiente en el archivo sidebar.php, se puede mostrar el contenido del sidebar en el sitio web. Al utilizar sidebars, se pueden agregar fácilmente widgets y contenido adicional a un sitio web de WordPress.

Registrando Sidebars para Widgets en WordPress

register_sidebar

Para registrar un nuevo sidebar en WordPress, se utiliza la función register_sidebar en el archivo functions.php del tema.

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar Principal', 'my-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Este es el sidebar principal', 'my-theme' ),
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

En este ejemplo, se registra un nuevo sidebar con el nombre Sidebar Principal. El ID del sidebar es sidebar-1 y se proporciona una descripción del sidebar.

add_action widget_init

Para asegurarse de que el nuevo sidebar se registre correctamente, se utiliza la función add_action para llamar a la función my_theme_widgets_init en el gancho widgets_init.

add_action( 'widgets_init', 'my_theme_widgets_init' );

dynamic_sidebar

Para mostrar los widgets en el nuevo sidebar, se utiliza la función dynamic_sidebar en el archivo sidebar.php.

<div id="sidebar">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div>

En este ejemplo, se muestra el contenido del sidebar con el ID sidebar-1.

Conclusión

Aldo Miguel Ortiz Parodi

student•

9. Registrando sidebards para nuestros Widgets

Pues logré agregar las redes sociales, pero me estoy dando cuenta que debo aprender o Bootstrap o algo para poder hacer mis layouts y diseños de webs, de lo contrario voy a saber cómo se hace un tema pero no tengo un diseño que aplicar aún.

Cesar Roman Santillan

student•

Asi quedo con un widget utilizando Jetpack que te permite incluir whatsapp !Yard Sale 23.18.19.png](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202022-02-28%20a%20la%28s%29%2023.18.19-5582a29c-72ac-4f70-9de6-9046c608d214.jpg)

Alvaro H. Ruiz V.

student•

hay como una escuela de WP? como para (y yo acá inventando ocurrencias) personalizar con CSS las paginas creadas desde el administrador, usar variaciones de temas por paginas, usar algo de JS en WP, para cambiar permisos específicos de usuarios, crear plugin, etc, etc...

Alvaro H. Ruiz V.

student•

bueno, ya me di cuenta que existe el curso de creación de plugins

Jovani Antonio Almaraz Nuño

student•

Existe la ruta de "Desarrollo con WordPress" aquí mismo en Platzi

Julián Andrés Loaiza Ospina

student•

Widgets: Sidebars

Widget: es todo aquel elemento que se pueda colocar dentro de un blog

Sidebar: Es el lugar en el cual están contenidos los widgets.

Para habilitar el sidebar “widgets” desde el panel de wordpress en functions.php

function plz_add_sidebar(){
    register_sidebar(
        array(
            'name' => 'Pie de página',
            'id' => 'pie-pagina',
            'before_widget' => '',
            'after_widget' => '',
        ));
}

add_action("widgets_init", "plz_add_sidebar");

Se debe crear el widget a partir de bloques de gutenberg y agregar en este caso en footer.php remplazando el pie de página estático:

<?php dynamic_sidebar('pie-pagina') ?>

Carlos Arturo Gómez Jiménez

student•

Como puedo sacar el emogi del corazon?

Cristian Ramanzin

teacher•

Editando directamente el archivo footer.php o en la sección de widgets.

George M

student•

Hola, No es un poco confuso usar la palabra sidebar cuando queremos declarar una zona de widgets? Lo digo porque en principio los sidebars eran para barras laterales, no para hacer footers, cabeceras etc... un saludo

Cristian Ramanzin

teacher•

Hola!

Puede sonar un poco confuso, pero es así como WordPress las llama, lo explico de esa forma para que no se crucen los conceptos cuando leas la documentación. 😊

Andrés Felipe Acevedo Del Rio

student•

El reto es crear un menú, y luego este menú agregarlo dentro de un widget? Si es así, ayuda por favor, yo logré crear el menú y añadirlo en el footer atreves de wp_nav_menu. Estuve buscando como añadir este menú en el widget pero no di como, espero hacerme entender.

Saludos. :)

Cristian Ramanzin

teacher•

¡Eso que hiciste está muy bien! Hay que buscar en los bloques de widget el bloque que te permite agregar un menú. 😁

Diego Andrés González Díaz

student•

Tecnicamente fue hacer lo mismo que acabamos de ver según me funcionó, pero leyendo la documentación me surgió una duda. Según entiendo los registramos en el código y en el admin se agrega la info, entonces ¿En que momento se deben usar los constructores dentro de php?

Cristian Ramanzin

teacher•

¡Hola, Diego! Los constructores los utilizas en caso qué estés desarrollando con una estructura orientada a objetos, eso normalmente es más común en el desarrollo de Plugins.

Josué Eduardo Apén Bal

student•

Puede que mi pregunta sea un poco tonta, pero no lo tengo tan claro. ¿Es correcto usar el style.css para personalizar nuestras paginas? Es por si no voy a usar bootstrap (no se usarlo y no hay curso de bootstrap :( ).

Carlos Eduardo Gomez García

teacher•

Sí hay curso de Bootstrap:

Curso de Bootstrap 4

Pero también puedes modificar tu style.css si sabes usar CSS :D

Josué Eduardo Apén Bal

student•

¿No hay problema que sea Bootstrap 4? Es que creo que ya va por la versión 5. ¿No hay mucha diferencia?

function plz_add_sidebar(){
    register_sidebar(
        array(
            'name' => 'Pie de página',
            'id' => 'pie-pagina',
            'before_widget' => '',
            'after_widget' => '',
        ));
}
add_action("widgets_init", "plz_add_sidebar");

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar Principal', 'my-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Este es el sidebar principal', 'my-theme' ),
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar Principal', 'my-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Este es el sidebar principal', 'my-theme' ),
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

function plz_add_sidebar(){
    register_sidebar(
        array(
            'name' => 'Pie de página',
            'id' => 'pie-pagina',
            'before_widget' => '',
            'after_widget' => '',
        ));
}

add_action("widgets_init", "plz_add_sidebar");

Registrando sidebars para nuestros Widgets

Comenzando nuestro theme

Conversión de Plantillas HTML a Temas de WordPress

Instalación de LocalWP en Windows para WordPress

Creación de un Tema de WordPress desde Cero

Armar estructura del Theme

Armando los archivos de nuestro Theme

Hooks

Agregando de funcionalidades de WordPress a nuestro theme

Asignando theme supports

Registrar y mostrar menúes

Registrando sidebars para nuestros Widgets

Personalizar el Loop de WordPress

Creando un Custom Post Type

Listando nuestros productos

Refactorizando nuestro código

Cierre del curso

Cierre del curso