Le Css pour Jouer à cache cache
Dans cet article, et comme cas pratique au tuto Comment modifier un thème wordpress, je vais vous montrer comment masquer des éléments sur certaines pages de votre site WordPress.
Étape 1.
Quel élément voulez-vous cacher?
Pour cet atelier, je souhaite masquer le menu principal, mais uniquement sur une page spécifique.
Utilisez les outils de développement de Chrome ou de Firefox pour rechercher un sélecteur CSS unique. Si possible, trouvez un identifiant, même si une classe peut aussi fonctionner.
Dans cet cas, le sélecteur qui entoure le menu est #mainmenu.
Étape 2.
Obtenir une classe unique de la balise body
Recherchez une classe unique à l’intérieur de la balise body. (un petit rappel html ?)
Dans ce contexte, une classe unique est exclusive à cette URL, ce qui signifie qu’elle n’existe pas sur d’autres pages.
Dans l’exemple ci-dessous, j’ai la classe .postid-1762, qui fait référence à l’identifiant de cette page ou de cet article .
Étape 3.
Construire le sélecteur final
Fusionnez les sélecteurs des étapes 1 et 2 pour créer un sélecteur final.
On commence par la classe du <body> , en suivant ce modèle:
.unique-body-class #element-to-hide{display: none;}
Dans cet exemple , ça devient
.postid-1762 #mainmenu {display: none;}
J’ai défini la propriété display avec la valeur “none” pour rendre le menu invisible.
Étape 4.
Ajoutez votre CSS personnalisé
Ajoutez le code CSS dans l’un des fichiers CSS de votre thème ou l’espace dedié à la saisie de code css dans les options du thème, ou utilisez un plugin.
Étape 5.
Vérifier le résultat final
L’élément ne sera pas affiché dans la page à l’URL qui doit afficher la classe unique qu’on a identifié à l’étape 2.
Cependant, il sera bien visible sur le reste de vos pages…..
ou alors c’est que vous avez choisi un identifiant qui n’est pas unique à cette page …
Visits: 9