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

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

Fran6

19 Commentaires pour “Création Thème Wordpress | Tutorial #3: Présentation des templates”


  1. 1

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

  2. 2

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

  3. 3

    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

  4. 4

    Merci pour ton soutien Cyril !

  5. 5

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

  6. 6

    Bien expliqué !

  7. 7

    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+

  8. 8

    CHAPO0O0 L’AMii POUR TON TAFF…….

  9. 9

    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 :(

  10. 10

    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.

  11. 11

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

    etienG , le 22 oct 2009 à 17:57
  12. 12

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

  13. 13

    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.

  1. 1 Créez votre thème Wordpress de A à Z ! Pingback on 20 avr, 2007 à 14:38
  2. 2 Création Thème Wordpress | Tutorial #2: Pourquoi créer son propre thème ? Pingback on 8 oct, 2007 à 15:12
  3. 3 YIN-YIN L’INTRÉPIDE » Mise à jour dkret3 1.3 Pingback on 14 jan, 2008 à 17:14
  4. 4 ::::..مدونة الدرس الأدبي والبحث الأكاديمي ..::: » تصميم قالب وورد بريس: 4 #التعرف على ملفات النماذج templates. Pingback on 9 sept, 2008 à 4:56
  5. 5 votre propre thème pour votre blog « B_L_O_G de Ben, Roro, Simon Pingback on 8 avr, 2009 à 16:35
  6. 6 Maquette WCD » article 2 Pingback on 17 nov, 2009 à 21:28

Laisser un commentaire