Comment développer votre propre thème WordPress (Guide du débutant)

Répertoire de thèmes WordPress

Si vous voulez que quelque chose soit fait d’une certaine manière, eh bien, vous devrez peut-être le faire vous-même. Bien sûr, bien qu’il existe de nombreux thèmes WordPress de qualité, en trouver un qui réponde à vos besoins spécifiques peut s’avérer difficile pour certains. Pour résoudre ce problème, vous pourriez être tenté de créer votre propre thème WordPress personnalisé.

Heureusement, la création d’un thème personnalisé pour WordPress est un processus relativement simple. Étonnamment, cela ne nécessite pas une tonne de connaissances techniques ou d’expérience en développement Web. De plus, la création de votre propre thème peut en valoir la peine, car vous pouvez donner à votre site l’apparence exacte que vous souhaitez.

Une introduction au développement de thèmes WordPress

Vous voulez que votre site ait fière allure et dispose de toutes les fonctionnalités dont vous avez besoin, alors vous consultez le répertoire de thèmes WordPress :

Répertoire de thèmes WordPress

Malheureusement, rien de ce que vous voyez ne répond à vos exigences et vous ne voulez pas faire de compromis sur votre vision. Peut-être que vous voulez quelque chose d’unique qui fera ressortir votre site, mais vous ne voulez pas dépenser de l’argent sur un thème premium.

À ce stade, vous pourriez envisager de créer votre propre thème. Heureusement, développer un thème pour WordPress n’est pas aussi compliqué qu’on pourrait le penser. Grâce à l’interface conviviale de la plateforme et aux nombreux outils disponibles, presque tout le monde peut créer un thème personnalisé.

Nous allons vous guider tout au long du processus de création de votre premier thème. Pour commencer, vous aurez besoin de deux choses :

Vous bénéficierez également d’une expérience avec les environnements de mise en scène locaux, car vous en utiliserez un pour créer votre thème. Avoir une certaine compréhension de CSS et de PHP sera également utile (si ce n’est nécessaire).

Enfin, il y a un outil important que vous voudrez avoir, ce qui facilitera grandement le processus : un thème de démarrage.

Qu’est-ce qu’un thème de démarrage (et pourquoi devriez-vous en utiliser un)

Un thème de démarrage est un thème WordPress simple que vous pouvez utiliser comme base pour créer le vôtre. Cela vous permet de construire sur un cadre solide sans avoir à vous soucier des complexités liées au codage d’un thème à partir de zéro. Il vous aidera également à comprendre le fonctionnement de WordPress en vous montrant la structure de base d’un thème et comment toutes ses parties fonctionnent ensemble.

Il existe de nombreux excellents thèmes de démarrage, notamment Underscores, UnderStrap et Bones (pour n’en nommer que quelques-uns).

Nous utiliserons Underscores pour notre tutoriel. C’est un choix solide pour les débutants car il ne contient que les bases. De plus, ce thème de démarrage est développé par Automattic (l’équipe derrière WordPress.com), ce qui signifie qu’il est plus susceptible d’être sûr, compatible et bien pris en charge à long terme.

Comment développer votre premier thème WordPress (en 5 étapes)

Une fois la préparation terminée, vous êtes enfin prêt à commencer à créer votre premier thème. Comme nous l’avons mentionné précédemment, nous utiliserons un thème de démarrage pour cette procédure pas à pas.

Cependant, si vous voulez essayer de tout créer vous-même sans modèle, vous devriez vous sentir libre de le faire. Gardez à l’esprit que cette approche nécessitera beaucoup plus de compétences en codage.

Étape 1 : Configurer un environnement local

La première chose que vous devrez faire est de créer un environnement de développement local. Il s’agit en fait d’un serveur que vous installez sur votre ordinateur, que vous pouvez utiliser pour développer et gérer des sites WordPress locaux. Un site local est un moyen sûr de développer un thème sans affecter votre site en direct de quelque manière que ce soit.

Il existe de nombreuses façons de créer un environnement local, mais nous utiliserons Local. Il s’agit d’un moyen rapide et facile d’installer gratuitement une version locale de WordPress et il est compatible avec Mac et Windows :

Outil de développement WordPress local

Pour commencer, sélectionnez la version gratuite de Local, choisissez votre plate-forme, ajoutez vos coordonnées et téléchargez le programme d’installation. Lorsque l’installation est terminée, vous pouvez ouvrir le programme sur votre ordinateur.

Ici, il vous sera demandé de configurer votre nouvel environnement local :

Écran de configuration initial de WordPress

Il s’agit d’un processus simple et votre site WordPress local sera prêt en quelques minutes. Une fois configuré, votre nouveau site ressemblera et fonctionnera exactement comme un site Web WordPress en direct.

Étape 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 à utiliser. En fait, tout ce que vous avez à faire est de vous rendre sur le site Web et de nommer votre thème :

Souligne le développement de thèmes WordPress personnalisés

Si vous le souhaitez, vous pouvez cliquer sur Options avancées pour personnaliser davantage le thème de base :

Souligne le développement de thèmes WordPress personnalisés

Ici, vous pouvez remplir plus d’informations, telles que le nom de l’auteur, et donner une description au thème :

Souligne le développement de thèmes WordPress personnalisés

Il y a aussi le _sassifier ! option, qui ajoutera des fichiers Syntactically Awesome StyleSheets (SASS) à votre thème. SASS est un langage de prétraitement pour CSS, qui vous permet d’utiliser des variables, des imbrications, des opérateurs mathématiques, etc.

Lorsque vous avez fait vos choix, vous pouvez cliquer sur Générerqui téléchargera un .Zip *: français fichier contenant votre thème de démarrage. Il s’agit du fichier principal autour duquel vous développerez votre propre thème, vous devrez donc l’installer sur votre site local.

Une fois que vous avez installé votre thème, vous pouvez prévisualiser votre site pour voir à quoi il ressemble. C’est très basique en ce moment, mais ce ne sera pas le cas pour longtemps !

Étape 3 : Découvrez les différents composants d’un thème WordPress

Avant de pouvoir personnaliser votre thème, vous devez comprendre le but de ses composants et comment ils s’imbriquent.

Parlons d’abord des fichiers modèles, qui sont les principaux éléments constitutifs d’un thème WordPress. Ces fichiers déterminent la mise en page et l’apparence du contenu de votre site.

Par exemple, header.php est utilisé pour créer un en-tête, tandis que commentaires.php permet d’afficher des commentaires.

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

Par exemple, si vous visitez l’URL http://example.com/post/this-postWordPress recherchera les fichiers modèles suivants dans cet ordre :

  1. Les fichiers qui correspondent au slug, tels que ce post
  2. Fichiers correspondant à l’ID de publication
  3. Un fichier de publication unique générique, tel que single.php
  4. Un fichier d’archive, tel que archive.php
  5. La index.php dossier

Depuis le index.php file est requis par tous les thèmes, c’est l’option par défaut si aucun autre fichier ne peut être trouvé. Les traits de soulignement contiennent les fichiers de modèle les plus courants et ils fonctionneront dès la sortie de la boîte. Cependant, vous pouvez expérimenter leur modification si vous voulez avoir une idée de la façon dont ils fonctionnent ensemble.

Un autre élément important que vous devez saisir est The Loop. WordPress utilise ce code pour afficher le contenu, donc à bien des égards, c’est le cœur battant de votre site. Il apparaît dans tous les fichiers de modèle qui affichent le contenu de la publication, tels que index.php ou sidebar.php.

La boucle est un sujet complexe sur lequel nous vous recommandons d’en savoir plus si vous souhaitez comprendre comment WordPress affiche le contenu des publications. Heureusement, la Boucle sera déjà intégrée à votre thème grâce aux Underscores, donc pas besoin de s’en soucier pour l’instant.

Recevez du contenu directement dans votre boîte de réception

Abonnez-vous à notre blog et recevez un excellent contenu comme celui-ci directement dans votre boîte de réception.

Étape 4 : Configurez votre thème

Il est facile de penser que les thèmes sont purement à des fins esthétiques, mais ils ont en réalité un impact énorme sur les fonctionnalités de votre site. Voyons comment vous pouvez effectuer quelques personnalisations de base.

Ajouter des fonctionnalités avec des ‘Hooks’

Les crochets sont des extraits de code insérés dans des fichiers de modèle, qui vous permettent d’exécuter des actions PHP sur différentes zones d’un site, d’insérer un style et d’afficher d’autres informations. La plupart des crochets sont implémentés directement dans le logiciel principal de WordPress, mais certains sont également utiles pour les développeurs de thèmes.

Jetons un coup d’œil à certains des crochets les plus courants et à quoi ils peuvent être utilisés :

  • wp_head() — Ajouté à l’élément dans header.php. Il active les styles, les scripts et d’autres informations qui s’exécutent dès que le site se charge.
  • wp_footer() – Ajouté à footer.php juste avant la balise . Ceci est souvent utilisé pour insérer du code Google Analytics.
  • wp_meta () — Cela apparaît généralement dans sidebar.php pour inclure des scripts supplémentaires (comme un nuage de tags).
  • comment_form() – Ajouté à commentaires.php juste avant la balise de fermeture

du fichier pour afficher les données de commentaire.

Ces crochets seront déjà inclus dans votre thème Underscores. Cependant, nous vous recommandons toujours de visiter la base de données des crochets pour voir tous les crochets disponibles et en savoir plus à leur sujet.

Ajouter des styles avec CSS

Les feuilles de style en cascade (CSS) définissent l’apparence de tout le contenu de votre site. Dans WordPress, cela est accompli en utilisant le style.css dossier. Vous aurez déjà ce fichier inclus dans votre thème, mais pour le moment, il ne contient que le style de base par défaut :

édition de la feuille de style CSS d'un nouveau thème WordPress personnalisé

Si vous voulez un exemple rapide du fonctionnement de CSS, vous pouvez modifier n’importe lequel des styles ici et enregistrer le fichier pour voir les effets. Par exemple, vous pouvez trouver le code suivant (généralement à la ligne 485) :

a {
color: royalblue;
}

Ce code contrôle la couleur des hyperliens non visités, qui apparaissent bleu roi par défaut :

Site de test de thème personnalisé WordPress

Voyons ce qui se passe si nous essayons de changer cela en le remplaçant par le code suivant :

a {
color: red;
}

Enregistrez le fichier et consultez votre site local. Comme vous vous en doutez, tous les liens non visités apparaîtront désormais en rouge vif :

page d'exemple d'un thème WordPress personnalisé de test

Vous remarquerez peut-être que le lien visité en haut n’a pas changé de couleur. C’est parce qu’il est en fait régi par la section suivante de la feuille de style :

a:visited {
color: purple;
}

Ceci est un exemple très basique de la façon dont l’édition style.css affectera l’apparence de votre site. Le CSS est un sujet massif que nous vous recommandons d’explorer plus avant si vous souhaitez en savoir plus sur la création de conceptions Web. Il existe de nombreuses ressources sur le sujet pour les débutants.

Étape 5 : Exportez le thème et téléchargez-le sur votre site

Lorsque vous avez fini de bricoler votre thème, il est temps de vous assurer qu’il fonctionne correctement. Pour ce faire, vous pouvez utiliser les données du test unitaire du thème.

Il s’agit d’un ensemble de données factices que vous pouvez télécharger sur votre site. Il contient de nombreuses variantes de styles et de contenu et vous permettra de voir comment votre thème gère les données imprévisibles.

Lorsque vous avez bien testé votre thème et que vous êtes convaincu qu’il répond aux normes requises, il ne reste plus qu’à l’exporter.

Tout d’abord, vous devrez trouver l’emplacement de votre site Web sur votre machine locale. Vous le trouverez probablement dans un dossier appelé Sites Internet, à l’intérieur de votre défaut Documents annuaire.

Ouvrez le dossier du site Web et accédez /wp-content/themes/où vous trouverez votre thème :

Dossier de thèmes WordPress wp-content dans le client FTP

Vous pouvez maintenant utiliser un outil de compression, tel que WinRAR, pour créer un .Zip *: français fichier basé sur le dossier. Faites simplement un clic droit sur le dossier et sélectionnez l’option qui vous permet de le compresser, comme Compresser le « dossier »:

compression du thème WordPress personnalisé pour préparer le téléchargement

Lorsque le dossier a été compressé, il est prêt à être téléchargé et installé sur n’importe quel site WordPress, tout comme vous avez installé votre thème Underscores au début. Si vous êtes particulièrement satisfait du résultat, vous pouvez même soumettre votre thème au répertoire de thèmes WordPress !

Créer un thème WordPress personnalisé

Créer un thème WordPress personnalisé à partir de zéro n’est pas une mince affaire. Cependant, le processus n’est peut-être pas aussi difficile que vous pourriez le penser.

Pour récapituler, voici comment développer un thème WordPress en cinq étapes simples :

  1. Configurez un environnement local à l’aide de Local.
  2. Téléchargez et installez un thème de démarrage, comme Underscores.
  3. Découvrez les différents composants d’un thème WordPress.
  4. Configurez votre thème.
  5. Exportez le thème et téléchargez-le sur votre site.

En suivant les directives du site de documentation du Codex, vous pouvez développer un thème qui répond aux normes de qualité. Vous pourriez même envisager de le soumettre au répertoire de thèmes WordPress !

Faites-en plus avec DreamPress

Les utilisateurs de DreamPress Plus et Pro ont accès à Jetpack Professional (et à plus de 200 thèmes premium) sans frais supplémentaires !

Hébergement WordPress géré - DreamPress