Francis Chouquet Lettering + Logo Design

Création Thème WordPress | Tutorial #5: Création des Templates

0

Aujourd’hui, nous allons entrer dans le vif du sujet puisque nous allons commencer la création de notre thème en créant le dossier du thème ainsi que les différents templates de base que nous allons utiliser. Si vous découvrez la série de tutoriels aujourd’hui, je vous conseille fortement de commencer par le début sinon vous risquez de ne pas tout comprendre.

1. Création du dossier du thème

Vous connaissez déjà sûrement où se situent les dossiers pour les différents thèmes que vous avez sur votre serveur, mais un petit rappel ne sera pas de trop. Le dossier des thèmes se situe sous: WordPress > wp_content > themes. Au départ, nous n’allons créer nos différents fichiers de base, l’index.php, le header.php, le sidebar.php, le footer.php et la feuille de style style.css.

  • Vous allez donc commencer par démarrer les serveurs php et apache si vous travaillez en local.
  • Créez ensuite un dossier sous l’emplacement décrit ci-dessus. On va l’appeler « Creation Theme« .
  • Ouvrez votre éditeur de texte préféré et enregistrez le fichier en l’intitulant index.php. Faîtes de même avec les autres templates ainsi qu’avec la feuille de style, style.css.
  • Vous devez maintenant avoir 5 fichiers sous le dossier « Creation Theme », lui-même sous le dossier « Themes » de WordPress.
  • Nous allons maintenant travailler sous ces différents fichiers et les renseigner au minimum au fur et à mesure.

2. Création du header et de l’index

2.1. Création du template header.php

Nous allons commencer par le HEADER (header.php) et l’INDEX (index.php). Pourquoi ? Parce que c’est le header qui contient les informations de base qui vont permettre à la page web de bien s’afficher dans le navigateur. Le header comprend notamment:

  • le DOCTYPE, qui nous fournit les informations sur le codage utilisé par la page web,
  • la balise HEAD et tout ce qu’elle comporte: les balises META, le titre du blog, le lien vers la feuille de style et vers les flux RSS.
  • L’ouverture de la balise BODY.

Toutes ces informations sont les bases pour créer votre blog. Sans le doctype, le navigateur ne saura pas quoi ni comment afficher la page web. Sans la balise HEAD et ses différentes infos, le navigateur ne saura pas non plus quel type de code utiliser, comment s’appelle le blog, où sont les infos de style et s’il y a un flux RSS. Bref, c’est la base de la base. Sans ça, on ne va nulle part.

Ensuite, on va travailler tout de suite dans l’index parce que c’est le fichier central du thème. C’est chez lui que l’on va dire où aller chercher l’information. C’est donc dans ce template que l’on va dire d’aller dans le header.php pour trouver les informations de base pour notre thème.

Ouvrez donc votre template header.php et saisissez-y les données suivantes. Ce sont les données de base à renseigner. On verra par la suite comment les améliorer et les optimiser. Mais pour le moment, on va garder quelque chose de simple, juste pour concevoir l’architecture de notre thème:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11">   <title><?php bloginfo('name') ?><?php if ( is_404() ) : ?> &raquo; <?php _e('Not Found') ?><?php elseif ( is_home() ) : ?> &raquo; <?php bloginfo('description') ?><?php else : ?><?php wp_title() ?><?php endif ?></title>   <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?>   <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); <?php wp_head(); ?>   </head> <body>

On retrouve dans ces informations tout ce que l’on a évoqué ci-dessus. La balise titre est déjà quelque peu optimisée mais plus tard, je conseillerai un format optimal pour un meilleur référencement par le biais d’un plugin incontournable. Ces informations se terminent par l’ouverture de la balise BODY et donc le contenu de notre page web. Vous allez comprendre un peu plus tard pourquoi on l’a ouvert ici.

N’oubliez pas d’enregistrer votre fichier et ouvrez maintenant le template index.php.

2.2 Création du template index.php et présentation des template tags

En fait, l’index va nous donner les instructions pour nous permettre d’aller chercher les informations au bon endroit. Ici, on va commencer par lui dire d’aller chercher les infos du header dans le template header,php. Pour cela, on va utiliser des template tags. Les template tags sont des petits morceaux de code en PHP qui cont relier les fichiers entre eux. Ici, ce petit bout de code va être inséré dans l’index et va nous dire que l’info concernant le header se trouve dans le fichier header.php. Cette ligne de code c’est la suivante:

1 
<?php get_header(); ?>

On va donc aller chercher le header de cette façon pour l’incorporer d’une certaine manière à l’index. Comme je l’ai dit plus tôt, on pourrait très bien n’utiliser que l’index et mettre toutes les infos dedans, mais je trouve que pour une meilleure organisation du thème, mieux vaut avoir les fichiers séparés. On pourra mieux les optimiser séparément.

Reparlons ici de l’ouverture des balises HTML et BODY sous le header. Etant donné que l’on va aller chercher ces informations à partir de l’index, il est important que l’on pense à refermer ces balises. Imaginons toutes les infos citées ci-dessus dans l’index, il nous faudrait penser à refermer ce qui n’est pas refermé. C’est le cas des balises HTML et BODY. On va donc les fermer dans le template index.php:

1 2 
</body> </html>

Dans l’index, saisissez donc ces trois lignes de code:

1 2 3 
<?php get_header(); ?> <!-- ouvrir header,php --> </body> </html>

A droite de la requête PHP, vous pouvez voir un commentaire. Ces commentaires sont toujours utiles pour se repérer. Utilisez-les autant de fois qu’il vous est nécessaire pour y voir plus clair et utilisez les signes <!– et –> pour les encadrer.

Enregistrez votre template index.php.

2.3 Création de la feuille de style, style.css

Ouvrez le fichier CSS créé précédemment et saisissez-y les informations suivantes:

1 2 3 4 5 6 7 8 9 10 
/* Theme Name: Creation Theme Theme URI: http://www.fran6art.com/ Description: The first theme created by Francis Chouquet. Version: 0.1 Author: Francis Chouquet   Creation Theme by Francis Chouquet || http://www.fran6art.com   */

Vous pouvez modifier ces informations en les remplaçant par celles que vous voulez. Ces quelques lignes vont donner les infos de base de votre feuille de style. C’est notamment elles qui vont permettre l’affichage de votre thème dans l’administration de WordPress.

Enregistrez votre fichier et fermez maintenant votre éditeur de texte et allez sur l’administration de votre blog, onglet « Thème » ou « Présentation » selon la version de WordPress que vous avez. Si vous avez bien tout fait comme je vous l’ai indiqué ci-dessus, vous devez voir apparaître le nouveau thème créé:

image de la creation du theme WordPress

Sélectionnez-le et « affichez le site ». Pour le moment, vous n’avez qu’une page blanche mais votre titre apparaît déjà dans la barre d’entête de votre navigateur.

Si vous souhaitez visualiser une image à vous, il faut que cette image fasse 300 x 240 pixels et qu’elle se nomme screenshot.png. Pensez également à l’insérer dans le dossier de votre thème.

Dans le prochain billet, nous allons voir comment remplir le header pour voir apparaître le titre et la description du blog. On s’arrête donc pour aujourd’hui et je crois vraiment que c’est suffisant ! 😉
Bon week-end

Tutoriel suivant: 6. Le Header

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

175 Commentaires

  • Boris > Va voir au tuto 23, tu trouveras les fichiers du thème, tu pourras comparer… Et utilises un autre éditeur de code que Dreamweaver, ça peut biaiser le contenu du code !! 😉

  • Boris

    merci pour cet information…

    j’ai télécharger le contenu, qui en effet marche sur wordpress…

    j’ai comparé… et … rien… j’ai fait exactement pareil 😀

    donc, la j’ai télécharger smultron unediteur gratuit pour eviter dreamweaver , et je retente l’operation 🙂

    dans tout les cas, les fichiers que j’ai recu vont me permettre de continuer donc merci merci et encore merci 😀

  • Boris

    Je viens de recommencer avec smultron et… CA MARCHE !!!

    donc Dreamweaver bouuuuuuuuhhhhh !!!!!

    vous aviez raison grand maitre Francis 🙂

    merci encore 🙂

  • Thierry

    Bonjour Francis et merci pour ce tutoriel.
    J’en suis a la partie 5 de la création, j’ai comme Boris, copier et coller les infos sans les changer, envoyer le thème en FTP via filezilla, mais quand je me rend sur thème de WordPress, rien apparait…
    L’horreur, moi qui pensais avoir enfin trouver les solutions à mon problème…
    J’ai la dernière version de WordPress 2.9.1. , peut être le problème provient-il de ça?

    Merci d’avance,
    Thierry

  • Bonjour Thierry,

    Allez chercher les fichiers du thème au niveau du tuto 23 et vous pourrez comparer avec votre code ! 😉

  • Lyne

    Je suis au tuto 5, j’ai tout remplis comme tu as dis de le faire mais wordpress (version 9.2) me dit qu’il manque la feuille de style.
    Je ne sais pas du tout quoi faire…
    merci de ton aide !

  • Bonjour,

    je taff sur un site sous WP. Mais je n’arrive pas à insérer dans l’en-tête l’affichage de mon logo-titre (bandeau).

    L’appel au logo est je pense ici :


    <a title=" » href= »/ »><img src="/images/LogoCMCILUnev2.tif » id= »logo » alt= » » />

    J’ai modif images/logo.gif par défaut par mon logo chargé dans le dossier adéquat mais ici rien !

    J’ai besoin de conseils !

  • Angélique

     » vous n’avez qu’une page blanche mais votre titre apparaît déjà dans la barre d’entête de votre navigateur. »… Tout semblait bien parti et patatras : le nom du blog ne s’affiche pas dans l’entête : d’où pourrait venir le problème?

    en tout cas grand merci pour ce tuto sur lequel je m’apprête à passer de longues et belles heures 🙂

  • Bonjour Francis,

    Une petite correction concernant la partie 2.1 de ton explication :

    Dans la portion de code à insérer dans header.php, est doublé.

    A part ce petit détail rien à dire, c’est clair, bien expliqué, merci beaucoup !

  • Bonjour Francis et merci pour tes efforts. Perso, après avoir fait « copier »/ »coller » pour créer les trois fichiers, sur mon site (gombs.free.fr) j’ai le code source qui s’affiche… Que faire ? Merci encore

  • Réponse à Franck :
    Si le code source s’affiche encore, c’est que le PHP n’est pas interprété. Tu as dû soit oublier d’installer PHP sur ta machine, soit oublier de l’activer.
    Vu l’adresse que tu données, tu es chez free. A l’époque, il me semble avoir fait une manip pour activer PHP, je ne sais plus laquelle, ça remonte a qq temps.
    J’ai lu ce lien : http://ustrici.wordpress.com/2.....-free-fai/
    Essaie-ça.

  • Bonjour FRancis.

    MErci pour ce superbe tuto qui va (surement) me permettre de créer mon wordpress personalisé bien a moi.

    MAIS ! ( y’a toujours un mais )

    voilà. Dès l’insertion du code fourni dans le header.php j’ai l’erreur suivante :

    Fatal error: Call to undefined function bloginfo() in /homez.313/samuelfd/www/blog/wp-content/themes/creation_theme/header.php on line 5

    ce qui semble signifier qu’il y un problème avec mes fichiers ou avec le code.

    peut tu m’aider ?

    voici ma ligne 5 :

    » »

    merci !

  • Ah bah merde j’ai l’air con elle s’affiche pas. de toutes façons c’est un C/C du code fourni.

  • Vérifie ton code, visiblement il y a une fermeture de balise en trop…

  • Franchement j’ai cherché… pas trouvé…

    /* » »

    */ voila ma ligne 5 entre 2 balises Com’.

  • sophie

    Salut,

    je viens de m’initier au blog en passant par mamp et WordPress en local…j’ai suivi le tuto pour personaliser le thème et je bloque à ce niveau:
    Dans les thèmes sur wordpress local on devrait voir creation theme comme un encart et moi j’ai une colonne avec thèmes endommagés, creation theme description: la feuille de style manque…
    mais dans mon fichier creation theme de word press, j’ai bien ma feuille style.css.
    ???? Je flanche…:(

    Merci.

    ps: par la suite si tout va bien, on n’a juste à exporter le fichier du local au wordpress du net pour que le blog soit visible par tous et mis à jour selon nos modifs en local???

    Merci.

    Sophie

  • moonti

    Bonjour,
    Je suis tombé sur ton site Francis par pure hazard et je le trouve super bien fait très complet, félicitation. Mais malgré tout j’ai un petit probleme lorsque je vais sur l’interface de wordpress j’ai effectivement mon nouveau theme qui apparait mais lorsque je veux le prévisualisé j’obtient ce message « Fatal error: Call to undefined function get_header() in /homepages/17/d336201122/htdocs/index.php on line 1 ». Je débute question html php et css et la je suis totalemnt perdu et j’ai tellement hate de pouvoir continué avec la prochaine leçon… J’espere que tu vas pouvoir m’aider…
    Merci d’avence
    Moonti

  • J’ai eu le meme probleme. J’ai meme demande a une prof de wordpress. Rien a faire j’ai jamais pu le regler. J’ai laisse tomber. Si t’as la solution…. Dis le ici…

  • Va faire un tour aux tutos 23, tu y trouveras les fichiers du thème et tu pourras comparer avec le tien !! 😉

  • Lucie

    Oh là là j’ai pas de chance! J’ai tout suivi à la lettre! Promis!
    Et pourtant une fois arrivé sur la page « Themes » dans « Apparences » de mon WordPress, il n’y est pas, il n’y a pas le petit carré avec le nom du theme et la description en bas comme sur l’exemple que tu nous as mis.

    La première fois ça n’avait pas marché car j’avais enregistré (via TextEdit sur mac) en .rtf, j’avais pas le choix, donc ça m’a mis comme titre par exemple « index.php.rtf » tout, y compris pour « style.css ». Là arrivé sur WordPress ça m’a mis qu’il ne détectait pas la feuille de style. Ok. J’ai enlevé le .rtf au nom « style.css.rtf » pour ne laisser que « style.css » et là, plus rien sur WordPress. Même pas de message d’erreur comme avant.

    Ou est le problème ?
    Help!

    En tout cas MERCI mille fois pour ce tuto! C’est hyper bien expliqué!

  • Lucie

    (et ce n’est pas sur un ton moqueur, je pense vraiment que c’est un super totu!)

  • Kryst

    Bonjour bonjour!
    Ces articles sont super pour les débutants en effet!
    J’ai cependant un petit souci (qui ne concerne pas la création de templates à proprement dit) par rapport à header.php. Impossible de mettre la main sur ce dossier parent au thème (le mien est le twenty ten). J’aimerais changer de favicon et je ne sais donc pas trop où insérer le code de mon icône préalablement créée et téléchargée dans la bibliothèque de média. Je ne travaille pas en local et je personnalise mon blog direct sur internet.
    En espérant que tu pourras m’aider,

    Bonne journée!

  • fr4nck

    @ francis: laisses tomber textedit pour ça et utilises plutôt dashcode (installes xcode) car textedit pollue le fichier avec des informations inutiles.

  • fr4nck

    @ lucie je voulais dire….

  • Bulle

    Bonjour,

    merci pour ce tuto, meme si je ne comprends pas tout ce que je fais ^^
    Il me semblait avoir fait ce qu’il fallait mais apparemment ce n’est pas le cas puisque quand je vais dans thèmes, ils me mettent:

    Thèmes endommagés
    Les thèmes suivants sont installés, mais incomplets. Les thèmes doivent avoir au moins une feuille de style et un modèle.

    NomDescription
    Creation theme.La feuille de style manque.

    Voila pourrait tu s’il te plait m’eclairer ? 🙂
    merci d’avance

  • sana

    grand merci pr ce tuto 🙂

  • zena

    salut,
    merci infiniment pour ce tuto ,j’ai tout suivi ça marche bien jusqu’à l’étape de:
    « Enregistrez votre fichier et fermez maintenant votre éditeur de texte et allez sur l’administration de votre blog,.. »
    je sais pas où aller!même si j’essayer le lien déjà commander en haut: http://localhost:8888/wordpress/wp-admin/
    mais ça donne :Petit problème… Google Chrome n’est pas parvenu à accéder à la page localhost:8888.

    Donc svp besoin d’aide,je suis coincée!
    merci d’avance.

  • zena

    beh ça marche j’ai pas remarqué l’onglet « apparence » ^^ »
    bravo encore pr le tuto!

  • stef

    bonjour
    je voudrais savoir à quoi correspond le « profile= »http://gmpg.org/xfn/11″ »
    Je n’avais jamais vu cette référence auparavant

  • Merci pour ces tutos très intéressants !

  • Claymenia

    Bonjour, j’ai bien avancé dans les étapes, et je suis revenu à celle-ci car j’ai un soucis de taille : malgré la présence des et ainsi que je n’en ai aucun qui apparait dans mon template, juste le contenu de l’index est chargé…

    Help 🙂 ?

  • Claymenia

    Désolé, autant pour moi, j’ai trouvé la réponse à ma question en la posant 🙂

  • peu importe

    Très clair ! Merci et bravo !!

  • Mje

    Bonjour Francis,

    C’est incroyable tout ce travail que tu as fourni. Je suis pas à pas tes tutos car je suis en train de créer mon site. Je n’ai pas trouvé mieux pour l’instant comme référence pour créer mon thème, j’espère y arriver !

    Pour créer la feuille de style, c’est un fichier style.css qu’il faut créer ou un stylecss.php ?
    J’ai essayé avec .css mais quand je l’ouvre je ne peux plus rien copier coller. Du coup je l’ai fait en .php mais quand je sélectionne mon thème et que je prévisualise, tout est blanc mais mon nom n’est pas écrit en dessous.

    Un grand merci !

  • Bonjour, et merci pour ces merveilleux tutoriels 🙂

    J’ai un petit problème, j’ai tout fait comme décrit dans le tuto, mais mon thème n’apparaît pas dans mon administration WordPress. Je ne comprends pas pourquoi 🙁

    Merci !

  • Mje > C’est un style.css qu’il faut créer ! 😉

  • Bonjour Fran6 et bravo pour les tutos,
    J’ai un soucis :
    J’ai créé les maquettes sous Photoshop ainsi que les pages statique en html pour un site que je dois livrer prochainement. Je suis parti du tutoriel « Créer un thème de A à Z ». J’ai enregistré les 5 templates comme tu l’as dis à partir de mes pages html avec l’extension .php évidemment. J’ai ajouté le code, pour appeler le header, dans l’index.php en respectant l’ouverture de .
    Les fichiers (templates) sont installés dans wp-content/themes/theme(nom de mon client) or dans le back-office je n’accède pas au thème que je viens d’installer « theme(nom de mon client) ». J’ai uniquement accès aux templates installées par défaut.

    As-tu une idée d’où viendrait le problème ?

    Merci d’avance et encore bravo 😉

  • christhy

    Bonjour!
    J’ai vu qu’il était possible de créer un thème enfant. Cela me paraissait si simple et pourtant cela ne marche pas :
    Le thème enfant ne s’affiche pas dans l’admin. Je ne fais pourtant pas d’erreur à mon sens dans mon fichier style.css du directory themefav placé dans themes :

    /*
    Theme Name: themefav
    Description: my twenty eleven child theme
    Template: twentyeleven

    */

    Quand j’installe un autre thème wordpress, ça marche. Je ne vois pourtant pas d’erreur dans mon style.css?? Bien sûr, il manque encore l’import, mais bon, cela ne doit pas empêcher de voir apparaître le thème enfant dans l’admin… Le chmod est le même que les autres thèmes..

    Merci de m’aider!!!

    Christhy
    PS : bien sûr, le thème twentyeleven est installé également 🙂 Hébergement : ovh

  • aurore

    salut!

    tout d’abord je te remercie pour ce tuto qui est trés intéressent.

    Pout ma part tout fonctionne correcetement, le thème est bien crée, j’arrive à l’activer, Mais je ne vois qu’une page blanche, Le titre de mon blog n’apparait pas!!
    d’ailleurs Angélique a le même problème que moi

    WHY??

  • aurore

    J’avais mal lu: ‘ la barre d’entête de votre navigateur’ dans ma tête ca a sonné comme titre du blog ^^ sorry!

    Donc c’est bon là

    ET merci

  • bob le homard

    Bonjour,

    Encore merci pour ce Tuto que je suis ardemment. J’ai un petit soucis, quand je veux visualisé le site, j’ai ça qui apparait sur la page blanche :

    {\rtf1\ansi\ansicpg1252\deff0\deflang1036{\fonttbl{\f0\fmodern\fprq1\fcharset0 Courier New;}{\f1\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\f0\fs20 {\rtf1\ansi\ansicpg1252\deff0\deflang1036{\fonttbl{\f0\fmodern\fprq1\fcharset0 Courier New;}{\f1\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\f0\fs20 !DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>\par \par \par \par \tab \par \par \tab \par \tab \par \tab \par \tab \par \tab \par \tab \par \tab \par \tab \par \par \tab \par \tab \par \tab \par \par \par \f1\par } \par \par \f1\par }

    Que dois je faire ? ou qu’est ce que j’ai mal fais ?

  • Livin’inChina

    Bonjour Francis,

    arrivé à cette étape dans l’onglet apparence, mon thème apparaît mais indique :

    « Thèmes endommagés
    Les thèmes suivants sont installés, mais incomplets. Les thèmes doivent avoir au moins une feuille de style et un modèle.
    Nom: Creation | Description Theme: La feuille de style manque. »

    J’ai suivi ton tuto jusqu’ici avec rigueur, j’ai même relu et recommencé pour voir si l’erreur disparaissait mais en vain.

    Pour info, j’utilise wordpress 3.2.1

    De quoi cela peut il bien venir??? Please, help!
    Merci d’avance et merci pour ce super tuto que j’ai hâte de continuer après avoir fixé ce pb 🙁

  • Bonjour et merci pour ce tutoriel.

    Comme d’autres personnes qui n’ont pas eu la chance d’être aidé, mon thème ne s’affiche pas dans wordpress et ce dernier mentionne : « la feuille de style manque ». Pourtant elle y est, ainsi que dans le header. Que doit-on faire s’il vous plait ?

    Merci

  • Salut Francis.
    Excellente initiative ce tuto pour moi qui veux me mettre à WordPress.

    j’aurai seulement une question (pour le moment), lorsque j’active mon thème je reçois ce message: « Le thème courant est endommagé. Retour au thème par défaut. »
    J’ai raté quelque chose?

  • Bilal > Tu as dû faire une erreur quelque part. Vérifie bien le contenu de tes fichiers et notamment le style.css 🙂

  • ceeed

    Un grand merci, très sympa ces petites étapes !

  • Pour tous ceux qui galère avec avec le theme endommagé ou la feuille de style non trouvée…Ben ne faites pas comme moi….Lisez bien le tuto…La feuille de style CSS ne doit pas s’appeler feuille de style.css mais style.css…Et oh miracle, ca marche!

Success, your comment is awaiting moderation.