Blog it yourself ! but with WordPress…

En regardant dernièrement les statistiques de mon blog, je me suis aperçu que pas mal de requêtes concernaient la modification du CSS d’un blog WordPress. En d’autres termes, comment modifier la feuille de style pour donner un visuel particulier à son blog. En effet, la feuille de style va avoir pour conséquence de donner une apparence propre à son thème. Il ne faut surtout pas confondre avec les fichiers templates (index.php, single.php, sidebar.php, etc…) qui eux, servent d’ossature à votre blog.

Tout simplement, un thème wordpress est composé d’une feuille de style (qu’on nomme souvent CSS) qui va donner le visuel de mon blog (couleurs de la page, des liens, des polices, largeur de la sidebar, etc…).

Première question : Où se trouve la feuille de style ou fichier CSS ? Je vais vous indiquer la marche à suivre lorsque vous travaillez sur votre espace d’administration (car on peut aussi y arriver en allant directement sur le fichier concerné qui est sur votre disque dur, faire la modif, et ensuite l’uploader via FTP). Avant de commencer, je m’adresse bien sûr aux personnes débutantes et qui désirent mettre les mains dans le cambouis

Pour modifier votre fichier CSS, aller sur Tableau de bord->Apparence->Editeur de thème->feuille de style (style.css).

Voilà, vous y êtes. Pour ce premier billet, je vais vous montrer les endroits importants de votre feuille de style. On peut déjà repérer dans votre fichier CSS : #page , #header (l’entête), #content (l’article), #footer (pied de page), #sidebar.

Nous allons aujourd’hui voir comment définir la dimension des différents éléments de votre blog.

Selon le croquis ci-dessus, je désire un blog d’une largeur de 700px, avec un header et un footer d’une hauteur de 200px, d’une sidebar d’une largeur de 300px et de 400px de largeur pour mes articles et pages.

Dans votre feuille de style, vous allez indiquer :

 
#page {
width: 700px; -> on définit la largeur du corps de votre blog
}
 
#header {
width: 700px; -> on définit la largeur de l'entête qui est généralement la même que le corps
height: 200px; -> on définit la hauteur de l'entête
}
 
#content {
float: left; -> ce bloc se situe sur la gauche
width: 400px; -> on définit la largeur
}
 
#footer {
width: 700px; -> on définit la largeur du pied de page qui est généralement la même que le corps
height: 200px; -> on définit la hauteur du pied de page
}
 
# sidebar {
float: right; -> ce bloc se situe sur la droite
width: 300px; on définit la largeur de la sidebar
}

Voilà, c’est terminé, enregistrez votre feuille de style, et allez voir ce que cela donne. C’est tout pour aujourd’hui, je ne veux pas vous saouler On verra la prochaine fois comment on peut modifier les couleurs de son blog WordPress : fond de page, sidebar, header, footer, titre, texte, liens…