CSS généré par défaut par WordPress : une aide-mémoire pour les débutants

Vous cherchez une feuille de calcul CSS générée par défaut par WordPress ?

WordPress ajoute automatiquement des classes CSS à différents éléments dans la plupart des thèmes. Ces classes CSS par défaut peuvent être utilisées pour styliser ces éléments dans votre thème WordPress.

Dans cet article, nous vous montrerons l'antisèche CSS générée par défaut par WordPress. Nous verrons également comment trouver facilement des classes CSS et comment ajouter des classes CSS personnalisées lorsque vous en avez besoin.

Pourquoi se renseigner sur les feuilles de style CSS générées par défaut par WordPress ?

WordPress génère et ajoute automatiquement des classes CSS par défaut à différents éléments de votre site web WordPress.

Les développeurs de thèmes WordPress peuvent ensuite utiliser ces classes CSS pour styliser les zones communes de tous les sites WordPress, notamment la zone de contenu, les barres latérales, les widgets, les menus de navigation, etc.

Connaître ces classes CSS est très utile si vous apprenez à développer un thème WordPress ou si vous essayez simplement de créer un thème enfant pour votre propre site web.

Il vous permet également de styliser rapidement certains éléments de votre thème WordPress en ajoutant des feuilles de style CSS personnalisées sans créer votre propre thème.

Note Si vous préférez ne pas apprendre à coder, vous pouvez utiliser un constructeur par glisser-déposer comme SeedProd. Nous en parlerons plus en détail dans la suite de l'article.

Ceci étant dit, jetons un coup d'œil aux classes CSS générées par défaut par WordPress.

Styles par défaut de la classe de corps

La balise body en HTML contient toute la structure de présentation d'une page web, ce qui le rend très important dans la conception d'un thème WordPress.

WordPress ajoute plusieurs classes CSS à la zone "body" que les concepteurs de thèmes peuvent utiliser pour styliser le conteneur "body".

 // Ajouté lorsqu'un site web utilise une langue de droite à gauche, par exemple l'arabe ou l'hébreu .rtl {} // Ajouté lorsque la page d'accueil est affichée .home {} // Ajouté lorsque la page de blog est affichée .blog {} // Ajouté lorsqu'une page d'archive est affichée .archive {} // Ajouté lorsqu'une archive basée sur la date est affichée .date {} // Ajouté sur les pages de recherche .search {} // Ajouté lorsque la pagination est activée .paged {} // Ajoutélorsqu'une page de pièces jointes est affichée .attachment {} // Ajouté lorsqu'une page d'erreur 404 est affichée .error404 {} // Ajouté lorsqu'un seul message est diffusé inclut l'ID du message .single postid-(id) {} // Ajouté lorsqu'une seule pièce jointe est affichée. Inclut l'ID de la pièce jointe .attachmentid-(id) {} // Ajouté lorsqu'une seule pièce jointe est affichée. Inclut le type de mime de la pièce jointe .attachment-(mime-type) {} // Ajouté lorsqu'une pièce jointe est affichée.une page auteur est affichée .author {} // Ajouté lorsqu'une page auteur est affichée. Inclut le nom de l'auteur. .author-(user_nicename) {} // Ajouté lorsqu'une page catégorie est affichée .category {} //Ajouté lorsqu'une page catégorie est affichée. Inclut le slug de la catégorie. .category-(slug) {} // Ajouté lorsqu'une page balise est affichée. .tag {} // Ajouté lorsqu'une page balise est affichée. Inclut le slug de la balise. .tag-(slug) {} //Ajouté lorsqu'une page parent est affichée. .page-parent {} // Ajouté lorsqu'une page enfant est affichée. Inclut l'ID de la page parent. .page-child parent-pageid-(id) {} // Ajouté lorsqu'une page est affichée en utilisant un modèle de page. Inclut le nom du fichier du modèle de page. .page-template page-template-(template file name) {} // Ajouté lorsque les résultats d'une recherche sont affichés. .search-results {} // Ajouté lorsqu'une recherche ne donne aucun résultat..search-no-results {} // Ajouté lorsqu'un utilisateur connecté est détecté. .logged-in {} // Ajouté lorsqu'une page paginée est affichée. Inclut le numéro de page. .paged-(page number) {} // Ajouté lorsqu'un élément unique paginé est affiché. Inclut le numéro de page. .single-paged-(page number) {} // Ajouté lorsqu'un type de page paginée est affiché. Inclut le numéro de page. .page-paged-(page number) {} // Ajouté lorsqu'une page paginée est affichée.inclut le numéro de page. .category-paged-(page number) {} // Ajouté lors de l'affichage d'une page de tag paginée. inclut le numéro de page. .tag-paged-(page number) {} //Ajouté lors de l'affichage d'une page d'archive paginée basée sur la date. inclut le numéro de page. .date-paged-(page number) {} // Ajouté lors de l'affichage d'une page d'auteur paginée. inclut le numéro de page. .author-paged-(page number) {} // Ajoutélorsqu'une page de recherche paginée est affichée. Inclut le numéro de page. .search-paged-(numéro de page) {} 

Comme vous pouvez le constater, ces classes comprennent une grande variété de conditions que vous pouvez cibler dans vos styles CSS.

Par exemple, si vous souhaitez que la page de la catégorie "Actualités" ait une couleur d'arrière-plan différente, vous pouvez ajouter la feuille de style CSS personnalisée suivante.

 .category-news { background-color:#f7f7f7 ; } 

Si vous avez besoin d'un moyen facile d'ajouter des CSS et des extraits de code dans WordPress, essayez le plugin gratuit WPCode pour assurer la pérennité de vos extraits de code.

Classes de style par défaut pour les articles

Tout comme pour l'élément body, WordPress ajoute des classes dynamiques aux éléments post.

Cet élément est généralement le dans le modèle de votre thème. Cependant, il peut s'agir de n'importe quelle autre balise en fonction de votre thème. Les classes CSS de l'article sont affichées dans votre thème en ajoutant la balise post_class() étiquette de modèle.

Voici une liste des classes CSS les plus courantes générées par la fonction post_class() :

 // Ajoute une classe avec ID pour les articles uniques .post-(ID) {} // Classe générique de post ajoutée pour les articles de blog uniques. .post {} // Classe générique de page ajoutée lorsqu'une page unique est affichée. .page {} // Classe générique de pièce jointe ajoutée aux pages de pièces jointes. .attachment {} // Ajoute une classe de type de post, par exemple type-post .type(post-type){} // Ajoute une classe pour le format de post si le thème prend en charge les formats de post. Par exemple, format-standard .format-(post-format){} // Ajouté lorsqu'un article a une image vedette .has-post-thumbnail{} // Ajouté lorsqu'un article collant est affiché .sticky {} // Classe générique pour afficher une entrée .hentry {} // Classes avec des catégories assignées à un article. par exemple category-news category-movies .category-(slug) {} // Classes avec des tags assignés à un article. par exemple tag-photofriday tag-tgif .tag-(slug) {} 

Les classes d'articles vous permettent de styliser les articles de blog et les pages en fonction de différentes conditions. Par exemple, vous pouvez styliser différemment les articles de blog classés dans une catégorie spécifique à l'aide de la feuille de style CSS personnalisée suivante :

 .category-news { background-color:#EFEFEF ; } 

Si vous ne voyez pas l'éditeur CSS dans votre tableau de bord WordPress, suivez notre tutoriel sur la façon de réparer l'absence du personnalisateur de thème WordPress.

Classes de menu de navigation par défaut

WordPress ajoute également des classes CSS à vos menus de navigation. Voici les classes ajoutées par défaut aux menus de navigation.

 // Classe pour la page actuelle .current_page_item{} // Classe pour la catégorie actuelle .current-cat{} // Classe pour tout autre élément de menu actuel .current-menu-item{} // Classe pour une taxonomie .menu-item-type-(taxonomy){} // Classe pour distinguer les types de messages. .menu-item-type-(post_type){} // Classe pour tout élément personnalisé que vous avez ajouté .menu-item-type-custom{} // Classe pour le lien vers la page d'accueil .menu-item-home{} 

Votre thème WordPress ajoutera également une classe CSS à chaque emplacement du menu de navigation.

Supposons que votre thème attribue la classe primary-menu à un menu situé dans la zone d'en-tête, vous pouvez alors le cibler dans votre CSS à l'aide des classes CSS suivantes.

 // classe de conteneur #header .primary-menu{} // classe de conteneur première liste non ordonnée #header .primary-menu ul {} // liste non ordonnée dans une liste non ordonnée #header .primary-menu ul ul {} // chaque élément de navigation #header .primary-menu li {} // chaque ancrage d'élément de navigation #header .primary-menu li a {} // liste non ordonnée s'il y a des éléments déroulants #header .primary-menu li ul {} // chaque élément déroulantnavigation item #header .primary-menu li li {} // each drap down navigation item anchor #header .primary-menu li li a {} 

Pour plus de détails, consultez notre guide sur le style des menus de navigation dans WordPress.

Classes de widgets par défaut de WordPress

Les widgets sont un moyen facile d'afficher des blocs sans contenu dans votre thème WordPress. Ils sont généralement affichés dans des zones dédiées aux widgets ou dans des barres latérales de votre thème WordPress.

WordPress ajoute les classes suivantes aux anciens widgets.

 .widget {} #searchform {} .widget_search {} .screen-reader-text {} .widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {} .widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {} .widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {} .widget_pages {}.widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {} .widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {} .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar#today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} .widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {}.widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {} .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {} .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {} .widget_recent_entries ul {} .textwidget {} .widget_text {} .textwidget p {} 

Cependant, WordPress ayant adopté des zones de widgets basées sur des blocs, vous pouvez désormais ajouter différents blocs à vos zones de widgets et chacun d'entre eux génère des classes CSS de manière dynamique.

Nous vous montrerons comment trouver ces classes CSS plus loin dans cet article.

Classes du formulaire de commentaire par défaut

Les commentaires sont le centre d'engagement de nombreux sites WordPress. Les styliser vous permet d'offrir aux utilisateurs une expérience plus propre et plus engageante.

WordPress ajoute les classes CSS par défaut suivantes pour aider les développeurs de thèmes à styliser la zone de commentaires.

 /*Comment Output*/ .commentlist .reply {} .commentlist .reply a {} .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcardspan.says {} .commentlist .vcard img.photo {} .commentlist .vcard img.avatar {} .commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist .parent {} .commentlist .comment {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist {} .commentlist li {} .commentlist li p {} .commentlist li ul {} .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-{id} {} .commentlist li ul.children li.bypostauthor {} .commentlist li ul.childrenli.comment-author-admin {} #cancel-comment-reply {} #cancel-comment-reply a {} /*Formulaire de commentaire */ #respond { } #reply-title { } #cancel-comment-reply-link { } #commentform { } #author { } #email { } #url { } #comment #submit .comment-notes { } .required { } .comment-form-author { } .comment-form-email { } .comment-form-url { } .comment-form-comment { } .form-allowed-tags { } .form-submit 

Pour plus de détails, consultez notre guide sur le style des commentaires dans WordPress.

Trouver des cours en bloc sur WordPress

L'éditeur de blocs de WordPress génère dynamiquement des classes CSS pour les blocs.

Pour trouver ces classes CSS, vous devez ajouter ce bloc particulier à un article ou à une page. Ensuite, vous devez cliquer sur le bouton "Aperçu" pour voir le bloc en action.

Dans l'onglet "Aperçu", placez votre souris sur le bloc que vous venez d'ajouter et sélectionnez l'outil "Inspecter" en cliquant avec le bouton droit de la souris.

Dans la console du développeur, vous verrez le code HTML généré par le bloc. À partir de là, vous pouvez voir les classes CSS ajoutées par le bloc.

Dans la capture d'écran ci-dessus, nous regardons les classes CSS du bloc Galerie. Vous pouvez ensuite utiliser ces classes CSS pour styliser le bloc Galerie dans votre thème WordPress.

Ajouter vos propres classes CSS personnalisées dans WordPress

Les classes CSS par défaut de WordPress sont assez complètes, mais leur but est principalement de fournir aux développeurs de thèmes un cadre standardisé pour construire.

Pour votre site web, vous devrez peut-être ajouter des feuilles de style CSS personnalisées pour les zones où vous ne trouverez pas de classe CSS par défaut à cibler.

De même, il peut arriver que vous souhaitiez simplement apporter une petite modification à un article ou à une page spécifique sans l'appliquer à l'ensemble de votre thème.

Heureusement, WordPress propose plusieurs méthodes simples pour ajouter des classes CSS à différents endroits.

Ajouter des classes CSS personnalisées à un bloc dans l'éditeur de blocs

Si vous souhaitez ajouter rapidement une classe CSS personnalisée à un article ou à une page spécifique, le moyen le plus simple est d'utiliser l'éditeur de blocs.

Il suffit de modifier l'article ou la page, puis de sélectionner le bloc dans lequel vous souhaitez ajouter une classe CSS personnalisée. Dans les paramètres du bloc, cliquez sur le panneau avancé et ajoutez le nom de votre classe CSS.

N'oubliez pas de sauvegarder vos modifications en cliquant sur le bouton Mettre à jour.

Vous pouvez maintenant utiliser cette classe pour ajouter un code CSS personnalisé qui n'affectera que ce bloc particulier dans cet article ou cette page.

Dans les menus de navigation de WordPress

Vous pouvez également ajouter des CSS personnalisés à vos éléments de menu de navigation WordPress. Imaginons que vous souhaitiez convertir un élément de menu en bouton, cette méthode s'avère très utile.

Il suffit de se rendre sur le site Apparence " Menus et cliquez sur le bouton Options d'écran dans le coin supérieur droit de l'écran.

A partir de là, vous devez cocher la case située à côté de l'option Classes CSS.

Ensuite, vous devez faire défiler vers le bas et cliquer pour développer l'élément de menu où vous souhaitez ajouter la classe CSS personnalisée.

Vous remarquerez un champ intitulé CSS classes. Allez-y et ajoutez votre classe CSS personnalisée ici.

N'oubliez pas de cliquer sur le bouton Enregistrer le menu pour enregistrer vos modifications.

Vous pouvez maintenant utiliser cette classe CSS personnalisée pour styliser différemment cet élément de menu particulier.

Bonus : Concevoir facilement un thème WordPress sans écrire de code CSS

Apprendre à styliser votre thème WordPress avec des CSS personnalisés est une compétence très utile. Cependant, certains utilisateurs peuvent simplement vouloir une solution pour concevoir leur thème WordPress sans jamais écrire de code CSS.

Pour cela, vous aurez besoin de SeedProd, le meilleur outil de construction de pages WordPress sur le marché, qui vous permet de créer facilement des thèmes personnalisés sans écrire de code.

SeedProd est livré avec des thèmes prêts à l'emploi que vous pouvez utiliser comme point de départ.

Vous pouvez également créer un thème à partir de zéro en créant manuellement des modèles.

Vous pouvez ensuite modifier votre thème personnalisé à l'aide d'une interface de création de site intuitive de type "glisser-déposer".

Il suffit d'ajouter des blocs à votre dessin pour créer vos propres mises en page.

Vous pouvez également modifier facilement n'importe quel élément d'un simple clic. Vous pouvez utiliser vos propres couleurs, arrière-plans, polices de caractères et bien plus encore.

Pour plus de détails, consultez notre tutoriel étape par étape sur la façon de créer facilement un thème WordPress personnalisé sans écrire de code.

Nous espérons que cet article vous a aidé à trouver l'aide-mémoire CSS généré par défaut par WordPress. Vous pouvez également consulter notre guide pour réparer les erreurs WordPress les plus courantes ou voir notre comparaison experte des meilleurs logiciels de chat en direct pour les petites entreprises.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.