Indépendamment de la qualité de votre thème, du talent de vos développeurs ou de la perfection de la conception de votre site Web, il y a de fortes chances que à un moment donné, vous allez vouloir changer quelque chose. Pas beaucoup, peut-être simplement supprimer 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, visibilité et affichage , qui peuvent vous aider à masquer certains éléments sur des pages particulières par des moyens légèrement différents.
Pourquoi voudriez-vous masquer des éléments?
L'un des éléments les plus omniprésents que les propriétaires de sites Web souhaitent masquer est l'en-tête du site. Ou peut-être plus précisément, le menu de navigation de l'en-tête. Peut-être une section de métadonnées ou de commentaires d'un article de blog. La question est: pourquoi quelqu'un voudrait-il 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 un obstacle, mais sa suppression ne vaut pas la peine de réécrire le thème ou la page à couper . Peut-être que votre page À propos contient une liste de blogs messages, mais vous ne voulez pas y publier de métadonnées. Vous n'avez aucune raison de réécrire un fichier modèle pour cette instance. Vous pouvez donc le supprimer par CSS.
Ou, comme autre exemple, vous voulez simplement supprimer la section des commentaires sur un seul article ou une seule page sans utiliser d'éditeur. CSS vous permettra de le masquer ou de le supprimer entièrement sans avoir d'impact sur les autres parties du site. Une raison populaire pour masquer un élément avec CSS sur un s une page ou un article spécifique consiste à ajuster la police ou la taille du titre. Là où 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éta-données et une barre latérale masquées peuvent être effectués en quelques lignes de code, et non par un ajustement ou une refonte complète du modèle.
Quelle que soit votre raison, cependant, vous avez un certain nombre d'options pour masquer les éléments.
Comment trouver l'élément à masquer
Si vous savez quel élément vous voulez masquer mais pas quoi appelez-le, vous pouvez toujours faire un clic droit dessus et sélectionnez Inspecter . Cela ouvrira le volet Outils de développement dans votre navigateur, vous permettant de trouver l'ID CSS ou la classe qu'il utilise.
Ce faisant, l'élément sera mis en surbrillance lorsque vous survolez et cliquez sur la (les) ligne (s) correcte (s) dans l'outil d'inspection à droite.
Après cela, il suffit d'utiliser ces sélecteurs pour ajuster avec CSS. Notez que la syntaxe du sélecteur attachée à l'élément au survol (1) est ce qui va aller dans votre fichier / champ CSS. Les sélecteurs en ligne dans (2) sont ce qui est rendu par le navigateur.
Utilisation du CSS d'affichage
La méthode la plus simple pour masquer un élément est de supprimer entièrement. C'est exactement ce que fait la propriété display: none . Il supprime complètement l'élément auquel vous l'attachez. Ce morceau de la page ne sera tout simplement plus rendu, et l'espace qu'il prend sur la page sera r emoved et la mise en page réajustée.
C'est peut-être le moyen le plus courant de supprimer des éléments d'une page. Vous pouvez l'utiliser comme une suppression à l'échelle du site, ou vous pouvez cibler des pages individuelles ou des types de publication.
Utilisation du CSS de visibilité
Le CSS visibilité: hidden est très similaire à display: none. En théorie, ils peuvent être utilisés pour atteindre le même objectif. La grande différence, cependant, est qu'avec celui-ci, vous ne supprimez pas l'élément. Avec la visibilité , vous la 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 prendra toujours de la place dans la conception.
Si vous souhaitez supprimer l'en-tête d'une page, mais souhaitez conserver l'espacement à partir du haut du DOM , vous utiliserez ceci.
Lors du rendu de la page, l'espace sera toujours là, mais pas l'élément.
Quand pour utiliser la visibilité et quand utiliser l'affichage
La principale raison d'utiliser un bit si l'élément CSS cache l'autre est assez simple. Lorsque vous utilisez display: none , tout l'héritage de l'élément enfant nts est masqué. Tout ce qui obtient son style ou est imbriqué dans l'élément disparaîtra simplement. Avec visibilité: hidden , parce que 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 une seule colonne, vous utiliseriez visibilité: masqué pour conserver la mise en forme et le rendu des autres éléments, en supprimant uniquement ceux que vous avez spécifiés. Utiliser display: none dans ce cas supprimerait la ligne ou la colonne entière, réorganisant 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 de ces méthodes, vous devrez probablement trouver la classe d'ID de page pour la page spécifique 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 ID CSS. En fait, c'est un sélecteur de classe CSS: .page-id-1337 , par exemple.
Vous pouvez trouver la page ou l'ID de l'article dans l'URL de la page d'édition. Le moyen le plus rapide consiste simplement à survoler le lien et à voir l'URL d'aperçu.
Vous pouvez également trouver cet identifiant en regardant dans la barre d'URL de tout Modifier ou Aperçu de la page . Le numéro indiqué dans ces URL est l'ID de page que vous utiliserez dans le sélecteur CSS pour cibler des éléments sur cette page spécifique et nulle part ailleurs sur le site.
. page-id-55341 header # main-header {affichage: aucun; }
Le code ci-dessus supprimera l'en-tête uniquement sur la page avec cet ID spécifique. Où le CSS suivant le supprimerait de chaque page et publierait sur le site.
header # main-header {visibilité: hidden;}
Conclusion avec Hide Element CSS
Indépendamment de votre raison, savoir quand et le la différence entre les propriétés CSS visibilité et affichage (et quand les utiliser) peut vous aider à personnaliser et mettre en évidence différentes pages de vos sites WordPress. Parfois, vous pourriez avoir besoin d'une image pour simplement n'apparaissent pas sur une page. Ou peut-être qu'un article de blog n'a pas besoin d'afficher les métadonnées ou la date. Quel que soit l'élément que vous essayez de supprimer, il existe une variante du CSS d'élément de masquage que vous pouvez utiliser pour atteindre votre objectif .
Pour quelles raisons avez-vous dû masquer des éléments sur des pages WordPress spécifiques avec CSS?
Image en vedette de l'article par maryliflower / shutterstock.com
