Les sidebars (barres latérales de widgets)

Les sidebars sont des zones qui s’affichent généralement sur les côtés du site.
Elles accueillent les widgets qui sont des modules d’affichage : liste des derniers articles publiés ou des catégories d’articles, photos, flux rss, météo, formulaire pour s’inscrire sur le site…

Cet article montre comment créer, modifier retirer et afficher les sidebars.

À noter : le codex WordPress parle de « sidebars », en français : « barres latérales ». Ce vocabulaire vient d’une période où les widgets venaient se placer au côté des articles. En pratique, les « barres latérales » peuvent aussi  se placer ailleurs, par exemple en dessous comme dans le thème twentyfourteen.

Haut de page

Enregistrer une sidebar (register_sidebar)

Pour pouvoir être utilisées, les sidebars doivent avoir été enregistrées par le créateur du site, généralement dans le fichier functions.php.

Une sidebar s’enregistre par appel de la fonction register_sidebar() dans le crochet widgets_init.

Voici un exemple d’appel de cette fonction dans le fichier functions.php du thème « twentyfourteen » pour lequel trois sidebars sont créées :

add_action( ‘widgets_init‘, ‘twentyfourteen_widgets_init’ );

function twentyfourteen_widgets_init() {
require get_template_directory() . ‘/inc/widgets.php’;
register_widget( ‘Twenty_Fourteen_Ephemera_Widget’ );

register_sidebar( array(
‘name’          => __( ‘Primary Sidebar’, ‘twentyfourteen’ ),
‘id’            => ‘sidebar-1’,
‘description’   => __( ‘Main sidebar that appears on the left.’, ‘twentyfourteen’ ),
‘before_widget’ => ‘<aside id= »%1$s » class= »widget %2$s »>’,
‘after_widget’  => ‘</aside>’,
‘before_title’  => ‘<h1 class= »widget-title »>’,
‘after_title’   => ‘</h1>’,
) );
register_sidebar( array(
‘name’          => __( ‘Content Sidebar’, ‘twentyfourteen’ ),
‘id’            => ‘sidebar-2’,
‘description’   => __( ‘Additional sidebar that appears on the right.’, ‘twentyfourteen’ ),
‘before_widget’ => ‘<aside id= »%1$s » class= »widget %2$s »>’,
‘after_widget’  => ‘</aside>’,
‘before_title’  => ‘<h1 class= »widget-title »>’,
‘after_title’   => ‘</h1>’,
) );
register_sidebar( array(
‘name’          => __( ‘Footer Widget Area’, ‘twentyfourteen’ ),
‘id’            => ‘sidebar-3’,
‘description’   => __( ‘Appears in the footer section of the site.’, ‘twentyfourteen’ ),
‘before_widget’ => ‘<aside id= »%1$s » class= »widget %2$s »>’,
‘after_widget’  => ‘</aside>’,
‘before_title’  => ‘<h1 class= »widget-title »>’,
‘after_title’   => ‘</h1>’,
) );
}

add_action( 'widgets_init', 'twentyfourteen_widgets_init' );

La gestion des sidebars se fait au travers du crochet widgets_init auquel est ajouté une fonction, ici twentyfourteen_widgets_init qui enregistre les trois sidebars du thème twentyfourteen :

     register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'twentyfourteen' ),
        'id'            => 'sidebar-1',
...
    ) );
    register_sidebar( array(
        'name'          => __( 'Content Sidebar', 'twentyfourteen' ),
        'id'            => 'sidebar-2',
...
    ) );
    register_sidebar( array(
        'name'          => __( 'Footer Widget Area', 'twentyfourteen' ),
        'id'            => 'sidebar-3',
...
    ) );

La fonction register_sidebar a pour paramètre un tableau permettant de définir la sidebar :

Voici les éléments de définition disponibles :

  1. name – le nom de la sidebar (par défaut : ‘Sidebar’ et un numéro),
  2. id – identifiant de la sidebar – uniquement des caractères minuscules, sans espace (par défaut : un nombre autoincrémenté),
  3. description – texte descriptif sur « quoi et où »  à propos de la sidebar; il s’affichera dans la page d’administration permettant de gérer les widgets (par défaut : vide),
  4. class – classe css associée à la sidebar dans l’administration (n’apparaît pas côté visiteur). La valeur ‘sidebar’ préfixera la classe, ainsi ‘gauche’ deviendra « sidebar-gauche’. (par défaut : vide)
  5. before_widget – code HTML ajouté avant chaque widget(par défaut : <li id="%1$s" class="widget %2$s">),
  6. after_widget – code HTML ajouté après chaque widget (par défaut : </li>\n).
  7. before_title – code HTML ajouté avant chaque titre de widget (par défaut : <h2 class="widgettitle">).
  8. after_title – code HTML après chaque titre de widget (par défaut : </h2>\n).

Voici le HTML généré pour une sidebar avec le paramétrage du thème twentyfourteen présenté précédemment :

Certains éléments de définiton sont inclus dans le HTML généré pour afficher la sidebar
Éléments de définition de la sidebar inclus dans le HTML généré

Les éléments de définition se retrouvant dans le HTML utilisé pour afficher la sidebar côté visiteur sont :

  • le nom de la sidebar dans la balise <div> qui encadre la sidebar (ici : « primary-sidebar »),
  • le code encadrant chaque widget (ici : la balise « aside »),
  • le code encadrant le titre du widget (ici : la balise « h1 »).

La page d’administration permettant de gérer les widgets affiche le nom et la description de la sidebar :

Affichage des sidebars avec en en-tête son nom et sa description
Nom et la description d’une sidebar dans l’administration

Les valeurs du nom et de la description étaient les suivantes :

'name'          => __( 'Primary Sidebar', 'twentyfourteen' ),
'description'   => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),

La fonction __() est une fonction de traduction :

  • Primary sidebar a été traduit par « Barre latérale principale »,
  • Main sidebar that appears on the left. a été traduit par « Barre latérale principale qui apparaît à gauche ».
Haut de page

Enregistrer plusieurs sidebars (register_sidebars)

La fonction register_sidebars() permet de créer plusieurs sidebars en un appel de la fonction. Elle a deux paramètres :

  • le nombre de sidebars qu’on veut créer,
  • la description des sidebars.

L’appel de fonction ci-dessous permet de créer deux sidebars dont les noms sont Ma_barre 1 et Ma_barre 2.

register_sidebars(2, array('name'=>'Ma_barre %d'));

La fonction ci-dessous permet de créer trois sidebars dont les titres des widgets auront le niveau « h2 ».

register_sidebars(3, array('before_title' => '<h2>', 'after_title'=>'</h2>'));
Haut de page

Modifier une sidebar (dynamic_sidebar_params)

Le crochet dynamic_sidebar_params permet de redéfinir une sidebar avant son affichage, donc avant l’affichage des widgets qu’elle contient.

Ce crochet passe aux fonctions qui lui ont été ajoutées, un paramètre qui est un tableau de deux tableaux.
Voici les valeurs de ce paramètre dans l’exemple de la Barre latérale principale définie dans le thème « twentyfourteen » :

array (size=2)
0 =>array (size=10)
name‘ => string ‘Barre latérale principale‘ (length=26)
‘id’ => string ‘sidebar-1’ (length=9)
‘description’ => string ‘Barre latérale principale qui apparaît à gauche.’ (length=51)
‘class’ => string  » (length=0)
‘before_widget’ => string ‘<aside id= »meta-2″ class= »widget widget_meta »>’ (length=46)
‘after_widget’ => string ‘</aside>’ (length=8)
‘before_title’ => string ‘<h1 class= »widget-title »>’ (length=25)
‘after_title’ => string ‘</h1>’ (length=5)
‘widget_id’ => string ‘meta-2’ (length=6)
‘widget_name’ => string ‘Méta’ (length=5)
1 =>array (size=1)
‘number’ => int 2

  • Le premier tableau (0=> array)contient la description de la sidebar,
  • Le deuxième tableau (1=> array) contient les références quand un widget est utilisé plusieurs fois.

Modifier le niveau du titre des widgets (référencement, SEO)

Les moteurs de recherche lisent le code HTML des pages des sites. Ils se trouvent face à des mots dont ils doivent repérer ceux qui pourraient être utilisés comme critère de recherche.

Parmi les moyens permettant de repérer les mots plus importants que d’autres, on trouve les titres :

  • les mots utilisés dans les titres sont mis en valeur par rapport aux mots se trouvant simplement dans le texte,
  • le niveau des titres permet de hiérarchiser leur importance, <h1> plus important que <h2>, plus important que <h3>…

Par exemple dans cet article, le mot « sidebar » apparaît dans les titres de niveau 2 puisque c’est le thème développé dans l’article. À noter : le niveau 1 est généralement réservé pour le titre du site et de l’article.

En natif, le thème twentyfourteen (et d’autres) place en niveau 1 les titres des widgets. Cela revient à dire que les mots « catégorie » ou « étiquette » sont parmi les plus importants de la page. Autant dire, que vous envoyez les moteurs de recherche sur une fausse piste.

Voici un code permettant d’affecter un niveau bien plus bas (le niveau 6) aux titres des widgets :

/*
 *	Modifier l'en-tête des widgets : <h6> au lieu de <h1>
 *
 *	utilise le filtre dynamic_sidebar_params
*/

add_filter( 'dynamic_sidebar_params', 'wpdf_modifier_sidebar');

function wpdf_modifier_sidebar (array $wpdf_param_sidebar) {

	if (! is_admin()) {	//	test si pas dans l'administration
		$wpdf_param_sidebar [0]['before_title'] = '<h6 class="widget-title">';
		$wpdf_param_sidebar [0]['after_title'] = '</h6>';
	}	//	fin test si pas dans l'administration
	return $wpdf_param_sidebar;
	
}	// fin fonction wpdf_modifier_sidebar
Forcer à h6 les titres des widgets
add_filter( 'dynamic_sidebar_params', 'wpdf_modifier_sidebar');

La fonction wpdf_modifier_sidebar est ajoutée au crochet de type filtre dynamic_sidebar_params.

function wpdf_modifier_sidebar (array $wpdf_param_sidebar) {

La fonction wpdf_modifier_sidebar récupère la description de la sidebar dans le paramètre $wpdf_param_sidebar. En effet, avant d’afficher une sidebar, WordPress regarde les fonctions qui ont été ajoutées au crochet dynamic_sidebar_params et les exécute en passant en paramètre la description de la sidebar en cours de traitement.

 if (! is_admin()) {    //    test si pas dans l'administration

La référence de code précise que le crochet dynamic_sidebar_params est  aussi bien utilisé côté visiteur que dans l’administration. Pour ne modifier que dans le cas où on ne se trouve pas dans l’administration, on utilise la fonction WordPress is_admin() avec la condition php de négation : !.

$wpdf_param_sidebar [0]['before_title'] = '<h6 class="widget-title">';
$wpdf_param_sidebar [0]['after_title'] = '</h6>';

Dans le tableau de définition de la sidebar récupéré en paramètre de la fonction ajoutée au crochet, on modifie ce qui est affiché avant et après le titre de chaque widget.

return $wpdf_param_sidebar;

Retourner le tableau de description de la sidebar, modifié si on est côté visiteur.

Ne pas oublier de définir le css affecté à « h6.widget-title », par exemple :

.primary-sidebar h6.widget-title {
color: yellow;
text-align: center;
margin: 5px;
}

Haut de page

Retirer une sidebar (unregister_sidebar)

Retirer une sidebar enregistrée se réalise en appelant la fonction unregister_sidebar() dans le crochet widgets_init :

add_action( ‘widgets_init’, ‘wpdf_retire_zoneswidgets‘, 11 );

function wpdf_retire_zoneswidgets(){
unregister_sidebar( ‘sidebar-1’ );
}

add_action( 'widgets_init', 'wpdf_retire_zoneswidgets', 11 );

La gestion des zones de widgets se fait au travers du crochet widgets_init auquel on ajoute la fonction wpdf_retire_zoneswidgets().

À noter : on associe la priorité « 11 » à la fonction de suppression de zone de widgets. Il s’agit de s’assurer que la fonction sera exécutée après la fonction d’enregistrement des sidebars.
En effet, par défaut la priorité d’une fonction ajoutée à un crochet vaut 10. Les priorités inférieurs à 10 s’exécutent avant et les priorités supérieurs à 10 s’exécutent après.

function wpdf_retire_zoneswidgets(){
 unregister_sidebar( 'sidebar-1' );
 }

La fonction wpdf_retire_zoneswidgets() appelle la fonction WordPress unregister_sidebar() avec pour paramètre l’identifiant (« id ») de la sidebar que l’on veut retirer du thème.

À partir de ce moment, la sidebar n’est plus proposée dans l’administration :

La sidebar principale (apparaissant à gauche) n'est plus affichée dans l'administration
La sidebar principale (apparaissant à gauche) n’est plus proposée dans l’administration
Haut de page

Afficher une sidebar (dynamic_sidebar)

La fonction dynamic_sidebar() permet d’afficher la sidebar dont le nom ou l’id est passé en paramètre.

Voici l’appel de l’affichage de la barre latérale gauche dans le thème twentyfourteen (comme vu précédemment, sidebar-1 est l’identifiant de cette sidebar) :

<?php dynamic_sidebar( ‘sidebar-1‘ ); ?>

Cette fonction est à inclure dans les fichiers du thème qui permettent l’affichage des pages (index.php, single.php…).

Tester si les sidebars contiennent des widgets (is_active_sidebar)

WordPress propose deux fonctions :

  • is_active_sidebar( $index ) retourne Vrai (True) si la sidebar dont le nom ou l’id est passé en paramètre contient au moins un widget actif,
  • is_dynamic_sidebar() retourne Vrai (True) si au moins une des sidebars enregistrées contient au moins un widget actif,

Par exemple, le thème twentyfourteen vérifie que la sidebar principale contient au moins un widget actif avant de l’afficher :

<?php if ( is_active_sidebar( ‘sidebar-1‘ ) ) : ?>
<div id= »primary-sidebar » class= »primary-sidebar widget-area » role= »complementary »>
<?php dynamic_sidebar( ‘sidebar-1’ ); ?>
</div><!– #primary-sidebar –>

Afficher un modèle de sidebar (get_sidebar)

L’affichage des sidebars peut être défini dans des fichiers php spécifiques. La fonction get_sidebar() permet  de lancer :

  • le fichier « sidebar.php« ,
  • un fichier « sidebar-{un_nom}.php« .

Le fichier « single.php » du thème twentyfourteen contient un appel aux deux types de modèles de sidebars :

get_sidebar( ‘content’ );
get_sidebar();

Le premier appel de la fonction lance l’exécution du fichier « sidebar-content.php » le second appel lance l’exécution du fichier « sidebar.php ». En regardant le répertoire racine du thème twentyfourteen, on constate que plusieurs modèles de sidebars sont disponibles :

Le thème utilise trois fichiers de modèles de sidebars : sidebar.php, sidebar-content.php et sidebar-footer.php
Fichiers modèles de sidebars
Haut de page

Une réflexion sur « Les sidebars (barres latérales de widgets) »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.