Dans la première partie de ce didacticiel, nous avons couvert les bases de la conversion d'un modèle HTML en thème WordPress. Si vous êtes le moindrement curieux, nous avons appris quelques choses sur la division des modèles HTML en fichiers PHP, leur 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 prendrons les choses un peu 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, on y va.

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 comme ça PHP. 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. Ainsi, 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 saisira ce logo.

Remarquez 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 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 modèles

Dans la première partie de ce didacticiel, nous avons mentionné quatre fichiers de modèle de base, à savoir index.php, en-tête.php, barre latérale.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 modèles sont les éléments constitutifs des thèmes WordPress. Pour mieux comprendre les modèles, plongeons-nous dans un concept connu sous le nom de 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 contenu) comme expliqué ci-dessous :

  • Tout d'abord, WordPress recherchera un fichier de modèle correspondant à l'ID de catégorie
  • Si l'ID de la catégorie est, par exemple, 2, WordPress recherchera un fichier de modèle nommé catégorie-2.php
  • Si catégorie-2.php n'est pas disponible, WordPress optera pour un fichier de modèle de catégorie générique tel que catégorie.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 de modèle 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 messages tels que définis dans les affichages de la page d'accueil
single.php Utilisé pour afficher 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 afficher des pages statiques
catégorie.php ou archive.php Utilisé pour afficher l'index des archives de catégories
auteur.php Utilisé pour rendre l'auteur
date.php Utilisé pour afficher la date
recherche.php Utilisé pour afficher les résultats de la recherche
404.php Utilisé pour afficher la page d'erreur 404 du serveur

Ceci n'est qu'une courte liste, il y en a beaucoup d'autres Modèles WordPress. Le sujet des modèles est important, et la meilleure façon d'apprendre à jouer avec les fichiers de modèles est de lire le vaste 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

Étant donné que nous venons d'introduire les fichiers de modèles, il est juste de mentionner une chose ou deux sur les balises de modèle et le 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.”

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. Avec cela à l'écart, modifions la balise HTML d'ouverture. Nous inclurons 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 ce qui suit :

<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 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 récupérera 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. Avec cela à l'écart, 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 message et la seconde balise bloginfo(‘name') 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 vous reposer ?

Création d'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. 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 faites une capture d'écran de votre thème. Assurez-vous que votre image mesure 600 pixels de large et 450 pixels 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 avenir proche, je vous présenterai d'autres aspects de la thématisation WordPress, mais en attendant, j'ai préparé les ressources suivantes rien que pour vous :

Bonne création !

Laisser un commentaire