Vous cherchez une antisèche CSS générée par défaut par WordPress ?
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 l’antisèche CSS par défaut générée par WordPress. Nous verrons également comment trouver facilement les classes CSS et comment ajouter des classes CSS personnalisées lorsque vous en avez besoin.
Pourquoi se renseigner sur le CSS par défaut généré 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. Cela peut inclure la zone de contenu, les barres latérales, les widgets, les menus de navigation, et plus encore.
La connaissance de 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.
Cela vous permet également de styliser rapidement certains éléments de votre thème WordPress en ajoutant des CSS personnalisés 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 constructeur par glisser-déposer comme SeedProd. Nous en parlerons plus tard dans l’article.
Ceci étant dit, jetons un coup d’œil aux classes CSS par défaut générées par WordPress.
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 la conception de tout thème WordPress.
WordPress ajoute plusieurs classes CSS à la zone body que les concepteurs de thèmes peuvent utiliser pour styliser le conteneur du corps.
// 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'archives 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 message unique est affiché, incluant l'ID du message
.single postid-(id) {}
// Ajouté lorsqu'une pièce jointe unique 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 mime-type de la pièce jointe
.attachment-(mime-type) {}
// Ajouté lorsqu'une page d'auteur est affichée
.author {}
// Ajouté lorsqu'une page d'auteur est affichée. Inclut le nom de l'auteur
.author-(nom_de_l'utilisateur) {}
// Ajouté lorsqu'une page de catégorie est affichée
.category {}
//Ajouté lorsqu'une page de catégorie est affichée. Inclut le slug de la catégorie.
.category-(slug) {}
// Ajouté lorsqu'une page de balises est affichée
.tag {}
// Ajouté lorsqu'une page de balises est affichée. Inclut le slug du tag.
.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 à l'aide d'un modèle de page. Inclut le nom du fichier du modèle de page
.page-template page-template-(nom du fichier du modèle) {}
// Ajouté lorsque les résultats de la recherche sont affichés
.search-results {}
// Ajouté lorsque la 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-(numéro de page) {}
// Ajouté lorsqu'un élément unique paginé est affiché. Inclut le numéro de page
.single-paged-(numéro de page) {}
// Ajouté lorsqu'un type de page paginée est affiché. Inclut le numéro de page
.page-paged-(numéro de page) {}
// Ajouté lorsqu'une page de catégorie paginée est affichée. Inclut le numéro de page
.category-paged-(numéro de page) {}
// Ajouté lorsqu'une page d'étiquettes est affichée. Inclut le numéro de page
.tag-paged-(numéro de page) {}
//Ajouté lorsqu'une page d'archives basée sur la date est affichée. Inclut le numéro de page
.date-paged-(numéro de page) {}
// Ajouté lorsqu'une page d'auteur paginée est affichée. Inclut le numéro de page
.author-paged-(numéro de page) {}
// 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 « News » ait une couleur de fond différente, vous pouvez ajouter le CSS personnalisé suivant.
.category-news {
background-color:#f7f7f7
}
Classes de style d’article par défaut
Tout comme pour l’élément body, WordPress ajoute des classes dynamiques aux éléments post.
Cet élément est généralement la balise
post_class().
Voici une liste de quelques-unes 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) {}
// Ajout d'une classe générique post pour les articles uniques du blog
.post {}
// Classe de page générique ajoutée lorsqu'une seule page est affichée
.page {}
// Classe de pièce jointe générique ajoutée aux pages de pièces jointes.
.attachment {}
// Ajoute une classe de type de message, par exemple type-post
.type(post-type){}
// Ajoute une classe pour le format des messages si le thème supporte les formats de messages. 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 les catégories assignées à un article. Par exemple, category-news category-movies
.category-(slug) {}
// Classes avec des tags assignés à un article. ex. tag-photofriday tag-tgif
.tag-(slug) {}
Les classes de post vous permettent de donner un style aux articles de blog et aux pages correspondant à différentes conditions. Par exemple, vous pouvez donner un style différent aux 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 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 par défaut ajoutées aux menus de navigation par défaut.
// 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-(taxonomie){}
// Classe pour distinguer les types de post
.menu-item-type-(post_type){}
// Classe pour tout élément personnalisé que vous avez ajouté
.menu-item-type-custom{}
// Classe pour le lien 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 emplacement de menu dans la zone d’en-tête, vous pouvez alors le cibler dans votre CSS en utilisant les 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 {}
// ancrage de chaque é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 de navigation descendant
#header .primary-menu li li {}
// chaque élément de navigation déroulant ancré
#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 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 barres latérales de votre thème WordPress.
WordPress ajoute les classes suivantes aux widgets existants.
.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 {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
Cependant, comme WordPress passe à des zones de widgets basées sur des blocs, vous pouvez maintenant 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 de formulaire de commentaire par défaut
Les commentaires sont le centre d’engagement de nombreux sites Web WordPress. Les styliser vous aide à fournir 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 des commentaires.
/*Sortie du commentaire*/
.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 {}
/*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 la façon de styliser les commentaires dans WordPress.
Trouver des classes de blocs 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 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 regardons les classes CSS du bloc Galerie. Vous pouvez ensuite utiliser ces classes CSS pour styliser le bloc galerie dans votre thème WordPress.
Ajout de 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 de thèmes un cadre standardisé avec lequel ils peuvent construire.
Pour votre propre site Web, vous pouvez avoir besoin d’ajouter des feuilles de style CSS personnalisées dans des zones où vous ne pouvez pas trouver 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 vous offre plusieurs moyens faciles d’ajouter des classes CSS dans différentes zones.
Ajouter des classes CSS personnalisées à un bloc dans l’éditeur de bloc
Si vous souhaitez ajouter rapidement une classe CSS personnalisée à un article ou à une page spécifique, la façon la plus simple de le faire 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. Sous les paramètres 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 du 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 du code CSS personnalisé aux éléments de votre menu de navigation WordPress. Disons que vous voulez convertir un élément de menu en bouton, alors cette méthode est très pratique.
Allez simplement sur 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 située à côté de l’option Classes CSS.
Ensuite, vous devez faire défiler l’écran vers le bas et cliquer pour développer l’élément de menu dans lequel 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 donner un style différent à 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 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 construction de pages WordPress sur le marché qui vous permet de créer facilement des thèmes personnalisés sans écrire aucun 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 intuitive de création de sites par glisser-déposer.
Il suffit de déposer des blocs dans votre conception pour créer vos propres mises en page.
Vous pouvez également modifier facilement n’importe quel élément par simple pointage et clic. Vous pouvez utiliser vos propres couleurs, arrière-plans, 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 aucun 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 de correction des erreurs les plus courantes de WordPress ou voir notre comparaison d’experts des meilleurs logiciels de chat en direct pour les petites entreprises.
