Personnaliser la barre latérale dans un thème WordPress

Vu qu'on m'a posé certaines questions là dessus cette semaine, ça va faire le sujet de l'article d'aujourd'hui.

Ajouter une seconde zone de widgets

WordPress - gestion des widgets

Depuis la version 2 (il me semble) de WordPress, si le thème est bien fait, on peut depuis le panneau d'administration ajouter des widgets dans certaines zones bien définies. Dans le thème par défaut, il y a une zone unique pouvant accueillir des widgets, qui se trouve dans la barre latérale. Mais on peut vouloir en ajouter d'autres.

Pour ajouter une nouvelle zone, il faut effectuer deux modifications dans le code du thème :

  1. Premièrement, il faut "enregistrer" une nouvelle zone pour que celle-ci soit disponible dans le menu de sélection des zones. Pour cela il faut en général se rendre dans le fichier functions.php du thème et rechercher où est appelée la fonction register_sidebar (dans le thème par défaut, c'est tout en haut du fichier) et l'appeler une fois de plus pour enregistrer une nouvelle zone.

    Cette fonction peut optionnellement prendre en argument un tableau de paramètres permettant de personnaliser le code HTML qui enrobera la liste de widgets. Dans la plupart des cas on n'en a pas besoin mais au cas où c'est bon de savoir que c'est possible, notamment pour éventuellement spécifier une classe particulière à l'une ou l'autre zone en vu d'appliquer des styles différenciés.

    Une fois cela fait, la nouvelle zone est disponible dans le menu de sélection des zones du panneau d'administration (cf la capture d'écran ci-dessus).

  2. Dans un deuxième temps, il faut inclure cette zone dans le rendu de la page à un endroit ou un autre (sinon, forcément, ça sert pas à grand chose). Pour cela il suffit d'intégrer le code suivant dans l'un des fichiers de template : <?php dynamic_sidebar(n); ?> en prenant garde de bien remplacer le paramètre "n" par un entier représentant le numéro de la zone que vous voulez afficher.

    Par exemple, si vous venez d'ajouter une zone et qu'il y en avait une seule avant, la nouvelle aura fort logiquement le numéro 2 et le code à insérer sera le suivant : <?php dynamic_sidebar(2); ?>

N'afficher certaines choses que sur la page d'accueil

Afin de ne pas trop surcharger les pages, on peut ne vouloir afficher certaines informations et liens que sur la page d'accueil. Par exemple sur ce site, les encarts "Mes autres sites", "News du serveur" et "Divers" ne s'affichent que sur la page d'accueil (et les pages de contenu fixe).

Pour restreindre l'affichage d'une portion de code d'un fichier de template, c'est très simple :

<?php if ( [CONDITION] ) { ?>
  [CODE HTML À RESTREINDRE]
<?php } ?>

WordPress propose quelques fonctions PHP qui testent dans quel type de page on se trouve et qui peuvent servir à composer la condition (qui remplacera la portion "[CONDITION]" du code ci-dessus). Ces fonctions sont définies dans le fichier wp-includes/query.php et comprennent notamment :

  • is_home() disant si l'on se trouve sur la page d'accueil.
  • is_page() disant si l'on se trouve sur une page de contenu fixe.
  • is_search() disant si l'on est dans la page de recherche.
  • is_404() disant si l'on se trouve sur la page d'erreur 404.
  • etc.

Pour composer la condition, il suffit d'appeler une ou plusieurs de ces fonctions séparées par une double barre verticale (||) qui représente un "ou" en PHP.

Par exemple pour ajouter une zone de widgets qui ne sera affichée que sur la page d'accueil et les page de contenu fixe, on utilisera le code suivant :

<?php if ( is_home() || is_page() ) { // Home and pages only. ?>
  <?php dynamic_sidebar(2); // Home and pages sidebar. ?>
<?php } ?>

Et ça marche que pour la barre latérale ?

Bien entendu ces deux "astuces" sont valables aussi bien pour la barre latérale que pour n'importe quelle autre partie de votre site. Mais c'est dans la barre latérale que c'est le plus souvent utilisé.

Soumettre un commentaire

La soumission de commentaire fonctionne via un envoi de mail à une adresse dédiée, pour plus de précisions sur les raisons de ce fonctionnement atypique vous pouvez consulter cet article.

7 commentaires

Bonjour,

je suis débutante et j'ai réussi l'étape 1, mais je ne sais pas où coller le code <?php dynamic_sidebar(n); ?> de l'étape 2. Fichier template ? Un exemple svp ?

Merci beaucoup

Bonjour,

Effectivement, le jargon de développeur n'est pas forcément des plus explicite pour les non-développeurs...

Quand je parle de "template" il s'agit de manière générale d'un fichier qui décrit une sorte de squelette pour une page (en simplifiant un peu, parce que ça peut s'appliquer à d'autre choses que des pages). En gros il s'agit d'un fichier qui va décrire la structure de la page : les différents blocs qu'on y trouve et la façon de les remplir pour générer la page finale qui sera consultée par le visiteur.

Dans le cas de WordPress ces fichiers sont les fichiers du thème : index.php, header.php, etc (en gros, la majorité des fichiers php d'un thème, à l'exception du fichier fonctions.php).

Après il ne reste plus qu'à prendre le bon mais cela dépend de l'endroit où vous voulez placer votre nouvelle barre.

Bonjour

et merci beaucoup pour votre réponse. En fait, je souhaiterai pouvoir mettre une deuxième barre sous la première barre... je sais, c'est étrange, mais j'aimerai que mon blog puisse contenir dans sa barre latérale (celle de base) plusieurs fois le widget "Pages" afin de faire des divisions et sous divisions mais sans avoir à avoir recours aux catégories de posts (car je veux que certains contenus apparaissent bien sous la forme de page, sans être mélangé au reste des posts) et sans multiplier le nombre de pages et sous pages dans un même bloc. Je ne sais pas si c'st très clair....

Hum il me semble que le widget "Pages" (comme la plupart des widgets standards) ne peut être inclus qu'une seule fois en tout, même avec plusieurs zones (c'est un peu con d'ailleurs je trouve mais c'est comme ça...).

Pour faire ça il faudrait probablement passer par un appel de fonction en dur dans le template mais c'est pas forcément à la portée du débutant...

Sinon, maintenant que j'y pense, ça pourrait être une fonction intéressante dans mon plugin "post-lister" que de lister aussi des pages (pour l'instant il ne fait que des articles et des commentaires mais ajouter une gestion de liste de pages également serait un prolongement logique). Faudrait que je regarde...

Vous ce qui vous intéresse ce serait quoi précisément ? Pourvoir intégrer une liste de page en précisant les ids des pages ? L'id d'une page racine ? Un mot clé ? Autre chose ?

Bonjour,

Actuellement, on peut créer une page mère et créer des sous-pages, ce qui permet de hiérarchiser le contenu, mais qui, dans mon cas, a le désavantage de créer une page mère sans contenu à part le titre, uniquement pour donner un "chapeau" à un groupe de pages.

Pour que ce soit plus clair, il faut peut-être que je vous explique que ce que je voudrai mettre en place est un hybride blog/site dans sa présentation (rien de très original), qui aurait donc la fonction blog classique dans une colonne centrale, et un menu "site" dans la barre latérale fonctionnant avec des pages, dont le contenu serait sur des "vraies" pages et non pas répertorié dans les différentes catégories de posts.

Par ailleurs, pour compliquer la chose, j'aurai besoin de créer, en dehors des pages et sous-pages, d'autres pages qui ne seront pas visibles dans la barre latérale...mais vers lesquelles j'aurai la possibilité de faire des liens...

Oui, ca fait beaucoup de choses pour une débutante :p

en fait, j'ai trouver plus concis et simple pour expliquer :

- je voudrais pouvoir créer des pages autonomes qui ne sont pas répertoriées dans la liste de pages (car titre trop long et contenu trop lourd)

- et créer des "catégories" de pages

Ce que je peux proposer ce serait du coup, comme je l'évoquais plus haut, que je rajoute un 3e widget dans mon plugin post-lister pour gérer des listes de pages cette fois-ci.

Je pense que je proposerai les options suivantes :

Filtrage :
- indiquer une liste d'ids de pages à afficher (on ne prendrait alors que ces pages là et leurs descendantes).
- indiquer une liste d'ids de pages à ne pas afficher (du coup on prendrait tout sauf ces pages là et leurs descendantes).
- indiquer des mots-clés pour retrouver des pages selon leur contenu ou leur titre.
- indiquer une profondeur maximale à afficher dans l'arborescence.

Tri :
- par date
- par titre
- par auteur

A priori ça me semble permettre de faire ce que vous voulez... tout en s'inscrivant dans la suite logique de mon plugin.

Si ça vous va, je peux essayer de le faire le weekend prochain.