Aujourd'hui, je vais vous montrer comment vous pouvez créer une sidebar personnalisée sur WordPress à l'aide du plugin Content Aware Sidebars.
Il permet par exemple d'afficher une sidebar différente en fonction de la catégorie dans laquelle vous vous trouvez, ou encore de personnaliser la sidebar qui s'affiche pour un auteur donné, un article donné, une page donnée, une étiquette donnée...
Il vous permet aussi de créer des sidebars temporaires qui s'affichent uniquement selon un calendrier que vous définissez, et de personnaliser le design de ces colonnes latérales.
Dans cet article
Sur un blog, la sidebar correspond à une colonne qui apparaît sur le côté droit ou gauche du contenu et permet d'afficher des informations complémentaires à votre contenu principal : par exemple, le lien de vos réseaux sociaux, un menu de navigation qui complète le menu principal, une publicité, un module d'inscription à votre newsletter, etc.
Sur WordPress, le fonctionnement est le même mais le vocabulaire un peu différent :
- Votre thème WordPress définit des sidebars, c'est-à-dire des zones qui vont contenir ce type d'information complémentaire. Le thème les place à des emplacements précis, qui peuvent être sur le côté du contenu mais aussi au-dessus ou en-dessous. Il peut y avoir une ou plusieurs sidebars. Si vous voulez modifier les emplacements, il faudra toucher au code du thème en question.
- Ensuite, à l'intérieur de ces emplacements prédéfinis, vous allez pouvoir décider de ce que vous affichez : ce sont les widgets, des modules qui vous permettent d'afficher différents types d'informations (comme les liens vers vos réseaux sociaux, un message, etc). Ces widgets peuvent être personnalisés via le menu Apparence > Widgets de WordPress.
Par défaut, sur WordPress, les widgets que vous définissez dans une sidebar s'affichent tout le temps et sur toutes les pages où la sidebar est présente. Le plugin Content Aware Sidebars va justement vous offrir plus de contextualisation, en vous permettant de choisir quels widgets s'affichent selon l'endroit où vous vous trouvez.
A quoi ça sert ?
- Ça vous permet d'offrir à vos lecteurs une expérience plus personnalisée sur votre site.
- Cela peut aussi augmenter la rentabilité de votre blog si vous le monétisez, en plaçant par exemple vos liens affiliés dans un contexte plus pertinent.
- Vous pouvez afficher des informations dédiées à certains types d'utilisateurs, par exemple ceux qui sont inscrits et connectés.
A titre d'exemple, sur mon blog voyage, la personnalisation des sidebars me permet de proposer des ressources propres à chaque destination. Si l'on se trouve sur la page d'un pays, on a des liens relatifs à ce pays. Si on est sur la page d'une ville, on a des liens relatifs à cette ville. Un bon moyen d'améliorer la pertinence de son contenu !
Commencez par installer l'extension Content Aware Sidebars depuis le menu Extensions > Ajouter de WordPress. Pensez ensuite à l'activer.
L'extension crée dans votre administration WordPress un nouveau menu, "Content Aware". C'est là que vous allez pouvoir créer de nouvelles sidebars et définir leurs paramètres d'affichage.
Je vais à présenter vous montrer comment faire une sidebar personnalisée, en prenant l'exemple de mon blog voyage : j'ai publié des contenus sur la ville de Lisbonne, je souhaite maintenant proposer aux lecteurs une sidebar personnalisée quand on se trouve sur les articles relatifs à cette ville.
Sur quel type de contenu avez-vous besoin de cette sidebar ?
Première question à vous poser : sur quel type de contenu voulez-vous faire apparaître votre sidebar ? Il peut s'agir de...
- Catégories.
- Étiquettes.
- Articles.
- Pages.
- Archives d'auteur.
- Archives de dates.
Vous pouvez aussi afficher votre sidebar en fonction d'un gabarit de page spécifique ou d'un format d'article spécifique. Ce choix va déterminer les conditions d'affichage de la sidebar sur Content Aware Sidebars.
Dans mon cas, les articles sur Lisbonne ont en commun une même étiquette WordPress.
Cliquez sur le menu Content Aware > Ajouter nouvelle pour créer une nouvelle sidebar. Vous pouvez la nommer en haut de page : ce nom est "pour vous", il n'apparaîtra pas publiquement sur le site. Vous accédez alors à plusieurs onglets.
Dans l'onglet "Conditions", nous allons spécifier les moments où la sidebar va s'afficher. Dans mon cas, sur l'ensemble des étiquettes WordPress "Lisbonne" : cliquez sur "New condition group" et spécifiez votre condition, par exemple "Etiquettes > Lisbonne".
Vous pouvez ajouter plusieurs conditions pour un contrôle très fin de ce que vous affichez.
Le bouton "Settings" vous permet de spécifier 3 paramètres supplémentaires si nécessaire :
- Page Types - Par défaut, la sidebar personnalisée s'affichera sur tous les types de pages, vous pouvez la limiter aux pages d'archives ou aux pages isolées (articles, pages).
- Negate condition - Cocher cette option vous permet de poser une condition négative. Par exemple, si je veux que ma sidebar n'apparaisse PAS sur les pages qui remplissent une certaine condition, je coche cette case.
- Auto-select new children of selected items - Si vous utilisez les relations parents-enfants entre pages, cette option vous permet d'appliquer les conditions à la fois aux enfants et aux parents (par défaut, une condition s'applique seulement aux parents). Si vous ne comprenez rien à cette phrase, c'est probablement que vous n'utilisez pas ce système ;)
Choisir comment afficher la sidebar
Le second onglet, "Action", vous permet de définir l'affichage de la sidebar. Vous pouvez d'abord définir une action (ce que va faire votre sidebar personnalisée), par rapport à quelle sidebar s'effectue cette action ("Target sidebar") et l'endroit où se place la sidebar s'il y en a une autre sur la même page (dessus ou dessous).
Il y a différents types d'actions : la sidebar personnalisée peut remplacer la sidebar par défaut (substitution), remplacer la sidebar par défaut même quand il y a des conditions contradictoires ("forcé"), venir la compléter (fusion), être créée sous forme de shortcode pour que vous puissiez la placer à l'endroit de votre choix ("code court"). La version payante du plugin ajoute des actions supplémentaires, mais les actions gratuites couvrent déjà la majorité des besoins.
Dans mon cas, je souhaite que la sidebar "Lisbonne" remplace la sidebar par défaut du blog, je choisis donc l'action "Substitution", que j'applique à ma sidebar par défaut (qui s'appelle sobrement "Sidebar du blog") !
Par défaut, la sidebar personnalisée a la même apparence que toutes les sidebars de votre blog. L'onglet "Design" vous permet, si vous le souhaitez, de définir pour votre sidebar un style spécifique.
- Avec la version gratuite du plugin, vous pourrez seulement définir une classe CSS et vous devrez vous-même écrire en langage CSS dans la feuille de style de votre blog les paramètres de mise en forme qui vous conviennent.
- Avec la version payante du plugin Content Aware Sidebars, on vous mâche un peu plus le travail en vous proposant des outils prêts à l'emploi pour définir des bordures, des espaces, des couleurs, etc.
Si l'apparence par défaut vous convient, vous n'avez rien à toucher dans cet onglet.
Choisir quand afficher la sidebar
L'onglet "Schedule" est utile si vous souhaitez afficher une information de manière temporaire. Par exemple, une sidebar purement événementielle, qui va être pertinente seulement pendant une période limitée.
Avec la version gratuite de Content Aware Sidebars, vous pouvez choisir une période d'affichage en entrant la date et l'heure de début d'affichage ("Activate") ainsi que la date et l'heure de fin d'affichage ("Deactivate").
Avec la version pro de Content Aware Sidebars, vous pouvez définir un calendrier plus précis en fonction des jours de la semaine.
Si votre sidebar doit s'afficher tout le temps, vous n'avez rien à modifier dans cet onglet.
Publier la sidebar
Le bouton en haut à droite vous permet de publier la sidebar, et de définir à quels utilisateurs elle s'affiche si c'est quelque chose que vous souhaitez choisir.
Ici, je vous conseille de régler le statut de la sidebar sur "Dépublié" quand vous la créez : en effet, elle va être active tout de suite. Or, vous n'avez pas encore ajouté de widgets dedans. Si vous l'activez directement, les internautes verront une colonne vide.
Notre prochaine étape, vous l'avez deviné, est de remplir cette sidebar !
A présent, vous avez juste à aller dans le menu Apparence > Widgets de WordPress. Vous allez y retrouver votre sidebar personnalisée Content Aware Sidebars, marquée d'un trait bleu pour la reconnaître par rapport aux sidebars par défaut définies par votre thème.
Notez que vous pouvez aussi créer une sidebar directement à partir de cette page.
Pour remplir la sidebar, il vous suffit d'ajouter les widgets de votre choix comme vous le feriez avec une sidebar par défaut.
Une fois que vous avez terminé, faites passer le curseur rouge au vert pour publier votre sidebar.
L'extension Content Aware Sidebars pour WordPress fonctionne extrêmement bien et présente aussi l'avantage d'être compatible avec d'autres plugins ciblant les sidebars, comme Q2W3 Fixed Widget qui permet de "fixer" un widget en haut de l'écran afin qu'il soit toujours visible.
On arrive donc à un résultat fonctionnel et satisfaisant.
Evidemment, le grand défi des sidebars aujourd'hui, c'est qu'elles perdent une large part de leur visibilité sur mobile en basculant sous la zone du contenu. Certains choisissent de ne pas les afficher du tout pour cette raison.
Ceci mis à part, c'est un bon moyen de tirer profit de cet espace sur desktop !
Merci pour l’article Marlène. Fort instructif.
Merci pour le message !