Plus : Plusieurs sidebars dynamiques

1/6 | Suivant

On peut placer dans un thème plusieurs sidebars, ce qui permet de placer des infos à plusieurs endroits, typiquement de l’info supplémentaire dans le footer, ou d’avoir un présentation graphique différente pour des contenus différents.

3 étapes sont nécessaires pour réaliser ceci :
1) Définir les sidebars dans le dossier "functions.php" pour que wordpress propose ces sidebars dans l’administration du site.
2) Composer les sidebars dans l’dministration
3) Appeller les sidebars aux endroits du thème où elle devront apparaitre.

1) Définir les sidebar dans le fichier functions.php

On ouvre le fichier functions.php ou on le crée au besoin. On déclare indépendamment chaque sidebar comme suit :

<?php
//Enregistrement des sidebars
if ( function_exists('register_sidebar') ) {
        register_sidebar(array(
       'name' => 'Première sidebar (sidebar)',
       'id' => 'sidebar-1',
                'before_widget' => '<li><div id="%1$s" class="widget %2$s">',
                'after_widget' => '</div></li>',
                'before_title' => '<h2 class="title">',
                'after_title' => '</h2>'
   ));
   register_sidebar(array(
       'name' => 'Deuxième sidebar (footer)',
       'id' => 'sidebar-2',
                'before_widget' => '<li id="%1$s" class="widget %2$s"><div class="the-content">',
                'after_widget' => '</div></li>',
                'before_title' => '<h4 class="title">',
                'after_title' => '</h4>'
   ));
}
?>

2) Composer la sidebar

Si l’opération précédente a bien été menée, on a maintenant maintenant deux éléments dans l’administration des sidebar de wordpress.

On glisse dedans les éléments au choix de la partie gauche, et on configure éventuellement ses paramètres.

3) Appeler les sidebars dans le thème

On revient maintenant au code : il faut afficher le code des sidebars à l’endroit où l’on en a besoin dans le theme :

Pour la première sidebar le code sera :

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
                                <!-- premiere sidebar -->
                                <div id="premier" class="widget-area">
                                        <ul>
                                                <?php dynamic_sidebar( 'sidebar-1' ); ?>
                                        </ul>
                                </div>
<?php endif; ?>

La première ligne contrôle que la sidebar existe et qu’elle contient quelque chose. Si oui, on crée le code puis on injecte son contenu avec la fonction "dynamic_sidebar". C’est le "id" donné dans le fichier "functions.php" qui permet à wordpress de savoir quelle sidebar est injectée là.

On remarque que la sidebar vient à l’intérieur d’une liste ul.

La deuxième sidebar a un code similaire :

<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
                                <!-- deuxieme sidebar -->
                                <div id="deuxieme" class="widget-area">
                                        <ul>
                                                <?php dynamic_sidebar( 'sidebar-2' ); ?>
                                        </ul>
                                </div>
<?php endif; ?>

C’est fait.