Fran6art 13 ans de blogging par Francis Chouquet

Mise à disposition des fichiers pour les tutoriels de création de thème

0

Vous êtes plusieurs à me les avoir demandé depuis plusieurs mois et j’ai fini par céder. Pendant très longtemps, je me suis dit que ce n’était pas une bonne chose de fournir les fichiers complets du thème réalisé à travers les tutoriels. Je me suis dit que la plupart récupéreraient le dossier et ne s’intéresseraient plus au code et au fonctionnement de WordPress.

Mais si je pense toujours que certains le feront, il existe aussi pas mal de personnes qui ont ou risquent d’abandonner parce qu’ils n’ont pas réussi à passer une étape. Et là, je trouverais ça dommage que tout le monde ne puisse pas créer son propre thème tout simplement parce qu’il bute sur une erreur qu’il ne trouve pas.


Donc, vous trouverez ci-après un zip des fichiers du thème créé dans les tutos. Vous pouvez les utiliser comme vous le souhaitez. Dans les fichiers proposés ici, il y a un lien pointant vers Fran6art dans le footer du thème. Vous n’êtes pas obligé de le laisser, mais si vous le laissiez ce serait un geste sympa pour tout le travail effectué.

Pour revenir au thème en tant que tel, celui-ci est vraiment très simple et pas destiné à une utilisation en l’état. Il est uniquement le reflet des 23 tutoriels et exercices et est un point de départ pour réaliser vous-même votre design de blog.

Le thème a été testé sous Safari, Firefox, IE6 et IE7 et est valide XHTML et CSS. Au niveau des CSS justement, j’ai apporté un petit plus que l’on retrouve sur le thème Sandbox et que j’ai particulièrement apprécié. C’est la possibilité de mettre la sidebar à gauche ou à droite en choisissant une 2ème feuille de style, reprenant les informations de positionnement de cette sidebar.

Par défaut, elle est positionnée à droite. Mais si vous souhaitez la positionner à gauche, il vous faut aller dans votre feuille de style, style.css et au niveau de la ligne suivante:

@import url('layouts-blog/1col-droite.css');

modifiez l’URL pour qu’elle pointe vers le fichier 1col-gauche.css, toujours dans le dosser « layouts-blog ». C’est un petit plus pour les intéressés !! 😉

Voilà, je crois que c’est tout ! Si vous remarquez des erreurs, n’hésitez pas à me le faire savoir ci-dessous, dans les commentaires !

Telecharger-Le-Theme-1

51 Commentaires

  • C’est vraiment sympa à toi de mettre ces fichiers à disposition, certes ça peut aider certain à passer sur un obstacle qu’ils n’arrivaient pas à résoudre, cepedant je préfère tout faire moi même, et puis d’ailleur tu donne quand même pas mal d’indications et de bout de code pour réaliser ce thème.

    D’ailleurs merci pour ces tutos qui m’ont permit de réaliser mon thème pour ACD3sign.fr, que j’ai d’ailleurs bientôt terminé.

    A+ et bonne continuation!

  • Pas mal cette idée… mais je suis heureux d’y être arrivé avant qu’elle ne paraisse !
    C’est vrai que c’est parfois un casse-tête de trouver « LA » petite erreur dans un coin.
    J’ai pu comparer en parallèle ce que j’avais fait… et trouver quelques « variantes » dont je comprends le sens maintenant.
    Ah ! Oui ! J’avais juste quand même une « anomalie » résiduelle :
    ma sidebar commençait en haut à droite de l’entête de mon blog.
    c’est très instructif de reprendre, ligne à ligne l’écriture des template
    Merci encore Fran6 pour cette « riche » idée !
    Alain

  • De rien !! 😉

  • Bravo pour ce site qui est exceptionnel, grâce à vous j’ai pu inclure beaucoup de choses dans mon site wordpress.

    Bonne continuation.

  • qu’est ce qu’on dit ? j’ai pas entendu …….

    MERCI fran6 !

  • Merci pour tes fichiers qui vont me servir à approfondir WordPress pour le blog de http://streamfr.net

    Merci encore

  • Merci Fran !

    Juste une question, tu utilise un gestionnaire de téléchargement ? Si oui, lequel ?

  • Bonjour et surtout bravo.

    Je viens de lire pas à pas les tutoriels pour arriver jusqu’ici, presque fébrile tant c’est éclairant. En effet, je dois dire que je suis profondément et très agréablement étonné de la très grande, que dis-je ? de l’extraordinaire qualité de rédaction de ce blog. Habituellement, je répugne à employer de pareils superlatifs mais là…

    Merci pour le don que vous nous faites.

  • Alexandre > Non, je n’utilise aucun gestionnaire de téléchargements. Je mets les fichiers à un endroit précis et j’ai un outil de stats qui me dit combien il y a eu de téléchargements, c’est tout…

    Pascal > Ravi de pouvoir me rendre utile. C’est toujours agréable de lire des personnes satisfaites ! 😉

  • Bonjour

    Sinon pourquoi ne pas faire un pdf de tous vos tutoriaux? ce serait pratique pour les novices comme moi.

  • Bonjour,
    C’est avec joie que j’ai suivi le tutos et que j’ai mis les mains dans le camboui.
    Ainsi, il me semble que l’on pourrait mettre les 3 lignes suivantes à la fin du footer et non dans chaque template.

    En effet, toutes les pages font appel au footer, donc forcément les éléments seront fermés.

    Encore merci pour ton travail et tes explications qui nous aident
    Bon courage

  • Arnaud

    Merci ce superbe tuto. Que du bonheur !!! j’ai enfin compris le principe !!!!
    Encore merci et bonne continuation. Là, immédiatement, je part à la recherche d’un tuto pour customizer mon blog avec photoshop (j’ai cru comprendre qu’il y en avait un sur ton site).

  • Arnaud > Pour le moment, il n’y en a que peu. Je suis en train de construire un thème pour illustrer mes tutos, et en fait, ce sera le sujet de mes tutos de l’été !! 😉

  • Un tout grand merci pour ce tuto.
    Il m’aura permis de réaliser mon premier site en php ;o)
    J’ai juste un probleme que je n’arrive pas à résoudre:
    la sidebar ne reste pas callée contre le content.
    Aurais-tu une idée?

  • pierre-françois > As-tu passé la validation ? As-tu des articles de déjà écrit ? Ou se positionne la sidebar ?

  • Et bien, non, la validation ne passe pas bien, et je ne comprends pas pq. Je reçois ce genre de message:
    Error Line 189, Column 2: document type does not allow element « p » here; assuming missing « li » start-tag.

    Que faut-il faire?

    Mais en fouinant dans les comments de ce blog, j’ai trouvé une solution de quelqu’un qui avait le même problème. C’est donc résolu en ce qui concerne la sidebar.

  • Bonjour, juste un conseil pour plus de facilité des lecteurs (et aussi un backlink pour vous^^) : dans l’article « Créez votre thème WordPress de A à Z « , mettez le lien vers cet article.
    Cordialement

  • K

    Salut Fran6,

    Je viens à bout du 23ème tutotiel. J’ai passé les étapes une à une jusqu’à la dernière. C’est la première fois que je me lance dans le Php (même si j’ai déjà réalisé un site en html sous dream). C’est une énorme contribution que tu nous apporte à nous tous, mais aussi à l’édifice WordPress et je ne sais comment te remercier. Les étapes sont claires pour les novices. Leurs assimilations, même si elles demeurent complexes peuvent également être à la porté de tous à force de persévérance.

    Je laisse mon seul commentaire sur cette page car je n’ai pas réussi la validation sur W3.org (4 erreurs) et je viens donc récupérer le contenu du fichier.

    Très bonne continuation,

    Et surtout bon été !

    NB : Depuis plusieurs mois abonné à ton site, ce n’est que ces derniers jours que j’ai pu enfin m’y coller.

    K.

  • Coucou Francis ^^
    Tout d’abord, merci énormément pour ce tuto, que je regarde depuis un moment sans oser me lancer. C’est chose faite, et c’est fou comme c’est agréable de se dire « c’est moi qui l’ai fait » !
    Par contre, j’ai un tout petit soucis au niveau de l’apparence du blog, et je ne vois vraiment pas ce que j’ai fait de mal…
    http://akindergarten.free.fr/blog (le blog de ma soeur qu’elle n’utilise pas pour l’instant, et qu’elle a bien voulu me prêter pour faire des tests)
    Ce serait sympa si tu avais une idée.
    Merci encore pour tout ce que tu fais et l’aide que tu apportes à un paquet de gens !

  • red

    ho0o0 putin de la bombe francis jbloquéè à un endroiii jcommencé a pétéè le boular mé cool jpeux rectifié mon erreur…..encore un grand merciiiiiiiiiiiiiiiiiii

  • Salut Fran6

    Un grand, que dis je énorme merci pour ce site et ces tutos… complètement newbie sur wordpress il y a 1 mois, j’ai environ lu 14 fois tous tes tutos, et ça commence grandement à prendre forme !!
    Mais mais je me tourne directement vers toi car je suis bloqué de chez bloqué et ça me gâche tout mon plaisir …
    Ma pagination ne fonctionne pas !
    Voici mon souci :

    – je désire afficher sur une page « conseil » gérée par un template que j’ai développé, des articles issus d’une catégorie spécifique. J’utilise donc la fonction query_post.
    – pour gérer un menu personnalisé, je gère 2 loop distinctes sur la page, chacune avec son query_post.
    – Le menu (première loop dans l’exemple ci dessous) doit afficher tous les articles de la catégorie ;
    – Le corps de la page, doit afficher 2 articles, puis une pagination permettant de passer aux articles suivants.

    La pagination s’affiche bien. Malheureusement, elle ne fonctionne pas.
    Lorsque je clique sur le lien « 2 », cela m’ouvre une page « conseil/page/2 » affichant… les mêmes articles que sur la page n°1 …

    1 semaine que je suis dessus, tout tenté, rien n’y fait, la pagination ne fonctionne pas.
    Donc, avant que je ne tombe en dépression sévère je me tourne vers vous … Un GRAND merci et respect pour toute aide sur le sujet

    Si jamais tu pouvais m’aider… si jamais je pouvais t’envoye rmon code… oui je sais j’en demande beaucoup plus que de raison mais justement je vais perdre ma raison… tout essayé sans succès !!!

    Raaaaa

    Pour le salut de mes nerfs, par avance un grand merci.

    Et bravo, merci.

    Grâce à des personnes comme toi le web gagne un petit peu plus chaque jour.

  • MoutMout > Tu utilises PageNavi comme plugin de pagination ?

  • MoutMout

    Merci pour ton retour !
    Oui,PageNavi … et j’ai trouvé la solution !
    En fait les multiples query posts génaient un petit peu le bouzin…
    Donc, dans la première loop, j’ai rajouté au niveau du query post une variable qui m’indique sur quelle page je suis

    Et j’ai descendu dans ma page ma deuxième loop (le menu) qui du coup n’interfère plus

    Suis je clair ? en tout cas je reste dispo à ceux qui rencontrent le même souci pour les aider

    MErci Fran6 pour ton retour

  • MoutMout > JE te conseille d’aller voir l’article du jour, c’est peut-être une solution alternative ! 😉

  • salut fran6 ! Encore merci pour les tuto que j’ai suivi à la lettre et ça marche d’enfer. Par contre, quand j’utilise tes fichiers mis à dispo, W3C me répond ça :
    Validation Output: 6 Errors

    1. Error Line 34, Column 18: an attribute value literal can occur in an attribute specification list only after a VI delimiter.
    le blog utile
    Have you forgotten the « equal » sign marking the separation between the attribute and its declared value? Typical syntax is attribute= »value ».
    2. Error Line 234, Column 6: end tag for « div » omitted, but OMITTAG NO was specified.

    You may have neglected to close an element, or perhaps you meant to « self-close » an element, that is, ending it with « /> » instead of « > ».
    3. Info Line 29, Column 0: start tag was here.

    4. Error Line 34, Column 18: XML Parsing Error: Specification mandate value for attribute class.
    le blog utile
    5. Error Line 34, Column 18: XML Parsing Error: attributes construct error.
    le blog utile
    6. Error Line 34, Column 18: XML Parsing Error: Couldn’t find end of Start Tag p line 34.
    le blog utile

    7. Error Line 34, Column 49: XML Parsing Error: Opening and ending tag mismatch: div line 31 and p.

    le blog utile

    Pardon pour la longueur de ce commentaire, mais là je bloque !
    Merci de ta réponse…..

  • Pardon, je re-post mais dans le précédent, tout le code a disparu !

    Validation Output: 6 Errors

    1. Error Line 34, Column 18: an attribute value literal can occur in an attribute specification list only after a VI delimiter.

    le blog utile

    Have you forgotten the « equal » sign marking the separation between the attribute and its declared value? Typical syntax is attribute= »value ».
    2. Error Line 234, Column 6: end tag for « div » omitted, but OMITTAG NO was specified.

    You may have neglected to close an element, or perhaps you meant to « self-close » an element, that is, ending it with « /> » instead of « > ».
    3. Info Line 29, Column 0: start tag was here.

    4. Error Line 34, Column 18: XML Parsing Error: Specification mandate value for attribute class.

    le blog utile


    5. Error Line 34, Column 18: XML Parsing Error: attributes construct error.

    le blog utile


    6. Error Line 34, Column 18: XML Parsing Error: Couldn’t find end of Start Tag p line 34.

    le blog utile


    7. Error Line 34, Column 49: XML Parsing Error: Opening and ending tag mismatch: div line 31 and p.

    le blog utile

  • merde, je suis désolée, je pollue ton blog…. y a un moyen que je t’envoie ça en pj via un éditeur de txt ?

  • C’est encore moi ! Bon, entre temps, j’ai réfléchi, et, comme j’ai bien suivi tes leçons, je suis allée voir dans le header et j’ai vu qu’il n’y avait pas de = entre p class et description. Du coup, pb résolu, ça passe nickel la validation ! Pardon pour le dérangement….

  • germaine

    Merci 999 fois pour ce tutoriel, clair et didactique… ce qui pour moi était primordial!
    Je suis graphiste, et le code en général me tue s’il n’est pas bien présenté. Là, j’ai tout compris, et en plus ça marche…

    🙂

  • AD

    Salut Fran6, merci énormément pour tes tutos, je les ai tous suivi, mais il réside de petites erreurs et là je viens de finir de lire cette page et je vois que tu avais mis les fichiers à dispo, malheureusement le lien ne fonctionne, j’aurais bien aimé pouvoir vérifier mes fichiers grâce au tiens.
    Donc peux tu remettre tes fichiers en téléchargement ou réparer le lien ou bien c peut être normal.
    Bref tiens nous au courant.
    merci merci merci encore.

  • Francis

    Salut AD,

    Je suis en vacances et je ne peux pas me connecter à l’admin. En fait, il faut modifier le D majuscule de Downloads par un d minuscule ( downloads ). Je ferai le changement qd je pourrai me loguer convenablement ! 😉

  • Feena

    Merci beaucoup pour ces fichiers ! Ma validation me trouve 16 erreurs (hum.. C’est beaucoup)… Je vais enfin pouvoir tout comparer et essayer de comprendre mes erreurs !

    Et merci pour cet excellent tutorial, c’est vraiment un plaisir de le lire et de travailler avec !

  • David

    Et hop ! Fran6art is in my bookmarks 😉
    Merci et surtout bravo pour ce superbe tuto que je viens tout fraichement de découvrir par le biais d’un de tes confrères « VidéoNoob ».
    Etant un Newbie sur WordPress et une quille en .php, par contre je connais bien le css c’est déjà une bonne chose héhé.
    En tout cas ça fait plaisir de tomber sur des dossiers aussi béton et organisés.
    Bonne continuation pour la suite.
    ++

  • Karim

    Merci beaucoup pour tous ces tutos, ça représente beaucoup de boulot !

  • Hello Francis,
    tu sais que finalement je pars toujours de ces fichiers pour créer mes thèmes, j’ai pas trouvé mieux 😉

  • Salut,

    Fran6, vous faites partie des 5-10% (mon humble approximation!) de « créateurs et innovateurs » qui partagent avec l’esprit et le coeur leurs passions!

    J’ai suivi avec assiduité et sérieux tous vos éclairés tutos et pourtant j’ai buté sur un « bug »:
    « Le sidebar » s’affichait toujours en bas..plus bas que le « footer »…(?)
    Je ne suis pas ce qu’on peut appeler un « codeur chevronné »; Je suis passionné par la « programmation web » et j’apprend dans « le tas »!

    J’ai découvert récemment WP et je l’ai adopté sans me poser de question…La communauté WP me semble être l »une des meilleurs communauté, du point de vue de « l’apprentissage collaboratif », le concept qui base et guide mon actuelle « création » (http;//gbp.webou.net/ ..qui est en cours de finalisation).

    Ainsi donc, Fran6, grand bravo et grand merci pour le zip!
    Cependant, j’aimerai bien savoir ce qui n’a pas fonctionné dans mes fichiers: le « sidebar » qui reste en bas, sur le prolongement du corps de la page!

    Très bonne continuation à tous!

  • Benoit

    Bonjour,

    Très petite correction à apporter dans le fichier « single.php ». Ne pas oublier de fermer le tag ….

    —–

    par |
    Catégorie:

    —–

    Merci beaucoup pour cette merveilleuse formation de WordPress (Thème). 🙂

  • Benoit

    Bonjour,

    Très petite correction à apporter dans le fichier « single.php ». Ne pas oublier de fermer le tag [p class= »postmetadata »]…[/p].

    —–
    [p class= »postmetadata »]
    [?php the_time(‘j F Y’) ?] par [?php the_author() ?] |
    Catégorie: [?php the_category(‘, ‘) ?]
    [/p] [— Ici —>
    —–

    Merci beaucoup pour cette merveilleuse formation de WordPress (Thème). 🙂

  • Benoit

    Bonjour, (bonne version)

    Très petite correction à apporter dans le fichier « single.php ». Ne pas oublier de fermer le tag [p class= »postmetadata »]…[/p].

    —–
    [p class= »postmetadata »]
    [?php the_time(‘j F Y’) ?] par [?php the_author() ?] |
    Catégorie: [?php the_category(‘, ‘) ?]
    [/p] [— Ici —]
    —–

    Merci beaucoup pour cette merveilleuse formation de WordPress (Thème). 🙂

  • Le truc le plus beau, c’est que je me suis bien fait chier à lire les 24 pages alors que les sources étaient dispo à la fin .. -_-‘

    Mais au final .. J’AI TOUT COMPRIS !! :DDDDD
    Merci, très bon tuto !!

    $igri_44

  • Bonjour !

    Merci pour la mise à dispo des fichiers !
    Je ne sais pas où je me suis plantée, mais j’ai dû loupé un truc durant le tuto >.<
    Tes explications m'ont permis de mieux comprendre le systéme du CMS WordPress, et c'est devenu mon CMS de prédilection.
    Ton squelette de thème est très bien fait, et la mise en design est un pur bonheur grâce à tes commentaires !

    Encore un très grand merci !
    Ciellou.

  • Fabrice Dumont

    merci beaucoup pour ce tuto ! 🙂 Passionnant et très bien expliqué !

  • BOnjour,
    mille merci pour cette mise à disposition. Cela m’évite de vous bombarder de questions et a réglé pas mal des problèmes que je n’arrivais pas à comprendre.
    Il m’en restent deux – d’autres suivront peut-être.
    1. Je n’arrive pas à donner une ligne à mon header. J’ai écrit dans style.css
    #header {
    font-family: « Lucida Grande », Arial, Helvetica, Georgia, Sans-serif;
    float: left;
    background-color:#fff;
    padding: 0 10px 10px 10px;
    color:#630;
    border-bottom:1px solid color:#630;
    }
    mais la « border-bottom » ne s’affiche pas.
    2. Le formulaire pour laisser des commentaires en s’affiche pas ni les postmetadata. Pourtant je n’ai pas touché au code de l’index tel que vous l’avez fourni ici.

    Merci d’avance pour votre réponse.

  • Dracoloss

    Merci pour ce tuto fort instructif.
    Je cherchais des tutos comme celui ci, et il est si bien expliqué, que je l’ai mis en favoris !
    Grâce à toi je comprends mieux le fonctionnement de WordPress et va essayer de le refaire, mais sans filet cette fois ci.

    Encore merci, et j’espère d’autre tuto comme celui ci !!!

    Bonne continuation.

  • Touré Oklin

    Merci pour ce tutoriel très très instructif.
    Si on pouvait avoir un aussi détaillé sur les plugins … vraiment ça serait sympa !

  • Sarah

    Bonjour et merci encore pour ce tuto qui est encore valable en 2015. Tout fonctionne je n’ai plus qu’à adapter à mon graphisme. J’en reviens pas d’avoir réussi à tout relier grâce à ton travail.

    Bravo encore

    Bonne continuation

Success, your comment is awaiting moderation.