Dans l’article précédent, on a mis en place la boucle de WordPress. Le bon contenu s’affiche bien pour chaque article ou page demandé. Dans cet article, on va enregistrer notre zone de widgets principale, qui va aller dans notre barre latérale.

Si vous avez regardé la vidéo précédente, j’annonce qu’on va personnaliser l’affichage de nos articles, mais je me suis un peu emballé. Avant d’aller dans le détail, il faut finir le gros-oeuvre. Et il nous reste un travail de gros-oeuvre important : les zones de widgets.

Pour l’instant, les widgets de notre barre latérale sont codés en dur dans le fichier sidebar.php. On va rendre tout ça dynamique en enregistrant une zone de widgets qui va remplacer ce contenu de test.

Enregistrer une zone de widgets dans l’administration de WordPress

Pour enregistrer une zone de widget dans l’administration WordPress, on utilise la fonction .

La fonction prend un tableau d’arguments. On va lui passer un nom, un identifiant, une description qui apparaîtra dans l’admin, et le balisage que l’on veut voir avant et après chaque widget, ainsi qu’avant et après chaque titre. On va placer notre appel à register_sidebar() dans une fonction maison que l’on va placer dans le fichier functions.php

function carbon_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Blog Sidebar', 'carbon' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets for your blog here.', 'carbon' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title h5">',
        'after_title'   => '</h2>',
    ) );
}
functions.php

Le balisage autour du widget correspond bien à ce qu’on a dans le prototype, de même que celui du titre. Chaque widget sera donc dans une <section class="widget">. Les %1$s et %2$s sont automatiquement remplis par WordPress avec les informations sur le widget enregistré.

Le titre du widget sera un <h2> avec les classes widget et h5(qui sert uniquement à réduire la taille du texte).

On a donc déclaré une fonction qui va déclarer notre zone de widgets, mais il reste à la hooker dans WordPress, c’est-à-dire de l’enregistrer pour que WordPress l’exécute au bon moment. Ce bon moment, c’est widgets_init. Donc, on va ajouter notre hook.

function carbon_widgets_init() {
    register_sidebar( array( 
        ...
    ) );
}
add_action( 'widgets_init', 'carbon_widgets_init' );
functions.php

Maintenant, en allant dans notre administration, on a une zone de widget qui est déclarée, et on peut y ajouter des widgets.

Administration des widgets
Notre zone de widgets apparaît bien dans l’administration.

Mais si on revient sur le devant du site, on a toujours notre contenu codé en dur. Il faut maintenant qu’on dise à notre template sidebar.php d’afficher les widgets enregistrés dans la zone de widget sidebar-1.

Dans sidebar.php, on va donc appeler les widgets de notre zone fraîchement déclarée :

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}
?>

<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Main widget area', 'carbon' ); ?>">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
sidebar.php

On vérifie donc d’abord s’il y a des widgets enregistrés dans cette sidebar grâce à la fonction . S’il n’y a aucun widget à afficher, pas la peine d’aller plus loin.

Sinon, on peut mettre en place notre balise <aside> et afficher tous les widgets enregistrés grâce à dynamic_sidebar() en lui passant l’identifiant de la sidebar dont on veut afficher les widgets.

Et bim, notre zone de widget fonctionne.

Les widgets apparaissent en front
On a bien nos widgets sur le devant du site.

Mettre en place les autres zones de widgets

De la même façon, on va mettre en place les autres zones de widgets du thème, c’est-à-dire la zone de widgets du menu et celle du footer.

On va simplement copier-coller notre fonction register_sidebar() et en modifier les paramètres.

function carbon_lite_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Blog Sidebar', 'carbon' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets for your blog here.', 'carbon' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title h5">',
        'after_title'   => '</h2>',
    ) );

    register_sidebar( array(
        'name'          => esc_html__( 'Menu Widgets', 'carbon' ),
        'id'            => 'sidebar-2',
        'description'   => esc_html__( 'Add widgets you want in the menu panel here.', 'carbon' ),
        'before_widget' => '<section id="%1$s" class="widget menu-widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title h5">',
        'after_title'   => '</h2>',
    ) );

    register_sidebar( array(
        'name'          => esc_html__( 'Footer Widgets', 'carbon' ),
        'id'            => 'sidebar-3',
        'description'   => esc_html__( 'Add widgets you want in the footer here.', 'carbon' ),
       'before_widget' => '<section id="%1$s" class="widget footer-widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title h5">',
        'after_title'   => '</h2>',
    ) );
}
functions.php

On a simplement déclaré deux autres zones de widgets, mais avec des noms, identifiants et classes CSS différents.

Idem, on va insérer quelques widgets dans l’admin.

Plusieurs zone de widgets sont disponibles
Plusieurs zone de widgets sont disponibles

Puis dans sidebar-menu.php, on va copier-coller le code de sidebar.php, en changeant un peu les classes et les paramètres passés dans les fonctions.

if ( ! is_active_sidebar( 'sidebar-2' ) ) {
    return;
}
?>

<aside id="menu-widget-area" class="menu-widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Menu widget area', 'carbon-lite' ); ?>">
    <?php dynamic_sidebar( 'sidebar-2' ); ?>
</aside>
sidebar-menu.php

Idem pour le footer, dans sidebar-footer.php :

if ( ! is_active_sidebar( 'sidebar-3' ) ) {
    return;
}
?>

<aside id="footer-widget-area" class="footer-widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer widget area', 'carbon-lite' ); ?>">
    <div class="footer-widgets">
        <?php dynamic_sidebar( 'sidebar-3' ); ?>
    </div>
</aside>
sidebar-footer.php

Voilà, nos widgets fonctionnent correctement !

Note : Dans la vidéo, je copie-colle bêtement, sans changer l’attribut id. Du coup, sur la page, il y a plusieurs éléments HTML avec le même identifiant. Pas bien !

Si on prends un peu de recul, on se rends compte que déclarer une zone de widget fonctionne un peu comme les menus :

  • on déclare une zone de widgets administrable avec register_sidebar() en créant une fonction dans functions.php
  • On hooke cette fonction sur widgets_init
  • on utilise dynamic_sidebar() dans notre template pour afficher les widgets enregistrés dans l’admin.

Easy !

Dans le prochain article, on va parler un peu de deux fonctions hyper importantes que WordPress fournit pour nous permettre de générer des classes CSS très pertinentes en fonction de la page demandée. @+ !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


id, efficitur. vel, ut mi, venenatis, neque. ut Praesent amet, ut
%d blogueurs aiment cette page :