Francis Chouquet Graphiste Lettering

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

0

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:

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 »

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

109 Commentaires

  • Maria

    @ kwecheun : je viens seulement d’avoir ton message (je crée le site pour quelqu’un que je connais, donc ce n’est pas mon adresse dans le formulaire de contact) ! Un grand merci encore. La résolution de mon problème, pour ceux qui y seraient confrontés aussi :
    J’ai installé maverick (pour les utilisateurs de mac only) et… il suffisait de vérifier/corriger les autorisations via l’utilitaire de disque. Simple comme tout, mais… prise de tête quand on a le nez dans le guidon !

  • Kwecheun

    @Maria
    Jamais touché à un Mac (euhm… déjà transporté celui d’un ami lol).
    content tu ais pu résoudre le problème.

    Bonne continuation

  • Bah ? Moi… je me retrouve avec ceci (c’est-à-dire avec « information du blog » en plus) :

    <a href=" »>

    Qu’en fais-je ?

    🙂

  • Euh… le code n’est pas passé…

    <a href=" »>

  • Kwecheun

    @Porcelaine
    Aparement soucis resolu. Je ne le vois pas sur le site

  • Mon site fonctionne avec un thème que j’ai… acheté. Mais justement, je voudrais apprendre à en créer un qui m’irait… comme un gant. Et votre site est extra pour cet apprentissage !! Bravo !!

  • Laura-Lie

    Oh mon dieu, arrêtez de dire qu’il faut utiliser telle ou telle balise html pour avoir un certain style!

    Je fais référence à :

    « On va lui donner un peu de style à ce titre et on va lui appliquer la balise H1 pour avoir un titre plus gros. »

    On n’utilise pas une balise HTML pour donner du style. Le HTML c’est exclusivement pour du balisage, et le CSS pour le style!

  • Bonjour,
    J’essai de créer mon thème WordPress pour mon site web perso .

    Mais je bloc sur un détail :
    dans «  » il faut remplacer « bloginfo » par quoi ? j’ai pas bien compris

    Merci

  • *
    dans «  »
    il faut remplacer “bloginfo” par quoi ?

Success, your comment is awaiting moderation.