Aide-mémoire CSS par défaut généré par WordPress pour les débutants

Vous êtes-vous déjà demandé comment vous pouviez styliser différents éléments du thème WordPress? Cela varie d’un thème à l’autre, mais certaines classes et certains identifiants CSS sont générés par WordPress. Si vous êtes une personne qui tente de styliser un thème ou qui souhaite créer un thème pour publication publique, voici quelques éléments de style que vous pouvez envisager d'ajouter à votre thème..

Le but de cette aide-mémoire est d’aider les débutants qui souhaitent se familiariser avec le style des thèmes WordPress. Si vous êtes un débutant et que vous ne voulez pas utiliser les codes, nous vous recommandons d’obtenir un framework de thèmes comme Headway, qui fait tout pour vous par glisser-déposer. Pour le reste d'entre nous, nous allons passer en revue certains des styles WordPress par défaut les plus importants..

Didacticiel vidéo

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

Styles de classe de corps par défaut

L'un des grands avantages de WordPress est sa personnalisation. Il vous permet de cibler des aspects très spécifiques de votre site avec CSS. Pour ce faire, l’un des moyens consiste à ajouter des classes personnalisées à divers éléments de votre blog. Le plus important d'entre eux est le tag. Voici quelques exemples de classes courantes que WordPress pourrait ajouter à cet élément:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid- (id)  .attachment- (type-mime)  .author  .author- (nom_utilisateur_nonyme)  .category  .category- (slug)  .tag  .tag- (slug)  .page -parent  .page-child parent-pageid- (id)  ​​.page-template page-template- (nom du fichier modèle)  .search-results  .search-no-results  .logged-in  .paged- (numéro de page)  .single-paged- (numéro de page)  .page-paged- (numéro de page)  .category-paged- (numéro de page)  .tag-paged- ( numéro de page)  .date-paged- (numéro de page)  .author-paged- (numéro de page)  .search-paged- (numéro de page)  

Si, par exemple, vous souhaitez styler votre page de résultats de recherche de manière spécifique, vous pouvez utiliser la classe «résultats de recherche» pour ajouter votre style. WordPress n'ajoute cette classe à la balise body que lorsque la page de résultats de la recherche est active afin qu'elle n'affecte aucune autre page..

Styles de publication par défaut

Comme avec l'élément body, WordPress ajoute également des classes dynamiques aux éléments post. Voici une liste des plus populaires:

 .post-id  .post  .page  .attachment  .sticky  .hentry  .category-misc . exemple_catégorie  .tag-news  .tag-wordpress . tag-markup  

Si vous avez lu notre article Quoi, Pourquoi et Comment de formats de publication dans WordPress 3.1, vous en apprendrez davantage sur les formats de publication et sur la manière d'afficher vos publications différemment selon le format que vous choisissez. Une fois encore, WordPress ajoute des classes dynamiques à votre publication en utilisant la fonction post_class () qui vous permettra de créer vos propres styles pour chaque format. La fonction post_class () ajoutera une classe sous la forme «.format-foo», où foo est le format de publication que vous avez choisi, c'est-à-dire. galerie, image, etc.

 .format-image  .format-gallery  .format-chat  .format-link  .format-quote  .format-status  .format-video  

Styles de menu par défaut

Dans notre article intitulé "Comment styliser les menus de navigation WordPress", nous expliquons comment ajouter votre propre classe à votre menu. Nous allons supposer que vous l'avez lu et que vous avez attribué à votre menu de navigation son propre nom de classe, "menu principal"..

 #header .main-menu  // classe de conteneur #header .main-menu ul  // première classe de conteneur non ordonnée #header .main-menu ul ul  // liste non ordonnée dans une liste non ordonnée #header .main -menu li  // chaque élément de navigation #header .main-menu li a  // chaque ancre d'élément de navigation #header .main-menu li ul  // liste non ordonnée s'il existe des éléments déroulants #header .main -menu li li  // chaque élément de navigation déroulant #header .main-menu li li a  // chaque ancre d'élément de navigation drapé .current_page_item  // Classe pour la page actuelle .current-cat  // Classe pour la catégorie actuelle .current-menu-item  // Classe pour tout autre élément de menu actuel .menu-item-type-taxonomy  // Classe pour une catégorie .menu-item-type-post_type  // Classe for Pages .menu-item-type-custom  // Classe pour tout élément personnalisé que vous avez ajouté .menu-item-home  // Classe pour le lien de base 

Notez que chaque fois que vous créez un menu dans WordPress, celui-ci est automatiquement encapsulé dans un div. Cette div n’a un nom de classe que si vous le spécifiez (nous avons choisi «menu principal»). A partir de là, vous ne faites que styliser les différents éléments de la liste..

Styles de l'éditeur WISIWYG par défaut

L'éditeur WISWYG est l'un des aspects les plus populaires et les plus utilisés de WordPress. Pour cette raison, il est judicieux d’avoir des styles prêts à recevoir tout ce que l’utilisateur peut ajouter à son blog, comme des images ou des devis. Le CSS suivant vous montre quelles classes WordPress ajoute automatiquement à ces éléments:

 .contenu_entrée img  .alignleft, img.alignleft  .alignright, img.alignright  .aligncenter, img.aligncenter  .alignnone, img.alignnone  .wp-caption  .wp-caption img   .wp-caption p.wp-caption-text  .wp-smiley  blockquote.left  blockquote.right  .gallery dl  .gallery dt  .gallery dd  .gallery dl a   .gallery dl img  .gallery-caption  .size-full  .size-large  .size-medium  .size-thumbnail  

Vous pouvez voir qu'il existe plusieurs classes concernant uniquement les images. Si, par exemple, l'utilisateur décide d'inclure une image alignée à gauche, WordPress ajoutera la classe «alignleft»..

Styles de widget WordPress par défaut

Les widgets sont un autre aspect populaire de WordPress. En tant que développeur, vous avez le contrôle sur les widgets qui vont être affichés. Ainsi, vous saurez généralement quels styles ajouter. WordPress est toutefois livré avec une poignée de widgets par défaut. Si vous les supprimez, il est sage d'ajouter un style à leurs classes..

 .widget  #searchform  .widget_search  .screen-reader-text  .widget_meta  .widget_meta ul  .widget_meta ul li .widget_meta ul li  .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  .widget_archive sélectionnez  .widget_archive option  .widget_archive . widget_pages ul  .widget_pages ul li  .widget_pages ul li a  .widget_links  .widget_links li: après  .widget_links li: avant  .widget_tag_cloud  .widget_tag_cloud a  .widget_tag_cloud a: après   .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.childr fr  .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  .widget_recent_enties  .widget_recent_entries ul li un  .textwidget  .widget_text  .textwidget p  

Lorsque vous stylisez des widgets, vous finirez probablement par utiliser les mêmes styles, encore et encore. Pour cette raison, il est conseillé de combiner des classes sur votre feuille de style à l'aide de virgules. Par exemple, vous pouvez combiner .widget_pages ul et .widget_archive ul en procédant comme suit:

 .widget_pages ul, .widget_archive ul  

Styles de formulaire de commentaire par défaut

Des commentaires aussi laids que stylés peuvent donner à WordPress, il est beaucoup plus facile avec ses classes par défaut. Si vous ne traitez pas de commentaires avec des threads, vous pouvez cependant en ignorer plusieurs..

 / * Sortie de commentaire * / .commentlist .reply  .commentlist .reply  .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  .commentment .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  .co mmentlist 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 * / #pond  # 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 

Comme il ne s'agit que d'un aide-mémoire, il existe encore de nombreuses autres classes et identifiants que nous n'avons peut-être pas couverts. Si vous pensez que quelque chose d'autre est important et qu'il fait partie de cette liste, n'hésitez pas à laisser un commentaire ci-dessous.