WordPress : déclarer et afficher une sidebar

Sidebar : définition

Dans WordPress, une sidebar est une zone prédéfinie dans un thème dans laquelle vous pouvez afficher divers contenus, tels que des widgets, des menus, etc.

Les sidebars apparaissent généralement à côté du contenu principal, comme une colonne latérale.

Vous pouvez utiliser les sidebars pour ajouter des éléments supplémentaires à vos pages, telles que des menus de navigation, des formulaires d’inscription, des publicités, des nuages de tags, des flux de réseaux sociaux, des articles récents, etc.

Dans l’interface d’administration de WordPress, vous pouvez gérer les sidebars et les widgets qui y sont affichés à partir de l’onglet Apparence > Widgets.

Les thèmes WordPress fournissent souvent des sidebars prédéfinies, mais vous pouvez également créer vos propres sidebars personnalisées en ajoutant du code à votre thème.

Déclarer une sidebar

Pour créer une sidebar WordPress à l’aide de la fonction register_sidebar(), vous devez ajouter le code approprié à votre fichier functions.php du thème actif.

Voici un exemple de code pour créer une sidebar personnalisée :

<?php

// fonction pour enregistrer une sidebar
function theme_register_sidebar() {
    register_sidebar( array(
        'name'          => 'Ma Sidebar', // nom de la sidebar
        'id'            => 'ma-sidebar', // identifiant unique de la sidebar
        'description'   => 'Ceci est ma sidebar personnalisée.', // description de la sidebar
        'before_widget' => '<div class="widget">', // balise HTML avant chaque widget
        'after_widget'  => '</div>', // balise HTML après chaque widget
        'before_title'  => '<h3 class="widget-title">', // balise HTML avant le titre du widget
        'after_title'   => '</h3>', // balise HTML après le titre du widget
    ) );
}

// action pour enregistrer la sidebar lors de l'initialisation de WordPress
add_action( 'widgets_init', 'theme_register_sidebar' );

Dans l’exemple ci-dessus, vous devez personnaliser les valeurs de l’argument register_sidebar() selon vos besoins.

Voici une explication de certains des arguments clés :

• name : le nom de la sidebar que vous souhaitez afficher dans l’interface d’administration.
• id : un identifiant unique pour la sidebar.
• description : une description optionnelle de la sidebar.
• before_widget : le code HTML qui sera affiché avant chaque widget dans la sidebar.
• after_widget : le code HTML qui sera affiché après chaque widget dans la sidebar.
• before_title : le code HTML qui sera affiché avant le titre de chaque widget dans la sidebar.
• after_title : le code HTML qui sera affiché après le titre de chaque widget dans la sidebar.

Remarque : il faut à minimum indiquer son nom et son ID.

Une fois que vous avez ajouté ce code à votre fichier functions.php, vous devriez voir la nouvelle sidebar apparaître dans l’interface d’administration sous Apparence > Widgets.

Vous pourrez ensuite faire glisser et déposer des widgets dans cette sidebar personnalisée.

Afficher une sidebar

Pour afficher une sidebar WordPress dans votre thème, vous pouvez utiliser la fonction dynamic_sidebar().

Voici comment l’utiliser :

1. Assurez-vous d’avoir enregistré une sidebar à l’aide de register_sidebar() (comme décrit précédemment).
2. Dans votre fichier de modèle (par exemple, sidebar.php ou footer.php), insérez le code à l’endroit où vous souhaitez afficher la sidebar

<?php

// vérifie si la sidebar est active et contient des widgets
if ( is_active_sidebar( 'ma-sidebar' ) ) {
    // affiche la sidebar
    dynamic_sidebar( 'ma-sidebar' );
}

Dans l’exemple ci-dessus, nous vérifions d’abord si la sidebar (avec l’ID ma-sidebar) est active et contient des widgets à afficher.

Si c’est le cas, la fonction dynamic_sidebar() est appelée pour afficher le contenu de la sidebar.

Assurez-vous de remplacer 'ma-sidebar' par l’ID ou l’identifiant unique de votre sidebar enregistrée à l’aide de register_sidebar().

Ensuite, incluez le fichier de modèle sidebar.php (ou tout autre nom de fichier que vous avez utilisé) dans votre fichier de thème principal (par exemple, archive.php) en utilisant la fonction get_sidebar().

<?php get_header(); ?>

	<h1 class="site_heading">Blog</h1>

	<div class="site_blog">
    	<main class="site_content">
        	<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
            	<article class="post">
                    <!– … –>
                </article>
            <?php endwhile; endif; ?>
        </main>

        <aside class="site_sidebar">
        	<ul>
            	<?php get_sidebar(); ?>
            </ul>
        </aside>
	</div> 
<?php get_footer(); ?>

La fonction get_sidebar() de WordPress est utilisée pour inclure le fichier de modèle spécifié pour afficher la sidebar dans votre thème.

Voici comment elle fonctionne :

1. Recherche du fichier de modèle de la sidebar : lorsque vous appelez get_sidebar(), WordPress recherche le fichier de modèle de la sidebar dans votre thème. Par défaut, il recherche un fichier appelé sidebar.php. Cependant, vous pouvez également spécifier un nom de fichier différent en passant son nom comme argument à la fonction get_sidebar().
2. Inclusion du fichier de modèle : une fois que WordPress a localisé le fichier de modèle de la sidebar, il l’inclut à l’endroit où vous avez appelé get_sidebar() dans votre thème. Cela signifie que le contenu du fichier de modèle sera inséré à cet endroit précis.

Pour personnaliser l’apparence de la sidebar, vous devez modifier le fichier de modèle de la sidebar (sidebar.php par défaut) dans votre thème.