Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #3: Présentation des templates

0

Aujourd’hui, nous allons commencer à entrer dans le vif du sujet. Je vais essayer de ne pas faire d’articles trop long pour que vous puissiez assimiler le tout au fur et à mesure.
Si vous tombez par hasard sur cet article, mieux vaut que vous commenciez par le début, sinon vous risquez d’être rapidement perdu…

Présentation des fichiers templates:

Donc, aujourd’hui nous allons commencer à s’intéresser de plus près au blog sous WordPress et notamment à son thème et à ses templates. Tout d’abord, il faut savoir qu’un thème pour WordPress est composé de 3 éléments:

  • la ou les feuilles de style: c’est ce qui va donner le style, l’apparence que vous voulez à votre blog. Ce sont ce qu’on appelle les CSS, les Cascading Style Sheets.
  • les images: on va trouver dans le thème toutes les images utilisées par la feuille de style pour habiller votre blog.
  • les Templates: ce sont les fichiers, les différents éléments en PHP, qui vont composer la page web de votre blog visuellement. Les plus connus sont le header, index, sidebar et footer:

Remarque: dans le schéma ci-dessus, on assimilera pour l’instant le contenu, « Content » au fichier index.php, étant donné que l’on ne va aborder que celui-ci pour le moment. Sachez cependant que le contenu peut se référer à d’autres fichiers que l’index.

Voyons un peu plus dans le détail, ce que comportent ces 4 fichiers PHP:

  • Le Header (header.php): il contient toutes les infos figurant en haut de votre blog. On y trouve notamment les infos contenues par la balise <head> comme le DocType, les balises META, les liens vers les feuilles de styles CSS, ainsi que d’autres infos utiles pour un bon référencement de votre blog. En bref, le header héberge les infos importantes pour un bon affichage de votre blog dans un navigateur. Enfin, le header comporte l’entête de votre blog, avec son titre et sa description.
  • l’index (index.php): il contient le contenu de votre blog, vos articles et différentes pages. En fait, il ne le contient qu’indirectement puisque c’est dans le Loop WordPress que l’on va trouver les règles qui vont déterminer ce qui doit être affiché dans l’index. Mais nous parlerons du Loop dans un prochain tutoriel.
  • la sidebar (sidebar.php): C’est la colonne qui va afficher différentes informations comme la blogroll, les derniers articles, les derniers commentaires, soit tout l’ensemble de widgets pour une meilleure navigation dans le blog. Elle pourra se trouver à gauche, à droite ou au-dessous du contenu. D’un point de vue codage, elle sera située entre le contenu et le footer.
  • le footer (footer.php): Situé en bas de page (comme son nom l’indique), il « ferme » la page et contient différentes informations comme celles de copyright, de l’auteur ou encore de la plateforme utilisée.

Dans le prochain article, nous allons voir comment sont organisés ces fichiers templates. Je ne veux pas trop vous assomer d’un coup! Je préfère faire plusieurs petits articles au début plutôt qu’un seul gros, histoire que l’assimilation soit plus facile !

N’hésitez pas à poser des questions ou à faire des remarques.

Tutoriel suivant: 4. Hiérarchie des templates

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

Fran6

32 Commentaires

  • Benji

    Très interessant, si je connaissait déjà les éléments présentés ci-dessus, j’ai hâte de voir la suite !

  • Merci Benji, pas toujours facile de bien rédiger ce genre de billet…J’espère en tout cas être suffisamment clair !! 😉

  • Oui c’est clair, et je tenais à t’encourager pour ce projet d’articles, c’est, en plus d’être interessant : très utile !
    Bravo à toi, j’attend aussi la suite avec impatience.

    Cyril

  • Merci pour ton soutien Cyril !

  • comme benji pour le moment je connais les éléments présentés mais j’attends la suite avec impatience 😉

  • Bien expliqué !

  • Particulièremetn intéressant ce billet 😉 ke design de votre blog est très réussi lui ausssi, ce qui n’est pas pour déplaire 🙂 continudz bien a+

  • red

    CHAPO0O0 L’AMii POUR TON TAFF…….

  • Merci pour ce tuto, je sens bien que celàs va vraiment me servir, sauf que c’est encore un peut flou pour moi, mais après après bien regarder l’intégrale des explications de tout ses tutos, je pense vite comprendre, enfin j’espère 😉

    sinon vous n’avez pas de forum support ou on peut poser vos question comment on fait tel ou tel chose ???

    car ma préoccupation première pour le moment c’est de mettre en place mon header (soit l’image de haut, et puis un fond de page, mais j’avoue ne savoir trop comment faire 🙁

  • ma

    oui, certes, tuto bien utile ! mais pourquoi ne pas le franciser jusqu’au bout ? et appeler « modèle » ce qui est « template » (si je ne me trompe pas), car WP le fait bien, par exemple ds ses messages d’erreur, ce qui sème alors un peu la confusion.

  • etienG

    Salut. Effectivement, tes tutoriaux sont clairs, utiles et intéressants. Que demande le peuple ?

  • J’y connais rien et je suis ravi d’avoir trouvé ton tuto!
    Merci!!!

  • Bonjour je suis un réel débutant sur le web design et grasse a wordpress j’ai pu voir le jour alors ma question est la suivante.
    sur un blog wordpress je désir créer une page pour afficher des petite annonce genre annonces immobilières
    annonces avec photos description du bien et es ce que y a une façon qui m’aide a bien organiser mon travail pour que l’internaute ne se trouve pas devant une tornade d’information
    donner la possibilité d’effectuer une recherche par location catégorie …..etc
    je vous serais très reconnaissant.

  • Farid

    c est utiile et interessant,surtout pour les debutants comme moi.un grand MERCI!!

  • Snamiac

    Merci à Fran6art pour la qualité de son blog.

  • bouty

    Bonjour,
    mon site ne s’affiche pas correctement lorsque je l’ouvre avec internet explorer alors q’il est impec lorsque l’on utilise google chrome ou Mozilla. Savez vous me dire d’où viens le problème et comment y remédiez? La personne qui nous à créé notre blog n’a pas trouvé de solution hors il subsiste d’après des enquêtes, plus de 80% des surfeurs qui utilise Internet explorer donc le but d’être visible est loupé!! J’avais imaginé en dernier recours, de créer une fenêtre qui s’ouvrirait lors de l’ouverture du site dans laquelle j’inviterais les visiteur à utiliser autre chose qu’internet explorer mais je ne parviens pas à créer cette fenêtre. Je suis débutants et n’ai pas énormément de temps à y consacrer. Un grand merci d’avance.

  • bouty > Vous avez une URL vers ce site ? En fait, selon la version de IE, le site peut bien s’afficher ou pas, mais il existe des hacks et des détournements pour que le site s’affiche correctement sur n’importe quel navigateur…

  • Brun Tristan

    Un grand merci pour tout, tutoriel très complet, bonne continuation à toi…
    Bravo

  • bonjour
    et merci je démarre

    vos explications sont assez claires
    mais pourriez vous faire un lexique ?
    template
    blogrool
    widget
    ….
    Je me suis sentie tres bete
    et j’ai demandé autour de moi ..
    personne en sait ce que ca veut dire
    bien sur je peux toujours chercher sur google
    mais j’aprécie quand je n’ai pas besoin d’ouvir
    3 fenetres en meme temps pour comprendre
    quelques phrases
    Merci
    Elico

  • MORHANNA

    Bonjour

    j’ai une idee de site mais je n’arrive pas a vraiment le mettre en forme. Est ce que c ‘est dans tes cordes et combien tu prends??? J’ai déjà l’hebergeur OVH et wordpress. Je n’arrive pas a créer un site WP qui me ressemble et qui réponde » a ce que je veux y mettre . J’y connais pas grand chose en informatique.

    Merci de me répondre

    Bien Cordialement

    M

  • Loloof64

    Excellente introduction : simple, claire et concise. Merci beaucoup 🙂

  • Une bonne conception vraiment simple, claire et concise , merci bcp 😉

  • Bonjour Francis :),

    Je viens de tomber sur ton blog, car je cherchais un header pour mon WordPress et j’ai trouvé très intéressant de pourvoir faire ça moi même cela semble passionnant.

    Alors je me lance dans cette aventure avec toi !

    Merci de partager ta passion avec nous !

    Normand

  • Bon courage Norman 🙂

Success, your comment is awaiting moderation.