Francis Chouquet Lettering + Logo Design

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

  • jfh > j’ai regardé mais je ne crois pas que ce soit possible, vu que wp-comments-post.php est un fichier de base de WordPress. Tu peux toujours demander sur le forum de WordPress francophone, mais je ne crois pas que ce soit customisable… désolé ! 😉

    jul > vous souhaiteriez que votre sidebar soit toujours collée en bas de la fenêtre du navigateur ?

  • jul

    Bonjour,

    En fait j’aimerais que la sidebar reste à gauche et en-dessous du header (si c’est possible) (donc en-haut du navigateur) et que le footer apparaisse à la fin de l’article et non pas sur le texte de l’article.

    Bonne journée

  • jul > « et non pas sur le texte de l??article » tu pourrais me faire une copie d’écran pour voir ce que ça donne en ce moment ??

  • jul

    Bonjour,

    J’ai chargé le printscreen dans mon FTP,
    l’adresse est la suivante:

    http://www.jbauerconseil.fr/do.....screen.JPG

    Bonne journée

  • jul > le problème peut venir de plusieurs choses. Mais avant de commencer, essayez de faire vos tests sous Firefox et non IE. IE ne respecte pas les standards web. Regardez ce que ça donne et dites moi ensuite si les problèmes sont les mêmes.

    a très vite

  • jul

    Bonsoir,

    Je retrouve le même problème sous Firefox. De plus, quand j’active mon thème les liens se mettent à clignoter.

  • Armony

    Bonjour ! Un très grand bravo pour ce tutoriel et un énorme merci pour la débutante que je suis 🙂

    谢谢 !

  • stefpopo

    Hello Fran6, je suis hyper impatient de voir la suite … c’est pour quand mon petit ?

  • Bonjourd Francis,

    Je me suis rendu compte qu’aucun thème WordPress de base n’était en téléchargement sur le web, j’ai donc pris l’initiative de mettre celui que j’ai créé tout au long de cette série de tutoriel en téléchargement sur mon blog.

    N’hésite pas à m’envoyer un mail si tu souhaite que je l’enlève !

    Jérémy.

  • Bonjour à tous,

    Je tenais juste à remercier l’auteur de ce blog et de ce tutorial extrêmement bien ficelé …

    J’ai pu grâce à cela mettre en place mon blog et lui crer un thème.

    Pour info j’ai inséré un lien vers ce même tutorial et j’ai cité le nom de l’auteur. Si cela représente un souci surtout que l’auteur n’hésite pas à me le signaler et je retirerai les deux liens !

    Bien à vous tous
    et encore merci à l’auteur

    AL.

  • Et bien merci à vous Archibald pour tous ces compliments. Et merci pour le lien c’est très sympa !! A très bientôt j’espère pour de nouveaux tutos !!

  • Merci Fran6 pour ce blog… et les articles et le tutoriel sur la création d’un thème. Je cherchais depuis quelque temps à « comprendre » WordPress… c’est tout à fait ce qu’il me faut… merci bien vivement. Me voilà fan de ton blog !
    Je me suis pris à lire les articles et j’apprends des foules de choses…
    Une petite question leçon 4 du tutoriel que tu as écrit, il y a une image expliquant la hiérarchisation des templates… illisible !
    Est-il possible d’en avoir une image plus lisible ?

  • Salut, j’ai lu tous tes tutos … magnifiques. Ils m’ont permis de créer mon propre thème !!!
    Sinon, je trouve dommage que les tutos sur le design soit … en cours de création?!!!
    En tout cas merci.

    @++

  • PtitLoop

    Dans le créationTheme que tu proposes en téléchargement, il y a cette ligne dans le footer : clear: both;
    Perso je sais à quoi elle sert, mais ce serait peut-être intéressant de rééditer ce passage du tuto (car elle n’y figure pas) pour en parler, c’est quand-même important.

    Encore merci pour ce super cours 😉

  • Merci PtitLoop j’avais pas vu !! je vais mettre le tuto à jour dans les prochains jours !! 😉

  • Salut Fran6,

    Voila, après une recherche infructueuse sur le forum, je viens te demander de l’aide

    J’ai mon wordpress installé sur le serveur, jusque la aucun problème, par contre j’ai crée un répertoire galerie qui contiens mes photos.

    Lorsque je tape l’url en DUR dans le navigateur : http://www.vymdiesel.be/galerie/machin.jpg (par exemple) le blog m’affiche « la page du thème » => cette page est introuvable, la page que l’on demande d’afficher si la page est introuvable ( dans le code)

    Hors, j’aimerai afficher l’image justement, mais je ne sais pas comment faire.

    J’ai bien penser mettre le répertoire « Au dessus » de celui de wordpress mais wordpress est a la racine donc 🙁

    Merci d’avance 🙂

    Merci d’avance

  • Problème résolu, je notais le répertoire PUBLIC_html (malgré que je sois bien dedans) et le lien direct sans public_html cela fonctionne, je n’ai pas très bien compris pourquoi.

    Si tu pouvais m’éclairer, ^^ si pas tant pis 😀

    Merci et désolé de polluer tes commentaires >

  • Désolée du dérangement, Eureka j’ai trouvé c’était dans un fichier à part que jvs pas ouvert.

    Super tes tuto, j’en ai fait mon livre de chevet !
    Merci

  • Bonsoir,
    après 2 jours de boulot, le premier pour créer les fichiers de template et le second la page de css  » basique » ( tout ça sans trop faire de copier/coller pour apprendre) je suis passée à la customisation d’un blog à partir du thème de site déjà existant auquel je veux ajouter un blog : et ça marche ! Je n’y croyais pas ….
    Pour voir, regardez dans ma signature 😉
    Merci Fran6…. sans toi je n’y serais pas parvenue !

  • Salut la poupée russe. Super boulot sur ton blog pianiste 😉
    J’suis impressionné !

  • Merci Laurent… tu te promènes par ici toi aussi…. le monde du web est petit ! 😉
    Ben, c’est pas le tout d’avoir un blog.. il va falloir le remplir et je ne compte pas sur ma pianiste pour ça ! Je vais donc essayer de parler de la vie d’une maman de pianiste et des compositeurs pour le piano. En tout cas j’essaie d’écouter tes conseils, si tu te souviens de ce que tu m’avais dit à Toulouse il y a … plus d’un an maintenant !
    Bibi
    à bientôt

  • merci beaucoup pour les tutoriels 🙂

Success, your comment is awaiting moderation.