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.
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;
}
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.
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.
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 ».
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.
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 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.
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.
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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
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
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
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
MS Shohan
Awesome work bro. Thanks for making a list of all the default WP classes
Hannah Steele
Hello, I am really struggling to format the automatically generated events page.
Please help me?
Arunjith RS
Realy useful..Tank you.
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.
.
Ari Susanto
and the « entry-content » itself!
Ari Susanto
I want to add this one:
« status-publish »
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?
Ari Susanto
How did you found them? Is there an automated way like using php function, may be?
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!
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?
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
loreto
time saver! now let me mess those styles
Amba Junior
Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well
MalcolmOwen
Do you know what would be useful? A printable PDF version of this guide…
Pete
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
Thank you Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag Congrats on your 50★ tweet! http://t.co/r78Ao3Sm
bobHankin
@photoassassin No I hadn’t. That’s sweet! Handy too!
eugenebicyclist
Just learning to work with WP and this is really handy. Thank you.