Tutoriel sur le thème WordPress pour les débutants – Partie 2 : Modèles
Cette leçon du didacticiel sur le thème WordPress pour les débutants vous apprendra à structurer les principaux éléments constitutifs d’un thème et à commencer à créer des modèles. Nous allons commencer à créer une sortie HTML et comment inclure les blocs de construction dans les modèles de notre thème. Dans l’ étape précédente, nous avons mis en place le strict minimum d’un thème WordPress et l’avons activé. Mais pour le moment, il ne fait pas grand-chose et ne contient même pas de code HTML valide pour une page Web. Réparons ça.
Blocs de construction d’en-tête et de pied de page (et barre latérale)
Dans nos fichiers modèles, nous avons besoin d’un code HTML valide. Nous pourrions écrire la structure HTML complète (commençant par <html>, <head>et full <body>) dans index.php, mais cela devient peu pratique lorsque vous conservez plusieurs fichiers modèles dans votre thème. Imaginez avoir créé un tas de modèles, puis réalisez que vous avez besoin d’un petit changement dans la partie en-tête ; vous devrez alors modifier tous les modèles afin qu’ils restent cohérents. Ce n’est pas intelligent.
La solution consiste à diviser la structure HTML complète en parties sensibles ; blocs de construction. Chaque bloc réside dans son propre fichier, et chaque fois que nous en avons besoin dans un modèle, nous les incluons. Les blocs les plus courants et les plus sensibles sont un pour l’en-tête, un pour le pied de page et un pour le contenu, mais si votre thème comporte une barre latérale, la barre latérale doit également être un bâtiment séparé.
Ceux d’entre vous qui sont plus familiers avec PHP connaissent probablement les méthodes include()ou require(). C’est précisément ce que nous ferons, mais nous utiliserons les fonctions de WordPress pour inclure d’autres fichiers car elles présentent des avantages supplémentaires.
Dans cette leçon, nous allons créer l’en-tête, le pied de page et la barre latérale en tant que blocs de construction. Les barres latérales sont cependant devenues de moins en moins courantes dans les pages Web, mais nous allons toujours implémenter une barre latérale droite dans notre thème. Ces trois blocs de construction sont une pratique courante dans tous les thèmes WordPress – et c’est en fait si courant que WordPress offre une automatisation pour ces trois choses.
Création des modèles d’en-tête, de pied de page et de barre latérale
Créons un nouveau fichier vide nommé header.phpdans notre dossier de thème. Nous allons ajouter du HTML très basique pour le moment (ne vous inquiétez pas, nous ajouterons du HTML plus approprié plus tard).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Créez un nouveau fichier nommé footer.phpdans votre répertoire de thème. Tout ce dont nous avons besoin (pour l’instant) dans ce fichier est la fermeture de notre structure HTML.
</body>
</html>Et enfin, créez un nouveau fichier vide nommé sidebar.php. Nous ajoutons juste la balise HTML à l’ <aside>intérieur.
<aside class="sidebar">
</aside>Y compris les blocs de construction
Revenons à notre index.phpdossier. Tout ce que nous devons faire maintenant est de dire à WordPress où nous voulons inclure le fichier d’en-tête et de pied de page. Évidemment, nous voulons charger l’en-tête au tout début et le pied de page à la toute fin de ce fichier.
WordPress propose des fonctions simples pour inclure ces blocs de construction ; get_header()et get_footer()pour le fichier d’en-tête et de pied de page, respectivement. Plutôt intuitif non? Ajoutons-les dans notre index.php et voyons ce qui se passe.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Actualisez votre interface et inspectez ou affichez la source HTML pour voir que nous avons combiné plusieurs blocs de construction pour créer une structure HTML complète.
Vous êtes maintenant libre de modifier le contenu de index.phpindépendamment de l’en-tête et du pied de page !
Incluons également la barre latérale. Gardez à l’esprit que dans votre thème, vous voudrez peut-être envisager des cas et des modèles où vous ne voulez pas la barre latérale, par exemple la page d’accueil.
Inclure la barre latérale est aussi simple que l’en-tête et le pied de page ; pour cela nous utilisons get_sidebar(). Ajoutons cela à index.php, juste avant d’obtenir le pied de page.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Actualisez et vous devriez voir la source HTML, y compris notre fichier <aside>. Ne vous inquiétez pas, dans une étape ultérieure, nous apprendrons à le convertir en une véritable zone de barre latérale dans laquelle vous pourrez placer des widgets.
Notre thème est assez statique en ce moment. Dans la prochaine leçon de cette série de didacticiels sur le thème WordPress, nous commencerons enfin à plonger correctement dans les fonctions de WordPress afin de charger dynamiquement le contenu et les informations de WordPress dans nos modèles.