Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #18: Présentation de la feuille de style (CSS)

0

Ce tutoriel est le dix-huitième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Alors voilà, on y arrive ! C’est sûr que c’est sympa de concevoir les templates de son thème, mais vous serez d’accord que ce qu’il y a de plus sympa, c’est de créer l’apparence, l’esthétique de son thème. Souvent d’ailleurs, les gens confondent le style et le thème d’un blog. C’est vrai qu’avec WordPress, quand on veut changer de style, on a tendance à changer de thème. Mais maintenant que vous avez fait tous ces tutoriels, vous aurez compris que changer de thème, c’est certes changer d’apparence, mais c’est aussi changer toute l’organisation des templates ! Et pourtant à l’écran, il y a parfois aucun changement sur le contenu du blog.

Sur un site web dit « statique », les choses sont différentes. On ne va pas changer les fichiers html ou php à chaque fois que l’on veut donner une apparence différente à son site. On va donc uniquement changer la feuille de style. On n’ira retoucher les autres fichiers que lorsque l’on voudra changer l’organisation ou le contenu de notre site.

Aujourd’hui, vous avez un thème qui est créé et qui fonctionne normalement. Il est pas très beau mais c’est le thème de base. Et ce que vous voyez est très important car c’est, en gros, ce que voient les moteurs de recherche. Et parfois, certains thèmes sont mal développés et certaines infos disparaissent quand on enlève la feuille de style.

Je vous donne 2 exemples très simples:

  • S’il y a une chose qui est importante et qui doit rester visible quand on enlève les CSS, c’est le titre du blog. Je prends l’exemple le plus simple, mon blog. Si vous avez une extension qui vous permet de voir le blog sans les CSS, comme dans web developper pour Firefox, vous verrez que le titre et la description du blog ont disparu ! En fait, l’auteur du thème a supprimé le titre et la description parce que ça apparaissait au milieu du thème alors qu’il voulait n’y mettre qu’une photo. Ce n’est pas très respectueux des normes du W3C. Alors, au niveau référencement, je ne suis pas sûr que ça change grand chose car le titre et la description du blog restent dans la balise head du blog mais il y a d’autres solutions très simples pour ne pas voir apparaître le titre et la description du blog à l’écran tout en le gardant présent une fois les CSS retirées.
  • On utilise de plus en plus de boutons sur nos blogs. Le web 2.0 n’a fait qu’accentuer le phénomène. Et bien, il m’est fréquent de découvrir des blogs où le bouton apparaît encore une fois que l’on a enlevé les CSS. L’image a été ajouté directement dans les templates et donc apparaît toujours à l’écran. Ou alors, parfois l’image est bien insérée dans la feuille de style mais aucun titre n’a été attribué au lien dans les templates. Du coup, une fois les CSS enlevées, on n’a plus accès à ces liens….

Donc, il est important de bien construire son thème en séparant le contenu du contenant. Tout ce qui est apparence du blog devra entièrement être dans la feuille de style. Le lien entre les deux types de fichiers se fera via les balises de style, et notamment les boîtes que l’on a semé à gauche et à droite. Ce que nous avons fait jusqu’à présent, c’est construire notre thème, avec son header, son contenu, sa sidebar, et son footer, sans tenir compte du design que l’on allait donner au blog. On y a placé des « bornes » que l’on va pouvoir customiser à notre guise dans la feuille de style. C’est très important de bien séparer les deux, parce que, si par la suite, vous voulez modifier des choses sur votre thème, la plupart des modifications se feront dans la feuille de style et non dans les templates.

Alors, comment va se dérouler cette partie des tutoriels ? En fait, je vais vous proposer des idées très simples, une base de départ que vous devrez développer par vous-même par la suite. Je vais vous donner un fichier de base, qui va donner un peu plus de style à votre blog mais pas trop. A partir de là, ce sera à vous d’aller vous amuser à faire des modifications de la feuille de style pour changer par exemple la police, la couleur, l’emplacement des colonnes, et j’en passe !! Vous verrez, c’est très prenant !! Vous viendrez alors poser vos questions, montrez ce que vous avez fait !

Ensuite, ce que je ferai, c’est que je vous proposerai toute une série d’articles pour vous permettre de customiser CHAQUE partie de votre thème. A cette occasion, j’inviterai d’autres blogueurs à venir nous parler de leurs trucs et astuces en CSS pour WordPress. Certains vous proposeront des articles complets sur des sujets aussi précis que l’insertion d’icônes dans le thème par exemple. Vous aurez alors toute une panoplie de tutoriels pour customiser vous-même votre thème, comme vous le souhaitez. Il y aura aussi des articles de blogueurs ayant déjà développé leur thème qui viendront vous expliquer ce qu’il faut savoir et quels pièges à éviter.

Et oui, c’est aussi ça avoir un blog: savoir l’ouvrir aux autres dans un même but: vous permettre de prendre du plaisir à développer votre propre thème pour WordPress !

Maintenant, et avant d’entrer dans le vif du sujet, vous avez peut-être envie de vous mettre à niveau en CSS ? Sur ma boutique Zlio, j’ai une rubrique consacrée aux livres permettant de se former aux CSS. Je vous conseille notamment « CSS 2 : Pratique du design web » de Raphael Goetter qui est pour moi la référence pour apprendre les CSS, mais aussi « Le Zen des CSS« , de Dave Shea et Molly Holzschlag qui est un concept à lui tout seul. Une fois que vous le commencez, vous devenez fou de CSS !!

Donc, dans les prochains jours, nous allons progressivement remplir notre feuille de style et nous allons aussi enfin pouvoir commencer à laisser aller notre imagination et notre créativité !

Tutoriel n°19: « CSS, placement des différentes parties du blog »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

34 Commentaires

  • david

    « Il est pas très beau mais c??est le thème de base »

    il est même super moche !!! 🙂

    sinon j’ai vu que tu étais adepte de photo alors j’te laisse jeter un p’tit coup d’oeil a mon book au cas ou tu ne l’aurais pas déjà vu : http://www.flickr.com/photos/boudj

    pour en revenir aux css je pense que je vais commencer a avancer de mon coté car j’ai déjà les bases…

    tchuss !!!

  • « il est même super moche !!! 🙂 » hihihi !!! C’est vrai, faut l’avouer…. 😀 Sinon, très sympa ton portfolio !!!

  • Ah ben voilà c’est parti pour une « grande » série de CSS 😉 Et comme tu l’avais déjà dit avant le côté intéractif de cette série sera particulièrement intéressant…

  • « Alors, au niveau référencement, je ne suis pas sûr que ça change grand chose car le titre et la description du blog restent dans la balise head du blog mais il y a d??autres solutions très simples pour ne pas voir apparaître le titre et la description du blog à l??écran tout en le gardant présent une fois les CSS retirées. »

    Je confirme, au niveau du référencement, le titre est très important. Les moteurs de recherche vont voir en partie dans le h1. Il est donc souvent recommander d’avoir un h1 complet, précis mais général afin d’être bien référencé.

  • Claire

    Bonjour Francis,

    Le lien en bas de l’article indique l’article 19, mais rebondit vers l’article 18. 🙂

  • mmm… 😉 Merci Claire, je répare ça de suite !! 😉

  • Coregamer80

    Salut, tes tutos sont très bien fait, mais la j’ai un problème.
    dans la sytle.css
    -> body {margin:0;} je ne veux aucun espace entre le contenu et les bords du navigateur.
    Cela marche bien pour le coté droit et gauche mais en haut est en bas j’ai toujours une marge d’environ 10px, c’est la mm chose mm si je prend un autre index.php donc cela vient de mon style.css
    Dois je rajouter une règle pour pallier ce problème.

    merci pour ces super tutos. +

  • Coregamer80 > Ajoutes un padding:0 dans la balise Body pour voir si ça ne serait pas ça par hasard… 😉

  • Coregamer80

    hélas non ce n’est pas ca, j’ai essayais plein de façon, j’ai même mis un
    width: 100%;
    height: 100%;
    dans le body et dans le conteneur principale (j’ai essayais un peu tout et n’importe quoi du fait que je suis désespéré)
    =>Donc ca ne marche pas, p-e que cela vient du xhtml mais j’en doute, j’ai refais deux fois ça structure mais cela ne change rien non plus.

  • Coregamer > tu as la page quelque part en ligne pour que je vérifie ?

  • Coregamer80

    hélas non, je suis en local et attend toujours la réponse de mon (future?) hébergeur.
    Par contre si tu vas sur http://camierm.Free.Fr, dans le dossier wordpress tu pourras récupérer les fichiers, alors c’est un peu dépouillé comme css, mais vu que je bute au début j’ai pas fait la suite. (et l’index comprend tout, je diviserais quand j’aurai fini).
    J’espère que tu pourras m’aider parce que je but sur ce fichu truc depuis hier soir.
    Merci à toi

  • Coregamer80

    Voila, le fichier index en php cré un bug sur le serveur (référence a des bdd inexistante) donc je l’ai mis en .txt, faudra juste le remettre en php et hop.

  • Coregamer80

    Après un petit test je rencontre ce problème sur plusieurs navigateurs : firefox, opéra, safari, et IE7 (la ca me surprend pas ^^)
    Bref, c’est un peu génant pour la mise en page surtout que je ne sais pas du tout à quoi cela est dû.
    Si quelqu’un à une solution qu’il me la fasse partagé.
    Merci par avance. +

  • Coregamer80

    re, désolé pour le post à la chaine, mais il y a un ‘tit détaille marrant (pas pour moi mais bon), en faite ce bug de « marge récalcitrante » n’apparait pas sur les versions d’IE antérieur à la 7 (donc la 6, 5, 4 testé personnellement).
    Il s’agit quand même d’une belle ironie ^^

  • Malheureusement, je n’ai pas le temps nécessaire pour regarder tes fichiers, s’ils avaient été en ligne, j’aurais pu vérifier rapidement tes CSS, parce que je reste convaincu que le problème vient de là… Tu as fait un Reset CSS dès le début ? du style

    * {margin: 0; padding: 0;}

  • Coregamer80

    BINGO !!!! Francis, mon amour, je te remercie ^^
    Ca marche enfin, je n’y avais pas pensé, mais ca marche, tupeux m’en dire plus sur le sélecteur *, c’est pour reseter les style du navigateur ???

  • CoreGamer > Oui, c’est exactement ça !! 😉

  • Bonjour Francis,

    tout d’abord bravo et un grand merci pour ce que tu fais!!!
    Comme pas mal d’autres « élèves », j’ai tout suivi à la lettre et il me reste 6 erreurs que je n’arrive pas à résoudre.

    Si tu peux m’envoyer le fichier index que je puisse comparer, résoudre et comprendre mes erreurs.

    Merci d’avance

  • Howard > Va en bas du 23ème tuto et tu y trouveras ton bonheur !! 😉

  • Merci pour tout!!!

  • Bonjour Francis,

    C’est encore simon…
    J’avais déjà refermé le commentaire de l’identification du thème dans ma feuille de style et rien à faire…ma feuille de style réapparaît toujours dans l’admin de WP…

    Est-ce parce que j’utilise un éditeur (DreamWeaver en l’occurrence)…

    Merci de m’aider ça me tue ce truc…

    —Sid

  • Sawy

    Bonjour,

    Je suis en train de suivre votre tutoriel, cependant, arriver au CSS, je rencontre quelques difficultés. J’ai suivi a la lettre ce tutoriel, et jusque ici, tout fonctionnait bien. Seulement, lors de la modification de la feuille de style, les changements apportés ne s’applique pas sur le blog. Je reste avec un fond blanc et la même police, même couleurs, ect.. Je désespère un peu, je ne comprend vraiment pas pourquoi. La seul chose pris en compte dans la feuille de style semble être les informations rentré au début du tutoriel, avec le nom du thème, ect.. Avez vous une idée sur ce qui peut être la cause de ce soucis? Je vous remercie d’avance.

    Sawy

  • fmetr

    Salut !

    J’ai un petit problème avec le #page… j’arrive pas a mettre un background sur la totalité de celle ci jusqu’à mon footer :/

    ( Ce serait par exemple, pour mettre une image en fond de mon site, et garder #page d’une couleur unie )

    Ca me perturbe car j’ai jamais eu de problèmes tels !

    Merci en tous cas, super tutos. C’est instructif.

  • noixdecoco

    Je me pose quand même une question en abordant le css.
    Ne pouvez-t-on pas prendre tous les pages (index.php etc…) du thème par défaut et commencer directement le css ?

  • Bravo pour cet excellentissime tutoriel que je vais m’empresser de mettre en pratique !

Success, your comment is awaiting moderation.