Feuille de triche CSS générée par WordPress par défaut pour les débutants
Publié: 2022-08-05Cherchez-vous une feuille de triche CSS générée par WordPress par défaut?
WordPress ajoute automatiquement certaines 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 montrer la feuille de triche CSS générée par WordPress par défaut. Nous verrons également comment trouver facilement des classes CSS et comment ajouter des classes CSS personnalisées chaque fois que vous en avez besoin.
Pourquoi en savoir plus sur le CSS généré par WordPress par défaut ?
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. Cela peut inclure la zone de contenu, les barres latérales, les widgets, les menus de navigation, etc.
Connaître ces classes CSS est utile si vous apprenez le développement de thèmes WordPress ou si vous essayez simplement de créer un thème enfant pour votre propre site Web.
Il vous aide également à styliser rapidement certains éléments de votre thème WordPress en ajoutant du CSS personnalisé sans créer votre propre thème.
Remarque : 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 générateur de glisser-déposer comme SeedProd. Nous en reparlerons plus tard dans l'article.
Cela étant dit, examinons les classes CSS générées par WordPress par défaut.
Styles de classe de corps par défaut
La balise <body> en HTML contient toute la structure de mise en page de toute page Web, ce qui la rend très importante dans toute conception de thème WordPress.
WordPress ajoute plusieurs classes CSS à la zone de corps que les concepteurs de thèmes peuvent utiliser pour styliser le conteneur de 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 incluent une grande variété de conditions que vous pouvez cibler dans vos styles CSS.
Par exemple, si vous souhaitez que la page de 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 simple d'ajouter des extraits de code CSS et de code dans WordPress ? Essayez le plugin gratuit WPCode pour pérenniser vos extraits de code.
Classes de style de publication par défaut
Tout comme avec l'élément body, WordPress ajoute également des classes dynamiques aux éléments post.
Cet élément est généralement la <article> de votre modèle de thème. Cependant, il peut s'agir de n'importe quelle autre balise en fonction de votre thème. Les classes post CSS sont affichées dans votre thème en ajoutant la balise de modèle post_class() .
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Voici une liste de certaines 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 correspondant à différentes conditions. Par exemple, vous pouvez styliser différemment les articles de blog classés dans une catégorie spécifique en utilisant le 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 réparer le personnalisateur de thème WordPress manquant.
Classes de menu de navigation par défaut
WordPress ajoute également des classes CSS à vos menus de navigation. Voici les classes par défaut ajoutées aux menus de navigation par défaut.
// 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 attribue la classe de menu principal à un emplacement de menu dans la zone d'en-tête, puis vous pouvez le cibler dans votre CSS en utilisant les 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 la façon de styliser les menus de navigation dans WordPress.
Classes de widget WordPress par défaut
Les widgets sont un moyen simple d'afficher des blocs sans contenu dans votre thème WordPress. Ils sont généralement affichés dans des zones ou des barres latérales dédiées aux widgets dans votre thème WordPress.
WordPress ajoute les classes suivantes aux widgets hérités.
.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, à mesure que WordPress se déplace vers des zones de widgets basées sur des blocs, vous pouvez désormais ajouter différents blocs à vos zones de widgets et chacun d'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 de formulaire de commentaire par défaut
Les commentaires sont la plaque tournante de l'engagement pour de nombreux sites Web WordPress. Leur style vous aide à offrir aux utilisateurs une expérience plus propre et plus attrayante.
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 .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 la façon de styliser les commentaires dans WordPress.
Trouver des classes de blocs WordPress
L'éditeur de blocs WordPress génère dynamiquement des classes CSS pour les blocs.
Pour trouver ces classes CSS, vous devrez ajouter ce bloc particulier à un article ou à une page. Après cela, 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 développeur, vous verrez le code HTML généré par le bloc. De là, vous pouvez voir les classes CSS ajoutées par le bloc.
Dans la capture d'écran ci-dessus, nous examinons les classes CSS du bloc Galerie. Vous pouvez ensuite utiliser ces classes CSS pour styliser le bloc de galerie dans votre thème WordPress.
Ajouter vos propres classes CSS personnalisées dans WordPress
Désormais, les classes CSS WordPress par défaut sont assez complètes. Cependant, leur objectif est principalement de fournir aux développeurs de thèmes un cadre standardisé avec lequel construire.
Pour votre site Web individuel, vous devrez peut-être ajouter un CSS personnalisé pour les zones où vous ne pourrez peut-être pas trouver de classe CSS par défaut à cibler.
De même, parfois, vous voudrez peut-être simplement apporter une petite modification à un article ou à une page spécifique sans l'appliquer à l'ensemble de votre thème.
Heureusement, WordPress vous offre plusieurs façons simples d'ajouter des classes CSS dans différents domaines.
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 consiste à utiliser l'éditeur de blocs.
Modifiez simplement la publication ou la page, puis sélectionnez le bloc où vous souhaitez ajouter une classe CSS personnalisée. Sous les paramètres de 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 du code CSS personnalisé qui n'affectera que ce bloc particulier dans cette publication ou cette page particulière.
Dans les menus de navigation WordPress
Vous pouvez également ajouter du CSS personnalisé à vos éléments de menu de navigation WordPress. Disons que vous voulez convertir un élément de menu en bouton, alors cette méthode est pratique.
Allez simplement à la page Apparence »Menus et cliquez sur le bouton Options d'écran dans le coin supérieur droit de l'écran.
À partir de là, vous devez cocher la case à 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é Classes CSS. 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 : concevez facilement un thème WordPress sans écrire de code CSS
Apprendre à styliser votre thème WordPress avec un CSS personnalisé 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. C'est le meilleur outil de création 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 rien en créant manuellement des modèles.
Vous pouvez ensuite modifier votre thème personnalisé à l'aide d'une interface intuitive de création de site par glisser-déposer.
Déposez simplement des blocs sur votre conception pour créer vos propres mises en page.
Vous pouvez également modifier facilement n'importe quel élément d'un simple pointer-cliquer. 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.
Nous espérons que cet article vous a aidé à trouver la feuille de triche CSS générée par WordPress par défaut. Vous pouvez également consulter notre guide pour corriger les erreurs WordPress les plus courantes ou consulter notre comparaison d'experts du meilleur logiciel de chat en direct pour les petites entreprises.
Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.