Blocs HTML dynamiques

Mise à jour le 23-10-2017 à 11:07

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.