Francis Chouquet Graphiste Lettering

Les tutos sont (enfin) de retour…

0

Je viens de vérifier, j’ai commencé ma longue série de tutoriels sur la création de thème pour WordPress, il y a bientôt 2 ans… Ca fait une éternité dans le monde du web je trouve !! 😀 Quoi qu’il en soit et après de nombreux rebondissements dans ma vie, j’ai enfin trouvé le temps de me consacrer à une nouvelle série de tutoriels dans lesquels, on va apprendre à faire le design d’un site web et de le transformer en thème WordPress.

Le rythme sera environ le même que pour la première série, à savoir un tutoriel par semaine, voire plus, voire moins, et l’ensemble va s’axer autour du plan suivant:

  1. Tout d’abord, nous allons penser le thème, tenter d’en concevoir une première version sur le papier, à travers un croquis. J’en ai déjà parlé dans la première série de tutoriels, mais il sera bon de reprendre l’ensemble dans le cadre du thème que l’on va réaliser.
  2. Ensuite, on va passer sur Photoshop et on va découvrir ensemble comment créer une première maquette de notre site, comment travailler avec les couleurs, comment bien les choisir, etc. Cette étape aboutira par une maquette complète du thème que l’on découpera pour la préparer à la mise en page web.
  3. Puis, nous transformerons cette belle maquette en une version HTML et CSS. On ne parlera pas encore de thème, mais d’une représentation simple en HTML de ce que le thème sera.
  4. Enfin, nous construirons le thème autour de cette structure HTML et nous lui injecterons tout le PHP nécessaire.

themeaazjpg

D’un point de vue organisation des tutoriels, j’aurais tendance à dire que ce qui a été déjà fait devrait s’intégrer entre l’étape 3 et 4. C’est-à-dire qu’on n’en a pas forcément besoin au départ, mais qu’il faudra comprendre aisément la structure d’un thème WordPress pour intégrer ensuite tous les éléments nécessaires à notre thème. Donc, au final, l’ensemble des tutoriels reprendra tout ce qu’il faut savoir ou presque pour créer son thème WordPress, dans une organisation somme toute assez logique.

L’objectif de départ était de créer une structure de thème pour ensuite, venir lui greffer différents éléments qui pourraient en faire un thème. C’est ce que j’ai fait pour mon livre sur WordPress, mais que je préfère éviter ici, pour reprendre une structure classique et largement plus abordable. Bien sûr cette organisation n’est pas parfaite, mais je pense que c’est celle qui sera la plus accessible au plus grand nombre.

Donc, j’espère que vous êtes prêts pour cette nouvelle étape dans la vie du blog. Depuis le temps que certains d’entre vous attendent, je me doute bien que vous devez être prêts et que vous n’avez sûrement pas attendu tout ce temps sans apprendre de votre côté !! 😀 Mais quoi qu’il en soit, j’espère sincèrement que cette nouvelle série de tutoriels vous apportera autant que ce qui a été fait il y a 2 ans et qui a beaucoup apporté à la notoriété de ce blog.

Encore merci pour votre patience et fidélité et je vous donne rendez-vous la semaine prochaine pour le premier tutoriel !! 😉

43 Commentaires

  • Excellente nouvelle ! J’attends cette série de tutoriels avec impatience (en particulier la partie 1 et 2 pour ma part) qui risque bien d’être très intéressante.
    Bon courage Francis 🙂

  • Génial ! Hate de commencer tout ça =D

  • ça c’est du teasing !

  • Matthieu

    Vite vite vite !

    Et merci d’avance !

  • jack

    Bonjour,
    J’ai tiqué sur l’orthographe de « moultes ».

    « tiré du « Dicowidget mac »
    http://www.dicowidget.net/

    C.− Moult + subst. gén. au plur.
    Synon. de beaucoup de, en grand nombre.
    Cela peut causer moult douleur, le bonheur des autres! (Druon, Poisons couronne, 1956, p. 140).
    Après force pannes et moult incidents (P. Rousseau, Hist. transp., 1961, p. 476).
    Rem. Moult est parfois employé comme adj. variable. Moulte chose Blanche et noire, effet et cause (Verlaine, Œuvres compl., t. 3, Chair, 1896, p. 114).

    Les choses se gâtent car on peut lire ensuite qq chose de très déplaisant, et mon intention n’est pas de te vexer (le mieux serait de supprimer ce commentaire !)
     » D’après Dupré 1972 ,,Il est (…) parfaitement ridicule d’écrire, en « style troubadour » : le chevalier eut moultes aventures« . »

    Tu peux toutefois revendiquer et assumer « une âme de troubadour » si c’est ta vraie nature !

    Jack

  • jack > mmm… je crois que je vais modifier le texte alors… ^^

  • Freelance en packaging, je n’ai pus attendre la suite de tes tutos (« vous n’avez sûrement pas attendu tout ce temps sans apprendre de votre côté !!) pour créer mon site.
    Quoiqu’il en soit, je suis heureux que cela reprenne !
    Sûrement de nouvelles perles à découvrir.
    Bon courage et a bientôt

    PS : je suis en train de visionner ton DVD

  • Atmoz

    Joie et bonheur avec cette très bonne nouvelle !
    J’imaginais déjà ce tuto tombé à l’eau, mais non, il vont enfin arriver !

    Je suis justement en train de mettre la main à la pâte, je n’en suis qu’au stade ‘croquis sur papier’ ces tutos vont m’être d’une grande utilité

    Vivement la semaine prochaine alors… :p

  • Ça m’a tout l’air d’une très bonne idée ça 🙂 !

  • Kriffin

    J’ai hâte !

  • Excellente nouvelle.
    Je suis abonné à la newsletter de Fran6.
    J’ai le sentiment qu’il incarne à merveille l’esprit du logiciel libre.

    Par calcul – car c’est un pro – ou altruisme ou les deux, et pour «moult» autres raisons, il dispense des informations de très grande qualité.

    Chapeau bas.

  • Merci bien pour les encouragements, ça donne envie de se bouger !! ^^

  • NotAlame

    Salut!

    Excellente idée, surtout pour l’etape sous photoshop car, pour ma part, je m’y connais en photoshop mais j’ai pas d’idée pour crée un beaux site Web2.0 …

    Donc, J’ai hate (et soif 😉 ) d’apprendre…

    Merci beaucoup pour tous vos efforts!

  • Je suis impatient. Vu la qualité du premier ça risque d’être fort intéressant!

  • J’ai suivi le premier tuto et c’est avec lui que j’ai compris le fonctionnement de WordPress.
    Aucune autre recherche m’a conduit à un résultat comme le tien.
    Merci de partager avec nous tes connaissances et ton expérience.

  • Le messie est (enfin) de retour !
    Je rencontrais de grosses difficultés (je désespérais même !) pour créer mon propre design de blog… Ma maquette est prête sous Photoshop mais je bloque 🙁 Ce n’est pourtant pas faute d’avoir passé de nombreuses soirées devant l’écran…
    J’ai hâte d’apprendre à tes côtés.
    A très vite !

  • Marin

    Tres Tres bonne nouvelle…
    Vais pouvoir m’en servir pour deux de mes sites 😉

  • Marin

    A ce propos je cherche un plugin gratuit pour rendre un site multilangue sans passer par un outil style google translator… Ca existe?

  • Tu nous manquais.. on sait pourquoi ! En tout je n’avais pas encore eu le courage de m’attaquer toute seule au découpage de psd pour en faire un thème… et ce que tu nous annonces correspond exactement à ce qui me manque ! C’est super 🙂 merci beaucoup …

  • Val

    Wahouuuu… génial !
    Merci Francis 😉
    Perso je suis privée de connexion depuis 3 semaines… J’ai donc davantage hâte de récupérer ma nouvelle box pour suivre tout ça …
    Yes yes yes !!!
    Biz @ +

  • Bon alors là, déjà que je viens de faire ma MAJ wordpress sans difficultés apparentes, avec une facilité extraordinaire pour moi qui suis la reine inconditionnelle de la gaffe en matière de blogs tout prêts tout chauds et de php, j’avais envie de crier au monde entier que fran6art.com était un miracle d’internet (avec le site du zér0 😉 ) mais ALORS là !
    Je suis excitée comme une puce à l’idée de découvrir tous ces tutos alléchants… Je ne rêve que d’une chose, c’est de savoir comment transformer le design qu’on a créé en template de blog wp, parce que moâââ j’sais jamais c’qu’il faut faire 😉 MERCI beaucoup !!! T’imagines pas comme je te suis reconnaissante !

  • sebastien

    Bonjour Fran6,

    je m’adresse à toi car tu es expert en wordpress : il y a 2 ou 3 semaines je suis tombé sur un site qui expliquait comment enlever le « category » dans les url afin de transformer une adresse du type http://www.fran6art.com/category/wordpress/ en http://www.fran6art.com/wordpress/
    Je n’arrive pas à le retrouver. Est-ce que ça te dit quelque chose ? Merci !

    🙂

  • sebastien > Il suffit de modifier les permaliens en conséquence ! 😀

  • sebastien

    Bonjour Fran6, j’imagine que tu fais allusion aux réglages des permaliens dans le backoffice. Mais en fait, dans l’admin, par défaut on a « category ». On peut changer ce mot, mais si on l’enlève, la valeur par defaut (« category ») est appliquée.
    Ainsi je peux transformer
    http://www.fran6art.com/category/tutoriels/
    en
    http://www.fran6art.com/dossier/tutoriels/
    mais pas en
    http://www.fran6art.com/tutoriels/
    et c’est ça que je cherche à faire.

  • Je n’ai pas lu les commentaires, je réponds au post.

    Excellente idée cette série de tutos, elle sera complète et didactique comme d’hab. Si l’accent pouvait être porté sur les nouveaux tag « 2.7 » ; comme php wp_list_comments ou bien get_search_form() qui sont assez mal documentés… (tout au moins pour des bidouilleurs comme moi) mais qui cherchent néanmoins à tirer profits des nouvelles fonctionnalités WP et qui attendent beaucoup des PROS. J’attends le prologue avec impatience !

  • Fran6, comme je suis heureuse !!!! C’est merveilleux, c’est fantastique, c’est incroyaaaable !!! Je ne te remercierai jamais assez pour tous ces tuto si bien faits grâce auxquels j’ai enfin pu comprendre le fonctionnement de WP. Mais alors là, le retour des tuto pour designer son thème, alors là c’est la meilleure nouvelle de la semaine !!! Je me prosterne devant toi et attends avec impatience le prochain épisode de ma série préférée !!!!

  • Ravi de te faire plaisir Lilie. En tout cas, je suis bien content qu’il y ait un lectorat féminin sur ce blog, vous êtes plusieurs à vous être manifestées pour l’arrivée de cette suite de tutos et j’en suis bien content !! 😉

  • Merci Francis de recentrer le débat.
    Passons outre les pseudo singeries de vieilles trolls anonymes morbides et frustrées.

  • Je suis entrain de faire la v3 de GUIPulp et v1 de CSSPulp, je pense que ce tuto pourrait être intéressant mais je comprend pas l’idée de faire une version HTML ???

  • Zep3 > Il y a plein de manières de faire. Celle qui consiste à passer par une maquette HTML permet de positionner l’ensemble avant d’intégrer les tags WordPress. C’est pas forcément toujours utile, mais je trouve la démarche intéressante, surtout si tu dois présenter quelque chose rapidement à un client. Ici, on l’abordera tout simplement pour avoir un aperçu global du processus

  • « Merci Francis de recentrer le débat.
    Passons outre les pseudo singeries de vieilles trolls anonymes morbides et frustrées. »

    Heu, c’est de moi que tu parles ???

  • Et dès qu’il y a du lectorat féminin… il y a du crêpage de chignon… 😉
    Hum tout ça pour dire qu’après avoir parcourut et suivi 2 ans de tutos en 2 jours je crois que je suis bien partie pour devenir addict de la face cachée du web…!
    C’est comme apprendre une langue pire que le chinois mais c’est génial.

    Bref outre ce blabla, il y a encore quelques petites choses que je ne comprend pas:

    Juste sous ma sidebar, j’ai un gros signe: >
    qui ne veut pas disparaître et fais parti de ladite sidebar … (j’en suis sûre puisque je n’ai réussi à la faire disparaitre qu’en supprimant la sidebar – et ça ne fait pas non plus parti de la barre de recherche)
    bref
    J’ai scruté mes fichiers sidebar.php, index.php, style.css et même les autres au cas où et je n’ai pas trouvé d’où ça pouvais provenir … là je ne comprend paas…

  • « puisque je n’ai réussi à LE faire disparaitre » (le signe >)

  • hello ! je ne suis pas spécialiste, mais t’as fait la vérification W3C ?

  • Oui validation W3C validée verdoiement…

  • Bonjour,
    On voudrait bien t’aider mais le problème c’est qu’on ne voit pas ce signe > (sous Firefox)
    Où est-il exactement ?

  • ouaip, pareil, je ne le vois pas (firefox idem), ni sous IE6. Par contre, attention sous IE6 ça merdouille : y a 2 marges grises qui apparaissent sur les côtés du blog + une bande noire à droite de ton header et le menu de la side apparait tout en bas de ton blog, après le contenu. Ah, IE !

  • Hello Karine ! … et les autres bien entendu… Il n’y aurait pas un espace quelque part dans une div par hasard ?

  • Coucou Lilie et Bgin,
    Merci beaucoup pour vos réponses mais le wordpress sur lequel vous tombez en cliquant sur mon nom n’est pas celui sur lequel je travaille c’est la version « normale » sur laquelle je m’étais amusée à bidouiller les codes avec le theme « kubrick » avant de rencontrer les tutos de francis, là je suis en local et donc je ne sais pas si je peux vous montrer le blog sur lequel je travaille…
    Je vais vérifier mes div et je vous tiens au courant!

  • nosbe

    Bonjour,
    bon déjà, toutes mes félicitaitons pour ton blog et tes tutos, rien a redire!
    je me demandais si j’avais pas loupé un wagon au sujet des tutos « de photoshop a WP », car je ne les trouve pas sur ton blog et je vois que ce post date d’un an…
    je venez au news savoir si ce tuto est toujours d’actu or not.
    merci en tout cas 6fran^^

  • Ah ! Je crois que je suis enfin tombé sur la série de tutos qu’il me fallait pour intégrer la maquette HTML de mon nouveau thème à WordPress.

Success, your comment is awaiting moderation.