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 curieux, nous avons appris quelques choses sur la division des modèles HTML en fichiers PHP, leur réassemblage, le style et la dénomination 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 l’article 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 révéler 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 d’en-tête, 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 récupérera ce logo.

Avez-vous remarqué une différence? Évidemment, ce morceau de code corrigera uniquement votre logo. Pour corriger d’autres images, vous devrez réécrire leurs codes de la même manière. Trucs de pois 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 example.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 devriez 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 de modèle

Dans la première partie de ce didacticiel, nous avons mentionné quatre fichiers de modèle de base, à savoir index.php, header.php, sidebar.php et footer.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 de modèle sont les éléments constitutifs des thèmes WordPress. Pour mieux comprendre les modèles, plongeons-nous dans un concept appelé hiérarchie de 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 de modèles pour générer le bon fichier (et contenu) comme expliqué ci-dessous:

  • Tout d’abord, WordPress recherchera un fichier 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 optera 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 disponible également, 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 modèles incluent:

home.php ou index.php Utilisé pour rendre l’index des articles de blog
front-page.php Utilisé pour rendre les pages statiques ou les derniers articles tels que définis dans les affichages de la page d’accueil
single.php Utilisé pour rendre une seule page d’article
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 des pages statiques
category.php ou archive.php Utilisé pour afficher l’index des archives de catégories
author.php Utilisé pour rendre l’auteur
date.php Utilisé pour rendre la date
search.php Utilisé pour rendre les résultats de la recherche
404.php Utilisé pour rendre 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 un sujet important, et la meilleure façon d’apprendre à jouer avec les fichiers de modèle est de lire le Développement de thème bibliothèque sur WordPress. Alternativement, vous pouvez lire le plus court Section des modèles sur WordPress Codex.

Balises de modèle

Voyant que nous venons d’introduire les fichiers de modèle, il est juste de mentionner une chose ou deux sur les balises de modèle et le rôle qu’elles jouent dans la thématisation de 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 pour personnaliser votre blog, en fournissant les outils nécessaires pour le rendre aussi individuel et intéressant que vous.»

Dans notre tutoriel précédent, vous avez rencontré quelques balises de modèle telles que get_header, get_sidebar, get_footer et bloginfo. 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 vous ne l’avez pas fait, voici le code:

<!DOCTYPE HTML>

La déclaration DOCTYPE donne du sens à votre code HTML. Avec cela à l’écart, 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 utilisé le balise bloginfo pour inclure le flux RSS (‘rss2_url’) et 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 dit, 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>

Le premier tag wp_title ajoutera le titre de votre page ou de votre message 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 devez avoir remarqué qu’il manquait une capture d’écran dans le panneau de thème WordPress. Cela 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’image préféré (par exemple Adobe Photoshop) ou prenez une capture d’écran de votre thème. Assurez-vous que votre image mesure 600 px de large et 450 px de haut. Enregistrez l’image sous screenshot.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 proche avenir, je vous présenterai d’autres aspects du thème WordPress, mais en attendant, j’ai préparé les ressources suivantes juste pour vous:

Bonne création!

Share: