Nous avions vu précédemment la hiérarchie des fichiers WordPress, article qui clôturait la structure générale des fichiers. Seulement, notre blog wordpress, ne devrait pas ressembler à grand chose sans une petite couche de CSS permettant la mise en forme des éléments. Nous allons voir dans ce tutoriel, les éléments indispensables pour la création d’un thème WordPress.
Styliser son thème WordPress
Dans un premier temps, créons un fichier nommé “style.css” que nous allons mettre à la racine de notre thème. Je ne vous apprendrez pas à faire du CSS, d’une part parce que je ne suis pas forcément le meilleur dans ce domaine et d’autre part parce que ce n’est pas l’objectif de ce tutoriel.
L’objectif est de vous présentez les éléments indispensables à intégrer à votre feuille de style pour que votre thème WordPress soit valide.
Le contenu de l’article
Dans un premier temps, nous allons voir les éléments qui doivent être stylisés pour les articles et les pages de votre blog :
Mon article (ou ma page) est entouré de ces balises :
<article>
<header>Titre Article (ou page)</header>
<div id="main">
<section>
<!--Contenu de l'article-->
</section>
</div>
</article>
Voici la liste des éléments à stylisé et le code correspondant :
article { }
/*HEADER*/
article header { }
article header h1 { }
/*CONTENU ARTICLE (ou PAGE) */
#main section h1 { }
#main section h2 { }
#main section h3 { }
#main section h4, h5, h6 { }
#main section ul { } /*LISTE*/
#main section ol { } /*LISTE ORDONNEE*/
#main section ul li, #main section ol li{ }
#main section p { } /*paragraphe, ajoutez du padding */
/*IMAGE*/
#main section img{ }
#main section img.alignright{ float:right; } /* ALIGNEMENT IMAGE A DROITE*/
#main section img.alignleft {float:left; } /*ALIGNEMENT IMAGE A GAUCHE */
#main section blockquote{ } /*QUOTE*/
#main section a { } /* LIENS */
#main section a:hover { } /*LIENS SURVOLES*/
/*INDISPENSABLE A LA CREATION D'UN THEME*/
/*ALIGNEMENT DES IMAGES*/
.alignnone { }
.aligncenter,
div.aligncenter { }
.alignright { }
.alignleft { }
.aligncenter { }
a img.alignright { }
a img.alignnone { }
a img.alignleft { }
a img.aligncenter { }
/*LEGENDE DES IMAGES */
.wp-caption { }
.wp-caption.alignnone { }
.wp-caption.alignleft { }
.wp-caption.alignright { }
.wp-caption img { }
.wp-caption p.wp-caption-text { }
/* POST MIS EN AVANT */
.sticky { }
.gallery-caption { }
.bypostauthor { }
Ensuite, laissez votre créativité faire le reste. Tout va dépendre de votre structure de thème, rien ne vous empêche d’ajouter des class à cette feuille de style…
Si vous avez des questions, n’hésitez pas à me les poser en commentant cet article, j’essaierai de vous répondre au mieux !
Enjoy it !
