slDesign

VI – Sidebar

Nous allons nous intéresser maintenant à notre Sidebar. La sidebar nous permet d’afficher différents éléments, le plus souvent, des widgets.

1°) Initialisation de la sidebar

La première étape consiste à initialiser votre sidebar. Cette opération sera réalisée dans le fichier “function.php”. Le code ci-dessous nous permet de réaliser cette opération :

Code du fichier functions.php

//Enregisytrement de la sidebar
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); }</li>

Code du fichier sidebar.php

<div id="sidebar">
<h2>Sidebar .:.:</h2>
<!-- Premier conteneur -->
<div id="sidebar-wrap1">
<ul class="sidelist">
<?php
//Si un widget est chargé on charge la liste,
//Sinon, on affiche les éléments ci-dessous
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
?>
<li><?php get_search_form();?></li>
<?php endif; ?>
</ul>
</div>
</div>

Voici le résultat en image de l’interface d’administration :

2°) Gestion des multi-sidebars

Il est possible de gérer plusieurs Sidebars ; pour cela, il est nécessaire de les initialiser dans le fichier “functions.php”.

Code fichier functions.php

//Enregistrement de plusieurs sidebars
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
        'name' => 'Default 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' => 'Footer',
        'id' => 'sidebar-3',
		'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>'
    ));
}

Le résultat et le suivant :

Interface d’administration :

Frontend du site :