Comment développer un thème WordPress ?

Grâce à ce guide, vous allez apprendre à développer un thème WordPress. En effet, nous allons vous guider pas à pas dans le processus de création de votre premier thème personnalisé.

Bien qu’il existe de nombreux thèmes WordPress disponibles, il peut être intéressant de créer soit même son thème. Cependant, si vous êtes novices, se lancer dans le développement de ce dernier peut être fastidieux bien que cela soit relativement simple. En effet, la création d’un thème WordPress ne nécessite pas beaucoup de connaissance technique ou d’expérience en développement Web.

Introduction au développement de thème WordPress

Il existe de nombreux sites internet proposant des thèmes WordPress gratuits ou payants. Néanmoins, il est fort possible que les thèmes proposés ne répondent pas à toutes vos exigences. De ce fait, il vous faudra très certainement créer de toute pièce, votre thème WordPress.

Grâce aux nombreux outils disponibles sur beaucoup de plateforme, développer votre thème WordPress est relativement simple. Dans cet article, nous allons vous guider tout au long du processus de création de votre premier thème WordPress. Pour ce faire, vous aurez besoin:

• D’un site WordPress
• D’un hébergement Web

Il vous sera aussi nécessaire de disposer de certaines connaissances en PHP et CSS. En dernier lieu, il vous faudra un thème de démarrage qui vous permettra de rendre le processus de création beaucoup plus facile.

Qu’est-ce qu’un thème de démarrage ?

Un thème de démarrage est un thème WordPress que vous pouvez utiliser pour créer le vôtre. Cela vous permet de construire un cadre solide, sans vous soucier des complexités impliquées dans le codage d’un thème à partir de zéro. De plus, ce dernier vous aidera à comprendre le fonctionnement de WordPress en vous montrant la structure de base d’un thème et le fonctionnement de toutes les parties de ce dernier.

Pour cela, il existe de nombreux thèmes de démarrage tel qu’ Underscores, UnderStrap et Bones pour ne citer qu’eux.

Comment développer votre premier thème WordPress ?

Une fois l’hébergement Web souscrit et WordPress installé sur ce dernier, vous allez être en mesure de créer votre premier thème.

1. Configurer un environnement local

Avant toute chose, il sera nécessaire de créer un environnement local. Il s’agit d’un serveur que vous allez pouvoir installer sur votre ordinateur et qui vous permettra de développer et gérer vos sites WordPress en local. De ce fait, cela vous permettra, en cas d’erreur, de ne pas impacter votre site en production chez votre hébergeur Web.

Bien qu’il existe de nombre manière de créer un environnement local, nous allons utiliser dans cet exemple DesktopServer. En effet, il s’agit d’un moyen rapide et facile d’installer une version locale de WordPress. De plus, ce logiciel est compatible aussi bien avec Windows qu’avec Mac. Pour débuter, sélectionnez la version gratuite de DesktopServer, finalisez l’enregistrement et téléchargez le logiciel.

Installez le logiciel, une fois ce dernier téléchargé.

Une fois l’installation effectuée, ouvrez le logiciel et configurez votre nouvel environnement local.

2. Téléchargez et installez votre thème de démarrage

Comme la plupart des thèmes de démarrage, Underscores est très facile d’utilisation. Rendez-vous sur le site relatif au thème, remplissez le champ « Theme Name » et cliquez sur le bouton « Generate« .

Si vous le désirez, vous pouvez également cliquer sur « options avancées » afin de personnaliser d’avantage votre thème de base.

Parmi les options avancées, vous pouvez visualiser l’option « _sassify« . Cette option vous permettra d’ajouter des fichiers SASS (Syntactically Awesome StyleSheets) à votre thème. Il s’agit d’un langage de prétraitement pour CSS vous permettant d’utiliser des variables, des imbrications et des opérations mathématiques par exemple.

Une fois le formulaire rempli, cliquez sur « Générer » afin de télécharger un fichier zippé contenant votre thème de démarrage. Installez ce dernier sur votre site local.

3. Comprendre le fonctionnement de WordPress en coulisse

Avant de pouvoir personnaliser votre thème, il est nécessaire de comprendre son fonctionnement et comment s’emboîtent les différents composants. Dans un premier temps il est préférable de comprendre ce que sont les fichiers modèles. En effet, ces derniers sont les principaux éléments constitutifs d’un thème WordPress dans la mesure où ils déterminent la mise en page et l’apparence du contenu de votre site. Par exemple, header.php est utilisé afin de créer l’en-tête tandis que comments.php permet l’affichage des commentaires.

WordPress détermine les fichiers modèles à utiliser sur chaque page en parcourant la hiérarchie des modèles. Il s’agit de l’ordre dans lequel WordPress recherchera les fichiers modèles correspondants à chaque fois qu’une page de votre site est chargée.

Dans la mesure où le fichier index.php est requis pour tous les thèmes, il s’agira de ce fait, du fichier par défaut. Si vous désirez en savoir plus sur le fonctionnement de ce fichier, il vous est possible de le modifier.

Le deuxième élément important à comprendre est la boucle. Il s’agit du code utilisé par WordPress afin d’afficher le contenu. De ce fait, ce dernier apparaît dans tous les fichiers modèles qui affichent le contenu de la publication, tel qu’index.php ou sidebar.php.

4. Configurer votre thème

Bien que l’on puisse penser que le thème est mis en place sur un site WordPress à des fins esthétiques, ce dernier a néanmoins un impact énorme sur les fonctionnalités de votre site.

Ajouter des fonctionnalités avec des Hooks

Les hooks sont des extraits de code insérés dans des fichiers modèles et permettant l’exécution d’actions PHP sur différentes zones d’un site internet, d’insérer un style et d’afficher certaines informations. Bien que la plupart des Hooks soit implémentés directement dans le noyau WordPress, certains sont utiles pour développer votre thème.

Les Hooks les plus couramment utilisés sont les suivants :

• wp_head() : Ajouter entre les balises <head> dans le fichier header.php, il permet l’activation des styles, des scripts ainsi que d’autres informations s’exécutant au chargement de votre site.
• wp_footer() : Ajouté dans le fichier footer.php, juste avant la balise </body>, ce dernier est souvent utilisé pour insérer du code Google Analytics.
• wp_meta() : Généralement dans le fichier sidebar.php, il permet d’y inclure des scripts supplémentaires.
• comment_form() : Ajouté sur le fichier comment.php, juste avant la balise de fermeture </div>, ce hook permet l’affichage des commentaires.

Ces Hooks sont déjà inclus sur le thème Underscores.

Ajouter du style grâce au CSS

Les feuilles de style CSS permettent de définir l’apparence du contenu de votre site. Sur WordPress, cela s’effectue à l’aide du fichier style.css.

Si vous désirez un exemple rapide du fonctionnement du CSS, vous pouvez modifier l’un des styles et enregistrer les effets afin de visualiser les modifications. Par exemple, vous pouvez modifier le code suivant se trouvant généralement à la ligne 485

a {
color: royalblue;
}

Ce code permet de contrôler la couleur des hyperliens non visités.

Vous pouvez remplacer ce code par le code suivant :

a {
color: red;
}

Enregistrez le fichier et consultez votre site en local afin de visualiser les modifications.

5. Exportez votre thème et téléchargez-le sur votre site

Une fois la création de votre thème fini, vous pouvez tester le fonctionnement de ce dernier en utilisant les données de test unitaire du thème. Il s’agit d’un ensemble de données factices qu’il vous est possible de télécharger sur votre site. Ce dernier contient de nombreuses variantes de styles et de contenu.

Un fois testé, il ne vous restera plus qu’à exporter votre thème. Pour cela, recherchez l’installation de votre site WordPress sur votre ordinateur, ouvrez le dossier relatif à ce dernier et rendez-vous sur « wp-content/themes« .

Utilisez un outil de compression tel que Winrar afin de créer un fichier zippé du dossier relatif à votre thème.

Une fois le thème compressé, il vous sera possible de l’installer sur n’importe quel site WordPress de la même manière que l’installation du thème Underscores.

Conclusion

La création d’un thème WordPress en partant de zéro peut être difficile. Cependant, en utilisant un thème de démarrage tel que Underscores, il vous sera aisé de créer votre propre thème sur votre hébergement WordPress. A noter que beaucoup de documentation à ce sujet sont disponible sur le Web.