Sommaire
- Installation du plugin WordPress “Content Aware Sidebars”.
- Création et configuration d’un widget sensible au contenu
- Onglet Conditions
- Onglet Action
- Onglet Design
- Onglet Calendrier
- Onglet Options
- Faisons faire quelque chose à notre barre latérale inconnue.
- Insertion de la barre latérale de l’inconnue à l’aide du code court.
- Les barres latérales ne sont plus seulement destinées aux côtés.
Vous vous demandez peut-être : “Que sont les widgets “sensibles au contenu” ?” Je sais que je l’ai fait. Mais il s’avère que “content-aware” est juste une autre façon de dire “conditionnel”. Cela signifie que vous pouvez afficher différents widgets en fonction du contenu de la page ou de l’article.
Disons que vous voulez afficher le pied de page par défaut de WordPress sur chaque article écrit par un auteur, mais un pied de page personnalisé sur les articles d’un autre auteur. Un widget adapté au contenu vous permettra de le faire. (Et c’est ce que nous allons faire dans ce tutoriel).
Ou peut-être voulez-vous afficher des informations de type widget dans une zone où un widget standard ne peut pas être placé. Par exemple, au milieu d’une page ou dans un modèle. Eh bien, vous pouvez le faire aussi.
Les widgets conditionnels ou sensibles au contenu sont peut-être la réponse à une question que vous ne soupçonniez pas. Mais je parie que vous pensez déjà à des façons utiles de mettre en œuvre un tel widget, n’est-ce pas ?
Commençons.
Installation du plugin WordPress “Content Aware Sidebars”.
Comme vous l’avez peut-être compris, nous allons utiliser un plugin appelé Content Aware Sidebars pour réaliser ce petit tour de magie WordPress.
Connectez-vous à votre panneau d’administration WordPress.
Dans la colonne de navigation de gauche, passez la souris sur le lien “Plugins” et cliquez sur le lien “Add New”.
Dans la case “Rechercher des plugins…”, entrez “Content Aware Sidebars”.
Une fois que vous avez localisé le plugin, cliquez sur le bouton “Installer maintenant”.
Lorsque le plugin a été installé, cliquez sur le bouton “Activer”.
Création et configuration d’un widget sensible au contenu
Dans la colonne de navigation de gauche, passez la souris sur le lien “Content Aware” et cliquez sur le lien “Add New”.
Passons d’un onglet à l’autre et examinons les widgets conditionnels de WordPress.
Notez que chaque fois que vous apportez une modification qui est enregistrée automatiquement, vous verrez un avis “Conditions mises à jour”.
Onglet Conditions
Commencez par donner un nom à la barre latérale.
Le terme “sidebar” est utilisé dans le plugin, mais vous créez quelque chose qui peut être utilisé non seulement dans une zone de widgets – comme une barre latérale ou un pied de page – mais à peu près n’importe où puisqu’il peut également être appelé avec un shortcode.
La liste déroulante “+ Nouveau groupe de conditions” contient les options “Général”, “Types de messages” et “Taxonomies”. Pour des raisons de simplicité dans ce tutoriel, je vais choisir l’une des options “Ajout rapide”, “Messages par auteur”.
Les auteurs du plugin Content Aware Sidebars ont une page qui vous guide à travers des options plus avancées.
Le bouton “Paramètres” comporte une liste déroulante “Types de page” qui vous permet de sélectionner des pages uniques ou archivées. Vous pouvez également activer ou désactiver les options “Négation des conditions” et “Sélection automatique des nouveaux enfants des éléments sélectionnés”.
Nous n’allons pas modifier les paramètres par défaut.
Dans la section “Où afficher”, la première chose que vous verrez est une liste déroulante “+ Remplir TOUTES ces conditions”.
Elle contient la même liste d’options de conditions que la liste déroulante “Nouveau groupe de conditions” que nous avons vue à l’étape précédente (“Général”, “Types de messages” et “Taxonomies”). La sélection d’une condition dans la liste déroulante ajoute un autre champ d’option dans la section “AND”.
Encore une fois, pour garder les choses simples, nous allons nous contenter des options qui sont déjà présentées, “Posts / Blog” et “Authors”. Nous allons donc laisser cette liste déroulante tranquille.
Je veux afficher une barre latérale uniquement sur les articles écrits par Jane Doe. Lorsque vous commencez à taper dans le champ “Auteurs”, le plugin recherche automatiquement et affiche les correspondances. Je sélectionne Jane Doe, et elle est ajoutée à la condition.
Si nous nous arrêtions ici, notre barre latérale serait affichée sur tous les articles écrits par Jane Doe. Ce qui est en fin de compte ce que nous voulons, mais parlons de la façon dont ces conditions fonctionnent.
SI, ET, OU, et plus
Dans notre champ “Auteurs”, nous avons spécifié Jane Doe. Mais remarquez le “AND” entre le champ “Authors” et le champ “Posts / Blog” situé au-dessus. Cela nous indique que la barre latérale que nous créons affichera les articles qui correspondent aux deux champs, “Auteurs” et “Articles / Blog”.
Par défaut (si nous n’entrons rien dans le champ “Posts / Blog”), la barre latérale s’affichera sur tous les articles et pages écrits par Jane Doe, car elle est le sujet “ET”.
Mais, si nous choisissons un article ou une page que Jane Doe n’a pas écrit, la barre latérale ne sera affichée nulle part.
Pourquoi ? Parce qu’aucun article ne répondrait aux conditions que nous avons définies. Ces conditions n’afficheraient la barre latérale que sur ce billet qui n’a pas été écrit par Jane Doe et ne l’afficheraient que sur les billets écrits par Jane Doe.
Vous voyez, nous avons donné deux conditions qui s’annulent l’une l’autre.
Tout cela pour souligner qu’il est facile de faire des erreurs avec les paramètres conditionnels. Si vous configurez une barre latérale et qu’elle ne s’affiche pas là où vous l’attendez, vérifiez que votre configuration ne contient pas d’erreur qui pourrait l’empêcher de s’afficher.
Donc, pour faire ce que nous voulons faire ici – afficher une barre latérale personnalisée sur tous les messages de Jane Doe – nous laissons le champ “Messages / Blog” vide.
Comme vous le voyez, la section “Où afficher” comporte également un champ “OR”. Cela nous donne la possibilité d’afficher quelque chose si notre première série d’options est vide.
Nous n’allons pas ajouter une condition “OR” dans ce tutoriel, mais vous pouvez voir comment elle pourrait être utile en tant que sauvegarde au cas où vos conditions principales ne peuvent pas être satisfaites.
Par exemple, nous pouvons ne pas savoir que Jane n’a pas écrit un certain article. Ou qu’un article n’a pas une certaine étiquette ou catégorie. Nous pourrions entrer par inadvertance des conditions qui n’entraîneraient aucun affichage.
Si nous entrons une option “OR”, nous ne présenterons pas un résultat vide aux visiteurs.
Onglet Action
Dans la section “Comment afficher”, il y a trois listes déroulantes, “Action”, “Target Sidebar” et “Merge Position”.
Actioncontrôle si la nouvelle barre latérale remplace ou fusionne avec une barre latérale cible (existante). Il y a aussi une option de shortcode si vous voulez utiliser la nouvelle barre latérale en dehors d’une zone de widgets.
La sidebar cibleest une liste de toutes vos sidebars actives. Dans notre démo ici, la seule zone de widgets existante dans le thème est le pied de page.
Position de fusioncontrôle l’endroit où ces nouvelles données de barre latérale apparaissent dans une barre latérale fusionnée, au-dessus ou en dessous des données existantes.
Dans cet onglet, si nous choisissons “Fusionner” comme action, “Footer” comme barre latérale cible et “Top” comme position de fusion, notre barre latérale devrait apparaître en haut du pied de page.
Si, au lieu de “Fusionner”, nous choisissons “Shortcode” comme action, un shortcode est généré et nous pouvons le placer dans n’importe quelle page, article ou modèle.
Je vais vous montrer à quoi ils ressemblent dans une minute après avoir créé un widget pour la barre latérale de l’inconnue.
Onglet Design
L’onglet “Design” comporte une section “Styles” qui vous permet d’ajouter des CSS à divers aspects de la barre latérale. Nous n’allons pas en changer. Si nous n’effectuons aucun changement ici, le style de notre nouvelle barre latérale sera hérité du thème.
Onglet Calendrier
L’onglet “Schedule” vous permet de programmer une heure spécifique pour l’activation automatique de la barre latérale. Cela peut s’avérer pratique si vous souhaitez configurer des widgets sensibles au contenu avant de les utiliser réellement. Par défaut, les nouvelles barres latérales sont activées dès leur création, de sorte qu’elles sont visibles immédiatement.
Onglet Options
C’est ici que vous définissez l’ordre d’affichage. Cela n’entre en jeu que si plusieurs barres latérales apparaissent dans la même zone ou sur la même page.
C’est également ici que vous supprimez un widget en cliquant sur le bouton “Déplacer vers la corbeille”.
Faisons faire quelque chose à notre barre latérale inconnue.
Nous avons configuré une barre latérale pour donner aux articles de l’inconnue un pied de page différent, mais nous n’avons encore rien ajouté à ce pied de page.
Dans la colonne de navigation de gauche, passez la souris sur le lien “Apparence” et cliquez sur le lien “Widgets”.
Vous pouvez voir qu’il y a un nouveau widget en ville – notre widget “Messages de l’inconnue”.
Mais il est vide, alors je vais faire glisser “Nuage de tags” dans le widget “Messages de l’inconnue”. Vous remarquerez qu’il y a également un interrupteur à bascule que vous pouvez utiliser pour désactiver temporairement le widget si vous en avez besoin.
Une fois que j’ai cliqué sur le bouton “Enregistrer”, le nuage de tags devrait apparaître en haut du pied de page, mais uniquement sur les articles écrits par Jane Doe.
Insertion de la barre latérale de l’inconnue à l’aide du code court.
Maintenant, voyons ce qui se passe si nous changeons l'”Action” de “Fusionner” à “Shortcode”.
Dans la colonne de navigation de gauche, passez la souris sur le lien “Content Aware” et cliquez sur le lien “All Sidebars”.
Cliquez sur “Modifier” sous “Messages de l’inconnue”.
Cliquez sur l’onglet “Action” et changez “Action” de “Fusionner” à “Shortcode”.
Maintenant, copiez le shortcode.
Et nous allons le coller dans un article écrit par Jane Doe.
Donc maintenant, si nous allons sur l’article, il y a le nuage de tags, juste là où nous avons inséré le shortcode.
Essayez de faire ça avec un widget WordPress standard ! (Alerte spoiler : vous ne pouvez pas.)
Les barres latérales ne sont plus seulement destinées aux côtés.
Comme vous pouvez le constater, Content Aware Sidebars est plus qu’un simple plugin de widgets WordPress. C’est un outil puissant pour créer des mises en page personnalisées basées sur un nombre presque infini d’options et de conditions.
Nous n’avons fait qu’effleurer la surface et montré quelques principes de base. Mais nous espérons que vous avez déjà commencé à imaginer des utilisations intéressantes des widgets conditionnels et des barres latérales qui ne sont pas vraiment des barres latérales.
Avez-vous déjà expérimenté des méthodes manuelles de présentation conditionnelle dans WordPress ? Maintenant que vous savez que cela peut être réalisé plus facilement, allez-vous essayer le plugin ? Faites-le moi savoir dans les commentaires.