Cet article est une traduction du tutoriel How To Create a WordPress Them rédigé par Ian Stewart, l’auteur du framework WordPress Thematic disponible sur son site ThemeShaper. Avec son aimable autorisation et mes remerciements.

Bien que le minimum requis pour un thème WordPress est un fichier Template index.php et un fichier style.css (ou seulement le fichier style.css pour un thème enfant), la plupart des thèmes nécessitent de mettre en place une structure plus solide.

Notre minimum requis sera composé de 6 fichiers. Créez un dossier dans wp-content/themes/ pour votre thème – dans ce tutorial j’utiliserai « your-theme » mais je vous laisse le choix – et créez les fichiers suivants dans ce nouveau dossier (ne vous inquiétez pas, ils ne vont rester vide que pour quelques étapes seulement).

  • index.php
  • header.php
  • sidebar.php
  • footer.php
  • functions.php
  • style.css

Ouvrons maintenant le dernier fichier créé, style.css, dans l’éditeur de texte. La première chose que nous devons faire est ajouter une section en tête du fichier encadré par ce que nous appelons des « commentaires » CSS (ces petites choses /* */). C’est ici que nous allons mettre les informations de notre thème pour WordPress. Sans ces informations, votre thème ne sera pas visible dans la section « thèmes » du module d’administration.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Theme Name: Your Theme
Theme URI: http://example.com/example/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://example.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme
.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/

Remarque : la plupart de ces informations sont optionnelles. En réalité, seul le nom du thème est utile. Mais si vous avez l’intention de distribuer votre thème, ou si vous développez un thème personnalisé pour quelqu’un d’autre, il est conseillé d’inclure la plupart, sinon la totalité, des autres informations. Enfin, je vous laisse libre de faire comme vous le voulez.

Une fois cela effectué, vous pouvez activer votre thème et naviguer dans votre site de test. Comme vous le voyez, nous avons réalisé le thème blanc ultime ! Les choses vont commencer à être intéressantes à partir de maintenant.

Construire votre structure HTML

Nous allons maintenant utiliser la structure vue à la précédente leçon. Avant cela, un petit cours sur les Template WordPress.

WordPress n’a besoin que d’un seul fichier (=template), index.php. Nous pouvons et nous allons d’ailleurs ajouter une série de fichier templates qui peuvent être utilisés à la place de index.php pour certaines situations (article unique, page de catégorie, etc.), mais pour commencer index.php est le seul fichier utile.

En réalité, index.php et tous ces petits frères et sœurs (dont nous allons nous occuper très vite) construisent les pages que nous voyons dans le navigateur. Ce sont des fichiers contenant du code HTML et du code PHP générant du HTML, qui au final constituent des pages web.

Imaginons les pages web comme des histoires, avec un début, un milieu et une fin. Et bien, lorsque nous écrivons notre fichier index.php (et plus tard single.php, category.php, etc.) nous allons nous concentrer uniquement sur le passage du milieu. Mais ! nous allons évidemment appeler les morceaux du début et de la fin. Nous devrons refaire plusieurs fois la partie du milieu mais nous allons construire le début et la fin de chaque page web une seule fois pour toutes.

Header.php et footer.php

Ouvrez la structure HTML que nous avons vue à la précédente leçon et copiez dans header.php tout ce qui se trouve jusqu’à <div id="main"> inclus. Sauvegardez header.php, cela doit ressembler à cela :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
 
			<div id="branding">
			</div><!-- #branding -->
 
			<div id="access">
			</div><!-- #access -->
 
		</div><!-- #masthead -->	
	</div><!-- #header -->
 
	<div id="main">

Maintenant copiez </div><!-- #main --> et tout ce qui suit jusqu’à la fin dans footer.php. Vous devez obtenir ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
	</div><!-- #main -->
 
	<div id="footer">
		<div id="colophon">
 
			<div id="site-info">
			</div><!-- #site-info -->
 
		</div><!-- #colophon -->
	</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Index.php

Je parie que vous avez deviné ce que nous allons faire maintenant. Copiez tout ce qui se trouve à l’intérieur de la div #main de notre structure HTML dans index.php. Vous obtenez donc ceci :

1
2
3
4
5
6
7
8
9
10
11
12
		<div id="container">
 
			<div id="content">
			</div><!-- #content -->
 
		</div><!-- #container -->
 
		<div id="primary" class="widget-area">
		</div><!-- #primary .widget-area -->
 
		<div id="secondary" class="widget-area">
		</div><!-- #secondary -->

Avec deux petits ajouts supplémentaires nous aurons un thème WordPress parfaitement invalide mais sur la bonne voie. Nous devons appeler l’entête (header) et le pied de page (footer).

Tout en haut du fichier index.php, avant tout autre code, ajoutez le template tag suivant (ndT : le codex français utilise le terme marqueur de modèle mais sur le web francophone on retrouve le plus souvent le terme template tag, que je vais donc utiliser dans cette traduction) :

1
<?php get_header(); ?>

Je pense que ce que fait ce template tag est assez évident. Il récupère l’entête. Mais si vous découvrez PHP, profitons-en pour regarder de plus près ce template tag. Je voudrais vous faire remarquer quelques points. Premièrement, notre appel de fonction PHP – get_header() – commence par < ?php et finit par ?>. Deuxièmement comme notre appel ne fait qu’une ligne, il se termine par un point-virgule. Petite chose, mais chose importante.

Très bien ! Pouvez-vous deviner la fonction que nous allons appeler pour afficher le pied de page en bas d’index.php ?

1
<?php get_footer(); ?>

Et oui ! Nous avons maintenant le fichier principal dont WordPress a besoin, index.php. Il contient tout la partie centrale de notre page, l’appel du début en haut et l’appel de la fin en bas.

Rechargez la page dans votre navigateur et affichez le code source (Vue > Code Source, dans Firefox). C’est votre code !

Vous êtes en route pour la création de votre premier thème.

Cet article fait partie du tutoriel Créer un Thème WordPress :

  1. Introduction
  2. Outils de Développement
  3. Structure HTML du Thème
  4. Structure des Dossiers et Templates
  5. Template Header
  6. Template Index
  7. Templates Single, Attachment et 404
  8. Template Comments
  9. Template Search et Page
  10. Template Archives, Auteur, Catégories et Mots clés
  11. Template Sidebar
  12. Design du Thème, Initialisation et Construction CSS

flattr this!