Francis Chouquet Graphiste Lettering

Créez votre thème WordPress de A à Z

0

Update du 5 Octobre 2011: les tutoriels ont beau datés de 2007, ils sont en cours de modifications pour y ajouter les fonctionnalités des dernières versions de WordPress. Quoi qu’il en soit, ils sont toujours d’actualité et ont été mis à jour plusieurs fois.

Peut-être que vous aimeriez créer votre propre thème pour votre blog et que vous ne savez pas trop comment vous y prendre ? Et bien, dans les semaines qui vont venir, je vais vous expliquer les différentes étapes à suivre, pas à pas, pour que n’importe qui (ou presque) puisse créer son propre thème. On va voir l’installation de WordPress sur votre ordinateur, les différents types de fichiers, leurs hiérarchies, et les interactions entre eux. On va ensuite apprendre à créer un thème relativement simple avec Photoshop et comment l’intégrer dans les différents fichiers. Enfin, on verra comment mettre tout ça en ordre grâce aux fichiers CSS.

Quoi qu’il en soit, quelques petits prérequis seront nécessaires. Mieux vaut avoir quelques connaissances en CSS (Cascading Style Sheets), XHTML, voire php et mysql. Mais pour ces deux derniers, si vous suivez bien les différentes étapes, vous ne devriez pas avoir besoin de tout comprendre. Ce thème va nous mener sur pas mal de semaines, donc je vous demanderai d’être patient 😉 On va évoquer les différentes étapes et aborder aussi bien le design que l’intégration d’un thème sur WordPress. Cet article sera mis à jour au fur et à mesure des articles publiés. Si, au cours de cette thématique vous avez des questions précises, posez-les via les commentaires pour que tout le monde puisse en profiter.

Je ne dis pas que la méthode que je vais présenter est la meilleure mais en tout cas, elle est celle que j’utilise !

« Stay tuned! » comme disent nos amis anglosaxons, les prochains jours et prochaines semaines vont être chargés !

Articles déjà en ligne:

Leçon #1: Installer WordPress en local sur votre ordinateur

Leçon #2: Pourquoi créer son propre thème ?

Leçon #3: Présentation des Templates

Leçon #4: Hiérarchie des Templates

Leçon #5: Création des Templates

Leçon #6: Le Header

Leçon #7: Introduction au Loop WordPress

Leçon #8: Le Loop WordPress, 2ème partie

Leçon #9: Le Loop WordPress, 3ème et dernière partie

Leçon #10: La sidebar: le formulaire de recherche

Leçon #11: La sidebar: Calendrier, Catégories et Pages

Leçon #12: La sidebar: Suite et fin

Leçon #13: Widgetisez votre sidebar pour WordPress 2.2

Leçon #14: Le footer

Leçon #15: Création de « sous-templates »

Leçon #16: Insertion des commentaires

Leçon #17: Navigation, page non trouvée et validation XHTML du thème

Leçon #18: Présentation de la feuille de style (CSS)

Leçon #19: CSS: placement des différentes parties du thème

Leçon #20: CSS: customisation du header et du contenu

Leçon #21: CSS: customisation de la sidebar et du footer

Leçon #22: CSS: customisation des commentaires

Leçon #23: CSS: les liens

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 ! 😉

Sources et références utilisées pour la création des différents tutoriels présentés ici:

Fran6

574 Commentaires

  • Por fin !!! comme diraient nos amis españols
    trêve de bavardage! au boulot man, on y croyait plus 😀
    (rien de tel qu’un tit coup de pression supplémentaire pour accélerer les choses)

  • Ouaip, j’en ai bien besoin parfois !!! Ben là, ça semble bien parti !! Demain, première leçon !!!! 😀 😀

  • C’est bien! Ceux qui ont déjà créé leur propre thème vont peut être aussi apprendre quelques trucs.
    Pour ma part je suis parti d’un K2 3 column que j’ai un peu modifié surtout au niveau des css. Avant j’avais mon propre thème monté tout à la main mais j’avais envie d’Ajax. Et comme j’avais pas trop envie de me charger de plugin, j’ai préféré partir d’une base K2. C’est quand même plus simple et rapide que de tout refaire.

  • ca c’est un bon teasing!

  • I have a dream

    et ce rêve est entrain de se réaliser

    merci francis

    ciao

  • Oh ben dites donc, si j’avais su que ça allait faire plaisir comme ça, je me serais bougé plus tôt !!! 😀 N’hésitez pas à communiquer ce nouveau thème autour de vous. Plus on sera nombreux, plus les échanges seront intéressants !!

  • salut
    super idée…j’attends avec impatience les premières leçons de master Fran6 !
    cool cool 🙂

    LOmiG

  • Lomig> Le premier est déjà en ligne my friend !!

  • Tutorial excellent, j’attends avec impatience la partie sur la sidebar et le reste… merci beaucoup !

  • Ange

    Ca ressemble beaucoup au tutorial diffusé sur WPdesigner.
    Etant également un blogger français observant ce qui se passe dans la communauté anglophone, je me pose la question de savoir dans quelle proportion les idées que l’on a vues ailleurs peuvent devenir les notres.
    C’est le principe du web 2.0 n’est-ce-pas? Apporter ses propres idées/thèmes ou récupérer une idée vue ailleurs et la traiter en y apportant son angle de vue, son ton.
    A partir de quel niveau de « personnalisation » une idée devient-elle la notre?
    Et si c’est une idée originale, la tienne et rien d’autre, je trouve son traitement trop proche d’une « simple » traduction.
    Qu’en penses-tu?

  • Ange > Pour faire ces tutoriels, je me suis inspiré de divers sources, comme WordPress.org ou encore WPDesigner. En fait, j’ai pris ce que j’ai pensé être le meilleur des deux tout en restant proche des thèmes par défaut de WordPress. C’est ce qu’à fait Small Potato. Je ne pense pas que l’on puisse parler de contenu « original » dans ce cas parce qu’il n’y pas 36 manières de parler de templates. Des idées viennent de différentes sources et de ma propre expérience de WordPress. J’aime beaucoup WPDesigner tout comme WordPress.org mais dans un cas j’ai trouvé les explications trop simples (donner des lignes de code sans les expliquer), et la construction peu évolutive (tout dans le fichier index.php). Certains aspects de la construction étaient quelque peu inutiles à mon sens. J’ai donc apporté mes propres réponses sur des sujets comme le titre, la hiérarchie des templates, l’oragnisation de ces templates, les feuilles de style CSS ou encore l’explication détaillée du Loop WordPress. Qui plus est, SP s’est arrêté sur un minimum de CSS. J’ai l’intention d’aller jusqu’à la customisation des différentes pages, pour que chacun puisse personnaliser un maximum son thème.

    Et puis, concernant les docs WordPress, que tu n’abordes pas mais qui m’ont beaucoup servies, je les trouve souvent inaccessibles, trop confuses pour être bien appliquées. J’ai lu pas mal d’articles provenant d’autres sources et dont je ferai une sorte de récapitulatif à la fin des tutoriels. Je ne pense pas que ce que je dis dans ces tutoriels soient mes idées. J’ai appris à faire un thème avec différentes sources et j’en donne mon interprétation, ma vision sur comment faire son thème WordPress. Je suis parti d’une base, disons WPDesigner et WordPress.org, que j’ai amélioré avec différentes lectures et beaucoup de pratique dans les templates. C’est sûr que le contenu est en grande partie déjà vu sur ces sites anglophones, mais, je le répète, il n’y a pas 36 manières de créer un thème. Ce que j’apporte en plus, ce sont des explications, des détails, une manière propre de baliser ou d’optimiser le titre par exemple. Des choses comme ça quoi ! J’essaie de partager ce que j’apprends sur le web. Donc, ce n’est pas mon idée, c’est juste une retranscription personnelle de ce que j’apprends chaque jour sur WordPress et sur le web.

    PS: j’en ai d’ailleurs profité pour mettre la liste des sources dans ce billet plutôt que d’attendre la fin des tutoriels

  • Ange

    Merci pour le développement 🙂

    Tu apportes aussi de la doc en français, ce qui n’est pas négligeable (même si la population des bloggers en France est infime comparée aux Usa).

    En tous cas, tu m’as convaincu de revenir ici plus souvent.

  • Re- Ange,

    Concernant les tutoriels, j’ai ajouté une liste des différentes sources utilisées dans mes tutoriels. Tu y trouveras peut-être des articles intéressants 😉 Et puis, ça lève aussi une ambiguité. Je comptais établir cette liste à la fin de cette série parce qu’on découvre de nouveaux articles chaque jour mais je crois qu’il est quand même bon d’en citer certaines ici, ne serait-ce que pour la transparence.

  • Ketah

    Merci pour ce super tuto vraiment accessible à tous, bravo à l’auteur ! 🙂

1 2 3 12
1 2 3 12

Success, your comment is awaiting moderation.