Dans la première partie de ce didacticiel, nous avons couvert les bases de la conversion d’un modèle HTML en un thème WordPress. Si vous êtes un tout petit peu curieux, nous avons appris quelques petites choses sur la division des modèles HTML en fichiers PHP, leur remontage, le style et le nom des thèmes WordPress. Vraiment, nous avons beaucoup appris et vous voudrez vous familiariser avec les concepts que nous avons abordés dans notre premier tutoriel pour profiter de cette deuxième portion. Dans le post d’aujourd’hui, nous allons prendre les choses un cran plus haut. Nous couvrirons quelques domaines supplémentaires afin que vous puissiez créer un thème WordPress entièrement fonctionnel. Alors, sans plus tarder, c’est parti.
Configuration des images et des fichiers JavaScript
Si vous aviez des images dans votre modèle HTML d’origine (index.html), vous avez probablement remarqué qu’ils ont cessé de s’afficher après avoir découpé le modèle en fichiers PHP. Ne vous inquiétez pas du tout, c’est juste la façon dont PHP est. Par exemple, si vous aviez un logo dans votre section d’en-tête comme ceci…
<img alt="your_logo_alt_text" src="images/logo.jpg" />
… vous devrez jouer un peu avec le code. Le code que je vais vous dévoiler dans un instant aidera les navigateurs à trouver votre logo (ou toute autre image) dans votre images dossier, qui est (ou devrait être) un sous-dossier du répertoire principal de votre thème. Donc, pour afficher votre logo dans la section header, ouvrez le fichier header.php et remplacez le code ci-dessus par le suivant :
<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />
La fonction get_template_directory_uri() renvoie l’url de votre répertoire de thème. Donc, si vous ajoutez votre logo dans un dossier d’images, le code saisira ce logo.
Remarquez-vous une différence? Évidemment, ce morceau de code ne corrigera que votre logo. Pour corriger d’autres images, vous devrez réécrire leurs codes de la même manière. Trucs faciles.
Passons à JavaScript. Si votre site Web HTML utilise JavaScript, créez un dossier nommé js et placez-y vos scripts. Vous pouvez les appeler dans le fichier header.php en utilisant le code suivant :
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>
Le code ci-dessus utilise exemple.js pour illustrer. N’oubliez pas de remplacer cette partie par le nom de votre fichier JavaScript.
Bien sûr, si vous créez un thème pour quelqu’un d’autre, vous devez vraiment charger vos fichiers js avec wp_enqueue_scripts. Consultez les articles d’AJ sur l’ajout de JavaScript aux thèmes WordPress pour plus d’informations et de conseils.
Fichiers modèles
Dans la première partie de ce didacticiel, nous avons mentionné quatre fichiers modèles de base, à savoir index.php, header.php, sidebar.php et pied de page.php. Les fichiers de modèle contrôlent la façon dont votre site Web sera affiché sur le Web. Les modèles obtiennent des informations de la base de données MySQL de votre WordPress et les traduisent en code HTML affiché dans les navigateurs Web. En d’autres termes, les fichiers modèles sont les éléments constitutifs des thèmes WordPress. Pour mieux comprendre les modèles, examinons un concept appelé hiérarchie des modèles.
Nous utiliserons une analogie. Si un visiteur clique sur un lien de catégorie (c’est-à-dire un lien vers une catégorie) tel que http://www.yoursite.com/blog/category/your-category/, WordPress utilise la hiérarchie des modèles pour générer le bon fichier (et le bon contenu) expliqué ci-dessous :
- Tout d’abord, WordPress recherchera un fichier de modèle qui correspond à l’ID de catégorie
- Si l’ID de la catégorie est, par exemple 2, WordPress recherchera un fichier modèle nommé category-2.php
- Si category-2.php n’est pas disponible, WordPress ira pour un fichier de modèle de catégorie générique tel que category.php
- Si ce fichier de modèle n’est pas non plus disponible, WordPress recherchera un modèle d’archive générique tel que archive.php
- Si le modèle d’archive générique n’existe pas, WordPress se rabattra sur le fichier de modèle principal, index.php
C’est ainsi que fonctionnent les modèles WordPress, et vous pouvez utiliser ces fichiers pour personnaliser votre thème WordPress en fonction de vos besoins. Les autres fichiers de modèle incluent :
home.php ou index.php | Utilisé pour afficher l’index des articles de blog |
page d’accueil.php | Utilisé pour rendre les pages statiques ou les derniers messages tels que définis dans les affichages de la page d’accueil |
unique.php | Utilisé pour rendre une seule page de publication |
single-{post-type}.php | Utilisé pour rendre les types de publication personnalisés, par exemple si le type de publication était un produit, WordPress utiliserait single-product.php |
page.php | Utilisé pour rendre les pages statiques |
catégorie.php ou archive.php | Utilisé pour rendre l’index des archives de catégorie |
auteur.php | Utilisé pour rendre l’auteur |
date.php | Utilisé pour rendre la date |
recherche.php | Utilisé pour afficher les résultats de la recherche |
404.php | Utilisé pour afficher la page d’erreur du serveur 404 |
Ceci est juste une courte liste, il y en a beaucoup d’autres modèles WordPress. Le sujet des modèles est vaste, et la meilleure façon d’apprendre à jouer avec les fichiers modèles est de lire le vaste Développement de thème bibliothèque sur WordPress. Alternativement, vous pouvez lire le plus court Section Modèles du Codex WordPress.
Balises de modèle
Étant donné que nous venons de présenter les fichiers de modèle, il n’est que juste de mentionner une ou deux choses à propos des balises de modèle et du rôle qu’elles jouent dans le thème WordPress. Selon WordPress.org, « … les balises de modèle sont utilisées dans le modèle de votre blog pour afficher des informations de manière dynamique ou personnaliser votre blog, en fournissant les outils pour le rendre aussi individuel et intéressant que vous l’êtes.
Dans notre précédent tutoriel, vous avez rencontré quelques balises de modèle telles que get_header, get_sidebar, get_footer et informations sur le blog. Dans la section suivante, nous ajouterons quelques balises de modèle à notre thème WordPress nouvellement créé. Je suppose que vous avez déjà inclus la déclaration DOCTYPE dans votre fichier header.php. Si ce n’est pas le cas, voici le code :
<!DOCTYPE HTML>
La déclaration DOCTYPE donne du sens à votre code HTML. Ceci étant fait, modifions la balise HTML d’ouverture. Nous allons inclure un attribut lang en utilisant le balise language_attributes ainsi:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
Le code ci-dessus générera les éléments suivants :
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
Avec la déclaration DOCTYPE et la balise language_attribute en place, la structure de votre thème est légitime et les navigateurs comprendront votre code. Si vous créez un thème pour un blog, il est important de placer des liens vers votre URL de pingback et votre flux RSS dans votre tête. Dans votre header.php, ajoutez le code suivant :
<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />
Avez-vous remarqué comment nous avons employé le balise bloginfo inclure le flux RSS (‘rss2_url’) et le pingback (‘pingback_url’) ? Avant d’enregistrer votre fichier header.php, ajoutez également le code suivant :
<?php wp_head(); ?>
La balise wp_head ci-dessus va extraire les feuilles de style et les fichiers JavaScript requis par vos plugins. Si vous omettez ce petit morceau de code, vos plugins pourraient ne pas fonctionner comme vous le souhaitez. Cela étant réglé, ajoutons des titres de page à notre thème WordPress en utilisant – encore une fois – la balise bloginfo. Dans votre fichier header.php, ajoutez le code suivant :
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
La première balise wp_title ajoutera le titre de votre page ou de votre article et la deuxième balise bloginfo(‘nom’) ajoutera le nom de votre blog. Maintenant que votre thème WordPress a des titres de page, que diriez-vous de créer une capture d’écran pour notre thème, de reconditionner le thème et de nous reposer ?
Créer une capture d’écran pour votre thème
Lorsque vous avez téléchargé votre thème de test pour la première fois, vous avez dû remarquer qu’il manquait une capture d’écran dans le panneau de thème WordPress. Il avait l’air terne, surtout si vous aviez d’autres thèmes avec des captures d’écran colorées. Mais ne vous inquiétez pas, créer une capture d’écran pour votre thème est très simple. Créez simplement une image à l’aide de votre éditeur d’images préféré (par exemple Adobe Photoshop) ou effectuez une capture d’écran de votre thème. Assurez-vous que votre image mesure 600px de large et 450px de haut. Enregistrez l’image sous capture d’écran.png dans votre dossier de thème. Enregistrez toutes les modifications, compressez votre dossier de thème dans une archive ZIP. Téléchargez le thème et activez-le pour voir vos nouvelles modifications 😉
Conclusion
Je veux croire que ce deuxième tutoriel vous a offert un aperçu plus approfondi de la création d’un thème WordPress à partir de HTML statique. Dans un futur proche, je vous présenterai d’autres aspects de la thématique WordPress, mais en attendant, j’ai préparé les ressources suivantes rien que pour vous :
- Modèles – Codex WordPress
- Balises de modèle – Codex WordPress
- Créez votre propre thème WordPress à partir d’un modèle HTML – SitePoint
- Créer un thème WordPress à partir de HTML statique – WPtuts+
Bonne création !