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

  • Super, tout mon site est construit selon ton tuto. Merci !!
    Mais…. 😉
    … dans les commentaires, le lien sur le site des « commentateurs » ne fonctionne plus.
    J’ai zappé quelque chose ?

    Merci de ton aide

  • Je vous remercie très belle

  • Bonjour !

    Très très bon tuto !
    Cependant, je suis passé à l’étape d’après.
    J’avance bien (cf. http://sigri44.com/GenerationRebelle) mais j’ai deux petit soucis.
    Sur un autre thème, il y’a la fonction plugins-wp qui est activée, qui à pour effet de m’afficher la barre admin en haut, et ainsi autoriser les extensions.
    J’ai une extensions d’un chat vidéo (openTok pour les curieux) qui fonctionne super bien, mais avec mon thème personnalisé, pas moyen.
    Est-ce lié ?
    en tout cas j’ai copié cette fonction, mais cela crée une erreur. Je me penche donc vers l’auteur 😉
    Merci.

    Cordialement,
    $igri_44

  • Merci pour tout ces tutos, je te remercie du fond du cœur.
    Merci merci merci

  • Bonjour,

    Premièrement merci beaucoup pour tout ces tutoriels, c’est vraiment apprécié !

    J’aurais une petite question concernant l’ajout de vignettes / thumbnails aux articles. Présentement, dans le fichier wp-settings.php, j’ai mis en commentaires cette ligne :
    «require_if_theme_supports( ‘post-thumbnails’, ABSPATH . WPINC . ‘/post-thumbnail-template.php’ );»

    pour la remplacer par celle-ci :
    «add_theme_support( ‘post-thumbnails’);
    set_post_thumbnail_size( 284, 215 ); »

    Je vois désormais le bouton d’ajout de thumbnails dans la page d’ajout / modification des articles, par contre, lorsque je click dessus et que j’essais d’uploader une image il me sort cette erreur :
    «Fatal error: Call to undefined function get_post_thumbnail_id() in /Applications/XAMPP/xamppfiles/htdocs/apprentissageAuto/premiertemplate/wordpress/wp-admin/includes/media.php on line 1173»

    J’ai préalablement modifier les paramètres de vignettes dans réglages / médias. Si quelqu’un sais quel est mon erreur ou ce qu’il me manque merci beaucoup ! 😛

  • Merci beaucoup pour ce tuto. au boulot maintenant, ça va prendre plus de temps que prévu je crois

  • Merci pour ce super tuto!j’ai longuement cherché sur google mais je n’avais jamais le bon resultat sur wordpress….J’étais excédée!!Grace à ton article….j’ai tout compris!!!;))

  • Joe

    Tu as ecri : « On va ensuite apprendre à créer un thème relativement simple avec Photoshop et comment l’intégrer dans les différents fichiers ».
    Ou se trouve donc ce tuto, je n’arrive pas à le trouver…..

    Merci d’avance et Merci pour tes tutos qui font avancer les plus démunis, perdus….

    Cdlt

  • Très bonne série de tutos !

    Je l’ai suivie de long en large, et cela m’a grandement aidé pour la modification de mon thème. J’ai repris un thème existant, et notamment les tutos sur le CSS m’ont été d’une grande aide pour localiser les éléments que je voulais changer dans le code.

    Merci Fran6art ! ^^

  • Bonjour,

    Merci pour cet intéressant article, on peut aussi le compléter par un logiciel installé sur votre ordinateur et qui peut référencer un ou tous vos sites, il est efficace, augmente vos backlinks donc vos visiteurs.

    http://www.referencerdanslesmoteurs.com

    Cordialement

  • C’est quand même pas donnée a tout le monde de faire son theme WP mais vos explication son très bien fait.

  • Thank you very much dear

  • Wow je ne pensai vraiment pas que réaliser un thème WP représentait une masse de travaill aussi conséquente.. Merci pour le tuto, je me retrousse les manches et j’attaque 🙂

  • 0n0

    Merci pour ces tutos !
    Beau travail

  • merci beaucoup pour tout ces tutoriels

  • Super !
    C’est bien complet et précis. Prise en main rapide grâce à ces tutos.

  • lylou55

    Bonjour,

    Déjà bravo pour ce tuto ! il est parfit et je m’en suis beaucoup servi ..
    J’ai ceci dit une petite question ..
    En utilisant votre thème je remarque que sous Opera et Google Chrome, à chaque changement de page il y a un rechargement complet de la page, du moins cela fait comme ci. Vous voyez, ça fait un « flash » blanc…, alors que sous mozilla le sidebar par exemple ne bouge pas d’un pouce … seul les contenus article se recharge.

    Est ce que cela peut être dut à la structure du thème ?

    Merci et bravo encore .. !

  • Merci pour tes tutoriels Fran6art,
    Ils sont vraiment super, c’est très chic de ta part

  • Thanks on your marvelous posting! I certainly enjoyed reading it, you
    are a great author.I will remember to bookmark your blog and
    may come back someday. I want to encourage yourself to continue your great work,
    have a nice evening!

  • If some one needs expert view on the topic of blogging then
    i advise him/her to pay a visit this blog, Keep up
    the fastidious job.

  • Julia

    Bonjour Francis!

    Avant tout, bravo pour ce tuto, très clair, très didatique, très complet, bref tout ce qu’on peut espérer d’un bon tuto!

    J’aurais cependant une question un peu particulière (je débute, donc, je demande quand même de l’indulgence): j’ai un template bien défini par feuille CSS, mais j’aimerais changer certains aspects pour chaque page de mon site: je dispose ainsi d’un arrière-plan blanc, et d’un header rouge (police couleur jaune), mais j’aimerais que le header change de couleur (ainsi que le texte du header) sur chaque page.
    Quelle est la marche à suivre exactement? Créer un template pour chaque page? Créer un « sous-template »? Comment le lier au fichier php et à la feuille de style CSS principale?

  • jerome

    Salut,
    d’abord merci pour ce tuto (ajouté en favoris direct) !

    J’ai une question concernant les metas dans le , dans ton exemple tu n’as pas ajouté le meta « description ».

    je pourrai reprendre le meta title et mettre simplement :
    <meta name="description" content="

    »
    »
     » />

    mais le probleme de cette méthode est que mes balises descriptions auront peu de contenu (non pertinent) et feront en plus du duplicate content avec le meta title…

    Bref, y aurait t’il un moyen de générer automatiquement une balise meta description pertinente ?

    Merci
    ++
    G

  • jerome

    aie ton script de comment à enlever mon code… je remet donc mon exemple en texte :

  • jerome

    allez je retente une derniere fois (4) de mettre du code en texte :

    alors ?

  • jerome

    et encore…. :

    meta name : description content :
    nom du blog
    si 404 :
    Not Found
    sinon home :
    description du blog
    sinon :
    titre de la page ou du post
    fin

  • Merci, merci, merci pour cet excellent tutoriel qui manquait.
    Tellement plus simple de créer un thème de zéro plutôt que tripatouiller Twentyeleven !!!

  • il serait bien qu’à la fin par exemple d’index.php de voir le fichier en entier, pour être sûr que tout est correct,dans ce que l’on a fait.
    pensez vous fait un tuto pour créer un thème responsive??

  • Quentin

    Merci Francis. Les commentaires positifs sur le tutorial m’encourage à me lancer. 🙂

  • Quentin

    Merci Francis. Les commentaires positifs sur le tutoriel m’encouragent à me lancer. 🙂

  • Salut a toi grand gourou du php et du CSS, et surtout merci pour ce fantastique tuto qui m’a permis de créer mon thème perso ! Fantastique… j’ai une question tout de même. Je n’arrive pas a faire marcher « lightbox plus » pour les galeries images WP… il y a t’il quelque chose à faire, un code a ajouter. J’ai cherché en vain ma réponse sur Google, un espoir par ici. Merci en tout cas pour ces très bon tuto !

  • Bonjour Fran6
    merci pour ces tutos.
    Débutant sur WP, j’ai pu me familiariser avec l’interface en mode « Local » et ainsi customiser mon thème à loisir.
    J’ai maintenant mis le dossier sur mon FTP, modifié le wp-login.php.
    J’ai obtenu une page « installer wordpress » depuis l’adresse alicetoumit.com.
    j’ai suivi les instructions ……… et……… ça a installé wordpress mais pas avec mon thème custmomisé, mes images et textes !
    j’ai essayé de zippé mon dossier complet et de le mettre en tant que thème mais j’ai eu le message : L’archive n’a pas pu être installée. Il manque le fichier style.css à ce thème.

    bref … je suis perdu … une petite aide serait la bienvenue.

    PS : en conclusion de la série, un tuto « passer de local au online » aurait été topissime. (mais oui je sais les gens en veulent toujours plus ! héhé !)

  • Wonderful blog! I found it while browsing on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?

    I’ve been trying for a while but I never seem to get there! Cheers

  • Hi there! I just wanted to ask if you ever have any issues
    with hackers? My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to no
    back up. Do you have any methods to protect against hackers?

  • Just want to say your article is as surprising. The clearness in your
    post is simply excellent and i can assume you
    are an expert on this subject. Fine with your permission let me to grab your
    RSS feed to keep up to date with forthcoming post. Thanks a
    million and please continue the gratifying work.

  • Superbe tutoriel, assez complet !
    Voici un article où l’on peut trouver 70 astuces pour customiser son WordPress (certains seront répétitifs par rapport à cet article, mais d’autres n’y sont pas) :

    http://www.lestutosdetoto.fr/a.....wordpress/

    Enjoy it =)

  • Excellent tutoriel. Mon premier thème sera bientot en ligne sur mon site. Merci beaucoup!

  • C’est exactement ce que je cherchais, je vais retrousser les manches et me donner le temps de suivre ton tuto qui me semble très bien fait. Ce vrai que c’est tellement facile de prendre un thème tout fait que souvent on choisi la solution la plus simple, mais faire son thème soi-même peut donner une liberté de création bien plus intéressante.

    Merci

Success, your comment is awaiting moderation.