Créez votre propre thème WordPress

Dans les articles précédents, nous avons examiné comment vous pouvez personnaliser un site Web WordPress, créer votre propre thème enfant ou vos propres modèles.

Aujourd'hui, nous allons voir comment créer votre propre thème WordPress. Allons-y!

Pourquoi créer votre propre thème WordPress ?

WordPress offre plusieurs façons de personnaliser votre site Web. Alors, pourquoi ressentiriez-vous le besoin de créer votre propre thème ? Dans certains cas, les thèmes prêts à l'emploi peuvent ne pas correspondre à la conception de votre marque ou avoir les fonctions dont vous avez besoin. Un thème personnalisé pourrait résoudre ce problème et vous donner exactement le style de site que vous souhaitez avec toutes les fonctions dont vous avez besoin sans avoir à vous fier à un thème tiers.

Exigences avant de créer un thème

Pour pouvoir reproduire les étapes suivantes dans l'exemple ci-dessous, nous devons disposer d'une configuration d'installation WordPress prête à l'emploi, soit localement, soit sur un espace serveur que vous administrez. N'essayez pas cela sur un site en direct. Créez plutôt un environnement de test.

Une connaissance pratique et une compréhension de CSS, PHP et HTML sont également requises.

Créer le thème

Nous nommerons notre thème "Mon premier thème". La première étape consiste à créer les fichiers nécessaires pour que le thème soit visible dans la zone d'administration. Pour ce faire, nous allons créer un fichier style.css et index.php.

Nous créons un sous-dossier pour notre thème, sous le dossier wp-content/themes/ que nous nommons « my-first-theme » et ajoutons ces 2 fichiers à ce dossier.

À ce stade, le thème devrait être visible en tant que choix dans la zone d'administration.

Si l'un de ces fichiers est manquant, vous recevrez un message vous avertissant que le thème est cassé. Par exemple, si index.php est manquant, vous verrez quelque chose comme ceci :

Dans le fichier style.css, nous ajouterons quelques commentaires qui informent WordPress de notre thème. L'information la plus importante est le nom sous lequel elle sera répertoriée. En dehors de cela, vous pouvez dire qui est l'auteur ou donner un URI d'auteur afin que les utilisateurs puissent visiter un site Web pour en savoir plus sur votre thème. Donnez une description à afficher dans la popup modale du thème d'administration et la version de l'installation.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

REMARQUE : Vous pouvez également définir votre licence. Si vous souhaitez que votre thème soit distribué sur WordPress, votre thème doit être compatible GPL.

Si vous avez besoin d'afficher une image de logo, insérez un fichier screenshot.png dans le même espace où se trouvent les fichiers style.css et index.php.

Maintenant, si vous activez votre thème dans l'écran d'administration des thèmes, vous devriez voir quelque chose comme ceci :

Et si vous cliquez sur "Détails du thème", vous devriez voir ceci :

Fichiers de thème

Il est maintenant temps d'écrire du code dans le fichier index.php. À titre de test, ouvrez le fichier avec votre éditeur préféré et insérez n'importe quel type d'élément HTML, par exemple

 <h1>My First Theme's Content</h1>

Enregistrez le fichier et visitez le front-end. Vous ne devriez voir que le titre "Contenu de mon premier thème"

À ce stade, vous devez décider de la mise en page de votre thème.

Disposition du thème

Les itinéraires à suivre à partir d'ici sont illimités. Nous vous recommandons vivement de prendre votre temps et d'étudier le fonctionnement des thèmes WordPress. Plus important encore, assurez-vous de bien comprendre la hiérarchie des modèles avant de procéder à la structuration de votre propre thème.

Hébergez votre site web avec Pressidium

GARANTIE DE REMBOURSEMENT DE 60 JOURS

VOIR NOS FORFAITS

En un mot, WordPress fournit un moyen d'appeler différents fichiers php en fonction du type de contenu. Ceci est accompli avec des requêtes. Une requête vérifie si la page actuellement consultée contient des publications ou est une page de résultats de recherche ou tout autre type de contenu, et génère le code correspondant.

Un exemple classique consiste à séparer l'en-tête et le pied de page en créant des fichiers individuels pour chacun d'eux. Pour voir un exemple très simplifié de la façon dont vous pouvez le faire vous-même, insérez ce morceau de code dans le fichier index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Ce code, utilisant les fonctions WordPress construites wp_head() et wp_footer(), fournit une disposition de contenu par défaut qui comprend un en-tête avec logo, titre et menu, le corps principal où les requêtes afficheront le bon contenu et un pied de page contenant les informations du site.

Si nous souhaitons diviser ce code et utiliser des fichiers header.php et footer.php séparés, vous devez créer les fichiers dans le dossier du thème.

Et divisez le code comme ceci:

Index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Footer.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Et c'est tout! Vous avez créé votre premier thème !

Thèmes de démarrage

Nous avons vu ci-dessus comment créer un thème manuellement… quels fichiers doivent être créés et quel code vous pouvez inclure. Si vous êtes déjà familiarisé avec cela, vous pouvez gagner du temps en téléchargeant un thème de démarrage WordPress en quelques secondes. Essayez Underscore par exemple, où vous pouvez simplement donner un nom et télécharger immédiatement le fichier zip du thème.

Génial, non ?

Conclusion

Un thème WordPress personnalisé est une excellente solution lorsque vous avez besoin de plus de flexibilité en tant que développeur. Créer un thème peut sembler un processus intimidant. Espérons que cet article l'a montré, c'est en fait assez facile à faire. La clé est de ne pas se précipiter avant de commencer à coder. Prenez du recul, étudiez la structure du thème qui répond à vos exigences, puis allez-y.