Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

L’antisèche CSS générée par défaut par WordPress pour les débutants

WordPress ajoute ses propres classes CSS à différents éléments dans la plupart des thèmes. Ces classes par défaut aident à styliser automatiquement les différentes parties de votre site.

Connaître ces classes CSS par défaut peut s’avérer très utile. Elles permettent de personnaliser plus facilement l’apparence de votre site sans partir de zéro.

Par exemple, lorsque nous avons commencé à utiliser le CSS sur nos sites, nous avons trouvé qu’il était beaucoup plus facile de styliser le contenu de notre blog pour le mettre en valeur.

Dans cet article, vous trouverez une liste de ces classes CSS générées par défaut par WordPress. Nous vous afficherons également comment trouver d’autres classes CSS et ajouter les vôtres lorsque vous en avez besoin.

Cheat sheet for default WordPress generated CSS

Pourquoi se renseigner sur le CSS généré 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 WordPress.

Les développeurs/développeuses de thèmes peuvent jouer avec ces classes CSS par défaut pour styliser les zones communes des sites WordPress, telles que les zones de contenu, les colonnes latérales, les widgets, les menus de navigation, etc.

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

Il vous aide également à styliser rapidement certains éléments de votre thème WordPress en ajoutant des CSS personnalisés sans créer votre propre thème.

Note: Vous n’avez pas besoin d’apprendre le CSS pour modifier les styles de votre thème ou créer un thème personnalisé. Si vous préférez ne pas apprendre à coder, vous pouvez utiliser un constructeur par glisser-déposer comme SeedProd. Nous en parlerons ultérieurement dans cet article.

Dans les sections suivantes, nous partagerons les classes CSS générées par défaut par WordPress. Voici un aperçu rapide de tout ce que nous allons aborder dans cet article :

Sans plus attendre, plongeons dans le vif du sujet et découvrons comment donner à votre site WordPress l’aspect que vous souhaitez !

Styles de classe de corps par défaut

En HTML, la balise <body> contient la structure de la mise en page de toute page web, ce qui la rend très importante dans la conception des thèmes WordPress.

WordPress ajoute plusieurs classes CSS à l’identifiant body. Les concepteurs de thèmes peuvent utiliser ces classes pour styliser efficacement le conteneur body.

// Added when a website is using a right-to-left language e.g. Arabic, Hebrew	
.rtl {}

// Added when home page is being displayed
.home {}

// Added when blog page is being displayed
.blog {}

// Added when an Archive page is being displayed
.archive {}

// Added when a date based archive is displayed
.date {}

// Added on search pages
.search {}

// Added when pagination is enabled
.paged {}

// Added when an attachment page is displayed
.attachment {}

// Added when a 404 error page is displayed
.error404 {}

// Added when a single post is dispayed includes post ID
.single postid-(id) {}

// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}

// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}

// Added when an author page is displayed
.author {}

// Added when an author page is displayed. Includes author name. 
.author-(user_nicename) {}

// Added when a category page is displayed
.category {}

//Added when a category page is displayed. Includes category slug.
.category-(slug) {}

// Added when a tag page is displayed. 
.tag {}

// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}

// Added when a parent page is displayed. 
.page-parent {}

// Added when a child page is displayed. Includes parent page ID. 
.page-child parent-pageid-(id) {}

// Added when a page is displayed using page template. Includes page template file name. 
.page-template page-template-(template file name) {}

// Added when search results are displayed. 
.search-results {}

// Added when search returns no results. 
.search-no-results {}

// Added when a logged in user is detected. 
.logged-in {}

// Added when a paginated page is displayed. Includes page number. 
.paged-(page number) {}

// Added when a paginated single item is displayed. Includes page number. 
.single-paged-(page number) {}

// Added when a paged page type is displayed. Includes page number. 
.page-paged-(page number) {}

// Added when a paged category page is displayed. Includes page number. 
.category-paged-(page number) {}

// Added when a paged tag page is displayed. Includes page number. 
.tag-paged-(page number) {}

//Added when a paged date based archive page is displayed. Includes page number. 
.date-paged-(page number) {}

// Added when a paged author page is displayed. Includes page number. 
.author-paged-(page number) {}

// Added when a paaged search page is displayed. Includes page number. 
.search-paged-(page number) {}

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 le CSS personnalisé suivant.

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

Astuce d’expert : Vous avez besoin d’un moyen facile d’ajouter des extraits de CSS et de code dans WordPress ? Essayez l’extension gratuite WPCode pour protéger vos extraits de code.

Classes de style de publication par défaut

Tout comme pour l’élément body, WordPress ajoute des classes dynamiques aux éléments de publication.

Cet élément est généralement l’identifiant <article> dans votre marqueur de modèle. Cependant, il peut s’agir de n’importe quelle autre identification, en fonction de votre thème WordPress. Les classes CSS de publication sont affichées dans votre thème en ajoutant le marqueur de modèle post_class().

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

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

// Adds a class with ID for single items
.post-(ID) {}

// Generic post claass added for single blog posts. 
.post {}

// Generic page class added when a single page is displayed. 
.page {}

// Generic attachment class added to attachment pages.
.attachment {}

// Adds a post type class e.g. type-post
.type(post-type){}

// Adds a class for post format if theme supports posts formats. E.g. format-standard 
.format-(post-format){}

// Added when an item has a featured image
.has-post-thumbnail{}

// Added when a sticky post is displayed
.sticky {}

// Generic class to display an entry
.hentry {}

// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}

// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}

Les classes de publication 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 publications de blog classées dans une catégorie spécifique à l’aide du CSS personnalisé suivant :

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

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

Classes de menu de navigation par défaut

WordPress ajoute également des classes CSS aux menus de navigation. Les classes par défaut ajoutées aux menus de navigation sont les suivantes.

 // Class for Current Page
.current_page_item{}

// Class for Current Category
.current-cat{} 

// Class for any other current Menu Item
.current-menu-item{} 

 // Class for a taxonomies
.menu-item-type-(taxonomy){}

// class to distinguish post types. 
.menu-item-type-(post_type){}

// Class for any custom item that you added
.menu-item-type-custom{} 

// Class for the Home Link
.menu-item-home{} 

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

Supposons que votre thème assigne la classe de menu primaire à un emplacement de menu dans la zone de l’en-tête. Vous pouvez alors la cibler dans votre CSS à l’aide des classes CSS suivantes.

// container class
#header .primary-menu{} 
  
// container class first unordered list
#header .primary-menu ul {} 
  
//unordered list within an unordered list
#header .primary-menu ul ul {} 
  
 // each navigation item
#header .primary-menu li {}
  
// each navigation item anchor
#header .primary-menu li a {} 
  
// unordered list if there is drop down items
#header .primary-menu li ul {} 
  
// each drop down navigation item
#header .primary-menu li li {} 
  
// each drap down navigation item anchor
#header .primary-menu li li a {} 

Pour plus de détails, vous pouvez consulter notre guide sur le style des menus de navigation sur 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 colonnes latérales.

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 {}
 
.textwidget {}
.widget_text {}
.textwidget p {}

Cependant, WordPress ayant opté pour 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 afficherons comment trouver ces classes CSS ultérieurement 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 aide à fournir aux utilisateurs/utilisatrices une expérience plus propre et plus engageante.

WordPress ajoute les classes CSS par défaut suivantes pour aider les développeurs/développeuses de thèmes à styliser les zones 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 .vcard span.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 .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.children li.comment-author-admin {}
 
#cancel-comment-reply {}
#cancel-comment-reply a {}
 
/*Comment Form */
 
#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 WordPress

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

Pour trouver ces classes CSS, vous devez d’abord ajouter un bloc particulier à une publication ou à une page. Cliquez ensuite sur le bouton « Prévisualisation » pour voir le bloc en action.

Dans l’onglet Prévisualisation, déplacez simplement votre souris sur le bloc que vous venez d’ajouter et cliquez avec le bouton droit de la souris pour sélectionner l’outil Inspecter.

Finding CSS classes for blocks

Dans la console développeur/développeuse, vous verrez le HTML généré par le bloc et les classes CSS qu’il a ajoutées.

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 sur des blocs WordPress.

Ajouter vos propres classes CSS personnalisées dans WordPress

Les classes CSS par défaut de WordPress sont très complètes. Cependant, leur but est principalement de fournir aux développeurs/développeuses de thèmes un cadre standardisé avec lequel construire.

Pour votre site, vous devrez peut-être ajouter des feuilles de style CSS personnalisées dans des zones où les classes CSS par défaut ne sont pas disponibles.

De même, vous pouvez souhaiter apporter de petites modifications à une publication ou à une page spécifique sans affecter l’ensemble de votre thème.

Heureusement, WordPress vous offre plusieurs moyens simples d’ajouter des classes CSS à différentes zones. Voici quelques méthodes :

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

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

Il vous suffit de modifier la publication ou la page et de sélectionner le bloc dans lequel vous souhaitez ajouter une classe CSS personnalisée. Dans les Réglages du bloc, cliquez sur le panneau « Avancé » et ajoutez le nom de votre classe CSS.

Adding custom CSS classes to a block

N’oubliez pas d’enregistrer vos modifications en cliquant sur le bouton « Mettre à jour ».

Vous pouvez maintenant utiliser cette classe pour ajouter un code CSS personnalisé qui affectera uniquement ce bloc particulier dans cette publication ou page particulière.

Dans les menus de navigation de WordPress

Vous pouvez également ajouter une CSS personnalisée aux articles de votre menu de navigation WordPress. Disons que vous voulez convertir un élément de menu en bouton, alors cette méthode est pratique.

Il suffit de se rendre sur la page Apparence  » Menus et de cliquer sur le bouton « Options d’écran » dans le coin supérieur droit de l’écran.

Cochez ensuite la case située à côté de l’option « Classes CSS ».

Menu CSS classes

Ensuite, défilons vers le bas et déplions l’élément de menu où vous souhaitez ajouter la classe CSS personnalisée.

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

Adding css class to navigation menu item

N’oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour conserver 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 à personnaliser son thème WordPress à l’aide de CSS est une compétence très utile. Cependant, certains utilisateurs/utilisatrices peuvent simplement vouloir une solution pour concevoir leur thème WordPress sans jamais écrire de code CSS.

Pour cela, vous aurez besoin de SeedProd. C’est le meilleur outil de constructeur de page WordPress sur le marché pour créer facilement des thèmes personnalisés sans écrire de code.

SeedProd's homepage

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

Si vous le souhaitez, vous pouvez également créer un thème à partir de zéro.

SeedProd starter themes

Après avoir choisi un modèle, vous êtes prêt à modifier votre thème personnalisé à l’aide d’un éditeur intuitif par glisser/déposer.

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

SeedProd theme builder

Vous pouvez également modifier facilement n’importe quel article d’un simple pointer-cliquer. En outre, vous pouvez utiliser vos propres couleurs, arrière-plan, polices, etc.

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.

Besoin d’aide pour relooker votre site WordPress ? WPBeginner est prêt à vous aider avec notre service de conception de sites WordPress ! Laissez-nous transformer votre site en une expérience magnifiquement conçue, engageante et conviviale. Réservez notre service de conception de site WordPress dès aujourd’hui!

Nous espérons que cet article vous a aidé à trouver l’antisèche CSS générée par défaut par WordPress. Ensuite, vous pouvez également consulter notre guide sur la façon de minifier les fichiers CSS ou JavaScript dans WordPress et sur la façon de supprimer les CSS inutilisés dans WordPress.

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

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

27 commentairesLaisser une réponse

  1. Rodrigo Vieira Eufrasio da Silva

    You are to be congratulated for this wonderful content. I would only recommend updating this article, and letting us know which classes are generated by guttenberg and the latest version of WordPress because this post is out of date. But it helped me a lot.

    Hugs to you all.

    • WPBeginner Support

      Thank you for letting us know, we’ll be sure to take a look :)

      Administrateur

  2. Alison Westall

    Is there a CSS class for changing the padding of an element? Thanks!

    • WPBeginner Support

      Once you find the object you want to add padding to, you would use:
      padding, padding-top, padding-right, padding-bottom, padding-left
      depending on what type of padding you want added

      Administrateur

  3. Matt Cauley

    Thanks for the info. I just bookmarked page even though its a few years old!

    • WPBeginner Support

      Thank you, while the article is older, it should still be useful :)

      Administrateur

  4. MS Shohan

    Awesome work bro. Thanks for making a list of all the default WP classes

  5. Hannah Steele

    Hello, I am really struggling to format the automatically generated events page.

    Please help me?

  6. Arunjith RS

    Realy useful..Tank you.

  7. Shai

    Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
    it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.
    .

  8. luroch

    A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?

  9. Ari Susanto

    How did you found them? Is there an automated way like using php function, may be?

  10. Stephen Clark

    Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.

    Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!

  11. Kevin Pryce

    When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?

  12. Joel Bladt

    Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.

    – German Blogger and translated with Google Translator.

    • WPBeginner Support

      It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.

      Administrateur

  13. loreto

    time saver! now let me mess those styles :)

  14. Amba Junior

    Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well

  15. MalcolmOwen

    Do you know what would be useful? A printable PDF version of this guide…

  16. wpbeginner

    @smashingmag Thank you for retweeting our article :) really appreciate the love.

  17. bobHankin

    @photoassassin No I hadn’t. That’s sweet! Handy too!

  18. eugenebicyclist

    Just learning to work with WP and this is really handy. Thank you.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.