Dernière mise à jour le 6 avril 2017 par LMD

Avantages et inconvénients

Créer un thème complet soi-même est une tâche ardue pour un designer. Nous allons en découvrir les principes fondamentaux, mais pour obtenir un thème parfaitement fonctionnel, il faut de bonnes connaissances en développement HTML, CSS, PHP et éventuellement Javascript. Il est cependant possible de réaliser un thème simple et fonctionnel. Nous allons en détailler les étapes.

Ce que nous allons voir peut s’adapter à la création d’un thème à l’aide d’un Starter Thème, ce qui garantit un résultat plus performant.

L’inconvénient est qu’il s’agit d’un travail assez long. Il faut également tenir à jour ce thème afin d’éviter les failles de sécurité.
À l’inverse, le plaisir d’avoir réalisé soi-même son thème est incomparable.

Organisation des fichiers d’un thème

Pour qu’un thème fonctionne il faut au minimum trois fichiers. Il est absolument nécessaire de respecter le nom et l’orthographe exacts de ces fichiers pour que tout se passe bien :
– style.css (obligatoire) sert à la mise en forme du site et à la reconnaissance du thème par WP, par des styles CSS
– index.php (obligatoire également) permet l’affichage par défaut des pages du site. À moins d’un thème OnePage, il est toujours complété par de nombreux autres fichiers PHP, spécialisés dans l’affichage des articles, archives, etc.
– functions.php (quasi obligatoire, il existe dans tous les thèmes) regroupe les fonctions PHP nécessaires au fonctionnement du site, pour l’affichage du contenu, par exemple les menus, les sidebars ou les images à la une
– screenshot.png (facultatif, mais recommandé) est une image de 600×450 pixels (le codex recommande 1200×900 pixels pour les écrans haute résolution) donnant à voir à quoi ressemble le thème. Cette image apparait dans le Tableau de bord à 387×290 pixels au moment du choix d’un thème.

Les autres fichiers généralement présents dans un thème sont header.php, footer.php, sidebar.php, home.php (la page d’accueil quand ce fichier existe), page.php (pour l’affichage d’une Page WP), single.php (pour l’affichage du détail d’un seul article), etc. Ces fichiers sont hiérarchisés de sorte que si l’un d’eux n’est pas présent, il est automatiquement remplacé par un autre de niveau supérieur. Vous pouvez voir cette hiérarchie dans ce schéma :
http://wordpress.bbxdesign.com/wp-content/uploads/2014/12/hierarchie-theme-wordpress.jpg

Enfin, on peut rencontrer d’autres fichiers dans un thème, du code javascript ou autre. Il est très instructif d’ouvrir le dossier des thèmes que vous téléchargez pour en examiner le contenu.

Le fichier style.css

Ce fichier, obligatoire, doit commencer par un commentaire sur plusieurs lignes pour la déclaration du thème. C’est ce qui permettra à WordPress de le reconnaitre et de l’afficher dans le Tableau de bord.

La seule information obligatoire de ce commentaire est le nom du thème (Theme Name:), mais les autres informations sont souvent utiles (auteur, version, description, mots clés, etc.). Voyons ci-dessous un exemple de code correspondant au commentaire de déclaration du thème au début du fichier style.css. Notez qu’il ne faut pas mettre d’espace avant les deux points de chaque catégorie d’information :

[pcsh lang= »css » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

/*
Theme Name: Engins de Chantiers
Author: Gilles
Author URI: http://monsiteweb.com
Description: Le plus beau des thèmes spécialement conçu pour les passionnés d'engins de chantier !
Version: 1.0
Tags: chantier, portfolio, tractopelle, jaune, 3 colonnes, responsive…
Text Domain: chantier
*/

[/pcsh]

Le nom du thème (Theme Name:) est libre. Faites simple, souvent un seul mot. Une description (Description:) concise aide à comprendre les atouts du thème. La version (Version:) est très utile, pour suivre les mises à jours nécessaires. Des mots-clé (Tags:) aident à trouver votre thème lors d’une recherche. Il vaut mieux indiquer les tags en anglais, surtout si vous souhaitez distribuer votre thème. Enfin, le domaine (Text Domain:) sert à la traduction et correspond au nom du dossier de votre thème.

Évidemment, le fichier style.css sert également à contenir les règles CSS de mise en forme de votre site. Il est recommandé d’y placer des commentaires pour chapitrer votre code et mieux vous y retrouver. Certains thème contiennent même un sommaire en commentaire, juste après la déclaration du thème. Voir à ce propos le fichier style.css des thèmes fournis par défaut par WordPress (twentyfifteen par exemple).

Passer d’un fichier HTML à un fichier PHP

WordPress utilise des fichiers PHP pour afficher le contenu du site. Une page HTML (index.html par exemple pour la page d’accueil d’un site statique) se compose de deux parties principales, head et body. Puis, dans body le contenu se répartit en zones bien identifiées, un conteneur global (div #wrapper), un header pour l’en-tête de la page avec le nom du site et le logo, la nav pour le menu principal, souvent intégré au header, puis une ou plusieurs sections de contenu, avec ou non une colonne latérale sidebar, et enfin un footer en pied de page.

Ces zones se retrouvent dans WordPress réparties en plusieurs fichiers qui seront ensuite assemblés en PHP selon les besoins. Voir à ce sujet, une introduction simple à l’élaboration des fichiers d’un thème :
http://www.wppourlesnuls.com/notions-de-base-pour-creer-un-theme-wordpress/

Prenons un fichier HTML de base :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Titre du site</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<div id="wrapper">
			<header id="en-tete">
				<img src="images/logo.png" alt="logo">
				<h1>Nom du site</h1>
				<h2>Slogan</h2>
				<nav class="menu_principal">
					<!-- ici le menu en html -->
				</nav>
			</header>
			
			<section id="projets">
				<<article class="vignette">
					<img src="images/projet001.jpg" alt="">
					<h3>Titre de l'aricle</h3>
					<p class="extrait">bla bla</p>
				</article>
			</section>

			<aside id="en-plus">
			</aside>

			<footer id="pied-de-page">
				<p>Copyright</p>
				<nav class="reseaux_sociaux"></nav>
			</footer>
		</div>
	</body>
</html>

[/pcsh]

Il commence par le Doctype puis la balise <html> qui contient les deux balises de base <head> et <body>. La partie <head> comporte 4 lignes :
– la ligne 4 pour l’encodage des caractères
– la ligne 5 pour l’affichage correct sur smartphone (utile mais pas suffisant pour rendre le site responsive). Pour en savoir plus, consulter ce lien :
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
– la ligne 6 pour le titre du site qui apparait dans l’onglet de la fenêtre du site et dans les moteurs de recherche
– la ligne 7 pour le lien vers le fichier CSS

Le <body> comporte quatre parties :
– un en-tête <header> regroupant ici un logo, le titre du site et le sous-titre, paramétrables dans WordPress et une <nav> pour le menu principal
– une <section> pour le contenu principal, ici des articles contenant une image, un titre et une légende de portfolio
– un <aside> pour des informations complémentaires, ou dans WordPress, pour l’affichage des Widgets (archives, articles récents, tags, etc.)
– un <footer> pour le pied de page, avec par exemple un copyright et le menu réseaux sociaux.

Toutes ces zones comportent un identifiant id pour les grandes boîtes ou une classe class pour les autres et sont incluses dans une <div> globale avec un id #wrapper. Bien entendu, cette configuration n’est qu’un exemple, et d’autres configurations sont envisageables, selon vos besoins.

Une grande partie du contenu est codé « en dur », c’est-à-dire que le contenu est indiqué directement dans le code, à commencer par le titre par exemple. Il va falloir remplacer tout cela par du code PHP qui va appeler le contenu de la Base de Données et rendre le site dynamique. Le code PHP correspondant à ce fichier HTML va se répartir dans plusieurs fichiers PHP liés entre eux. C’est ce que nous allons voir dans la deuxième partie de cet article.