Francis Chouquet Graphiste Lettering

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

174 Commentaires

  • linahyeah

    Bonsoir 🙂

    J’ai suivi le tuto’ à la lettre mais quand je vais voir ce que ça donne, je n’ai pas une « page blanche » mais : « Fatal error: Call to undefined function get_header() in /mnt/154/sdd/c/3/lilyroad/index.php on line 1 »

    Je ne vois pas d’où vient le probleme…

    Merci d’avance!
    PS : très bon tuto (y)

    Bonne soirée 🙂

  • J’avais le même soucis avec la feuille de style, j’ai renommé tous mes fichiers en minuscule ( j’avais eu l’audace de mettre des majuscules … et ça marche ! =)

  • Florian

    Bonjour Francis,

    Tout d’abord merci infiniment pour ce tuto très bien fait aussi bien au niveau du style qu’au niveau de la pédagogie.
    J’aurais juste une petite proposition étant donné le nombreux incalculable de commentaire : n’y aurait-il pas moyen de creer un forum ou une FAQ car il n’est pas aisé de voir quel question ont été déjà posé …. enfin bon c’est juste une proposition

    Voila encore merci pour tout et bonne continuation

    Florian

  • yesbut

    Bonjour à tous!
    Merci beaucoup à toi, Fran6 pour tous ces tutoriels, heureusement qu’il y à des personnes comme toi, serieux!
    J’ai réaliser toute la série de tutoriels « créez votre thème de A à Z », et, grâce à toi et aux précisions pertinentes des visiteurs, je commence à y voir clair.
    Je suis en ce moment entrain de modifier le thème Twenty Eleven de wordpress, et je me rend compte d’un niveau de difficulté bien supérieur à mes capacités, malheureusement. Mais bon, j’apprend à jouer avec les éléments déjà installés, c’estb très instructif! Malgrès cela, j’ai un énorme problème ; Je voudrais que ma page d’accueil ressemble à cela :

    http://www.doclab.org/category/events-screenings/

    Alors j’ai sûrement des réflexes de graphiste (pardon, mais j’en suis un), à savoir vouloir tout contrôler ssur ma page, mais c’est pour un stage, alors je suis un peu paniqué.
    Le but est d’arriver sur la page d’accueil avec en haut des puces, comme dans l’image, dessous seulement le dernier article visible (vive query-post! Merci !) .
    là où cela devient complexe, c’est de faire en sorte que lorsque je clique sur l’une de ces images, une division (cachée au départ) avec les infos en lien avec l’image cliquée apparaîsse entre les divisions images/ /dernier article paru.
    Voilà, j’espère que ma demande est claire, et que quelqu’un pourra me venir en aide, que ce soit en me dirigeant vers des foroms, ou des idées de réalisations?? Je vous rermercie de vos réponses.

    yesbutperhaps

  • slt j’ai un problém j’ai un templétte qui est consstitué de la page html , et tu css et des image c tou , alor fodré que je créé le head et le index avec les doné qui don ma page html cé sa , m comen fére svp

  • Flofloche

    Bonjour,

    Le tuto est super! J’ai l’impression de reprendre des cours d’informatique! 🙂
    Super pratique et simple! Je te remercie énormément Francis!
    J’ai un souci un peu bizarre… Je suis en pleine création du « header.php » et du « index.php » et à chaque fois que je fais l’index, ça marque que je ne peux pas enregistrer car le fichier est verrouillé. Mais, j’ai beau chercher, je ne trouve pas où est ce que c’est verrouillé.
    Sinon, j’ai tenté de dupliquer le « header » pour tenter de dévérouiller, et pas de changement, toujours verrouiller… J’imagine que c’est simple… Mais je ne vois où se situe le problème…

    Merci d’avance!
    Vraiment, sans ce tuto, je ne me serai pas lancée à l’aventure! 🙂

    Flo

  • Bonjour,

    Pour tous ceux qui ont le problème de CSS inexistant (thème endommagé), je vous conseille de nommer feuille de style en style et non en style.css.

    ça fonctionne pour moi.

  • lainiwaku

    sympa, mais je me suis permit de le modif un peu parce que ça fait assez vieux html tout ça

    ça devrai donner un truc dans ce genre en html5

    » »

    <meta http-equiv="Content-Type" content="; charset= » />
    <meta name="generator" content="WordPress  » />

    <link rel="stylesheet" href=" » type= »text/css » media= »screen » />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href=" » />
    <link rel="alternate" type="text/xml" title="RSS .92" href=" » />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href=" » />
    <link rel="pingback" href=" » />

  • kensingtonstef

    Bonsoir, moi aussi je fais du pas à pas avec ce tuto… pourtant j’ai une erreur de code qui se trimballe quelque part. J’ai une balise > qui se trimballe quand j’affiche le blog (il apparait sous « Un site utilisant WordPress » et je ne trouve pas la balise que j’aurais laissée ouverte… quelqu’un a t il un truc pour me dépanner? merci

  • Adeline

    Bonjour!
    Tout d’abord merci pour ces tutos qui sont extra!
    Par contre, je rencontre le même problème que breathofdz. Lorsque je tente d’activer le thème fraichement créé, j’ai le message d’erreur suivant:
    Le thème courant est endommagé. Retour au thème par défaut.

    J’ai revérifié plusieurs fois les templates qui sont ok! Comment faire?

    Merci d’avance.
    Adeline

  • Jeremy

    Bonsoir fran6,

    Lors de ce tutoriel numéro 5 , vous dites de refermer les balises et dans le fichier index.php , cependant lorsque que je regarde les thèmes de base de WordPress ( Twenty ten par exemple , ) les balises sont fermées dans le fichier footer.php.
    Est ce normal ?

    Cordialement

  • Jeremy

    je parle des balises html et body

  • lainiwaku

    @jeremy
    tu peut les refermer dans le footer mais alors il ne faut rien ecrire apres l’include du footer

  • Liliane

    Bonjour Franc6,
    Je viens d’arriver sur votre site et de prendre les tutos depuis le début.
    Bravo et mille mercis pour cette passion et ce partage patient avec nous.
    Jusqu’à présent, tout va bien et je trouve les explications très claires.
    Juste une question : Pour démarrer les serveurs php et apache, que dois-je faire ?
    Comme vous le dites fort justement, il faut parfois prendre à la base et celle-ci me manque ..
    Merci et belle journée

  • souscaf

    Bonjour,

    juste pour vous informer qu’il y a 2 fois dans votre code pour le header.php

    merci pour vos tutos très clairs!

    cordialement

  • souscaf

    2 fois : php wp_head();

  • Robert45

    Vu l’âge ancien des posts, je ne sais pas si cette partie est toujours suivie.
    Donc bonjour à tous et un garnd merci pour ce tuto qui me permet de bien comprendre le fonctionnement de WordPress.
    J’ai un souci avec cette étape : le site n’affiche pas l’article d’origine de WordPress « Bonjour tous le monde ! », seul le titre est affiché.
    J’ai fait l’essai sans le titre avec le titre …
    Quelqu’un a-t-il rencontré se problème ou éventuellement me dépanner.
    PS : j’ai également fait l’essai avec d’aurtres thème et l’article est bien affiché.

    Merci d’avance pour votre aide
    Robert

  • Robert45

    Désolé, ce commentaire aurait du être placé sur la page Leçon 7.
    Mon problème est résolu, en fait il manquait le code « the_content() » dans le Loop.

    Cordialement
    Robert

  • Bonjour,
    Je viens de créer un blog sur WordPress et je n’y connais rien en informatique.
    S’ il vous plaît, comment changer l’image de couloir en haut de la page? Je ne l’ai pas choisie, c’est une image par défaut, mais je n’arrive pas a la changer…
    Merci d’avance! 🙂

  • MarinaBlue

    Merci Fran6 pour ces tutos claires et pédégogiques, je ‘marche au joomla’ depuis des années et là je devais me convertir pour travailler sur un site; tes explications m’ont permis de saisir rapidement le système de templates dans wordpress. A+++

  • Youssef

    Bonsoir,

    merci infiniment pour ce tuto,
    Bon il y a tellement de commentaire (succès oblige) que je ne sais pas si le soucis a déja été exposé, mais j’ai suivi correctement les conseils et un fois sur mon admin, j’ai ce message et le modèle (page blanche avec le titre création theme 0.1″) n’est pas présent

    voilà le message :

    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 Description
    Creation Theme Le modèle est manquant.

    Pouvez-vous m’aider svp ?

    Cdlt,
    Youssef

  • Super tuto franchement merci a toi et je trouve vos sites très bien sobres et modernent
    Cordialement

  • Bonjour la question va paraître super novice, mais je démarre comment un serveur php et apache?

    Merci de vos réponses à l’avance.

Success, your comment is awaiting moderation.