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
[pastacode lang=”php” manual=”function%20carbon_widgets_init()%20%7B%0A%20%20%20%20register_sidebar(%20array(%0A%20%20%20%20%20%20%20%20’name’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20__(%20’Blog%20Sidebar’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’id’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20’sidebar-1’%2C%0A%20%20%20%20%20%20%20%20’description’%C2%A0%C2%A0%20%3D%3E%20__(%20’Add%20widgets%20for%20your%20blog%20here.’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’before_widget’%20%3D%3E%20’%3Csection%20id%3D%22%251%24s%22%20class%3D%22widget%20%252%24s%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_widget’%C2%A0%20%3D%3E%20’%3C%2Fsection%3E’%2C%0A%20%20%20%20%20%20%20%20’before_title’%C2%A0%20%3D%3E%20’%3Ch2%20class%3D%22widget-title%20h5%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_title’%C2%A0%C2%A0%20%3D%3E%20’%3C%2Fh2%3E’%2C%0A%20%20%20%20)%20)%3B%0A%7D” message=”functions.php” highlight=”” provider=”manual”/]
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.
[pastacode lang=”php” manual=”function%20carbon_widgets_init()%20%7B%0A%20%20%20%20register_sidebar(%20array(%20%0A%20%20%20%20%20%20%20%20…%0A%20%20%20%20)%20)%3B%0A%7D%0Aadd_action(%20’widgets_init’%2C%20’carbon_widgets_init’%20)%3B” message=”functions.php” highlight=”6″ provider=”manual”/]
Maintenant, en allant dans notre administration, on a une zone de widget qui est déclarée, et on peut y ajouter des widgets.
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 :
[pastacode lang=”php” manual=”if%20(%20!%20is_active_sidebar(%20’sidebar-1’%20)%20)%20%7B%0A%20%20%20%20return%3B%0A%7D%0A%3F%3E%0A%0A%3Caside%20id%3D%22secondary%22%20class%3D%22widget-area%22%20role%3D%22complementary%22%20aria-label%3D%22%3C%3Fphp%20esc_attr_e(%20’Main%20widget%20area’%2C%20’carbon’%20)%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%3Fphp%20dynamic_sidebar(%20’sidebar-1’%20)%3B%20%3F%3E%0A%3C%2Faside%3E%3C!–%20%23secondary%20–%3E” message=”sidebar.php” highlight=”” provider=”manual”/]
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.
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.
[pastacode lang=”php” manual=”function%20carbon_lite_widgets_init()%20%7B%0A%20%20%20%20register_sidebar(%20array(%0A%20%20%20%20%20%20%20%20’name’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20esc_html__(%20’Blog%20Sidebar’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’id’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20’sidebar-1’%2C%0A%20%20%20%20%20%20%20%20’description’%C2%A0%C2%A0%20%3D%3E%20esc_html__(%20’Add%20widgets%20for%20your%20blog%20here.’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’before_widget’%20%3D%3E%20’%3Csection%20id%3D%22%251%24s%22%20class%3D%22widget%20%252%24s%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_widget’%C2%A0%20%3D%3E%20’%3C%2Fsection%3E’%2C%0A%20%20%20%20%20%20%20%20’before_title’%C2%A0%20%3D%3E%20’%3Ch2%20class%3D%22widget-title%20h5%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_title’%C2%A0%C2%A0%20%3D%3E%20’%3C%2Fh2%3E’%2C%0A%20%20%20%20)%20)%3B%0A%0A%20%20%20%20register_sidebar(%20array(%0A%20%20%20%20%20%20%20%20’name’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20esc_html__(%20’Menu%20Widgets’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’id’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20’sidebar-2’%2C%0A%20%20%20%20%20%20%20%20’description’%C2%A0%C2%A0%20%3D%3E%20esc_html__(%20’Add%20widgets%20you%20want%20in%20the%20menu%20panel%20here.’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’before_widget’%20%3D%3E%20’%3Csection%20id%3D%22%251%24s%22%20class%3D%22widget%20menu-widget%20%252%24s%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_widget’%C2%A0%20%3D%3E%20’%3C%2Fsection%3E’%2C%0A%20%20%20%20%20%20%20%20’before_title’%C2%A0%20%3D%3E%20’%3Ch2%20class%3D%22widget-title%20h5%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_title’%C2%A0%C2%A0%20%3D%3E%20’%3C%2Fh2%3E’%2C%0A%20%20%20%20)%20)%3B%0A%0A%20%20%20%20register_sidebar(%20array(%0A%20%20%20%20%20%20%20%20’name’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20esc_html__(%20’Footer%20Widgets’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’id’%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3D%3E%20’sidebar-3’%2C%0A%20%20%20%20%20%20%20%20’description’%C2%A0%C2%A0%20%3D%3E%20esc_html__(%20’Add%20widgets%20you%20want%20in%20the%20footer%20here.’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20’before_widget’%20%3D%3E%20’%3Csection%20id%3D%22%251%24s%22%20class%3D%22widget%20footer-widget%20%252%24s%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_widget’%C2%A0%20%3D%3E%20’%3C%2Fsection%3E’%2C%0A%20%20%20%20%20%20%20%20’before_title’%C2%A0%20%3D%3E%20’%3Ch2%20class%3D%22widget-title%20h5%22%3E’%2C%0A%20%20%20%20%20%20%20%20’after_title’%C2%A0%C2%A0%20%3D%3E%20’%3C%2Fh2%3E’%2C%0A%20%20%20%20)%20)%3B%0A%7D” message=”functions.php” highlight=”” provider=”manual”/]
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.
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.
[pastacode lang=”php” manual=”if%20(%20!%20is_active_sidebar(%20’sidebar-2’%20)%20)%20%7B%0A%20%20%20%20return%3B%0A%7D%0A%3F%3E%0A%0A%3Caside%20id%3D%22menu-widget-area%22%20class%3D%22menu-widget-area%22%20role%3D%22complementary%22%20aria-label%3D%22%3C%3Fphp%20esc_attr_e(%20’Menu%20widget%20area’%2C%20’carbon-lite’%20)%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%3Fphp%20dynamic_sidebar(%20’sidebar-2’%20)%3B%20%3F%3E%0A%3C%2Faside%3E” message=”sidebar-menu.php” highlight=”” provider=”manual”/]
Idem pour le footer, dans sidebar-footer.php :
[pastacode lang=”php” manual=”if%20(%20!%20is_active_sidebar(%20’sidebar-3’%20)%20)%20%7B%0A%20%20%20%20return%3B%0A%7D%0A%3F%3E%0A%0A%3Caside%20id%3D%22footer-widget-area%22%20class%3D%22footer-widget-area%22%20role%3D%22complementary%22%20aria-label%3D%22%3C%3Fphp%20esc_attr_e(%20’Footer%20widget%20area’%2C%20’carbon-lite’%20)%3B%20%3F%3E%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22footer-widgets%22%3E%0A%20%20%20%20%20%20%20%20%3C%3Fphp%20dynamic_sidebar(%20’sidebar-3’%20)%3B%20%3F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Faside%3E” message=”sidebar-footer.php” highlight=”” provider=”manual”/]
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 dansfunctions.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. @+ !
PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !