Quel que soit le niveau d’excellence de votre thème, le talent de vos développeurs ou la perfection de la conception de votre site Web, il est probable qu’à un moment donné, vous voudrez changer quelque chose. Pas grand-chose, juste peut-être enlever cette barre latérale ou faire disparaître cette zone de texte. Mais sur une seule page, pas partout. Pour ce faire, vous devrez comprendre deux propriétés CSS spécifiques, visibility et display, qui peuvent vous aider à masquer certains éléments sur des pages particulières par des moyens légèrement différents.
Pourquoi vouloir masquer des éléments ?
L’un des éléments les plus omniprésents que les propriétaires de sites Web veulent cacher est l’en-tête du site. Ou peut-être plus précisément, le menu de navigation de l’en-tête. Ou encore les métadonnées d’un article de blog ou la section des commentaires. La question est de savoir pourquoi quelqu’un voudrait faire cela Pourquoi ne pas supprimer entièrement les données de la conception du site ?
En général, c’est parce que cet élément unique est gênant, mais sa suppression ne vaut pas la peine de réécrire le thème ou la page pour le supprimer. Votre page À propos contient peut-être une liste d’articles de blog, mais vous ne voulez pas que les métadonnées des articles y figurent. Vous n’avez aucune raison de réécrire un fichier de modèle pour ce cas. Vous pouvez donc les supprimer par CSS.
Ou, autre exemple, vous voulez simplement supprimer la section des commentaires d’un article ou d’une page sans passer par un éditeur. Le CSS vous permettra de la masquer ou de la supprimer entièrement sans avoir d’impact sur les autres parties du site. L’une des raisons les plus courantes pour masquer un élément avec CSS sur une page ou un article spécifique est d’ajuster la taille de la police ou du titre. Lorsque le thème et la mise en page du blog s’appliquent toujours, un changement de police saisonnier pour une page spécifique, ainsi que des métadonnées et une barre latérale cachées, peuvent être réalisés en quelques lignes de code, et non pas un ajustement ou une refonte complète du modèle.
Quelle que soit votre raison, vous disposez d’un certain nombre d’options pour masquer des éléments.
Comment trouver l’élément à masquer
Si vous savez quel élément vous voulez masquer mais que vous ne savez pas comment l’appeler, vous pouvez toujours cliquer dessus avec le bouton droit de la souris et sélectionner Inspecter. Cela ouvrira le volet Dev Tools de votre navigateur et vous permettra de trouver l’ID CSS ou la classe qu’il utilise.
L’élément sera alors mis en évidence lorsque vous le survolerez et cliquerez sur la ou les lignes appropriées dans l’outil d’inspection situé à droite.
Après cela, il suffit d’utiliser ces sélecteurs pour ajuster le CSS. Notez que la syntaxe des sélecteurs attachés à l’élément au survol (1) est celle qui sera utilisée dans votre fichier/champ CSS. Les sélecteurs en ligne (2) sont ceux qui sont rendus par le navigateur.
Utilisation du CSS d’affichage
La méthode la plus simple pour masquer un élément est de le supprimer entièrement. C’est ce que fait la propriété display:none . Elle supprime complètement l’élément auquel vous l’attachez. Cette partie de la page ne sera tout simplement plus rendue, et l’espace qu’elle occupe sur la page sera supprimé et la mise en page réajustée.
C’est peut-être la façon la plus courante de supprimer des éléments sur une page. Vous pouvez l’utiliser pour supprimer un élément sur l’ensemble du site ou cibler des pages ou des types de messages individuels.
Utilisation du CSS visibility
Le CSS visibility:hidden est très similaire à display:none. En théorie, elles peuvent être utilisées pour atteindre le même objectif. La grande différence, toutefois, est qu’avec cette dernière, vous ne supprimez pas l’élément. Avec display:none, vous le rendez simplement invisible. La plus grande différence du point de vue de la conception est qu’avec la visibilité, l’élément caché lui-même continuera à occuper de l’espace dans la conception.
Si vous voulez supprimer l’en-tête d’une page, mais que vous souhaitez conserver l’espacement par rapport au haut du DOM, vous utiliserez cette option.
Lorsque la page sera rendue, l’espace sera toujours présent, mais pas l’élément.
Quand utiliser la visibilité et quand utiliser l’affichage ?
La principale raison d’utiliser une partie de la CSS de l’élément masqué plutôt que l’autre est assez simple. Lorsque vous utilisez display:none, l’ensemble de l’héritage des éléments enfants est masqué. Tout ce qui a son style ou qui est imbriqué dans l’élément disparaît tout simplement. Avec visibility:hidden, puisque l’espace de l’élément reste, tous les enfants de l’élément sélectionné restent visibles.
Si, par exemple, vous vouliez masquer l’arrière-plan d’une ligne et d’une seule colonne, vous utiliseriez visibility:hidden pour maintenir le formatage et le rendu des autres éléments, en ne supprimant que ceux que vous avez spécifiés. Dans ce cas, l’utilisation de display:none supprimerait la totalité de la ligne ou de la colonne, réorganisant ainsi le contenu de la page.
Comment masquer des éléments sur des pages spécifiques dans WordPress ?
Lorsqu’il s’agit de masquer des éléments sur des pages spécifiques de WordPress avec l’une ou l’autre de ces méthodes, vous devrez probablement trouver la classe d’identification de la page sur laquelle vous souhaitez masquer l’élément. Gardez à l’esprit qu’il s’agit simplement d’un numéro d’identification de page et non d’un identifiant CSS. En fait, il s’agit d’un sélecteur de classe CSS : .page-id-1337, par exemple.
Vous pouvez trouver l’ID de la page ou du message dans l’URL de la page d’édition. Le moyen le plus rapide est de passer la souris sur le lien pour voir l’URL de l’aperçu.
Vous pouvez également trouver cet ID en regardant dans la barre d’URL de n’importe quelle page d’édition ou d’aperçu. Le numéro figurant dans ces URL est l’identifiant de la page que vous utiliserez dans le sélecteur CSS pour cibler les éléments de cette page spécifique et nulle part ailleurs sur le site.
.page-id-55341 header#main-header {
display:none ;
}
Le code ci-dessus supprimera l’en-tête uniquement sur la page avec cet ID spécifique. Le code CSS suivant le supprimera de toutes les pages et de tous les articles du site.
header#main-header {
visibility:hidden ;
}
Conclusion sur le CSS » cacher l’élément
Quelle que soit votre raison, le fait de connaître la différence entre les propriétés CSS visibility et display (et de savoir quand les utiliser) peut vous aider à personnaliser et à mettre en valeur différentes pages de vos sites WordPress. Parfois, vous pouvez avoir besoin qu’une image n’apparaisse tout simplement pas sur une page. Ou peut-être qu’un article de blog n’a pas besoin d’afficher ses métadonnées ou sa date. Quel que soit l’élément que vous essayez de supprimer, il existe une variante du CSS « cacher l’élément » que vous pouvez utiliser pour atteindre votre objectif.
Pour quelles raisons avez-vous eu besoin de masquer des éléments sur des pages WordPress spécifiques à l’aide de CSS ?
