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 allons vous afficher 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 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 WordPress peuvent ensuite utiliser ces classes CSS pour styliser les zones communes de tous les sites WordPress. Il peut s’agir de la zone de contenu, des colonnes latérales, des widgets, des menus de navigation, etc.
Connaître ces classes CSS est 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 afin de modifier les styles de votre thème ou de créer un thème personnalisé. Si vous préférez ne pas apprendre à coder, alors vous pouvez utiliser un Constructeur drag and drop comme SeedProd. Nous en parlerons ultérieurement dans cet article.
Ceci étant dit, examinons les classes CSS générées par défaut par WordPress.
Styles de classe de corps par défaut
La balise body <body> en HTML contient toute la structure de la mise en page d’une page web, ce qui la rend très importante dans la conception d’un thème WordPress.
WordPress ajoute plusieurs classes CSS à la zone du corps que les concepteurs de thèmes peuvent utiliser pour styliser le conteneur du corps.
// 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;
}
Vous avez besoin d’un moyen facile d’ajouter des extraits de CSS et de code dans WordPress ? Essayez l’extension gratuite WPCode pour pérenniser 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 le modèle de votre thème. Cependant, il peut s’agir de n’importe quel autre identifiant en fonction de votre thème. Les classes CSS de la 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 à vos menus de navigation. Les classes ajoutées par défaut aux menus de navigation sont énumérées ci-dessous.
// 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 primary-menu à un Emplacement de menu dans la zone d’en-tête, vous pouvez alors le 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, 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 les colonnes 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 {}
.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 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 .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 ajouter ce bloc particulier à une publication ou à une page. Ensuite, vous devez cliquer sur le bouton Prévisualisation pour voir le bloc en action.
Dans l’onglet Prévisualisation, 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/développeuse, vous verrez le HTML généré par le bloc. À partir de cette page, vous pouvez consulter 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. 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 pour les zones où vous ne trouverez pas de classe CSS par défaut à cibler.
De même, il arrive que vous souhaitiez simplement apporter une petite modification sur une publication 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 à 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, puis de sélectionner le bloc dans lequel vous souhaitez ajouter une classe CSS personnalisée. Sous 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 situé dans le coin supérieur droit de l’écran.
À partir de là, vous devez cocher la case située à côté de l’option Classes CSS.
Ensuite, vous devez défiler vers le bas et cliquer pour déplier l’élément de menu où vous souhaitez ajouter la classe CSS personnalisée.
Vous remarquerez 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 stocker 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 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 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 clic. Vous pouvez utiliser vos propres couleurs, arrière-plan, polices de caractères, 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.
Nous espérons que cet article vous a aidé à trouver l’antisèche CSS générée par défaut par WordPress. Vous pouvez également consulter notre guide pour corriger les erreurs WordPress les plus courantes ou voir notre comparaison d’experts du meilleur logiciel de discussion en direct pour les petites entreprises.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
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 says
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 says
Thank you for letting us know, we’ll be sure to take a look
Administrateur
Alison Westall says
Is there a CSS class for changing the padding of an element? Thanks!
WPBeginner Support says
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 says
Thanks for the info. I just bookmarked page even though its a few years old!
WPBeginner Support says
Thank you, while the article is older, it should still be useful
Administrateur
MS Shohan says
Awesome work bro. Thanks for making a list of all the default WP classes
Hannah Steele says
Hello, I am really struggling to format the automatically generated events page.
Please help me?
Arunjith RS says
Realy useful..Tank you.
Shai says
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 says
and the « entry-content » itself!
Ari Susanto says
I want to add this one:
« status-publish »
luroch says
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 says
How did you found them? Is there an automated way like using php function, may be?
Stephen Clark says
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 says
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 says
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 says
It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.
Administrateur
loreto says
time saver! now let me mess those styles
Amba Junior says
Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well
MalcolmOwen says
Do you know what would be useful? A printable PDF version of this guide…
Pete says
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 says
Thank you Pete!
wpbeginner says
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50 says
@smashingmag Congrats on your 50★ tweet! http://t.co/r78Ao3Sm
bobHankin says
@photoassassin No I hadn’t. That’s sweet! Handy too!
eugenebicyclist says
Just learning to work with WP and this is really handy. Thank you.