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:
<!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() ) : ?> » <?php _e('Not Found') ?><?php elseif ( is_home() ) : ?> » <?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(); // off by default ?>
<?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:
<?php get_header(); ?><?php ouvre la commande php,
get_header(); nous dit “aller chercher le header”,
?> referme cette requête.
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:
</body>
</html>Dans l’index, saisissez donc ces trois lignes de code:
<?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:
/*
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éé:
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
Fran6
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
C’est pour quand le prochain je suis precé a mort…Vivement
Courant de semaine si tout va bien !!!
salut
super ce billet : comme les autres … très clair et simple à comprendre : tu rentres juste ce qu’il faut dans les détails, mais sans noyer le néophyte que je suis….
excellent, et bonne continuation !
Merci Lomig ! En fait, c’est pas évident de rédiger ce genre d’article, c’est très différent de ce que je fais d’habitude. C’est plus long et surtout j’ai toujours des soucis avec les insertions de code. WP ne les reconnais pas toujours alors qu’ils sont présents. Ca m’a définitivement dégoûté de l’éditeur WYSIWYG !! Du coup, j’écris l’ensemble de l’article sur Ecto (logiciel) et je le transfère ensuite sur WP où je fais les dernières retouches…Pas évident tout ça. En tout, concernant les tutoriels, j’essaie de faire clair et j’essayerai de les faire moins long mais plus souvent !!
ça devient très interessant
vivement la suite
Bonjour !
Je vous écris car je suis votre tutoriel “Créez votre thème WordPress de A à Z”.
J’aimerai savoir si il est possible de réaliser ce tuto, et plus généralement un blog sous WordPress en XHTML strict, et non pas transitionnel.
En effet : je suis étudiant en graphisme, et nous avons des cours de XHTML strict.
Aussi, j’aimerai savoir si le transitionnel est obligatoire avec WordPress ?
J’attend votre réponse avec impatience.
Je tiens aussi, bien sûr, à vous remercier pour excellent blog, très bien fait, très intéressant, super !!^^
Voilà , c’est tout. Bon week-end de Pâques !!!
Salut Olivier,
C’est une très bonne question que tu poses là mais je ne saurais pas forcément bien te répondre n’étant pas un expert développement. Ce que je peux te dire c’est qu’on m’a déconseillé plusieurs fois d’utiliser le XHTML Strict pour des raisons de souplesse et d’optimisation avec les navigateurs. IE est connu pour avoir des soucis avec pas mal de déclarations, et la Transitionnel semble être celui qui gère le mieux ces soucis. Maintenant, je crois qu’il n’y a pas beaucoup de différences entre les deux, mises à part quelques balises. LE XHTML Transitionnel était pour faire une transition. Maintenant, on enseigne le “Strict” parce qu’on ne va plus avoir que des sites “stricts” dans le futur, le temps que tous les navigateurs soient passés au XHTML. Ce qui est le cas pour les dernières versions mais tu as toujours des personnes qui utilisent un très ancien navigateur…
En tout cas, dans les cours que j’ai pris et les bouquins que j’ai lu, on te conseillera toujours le transitionnel pour être sûr que tout le monde voit bien ton site. Mais c’est un peu comme ceux qui te disent de ne pas dépasser le 800*600 pour les visiteurs qui ont encore des petites résolutions…
Maintenant, pour réaliser un blog sous Wordpress, je te conseille quand même de rester en transitionnel. Tu peux toujours essayer en strict mais je ne peux rien te promettre !!
Il y a une différence au niveau de certaines balises. En Strict, il n’y a plus du tout de balises de style, tout doit passer par les CSS. Mis à part pour les listes, je n’en ai pas trouvé sur Wordpress, donc tu peux toujours te lancer dans l’aventure et faire quelques modifications pour être en strict…
Sinon, merci pour ton soutien !!
Je ne sais pas si j’ai pu répondre à ta question mais que le choix de déclaration ne te prenne pas trop la tête, les deux sont tout de même très très proches !! C’est sûrement vrai que ce serait mieux de tout mettre en strict, mais bon, en ce qui me concerne, je reste dans les “normes” Wordpress !!
Salut
Pas mal, lol certains vont commencer a se creuser la tete au prochain, je le sens
enfin, tu me diras
allez a+ jattends le prochain avec impatience
Merci Kyu pour la proposition !!
J’ai pensé en faire une version en anglais mais je vais voir ça un peu plus tard !!! Merci quand même !!!!
Bonjour !
Bon, je dois pas être très douée, je commence à m’énerver donc autant poser mes questions à un connaisseur !
Jusuq’ici, j’ai tout bien suivi. Mon problème est dans la fin de votre tutorial #5, quand vous dites d’aller dans l’administration du blog (avec Wordpress). Et là , c’est le drame. Comment je fais pour aller dans cette administration ? J’ai bien mon fichier Wordpress, tout ça dans le htdocs de MAMP. J’ai également mon mot de passe etc… pour MAMP sur Internet.
Que dois-je faire ?
Merci pour votre réponse. En tout cas bravo pour ce tuto, c’est génial !
Salut Clara, pas de stress !!
L’administration du blog, tu y as accès via cette URL: http://localhost:8888/wordpress/wp-admin/
Essaie ça sous ton navigateur préféré et dis-moi si ça marche, OK ?
a très vite
Ca y est j’ai essayé, ça marche ! Directement sur ma page
Merci, merci ! J’vais pouvoir continuer ce tuto dès ce soir !
Encore merci …
Bonjour, je viens de prendre les tutoriels au début, et pour l’instant c’est vraiment très clair et à la portée de n’importe qui. Donc merci beaucoup, je m’attèle à la suite sans plus attendre
Bonjour,
Je t’avais déjà posé une question il y a quelques jours…. Bon, j’ai tout recomencé sans dreamweaver et avec XAMPP et tout va bien jusqu’à le moment de vouloir “aficher le site” dans la page d’administration de wordpress…
QU’est-ce que tu peux me conseiller?
Merci beaucoup
C’était mon problème il ya quelques jours….:
Dans la page de administration du site je nâ??arrive pas non plus à changer le thème. Jâ??ai le thème quâ??on est en train de créer mais quand je veux lâ??appliquer comme thème il ne se passe rien, pourtant lâ??admin me dit que le nouveau thème est activé mais câ??est lâ??ancien qui sâ??affiche toujours.
Bref, je nâ??arrive jamis à voir les résultats de mon travail ..
Excuse-moi,
en fait ça marche, pour qoui je ne sais pas, je continue alors ….
Bonjour,
Tout d’abord merci pour ce tuto super!
Mais j’ai le même problème que Ramon. LE thème est créé ais quand je vais dans l’admin pour le sélectionner, il ne s’applique pas. Pourtant il me dit qu’il est activé mais c’est toujours le thème par défaut. Que faire?
merci
Salut Alyn,
C’est probablement un problème dans les templates je pense. Ramon s’en est sorti comme par magie j’ai l’impression !
Revérifie ton code encore une fois, tu as peut-être oublié quelque chose… Ou alors vides le cache de ton navigateur… Tiens moi au courant !
Salut Fran6,
Merci de répondre si rapidement!
J’ai tout refais, j’ai toujours le même pb. J’ai fais un hard reload mais rien de plus.
Voici ce que j’ai : http://i222.photobucket.com/al.....4/thme.jpg
Donc le thème est bien présent mais impossible de l’appliquer
ça y est!
J’ai trouvé, en fait j’avais nommé le fichier du thème d’un autre nom et ça ne marchait pas à cause de ça.
Je peux continuer!
MErci !
Bonjour et félicitation pour ce tuto qui, pour l’instant, est extrémement clair l’idée de faire de nombreux article de petite qualité permet de ne pas perdre le lecteur dans trop de manipuylation bref j’adore.
Juste quelques petites remarques:
-Tout d’abord une petite coquille dans la partie 2.2
“de code en PHP qui cont (vont) relier les fichiers entre eux”.
- Ensuite un petit lien en fin de chaque article pour emmener vers la suite aurait été le bienvenu.
- Enfin, je pense qu’il faudrait préciser dans cet article que lorsqu’on met les informations dans le fichier style.css les accents doivent être codé en html. é = é etc…. Sinon il ne sont pas reconnus à l’affichage dans l’administration.
Ce ne sont que des détails je l’admet mais après tout ce tuto est déja excelent alors pourquoi se privé de le rendre incontournable ?
Sur ce je continu ma lecture.
Bonsoir, juste une petite question, en fait dans l’admin de mon blog dans thème, il ne me donne pas que le nom de mon thème, mais l’ensemble de ce qui est écrit entre les /* et *\, j’ai lu les commentaires et comparer à d’autre style.css, je ne vois pas ce qui cloche…
merci pour les tutos
Ellaurenzovfoot > Tu as pu résoudre ton problème ? Je pense que c’est juste un problème de syntaxe…
Salut Francis,
je pense que t’as fais une légère erreur d’inatention dans le header en mettant 2 fois: regarde :
” />
a+
eh ben ça marche paaaasss quand j’écris du php dans le comm :’(
bon alors tu as 2 fois l’appel à php wp_head(); à la ligne 14 et à la ligne 18 (à peu près j’ai compté à l’arrache…)
j’ai remarqué ce doublet en intégrant ANIga à mon thème (créé en suivant tes tuto avant de voler de mes propres ailes)
Salut francis!
En premier lieu, ce tuto est génial!
Cependant, je ne saisis pas trop ce que l’on doit écrire exactement dans la feuille de style. Vois-tu j’ai exactement le même problème Ellaurenzovfoot. L’ensemble de ce qui est écrit entre les /* et *\ !
J’utilise Golive CS2 comme editeur de texte, ça devrait aller non? Bref, pardon si cette question peut paraitre idiote, mais je suis loin d’être pro dans tout ça!
Merci à l’avance
Encore moi, en réaction à mon post précédent.
Pour l’instant rien de compliqué, mais c’est clair que le tuto est bien fait pour les Néophytes.
Je n’ai pas vu ce que tu avais conseillé comme editeur de texte, personnellement j’utilise HAPedit, maniable, léger et gratuit.
Ca pourrait interesser certaines personnes:
http://hapedit.free.fr/hapedit.php
Le petit plus, c’est qu’il incrémente déjà les balises de base à ne pas oublier.
Bonjour, je ne comprend pas parce que quand je clique sur mon thème dans l’administration Wordpress, le thème reste celui par défaut O_o
Ah bah ça marche! Je n’avais pas mis le même nom pour le thème dans le css et le dossier du thème (peut-être ça…)
Petit à petit ça avance !
Merci beaucoup ! Bon j’en suis qu’à la page blanche mais c’est un bon début ! Jusqu’à maintenant ça a bien marché.
Suite au prochain épisode et encore merci !
sykveqm hmsq mexy aeclgknm qvimshnor nfxljoas rlfi
xfwym vhalcg vbcihd
rwpxne pemr
acoh
jptzm dztbpja eimd
ybefsc kypxjl qgey
kctf gszqh zfawh mpgtieo