Création Thème Wordpress | Tutorial #6: le Header

12 avr

Création Thème Wordpress | Tutorial #6: le Header

tutoriels. 26 773 lectures

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

<h1>

devant la requête php et

</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

</div>

. Votre code dans le header et sous la balise body doit ressembler à ça maintenant:

Code pour le template header

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

34 Commentaires pour “Création Thème Wordpress | Tutorial #6: le Header”

Flux commentaires de ce billet Adresse du trackback

1

Le voila enfin ! je te souhaite une bonne continuation pour les autre en espérant qu’ils soient toujours aussi facile a comprendre

Graf1ck , le 12 avr 2007 à 16:08
2

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

fran6art , le 12 avr 2007 à 16:45
3

t’inquiète pas je préfère avoir des tuto de qualité qu’une traduction mots a mots du site wordpress.

Graf1ck , le 12 avr 2007 à 22:03
4

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

lomig , le 13 avr 2007 à 7:55
5

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

fran6art , le 13 avr 2007 à 8:10
6

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 , le 10 juil 2007 à 2:38
7

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

Francis , le 10 juil 2007 à 9:43
8

franchement c’est possible que je me trompe comme j”ai meme encore finir le tuto ;p
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 si il ya de nouveau je t’enforme

delman , le 11 juil 2007 à 0:44
9

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

florent , le 14 juil 2007 à 21:37
10

Oups …Le site en question est http://erraticwisdom.com/blog

florent , le 14 juil 2007 à 21:46
11

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

Francis , le 16 juil 2007 à 12:19
12

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

florent , le 16 juil 2007 à 13:06
13

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

Jonathan , le 5 nov 2007 à 22:00
14

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

ketzaldev , le 22 jan 2008 à 19:09
15

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 !

hd-J , le 12 fév 2008 à 23:28
16

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 :P), 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.

Heley , le 24 juin 2008 à 17:43
17

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

Pannouf , le 30 août 2008 à 16:04
18

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 , le 28 oct 2008 à 12:40
19

myllouz > Merci pour le compliment ! Tu pourrais me remettre le contenu du code, en enlevant les > et < ?

Francis , le 28 oct 2008 à 14:48
20

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 , le 28 oct 2008 à 14:57
21

myllouz > Tu veux dire l’éditeur de thème sur l’admin ?

Francis , le 28 oct 2008 à 15:07
22

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.

myllouz , le 28 oct 2008 à 15:12
23

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…

Francis , le 28 oct 2008 à 15:21
24

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!

myllouz , le 28 oct 2008 à 16:58
25

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 , le 13 déc 2008 à 11:22
26

ashile007 > C’est bon j’ai modifié la ligne de code qui manquait !!

Francis , le 13 déc 2008 à 14:24
27

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

Julien , le 30 mar 2009 à 16:19
28

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

william , le 23 avr 2009 à 13:43
29

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

Sylvaine , le 19 juin 2009 à 13:08