Blocs HTML dynamiques
Bien qu’il soit facile d’intégrer dans le site des blocs HTML tels que « header », « aside », et autres « div » ; il faudra les écrire dans le thème et ils seront immuables.
Il est souhaitable de les gestionnaires du site puissent personnaliser ces blocs en y plaçant des widgets comme ceux que propose WordPress, ceux que l’on peut installer par les extension ou ceux que le thème pourrait proposer.
Pour cela, il faut rendre certains blocs HTML dynamiques, ce sera généralement des « aside », « header » et « footer »mais n’importe quel bloc intégré dans les pages peut convenir. Sans cela, le tableau de bord de WordPress ne comportera pas la partie « Widgets »dans le menu « Apparence ».
WordPress nomme ces blocs dynamiques « sidebar » bien qu’ils puissent être placés n’importe où dans la page.
Mise en œuvre
Informations :
https://codex.wordpress.org/Function_Reference/register_sidebars
https://codex.wordpress.org/Function_Reference/dynamic_sidebar
Il nous faudra enregistrer la ou les sidebars dynamiques afin que le menu « Widgets » soit visible dans « Apparence » du tableau de bord. Ensuite, on placera ces sidebars dans les pages du site. Enfin on pourra définir les styles par ces sidebar.
Enregistrement
L’enregistrement se fait en créant une fonction spécifique dans le fichier « functions.php ».
(Afin de ne pas trop alourdir ce fichier, il est utile d’écrire le code dans un fichier séparé que l’on inclus à « functions.php ».)
Voici un exemple de fonction d’enregistrement de trois sidebars dont un « footer ».
<?php add_action( 'widgets_init', function() { register_sidebar( array( 'name' => __( 'Widgets sidebar-1'), 'id' => 'sidebar-1', 'description' => __( 'Dans <aside> en premier.'), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); register_sidebar( array( 'name' => __( 'Widgets sidebar-2'), 'id' => 'sidebar-2', 'description' => __( 'Dans <aside> en second.'), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); register_sidebar( array( 'name' => __( 'Widgets footer'), 'id' => 'footer-1', 'description' => __( 'en bas de page.'), 'before_widget' => '<footer id="%1$s" class="widget %2$s">', 'after_widget' => '</footer>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } );
Attention :
Dans cet exemple, « add_action »utilise une fonction anonyme. Cette possibilité n’existe que depuis PHP 5.3Ici « add_action » applique au moment « widgets_init » une fonction anonyme. Celle-ci fait appel pour chacune des trois sidebars à la fonction « register_sidebar() », elle prend en paramètre un tableau décrivant la sidebar.
Voici la structure de ces tableaux
Clef | Valeur |
---|---|
name | Nom de la sidebar qui sera affiché dans la page « Apparence » / « Widgets » |
id | ID (interne à WordPress) de la sidebar |
description | Description affichée dans la page « Apparence » / « Widgets » |
class | Classe CSS de la sidebar |
before_widget | Informations se plaçant avant les widgets de la sidebar |
after_widget | Informations se plaçant après les widgets de la sidebar |
before_title | Informations se plaçant avant le titre des widgets de la sidebar |
after_title | Informations se plaçant après le titre des widgets de la sidebar |
Les « %1$s » et « %2$s » seront remplacés par les informations trouvées dans chacun des widgets.
Mise en place des sidebars dans le site
Exemple avec deux sidebars latérales
On appelle ce fichier « sidebar-dyn1.php ». Ce nommage sera pratique pour l’intégrer dans les pages.
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="sidebar-un" class="sidebar-container" role="complementary"> <div class="widget-area"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div> </div> <?php endif; if ( is_active_sidebar( 'sidebar-2' ) ) : ?> <div id="sidebar-deux" class="sidebar-container" role="complementary"> <div class="widget-area"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </div> </div> <?php endif;
On utilise la fonction « is_active_sidebar() » pour n’afficher la sidebar que si elle contient des widgets. Ce sera la fonction « dynamic_sidebar() » qui affichera les widgets. La paramètre de ces fonctions, ici « sidebar-1 » pour la première, est l’identifiant défini par le champ « id »défini dans la fonction d’enregistrement.
Exemple dans un pied de page avec un contenu statique
On appelle ce fichier « footer.php ». Ce nom est prévu pour cela.
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?> <footer id="footer-un" class="sidebar-container" role="complementary"> <div class="widget-area"> <?php dynamic_sidebar( 'footer-1' ); ?> </div> </footer> <?php endif; ?> <footer> <a href="#hautDeLaPage" title="Va en haut de page"> Haut de page </a> <div id="signature"> Villefontaine - atelier web </div> </footer>
Il nous reste à intégrer ces fichiers dans les pages du site par :
get_sidebar(‘dyn1’);
donc intègre « sidebar-dyn1.php »
et
get_footer();
qui intègre « footer.php »
Il ne reste plus qu’a définir les styles.
Laissez un commentaire