Ce tutoriel est le sixième d’une série articles sur la création d’un thème pour Wordpress de A à Z. Si vous prenez le train en cours, je vous conseille fortement de commencer par le premier tutoriel de la série.
Aujourd’hui, nous allons mettre du contenu dans nos templates. On va commencer par faire apparaître le titre et la description du blog en haut de la page. Ces informations vont être “stockées” dans le Template header.php. Vous vous souvenez sûrement que dans le précédent tutoriel, on a “dit” à l’index, via un template tag, d’aller chercher dans le header les informations à afficher sur la page web. On y a ajouté les différentes informations d’entête de la page web, sous les balises head, mais on n’a pas encore mis quoi que ce soit dans les balises body, celles qui affichent le corps de texte.
1. Insertion du titre du blog
On va tout d’abord ajouter le titre du blog, que l’on va appeler par le biais d’une commande PHP:
1 | <?php bloginfo('name'); ?> |
.
Par cette requête, on va appeler le nom du blog dans la base de données, tel qu’on l’a écrit dans l’administration de Wordpress. On va chercher les informations du blog (bloginfo) et à l’intérieur de celles-ci, on va chercher le nom du blog (name).
Insérez donc cette ligne de code sous l’ouverture de la balise body. Sauvegardez et allez voir ce qui se passe sur votre navigateur préféré. Le titre du blog apparaît en haut à gauche.
On va lui donner un peu de style à ce titre et on va lui appliquer la balise H1 pour avoir un titre plus gros. Pour cela, ajouter
1 | <h1> |
devant la requête php et
1 | </h1> |
à la fin de cette même requête. Sauvegardez et rafraîchissez une nouvelle fois le navigateur. Le titre du blog apparaît maintenant en plus gros.
Ce titre, on va lui donner un lien. C’est le titre du blog, et donc en cliquant dessus, le visiteur pourra retourner à la “homepage” du blog. Pour ce faire, on va ajouter la ligne de code suivante à l’intérieur de ce que nous venons d’écrire.
1 | <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> |
On a ici les informations classiques XHTML pour un lien hypertexte et comme destination du lien, on va aller chercher l’information dans la base, toujours sous les informations du blog (bloginfo) et cette fois-ci, on va récupérer l’URL du blog (’url’). Ajoutez donc ce code, sauvegarder et rafraîchissez le navigateur. Le titre du blog est maintenant souligné et de couleur bleu. Il s’est transformé en lien.
2. Insertion de la description du blog
On va maintenant ajouter la description du blog sous le titre. Si vous avez compris le fonctionnement les tags PHP ci-dessus, vous devez déjà avoir trouvé comment on va afficher la description du blog: tout simplement en ajoutant une commande PHP qui va nous permettre d’aller dans les informations du blog (bloginfo) et d’y récupérer la description du blog, appelée tout simplement ‘description’. On obtient alors la ligne de code suivante:
1 | <?php bloginfo('description'); ?> |
. On va venir la mettre sous la ligne de code du titre du blog. Sauvegarder et rafraîchissez votre navigateur. La description du blog apparaît maintenant sous son titre.
3. Préparation de la mise en forme
Pour terminer ce tutoriel, on va s’intéresser à la mise en forme du header. Par la suite, quand on étudiera les feuilles de style, les CSS, on va vouloir modifier l’apparence du header. Et pour se faire, on va donc devoir créer des balises de mise en forme, div ou span. Je ne vais pas expliquer ici comment fonctionnent les CSS. Si vous ne les connaissez pas, je conseille un de ces livres, très bien faits et qui vous aideront rapidement à comprendre ce que sont les CSS.
Donc, pour revenir à notre mise en forme, on va “entourer” le titre et sa description d’une DIV, histoire de pouvoir travailler sur la mise en forme par la suite. Bien comprendre ici la notion de “boîte” ou de “cadre” qui enveloppe les informations. Cette DIV, on va l’appeler “header”, tout simplement et on va la placer avant et après les informations du header. Ca nous donne ça:
1 2 3 | <div id="header"> <!-- informations du blog --> </div> |
Pourquoi une “id” ? Parce que les “id” sont uniques. On utilisera les “class” pour les articles par exemple, car il n’y aura pas qu’un seul article.
Sauvegarder votre header.php.
Dernière petite chose, on va en profiter pour créer la “boîte”, la DIV qui va envelopper l’ensemble de la page web. Dans les CSS, on aura des infos qui seront valables pour l’ensemble de la page web, donc il est important d’avoir cette “boîte” qui va envelopper toute la page web et ainsi toutes les autres boîtes qui intéresseront uniquement à des parties de la page web. Cette boîte ou DIV, on va lui donner le nom “page”, tout simplement. On va la placer sous la balise body, dans le header comme suit:
1 | <div id="page"> |
et on va la refermer dans le template index, juste au-dessus de la balise de fermeture du body, en insérant le code
1 | </div> |
. Votre code dans le header et sous la balise body doit ressembler à ça maintenant:
Sauvegardez vos fichiers. On vient de créer l’enveloppe de la page web pour les futures mises en forme.
Voilà, c’est tout pour aujourd’hui !! La prochaine fois, on va attaquer le contenu, c’est-à-dire les articles.
N’hésitez pas à poser des questions ou à faire des remarques !
Tutoriel n°7: “Introduction au loop Wordpress”
Fran6
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Le voila enfin ! je te souhaite une bonne continuation pour les autre en espérant qu’ils soient toujours aussi facile a comprendre
Merci ! J’ai mis un peu de temps pour le pondre mais j’ai une expo qui commence à la fin du mois j’ai encore beaucoup de boulot !!
t’inquiète pas je préfère avoir des tuto de qualité qu’une traduction mots a mots du site wordpress.
salut,
j’attend toujours avec impatience le prochain billet de cette série…toujours super simple et relativement complet quand même : du très beau travail de vulgarisation…
Chapeau. Je vais finir par crée mon propre thème, si tu continues
Ben c’est un peu le but non ??
Ce qu’on voit là c’est une version simple et de base pour créer un blog. Si tu veux utiliser cette version, il faudra l’optimiser pour le référencement et aussi travailler le loop (on va voir ça la prochaine fois!). Mais on prendra le temps qu’il faudra mais on va essayer d’aller jusqu’au bout. J’ai même envie de comparer ce thème aux principaux thèmes utilisés comme Kubrick, Sandbox ou K2 pour qu’on puisse comparer les attributs de chacun. Alors saty tuned my friends !! 
je crois qu’il vous manque d’un div du fermutere dans cette exemple
j’exlique :
on ouvre un div (bloc page) que ta fermer dans index
mais dans index on a ouver aussi un div(bloc entete) mais la je crois que la fermutaire a etais oublié !!!!
a l’affichage en remauqe rien c’est normal ya pas de style pour le moment et IE gomme cet oublie mais ca reste un faute non !!!
MedBolg
Actualités Web 2.0 —– ce qui a etais oublieé
delman > J’avoue que j’ai du mal à comprendre ce qui peut manquer…On ouvre la div header et on la referme, idem pour la div page. Quelle est cette div que j’aurais ouvert dans l’index ? Il ne me semble pas avoir ouvert de div “header” dans l’index… mais je peux me tromper !!
franchement c’est possible que je me trompe comme j”ai meme encore finir le tuto ;p
si il ya de nouveau je t’enforme 
mais ca reste que c’est pas trop grave comme tout marche pour le moment
la dernier possibelite c’est que je doit changer mes lunette
Bonsoir,
Tout d’abord, franchement merci bcp pour ce tuto, c’est génial d’aider les débutants comme tu le fait !!
Je ne sais pas si je poste au bon endroit, mais en piste : Je me permet une question, car je galère bien comme il faut.
Avec tes infos, je suis en mesure de créer un nouveau template pour mon blog, mais je calle face à cette difficulté :
Comme sur ce site , je souhaite mettre mes catégories sous le titre de mes pages qui sont dans le header. Un conseil, une piste, un tuyau stp ?
Muchas gracias et bien à toi
Oups …Le site en question est http://erraticwisdom.com/blog
Salut Florent,
Sur le blog dont tu parles, les catégories ne sont pas dans le header mais bien dans le contenu. Tu as fait les tutos qui suivent concernant le loop wordpress ? Je pense que tu trouveras toutes les réponses à tes questions dedans ! Tiens-moi au courant si ça coince toujours !!
Merci pour ta réponse et ta disponibilité,
En effet, je n’ai pas terminé tous les tutos. Alors, je vais m’accrocher.
Alors, au boulot, hop hop
Salut, tout d’abord merci pour cette série de tutos qui m’est très utile et va me faire gagner un temps précieux.
J’ai un problème tout bête mais que je n’arrive pas à résoudre.
Je développe mon site en local (wampserver sur windows xp) sous l’alias “wordpress” et lorsque je clique sur le titre du blog (url:http://localhost/wordpress), j’obtiens une erreur 404, et seule l’url:http://localhost/wordpress/ (avec le slash à la fin) fonctionne mais je dois la rentrer à la main (pas pratique).
Merci d’avance et bonne continuation
Salut Francis,
J’utilise Wordpress, et je voudrais rajouter un Menu déroulant dans mon header.
(Dis moi si tu ne vois pas ce que je veux dire)
Comment est-ce possible??
Mon theme va cherche la fonction suivante pour le header :
Je suis allé sur le site de worpress pour savoir a quoi correspond cette fonction :
C’est un appel qui est fait dans le fichier general-template.php. La fonction est la suivante :
function wp_head() {
do_action(’wp_head’);
}
Je ne sais pas exactement ce que ca fait
Est ce que tu pourrais me donner quelques explications, ou me renvoyer un lien qui m’expliquerait ce que fait cette fonction (même en anglais, ce n’est pas grave)
Merci beaucoup,
Et bravo pour ce blog…
Louis
J’ai une petite question suppléentaire concernant le header, car je rencontre un probleme de mon coté…
J’ai créé le fichier blog.php qui me sert d’index pour mon blog, car la page d’accueil de mon site est une page fixe, je voulais donc avoir mon blog et les articles qui s’y trouvent sur une page avec comme adresse …/blog
Jusqu’ici, tout va bien, tout marche, c’est parfait, comme tu nous l’a expliqué dans ton tutorial sur la hiérarchie des templates, mon nouveau blog.php vient se positionner en prorité de mon index,php original. Le seul probleme, c’est que maintenant le titre de mon blog, a l’adress …/blog/, est 404 not found, puisque dans le fichier header je n’ai pas renseigné que si la page était blog.php on devait appeler cette page blog. Comment puis je donc faire cela maintenant ?
(J’espere avoir été clair… Merci d’avance !
Bonjour Francis,
Comme tous, je te remercie pour ce tuto excellent !!!
J’aimerai rajouter une chose dans le header (déja moi personnellement j’ai mis la barre de recherche en bas a droite du header, j’aime mieux
), j’aimerai donc mettre l’heure et la date du jour en bas a gauche du Header, partie qui se mettrai à jour automatiquement…
Est-ce possible, et si oui, comment?
J’espère que tu, ou vous autres lecteurs, pourraient m’aider, je vous en remercie.
Bonjour Fran6.
Je voulais savoir comment on pouvait poser un lien sur l’ensemble de son header et non pas sur le titre comme sur ce genre de blog.
http://blog.gonzaguedambricourt.com/
Merci d’avance
Bonjour Francis,
j’avance petit à petit grâce à ce tuto, je n’en reviens pas! C’est vraiment un super travaille que tu as fait, très généreux de ta part de nous mettre la création de thème à dispo.
J’avais qq pb hier pour l’installer en local mais finalement c’est ok.
En revanche, comme je commence tout juste dans le php, j’ai une petite question.
J’ai bien placé le dans le header mais quand j’essaie d’aller voir ce que ça donne sur le site, la page blanche m’affiche : “le thème n’existe pas”.
Même en retirant le , la page m’affiche toujours pareil.
D’où vient mon erreur??
Merci
myllouz > Merci pour le compliment !
Tu pourrais me remettre le contenu du code, en enlevant les > et < ?
En fait, il m’est apparemment possible d’avancer sur le header si je travaille sur l’editeur et qu’à la fin je glisse le nouveau header terminé à la place de l’ancien le dossier CréationTheme du MAMP. Mais en revanche, je ne peux pas travailler à partir du tableau admin sous wordpress.
Est-ce qu’en fait c’est comme ça qu’il faut faire?
myllouz > Tu veux dire l’éditeur de thème sur l’admin ?
Non justement, je ne peux travailler qu’à partir de mon editeur de texte Smultron et non pas celui de l’admin. Je fais donc mes modif sur Smultron, j’enregistre mon nouveau header et je l’insère sous le dossier CreationTheme qui est dans Mamp/wordpress/…
Si je tente de rafraîchir mon editeur de thème sur l’admin wordpress (qui j’y modifie quelque chose ou non), ça m’indique que le thème demandé n’existe pas.
En revanche si je bosse sur Smultron et qu’ensuite je colle ce nouveau header donc dans MAMP, les modif s’affichent convenablement sur mon blog.
Vérifies les droits d’accès (CHMOD) pour les différents dossiers de WP, peut-être n’as-tu pas les droits pour modifier directement à partir de l’admin…
Merci Francis,
j’ai changé les droits à la racine de mon FTP et toujours le même souci. Du coup je vais poster ce problème sur le forum de wordpress pour savoir ce qu’il en ressort. En attendant, je vais poursuivre ton tuto sur mon Smultron et les transférer ensuite sur le MAMP. Très étrange…
Merci bcp en tout cas!
slt
merci pour ce tuto jele trouve vraiment interessant .
mais je juste avoir la ligne de code qui manque ds la partie “2. Insertion de la description du blog” vu que je ne suis pas doué en php .
Merci encore une fois
ashile007 > C’est bon j’ai modifié la ligne de code qui manquait !!
Bonjour Francis !
J’ai découvert Wordpress récemment et je trouve ça vraiment terrible comme système ! Un grand merci pour tes tutos ils m’ont vraiment bien initié à la création de thème.
Depuis plusieurs jours je butte sur un problème. Si tu n’as pas le temps ou l’envie de jeter un oeil, je comprendrais tout à fait !
Je suis en train de créer un thème pour un ami illustrateur. Le problème vient du menu qui est en flash:
blog
Je l’ai intégré en utilisant swfObject 2, j’ai rajouté le paramètre “allowScriptAcces=always”, mais rien à faire les liens ne fonctionnent pas.
J’ai repris ce même menu que j’ai intégré dans une somple page html et là les liens fonctionnent:
test
Je me dis que le problème doit être lié à WP (2.7), mais j’ai beau chercher sur le web je ne trouve pas de solution. Tu aurais un idée ?
En tout cas j’attends avec impatience la suite des tutos !
Merci !!!
Salut francise,
Je parcours actuellement ton blog et suis tres captivé par ton tutorial sur le theme wordpress.
J’ais une requete a te faire. -plutot une question-
Est ce qu’il est possible d’afficher un ou des articles d’une catégorie définie?
merci de me répondre
et comme j’ai oublié:
TRes beau travail ce blog, chapo
Et voilà, je vais être en retard au travail.
Cette fois-ci, je m’arrête et m’interdis de cliquer sur le chapitre suivant.
Jusque là tout fonctionne chez moi, mais je vais relire ce soir ce chapitre ci, surtout la partie sur les DIV!
A ce soir alors
je doit avouer que sa me parait bien compliquer tout celas
est-ce vraiment obliger qu’on fasse tout celàs ???
moi le truc que je voudrait pour pas trop compliquer c’est commencer à partir d’un thème existant de wordpress et modifier et mettre en place mon header et fond de page c’est tout, je connait tout particulièrement un site qui utilise le thème epsilon de wordpress auquel je trouver celàs bien, mais je me rechercher en faite au départ un super thème wordpress avec menu à gauche mais j’en est pas du tout trouver qui m’intéresser vraiment et que j’aurait pu adapter
donc j’ai pris epsilon, même si j’ai tendance à me dire que j’aimerait avoir avec menu à gauche. je vous tout de même le site en question dont je vous parle qui utilise le thème epsilon c’est: http://just-lorie.net
moi j’aimerait en gros à peut près avoir celàs mais avec menu à gauche, pour faire un peut ce dont j’avais commencer avec mon anciens créateur de site dont j’utiliser qui était e-monsite.com mais avec pub donc qui ne me plait plus trop
si vous pourriez m’aider sa serait vraiment volontier, car je suis vraiment débutant dans wordpress et j’avoue ne pas trop y comprendre grand chose, sinon je précise que mon hébergeur désormait est free.fr
merci d’avance d’une réponse.
Ne pouvez vous pas mettre les sources complètes de vos pages car vous ne spécifiez pas bien pour chaques bouts de codes dans quelles pages les ajoutés. Et je passe un temps fou à essayer de trouver ces informations enfouis dans votre tutorial à ralonge pour des informations si simple. Meme si votre tutorial s’adresse au plus débutants afficher les sources completes des pages à la fin de vos articles ne serait que des plus bénéfique.
Merci Francis (?) pour ce tuto, il me tardait ded’être autonome avec WordPress et de découvrir la création de thèmes de manière simple, et là franchement c’est toi qui m’a tout montré!
Donc, bravo super boulot que tu as fait là.
Et encore merci!
salut ts le monde,
Super ton blog francis bravo , sa m’a aidée à mieux comprendre et utiliser wordpress
Par contre j’ai un petit souci moi le titre du blog s’affiche avant même que je mette ce bout de code
bizzard!!!!! comment faire pour qu’il ne s’affiche pas ????????
merci
Merci pour ce merveilleux tuto !!! J’espère réussir à faire mon propre thème sans souci
Pour le moment, tout roule, les explications sont très claires ! Merci Fran6 !!
Merci de ” tout coeur ” Francis.
Enfin, un tuto en français clair et précis et qui ne prend pas la tête ( je me débrouille en anglais, mais bon ! : 250 pages de termes techniques…..) !
Puis, tu sais, j’ai 55 ans et c’est seulement le mois dernier, que je me suis décidé à réveiller mes neuronnes en leur faisant “bouffer” du php, du css, du xhtml, etc…
Encore un grand merci !
Sincères Salutations
Pascal
coucou…je me lance à la conquête de ce WP…tes tutos sont très clairs, et je suis habituée au langage etc…je crois que j’ai bidouillé quelquepart car quand je clique sur mon thème crée avec tes explications…moi j’obtiens le thème kubrik alors que si j’ai bien suivi: je devrai avoir une page blanche, le titre et la description…comment je fais??
suis un peu perdue dans l’interface en fait lol
merci Francis, a bientôt…
salut, c’est re-ninie…j’ai tout désinstallé de mon pc et tout mis sur mac…et suis bloquée au même endroit…je pense qu’il faut que je remplace ‘name’ description’ et ‘url’ par les miennes mais je ne sais pas ou c’est…
merci francis.
ahah…i’m the best…en fait, le fait d’avoir énormément bidouillé mes templates blogger, j’étais perdue..;j’ai compris…allez, zoup…on passe au #7 lol…merci, merci pour tes tutos…