Comment créer un thème WordPress à partir de zéro • WPShout

By | septembre 15, 2020

Formation gratuite WordPress

Quand il s'agit de choisir un thème WordPress pour votre site Web, vous avez des tonnes d'options. Le plus puissant est peut-être de renoncer aux thèmes prêts à l'emploi du marché et de créer les vôtres. La création de votre propre thème vous donne un contrôle total en ce qui concerne l'apparence et les fonctionnalités. Cela peut amener votre projet à un niveau supérieur. C'est pourquoi aujourd'hui, nous allons vous montrer comment créer un thème WordPress à partir de zéro.

Bien sûr, c’est une tâche énorme. Et vous vous demandez peut-être pourquoi vous souhaitez effectuer tout le travail nécessaire pour créer votre propre thème WordPress. Le produit final pourrait-il être autant mieux qu'un thème prêt à l'emploi?

Avantages du développement de thèmes WordPress personnalisés

Un thème personnalisé est bien plus que ce que vous voyez. Et il y a des avantages à avoir un peu partout. Par exemple, en partant de zéro, vous n’avez pas à déchirer le code d’un autre développeur pour personnaliser divers éléments. Dans le même temps, vous n'êtes pas limité par les paramètres que le développeur a intégrés au thème.

En outre, il peut également y avoir des gains importants à réaliser sur les performances du site. Les thèmes prêts à l'emploi ont tendance à inclure de nombreux scripts et styles, dont certains peuvent rester inutilisés. En développant vous-même un thème WordPress, vous pouvez ajouter uniquement les éléments dont vous avez besoin. Cela réduit les ballonnements et peut améliorer les temps de chargement des pages.

En vérité, nous ne faisons qu’effleurer la surface de ce qui peut être réalisé. Tout compte fait, il s'agit de créer un thème WordPress qui répond exactement aux besoins de votre projet – ni plus ni moins. Cela ne devrait-il pas être un objectif pour chaque site Web que vous créez?

Alors, jetons un coup d'œil dans les coulisses pour savoir comment créer votre propre thème WordPress!

Développement de thèmes WordPress pour les débutants

Pour les débutants, le développement de thèmes WordPress peut être intimidant. C’est compréhensible, car c’est un vaste sujet avec tant de possibilités. Et si vous avez déjà parcouru le code source d'un thème prêt à l'emploi, il est facile de se sentir dépassé. Il y a beaucoup à digérer.

Une façon d'aplatir la courbe d'apprentissage est de commencer par les bases. Parce que, une fois que vous avez compris ce qui fait fonctionner un thème WordPress, vous pouvez construire sur cette base une brique à la fois.

Avant d'entrer dans les mauvaises herbes, réduisons la tâche de développement d'un thème WordPress à certains concepts de base.

Les compétences de base requises pour le développement de thèmes WordPress

Tout d’abord, vous n’avez pas besoin d’être un programmeur expert pour créer votre propre thème WordPress. Il ne nécessite pas de connaissances avancées en informatique.

Pour commencer, vous devez avoir une compréhension de base des langues suivantes:

Et non, nous n’avons pas oublié JavaScript. Il est largement utilisé et essentiel pour les fonctionnalités avancées. Mais pour ceux qui apprennent juste le fonctionnement des thèmes WordPress, ce n'est pas à 100% nécessaire à ce stade.

Le principal à retenir: n’ayez pas peur de ce que vous ne savez pas. Développer un thème WordPress est en fait une excellente occasion d'améliorer vos compétences dans ces domaines. Plus vous pratiquez, plus vous apprendrez.

Ajouter le manuel du développeur de thème WordPress et d'autres didacticiels aux favoris

Un ensemble de ressources utiles est le meilleur ami d’un développeur. Qu'il s'agisse de documents de référence sur lesquels vous pouvez vous appuyer pour trouver la fonctionnalité dont vous avez besoin ou d'un didacticiel guidé, nous pouvons tous bénéficier d'une aide supplémentaire.

Le Web regorge de ressources de développement de thèmes WordPress. Mais il y a quelques éléments spécifiques que nous aimerions souligner:

Manuel du développeur de thème

WordPress comprend un massif quantité de fonctionnalités intégrées pour les thèmes. Il est extrêmement utile dans la mesure où à peu près tout ce que vous souhaitez faire avec votre thème personnalisé existe déjà. Vous avez juste besoin de savoir où le trouver et comment l'utiliser.

Le Manuel du développeur de thèmes servira de point de référence de facto sur votre parcours. Il comprend tout, des bases du fonctionnement d'un thème à une longue liste de fonctionnalités. Vous vous retrouverez à revenir à cette ressource à maintes reprises.

Cours: Développement de thèmes WordPress (concepts de base)

Rédigé par notre propre David Hayes, ce cours gratuit vous emmènera dans une visite guidée des concepts de base du développement d'un thème WordPress. Vous apprendrez les clés pour commencer, telles que la hiérarchie des modèles WordPress, la boucle et comment exploiter la puissance du functions.php fichier.

Ce qui est génial avec ce cours, c'est qu'il est facile à lire et comprend des fonctionnalités pour vous aider à renforcer ce que vous avez appris. C'est le contrepoids parfait au manuel du développeur de thèmes.

Cours: Développement de thèmes WordPress (concepts de base)

Étudier la hiérarchie des modèles WordPress

Qu'est-ce qu'un thème WordPress? Vous serez peut-être surpris de découvrir qu'un thème peut contenir aussi peu que deux fichiers:

  • index.php – Fournit un modèle pour votre thème pour afficher le contenu;
  • style.css – Sert de feuille de style principale pour votre thème;

Assez léger, non? Pour ajouter un peu plus de flexibilité, un thème «barebones» peut également inclure les éléments suivants:

  • header.php – Affiche la partie d'en-tête de votre site Web sur chaque page;
  • footer.php – Affiche la partie pied de page de votre site Web sur chaque page;
  • functions.php – Définit les fonctionnalités facultatives de votre thème, y compris les scripts et les styles mis en file d'attente, ainsi que des extraits de code PHP, etc.

En théorie, au moins, vous pourriez exécuter un site Web entier avec seulement ces fichiers. Mais nous voulons souvent personnaliser davantage les choses. C'est là que la hiérarchie des modèles WordPress entre en jeu.

Hiérarchie des thèmes WordPress

La hiérarchie nous donne un moyen de créer des modèles personnalisés pour différents types de contenu dans WordPress. Par exemple, vous souhaiterez peut-être personnaliser l'apparence des articles de blog (single.php) ou ajoutez des fonctionnalités spécifiques à la page À propos de nous de votre site (page-à-propos-de-nous.php).

De plus, les modèles personnalisés que vous créez peuvent être aussi larges ou étroits que vous le souhaitez. Les modèles peuvent cibler uniquement des types de publication spécifiques (archive-musique.php) ou simplement la page d'accueil de votre site (front-page.php). Le précité index.php template, d'autre part, pourrait éventuellement gérer chaque élément de contenu par lui-même.

En termes simples, si vous souhaitez créer un thème WordPress réactif à partir de zéro, vous devez connaître la hiérarchie des modèles. Pour vraiment creuser, assurez-vous de consulter la vue d'ensemble visuelle pour avoir une meilleure idée du fonctionnement des choses.

Comprenez qu'un fichier modèle peut être aussi simple ou complexe que vous le souhaitez

Jetez un coup d'œil au code source de l'un de ces thèmes WordPress à tout faire et vous serez peut-être surpris par sa complexité. Et bien que nous puissions débattre des mérites de savoir si le thème est bien construit, il n'y a aucun doute sur le code avancé qui se trouve à l'intérieur.

Mais un modèle de thème WordPress n'a pas à être si compliqué. Considérez cet exemple de index.php modèle du manuel du développeur de thème WordPress, avec quelques commentaires explicatifs ajoutés dans:

Bien qu'il s'agisse d'une quantité minimale de code, elle pourrait également être réduite encore plus. Seule la partie «La boucle» du modèle est réellement requise.

Ce qu'il faut retenir, c'est qu'un modèle de thème WordPress peut être incroyablement simple. Mais il a également la capacité d'être intégré dans quelque chose de plus complexe – si votre projet l'exige.

Outils et techniques pour vous aider à créer votre propre thème WordPress

Une clé pour apprendre à créer un thème WordPress à partir de zéro est de trouver des moyens de simplifier le processus – en particulier au début. Essayer d'en faire trop trop tôt peut entraîner de la frustration.

Heureusement, il existe à la fois des outils et des techniques qui peuvent être d'une grande aide.

Utiliser un thème WordPress Starter

Bien qu'il soit certainement possible de démarrer votre éditeur de code avec un écran complètement vide et de créer un thème WordPress réactif à partir de zéro, ce n'est pas très efficace. Du moins pas pour le travail de projet qui doit être fait en temps opportun.

Le thème de démarrage WordPress Underscores

C'est pourquoi les thèmes de démarrage WordPress tels que Underscores sont très populaires au sein de la communauté des développeurs. Ils sont conçus pour donner une longueur d'avance à votre projet de thème en prenant en charge les bases, notamment:

Modèles de thèmes

Un thème de démarrage typique fournira des modèles de thème qui couvrent les éléments couramment utilisés. Par exemple, vous trouverez probablement des modèles pour:

  • index et secours (index.php)
  • en-tête (header.php)
  • pied de page (footer.php)
  • archives de messages (archive.php)
  • messages uniques (single.php)
  • barre latérale
  • résultats de la recherche (search.php)

Cela peut varier en fonction du package de thème de départ que vous choisissez, mais cela devrait vous donner une idée de ce à quoi vous attendre.

Styles et dispositions de base

Le travail d'un thème de démarrage WordPress est de vous faire gagner du temps – potentiellement des heures. Par conséquent, les styles CSS inclus seront probablement minimaux et sans opinion.

Ils vous donnent un cadre pour personnaliser l'apparence et la mise en page en fonction de vos besoins. Cela peut également inclure des styles réactifs pour vous aider à créer en pensant aux appareils mobiles.

Il est peu probable que vous trouviez des styles très raffinés. Pourquoi? L'idée est de vous aider à construire à partir de zéro, au lieu de déchirer ce qui est déjà là et de recommencer.

Fonctionnalité utile

En plus des modèles et des styles de base, un thème de démarrage WordPress peut inclure des fonctionnalités utiles. Par exemple, il pourrait y avoir des fonctionnalités qui permettent une meilleure accessibilité ou une meilleure navigation mobile.

Là encore, l'objectif est de vous fournir les bases et de vous permettre de prendre le relais à partir de là.

Personnalisez votre thème de démarrage

Vous voulez maximiser encore plus l'efficacité du développement de votre thème WordPress? Créez une version personnalisée de votre thème de démarrage que vous pouvez consulter encore et encore.

Il s'agit essentiellement d'ajouter des scripts, des styles ou d'autres fonctionnalités que vous utilisez généralement dans tous vos projets. Cela vous évitera d'avoir à ajouter ces éléments à chaque fois que vous commencerez à créer un nouveau site Web.

À titre d'exemple, disons que vous avez une configuration de navigation mobile que vous préférez. Vous pouvez le configurer comme vous le souhaitez dans votre thème de démarrage WordPress, puis l'enregistrer sur votre appareil ou sur un service tel que GitHub.

Désormais, chaque fois que vous démarrez un nouveau projet, cette configuration est déjà là pour vous. C’est un élément de moins sur votre liste de tâches.

Conserver une bibliothèque d'extraits de code

À l'inverse, lors du développement d'un thème WordPress, il peut y avoir de petites fonctionnalités que vous n'utilisez qu'occasionnellement. C'est peut-être une requête de publication personnalisée ou un code qui étend un plugin WordPress. Ce sont des éléments que vous ne devriez pas avoir à recommencer à chaque fois.

Dans ces situations, la création d'une bibliothèque d'extraits de code peut servir de ressource pratique. Que vous les enregistriez sous forme de gists GitHub ou dans un fichier texte, vous aurez facilement accès au code chaque fois que vous en aurez besoin.

Allusion: Ajoutez des notes à chaque extrait de code pour vous rappeler ce qu'il fait et comment l'utiliser. Cela vous évitera d'avoir à rechercher les réponses!

Vous voulez savoir comment quelque chose fonctionne? Découvrez les thèmes WordPress par défaut

Les thèmes par défaut fournis avec WordPress (Twenty Twenty, Twenty Nineteen et ainsi de suite) peuvent également être une excellente ressource pour votre parcours de développement de thème.

Ces thèmes ont tendance à utiliser les dernières et les meilleures fonctionnalités de WordPress au fur et à mesure de leur sortie. Si vous vous demandez comment styliser des blocs de Gutenberg à large alignement, par exemple, il est directement intégré à Twenty Twenty. Il en va de même pour des fonctionnalités telles que le personnalisateur de thème et même des menus personnalisés.

Parfois, voir le code en action est la meilleure façon d'apprendre. Ainsi, même si vous n'utilisez pas de thème WordPress par défaut pour votre site Web, vous pouvez toujours en acquérir des connaissances vitales.

Oui, vous pouvez créer votre propre thème WordPress!

Pour être sûr, se lancer dans le développement de thèmes WordPress est un défi. Mais, en commençant par les bases, vous pouvez progressivement apprendre les ficelles du métier. Au fur et à mesure que vos compétences s'amélioreront, vous serez plus en mesure de travailler avec des implémentations plus complexes.

Une chose à garder à l'esprit est que même les développeurs de thèmes expérimentés ont besoin d'un coup de main. C’est pourquoi il est important d’utiliser des ressources telles que le Manuel du développeur de thèmes et des didacticiels comme celui-ci.

Et, une fois que vous aurez maîtrisé le développement de thèmes, vous souhaiterez être à la recherche de moyens d'augmenter votre efficacité. C'est là qu'un thème de démarrage WordPress peut être d'une grande aide.

Nous espérons que vous avez trouvé ce didacticiel utile dans votre voyage et qu'il vous donnera la motivation pour créer votre propre thème WordPress. Bonne chance!

Crédit d'image: WordPress.org