Envisagez-vous de créer votre propre thème ? Dans cet article, nous partageons exactement comment créer un thème WordPress.

WordPress est un système de gestion de contenu (CMS) open source populaire utilisé dans le monde entier. À l’aide du puissant logiciel de création de sites Web WordPress, vous pouvez également utiliser cette plate-forme pour créer facilement une forte présence en ligne et développer votre activité en ligne. WordPress est une évidence et le plus simple pour démarrer. Et c’est pour cette raison que chaque développeur vous conseille de l’utiliser comme base de votre site Web.

La seule façon de vraiment comprendre le fonctionnement des thèmes WordPress est de se mettre la tête la première et de tout faire soi-même. Oui, il est tentant d’éviter cela car WordPress peut tout gérer pour vous si vous ne savez pas coder. À la fin de ce didacticiel, vous apprendrez à créer un thème WordPress, à mieux comprendre comment tout s’emboîte et à utiliser WordPress à votre guise.

Qu’est-ce qu’un thème WordPress, exactement ?

Un thème WordPress est une collection de fichiers (graphiques, feuilles de style et code) qui détermine l’apparence de votre blog ou site Web. Les thèmes peuvent régir n’importe quoi, du style de votre site aux couleurs de ses hyperliens. Il est facile de considérer un thème comme un “habillage” pour votre site Web, mais ils sont bien plus que cela.

Un thème vous permet de gérer l’apparence de votre blog plutôt que de lui donner simplement une apparence.

WordPress est livré avec son propre ensemble de thèmes. En réalité, la plate-forme est livrée avec une variété de thèmes préinstallés. Cependant, il existe plusieurs raisons pour lesquelles vous pourriez souhaiter sélectionner et installer un nouveau thème sur votre site Web :

Pour améliorer l’attractivité esthétique de votre site Web. Vous pouvez sélectionner un thème approprié et l’ajuster pour répondre à vos besoins si vous avez une vision particulière de votre site.

Pour fournir une flexibilité de conception supplémentaire. De nombreux thèmes offrent une pléthore d’ajustements pour vous aider à créer la conception parfaite si vous n’avez aucune connaissance en conception ou en codage. Un thème peut comporter des fonctionnalités relatives à votre créneau que vous ne trouverez nulle part ailleurs, en fonction de vos demandes.

Bien que la version de base ou modifiée d’un thème puisse servir à un large éventail de sites Web, il existe des centaines de thèmes parmi lesquels choisir, chacun traitant d’un créneau ou d’un objectif unique.

Alors, pourquoi créer votre propre thème WordPress ?

Le choix d’un thème est l’un des aspects les plus importants de la création ou de la maintenance d’un site WordPress. Généralement, vous avez le choix entre plusieurs alternatives. Vous pouvez choisir une certaine base de thème, puis un thème construit sur ce cadre, en fonction de vos besoins.

La plupart des consommateurs parcourent des centaines de thèmes, gratuits et payants, avant de sélectionner celui qui les intéresse et qui reflète étroitement ce qu’ils désirent. La plupart d’entre eux sont livrés avec des options de modification pour les changer à un certain niveau, mais l’apparence générale et la sensation restent les mêmes.

Le meilleur choix, cependant, est de repartir de zéro et de concevoir un thème sur mesure. Évidemment, cela nécessite des connaissances techniques ainsi que la capacité de concevoir un site Web. Une fois que vous avez trouvé un design qui vous convient, un thème personnalisé est le meilleur moyen de le mettre en action.

Par rapport à l’utilisation d’un thème tiers ou d’un thème enfant, la création d’un thème personnalisé offre un certain nombre d’avantages.

• Individualité : Vous avez créé un thème unique pour votre site Web. Cela implique que votre site Web est le seul à l’utiliser et qu’il diffère des dizaines de milliers d’autres qui utilisent le même thème mais avec une palette de couleurs différente.
• Sécurité améliorée : le thème personnalisé est moins susceptible de présenter de graves problèmes de sécurité, car vous utilisez moins de fonctionnalités et moins de code. Même s’il est probablement difficile d’être certain des bogues, vous n’attendez pas qu’un fournisseur tiers publie un correctif de sécurité ou de bogue. Vous pouvez prendre soin d’eux lorsque vous les rencontrez.
• Il n’y a pas de surcharge de fonctionnalités : les thèmes personnalisés ne nécessitent pas une multitude de fonctionnalités que vous n’utiliserez ou n’aurez jamais besoin. Toutes ces fonctionnalités indésirables ajoutent une quantité importante de code exécutable à votre site Web, ce qui risque de le ralentir.
• L’utilisation des plugins doit être limitée : Cela est particulièrement vrai des plugins que vous utilisez pour modifier et organiser votre matériel. Cela peut réduire la dépendance du thème vis-à-vis des plugins tiers tout en l’accélérant en éliminant le besoin d’injecter du code de plugin au moment de l’exécution. Cependant, selon les fonctionnalités qu’il fournit, tous les plugins ne peuvent pas être intégrés.
• Fichiers statiques de petite taille : cela minimise la taille totale de la page et garantit qu’aucune règle CSS ou code JavaScript n’est envoyé et servi plus que nécessaire. Étant donné que chaque élément de contenu est déjà adapté à votre conception dans un thème personnalisé, vous n’avez pas besoin de beaucoup de code pour le rendre ajustable. Tout ce code de modification peut rendre votre site Web plus lourd et plus lent, surtout s’il est mal fait.
• Search Engine Optimization (SEO) : est un terme qui fait référence au processus d’optimisation d’un site Web. Un thème personnalisé est généralement très léger sur le code source, avec presque aucun nouveau code. Le code simplifié, qui rend les sites Web incroyablement légers, est ici le principal avantage du référencement. Il existe différents frameworks et thèmes dédiés à la vitesse qui sont toujours une option, mais un thème personnalisé est toujours la meilleure solution.

Quels sont les prérequis pour développer un thème WordPress ?

Vous avez besoin d’un site Web pour commencer. N’importe quel site suffira. Vous n’avez pas besoin de connaître PHP ou d’avoir des connaissances préalables sur WordPress. Mais un environnement de développement avec Apache, PHP, MySQL et WordPress installés est nécessaire pour concevoir un thème WordPress. Vous pouvez obtenir WordPress sur le site officiel, mais vous devrez d’abord modifier les informations d’identification de la base de données.

Vous devez également comprendre la structure du thème. Dans sa forme la plus simple, un thème WordPress est une page HTML standard composée des fichiers suivants :

• header.php – un fichier qui stocke le code d’en-tête.
• footer.php – contient le code du pied de page ;
• sidebar.php – où vous configurez les boutons sur le côté de la page ;
• style.css – gère l’apparence esthétique du thème ;
• index.php – Les paramètres fournis sur la page principale sont inclus ici.
• single.php – inclut le code pour afficher l’article sur sa propre page ;
• page.php – inclut le code pour afficher le contenu d’une seule page ;
• archive.php – affiche une liste des éléments de l’archive, ainsi que les catégories que l’utilisateur a définies ;
• functions.php – Ce fichier contient des fonctions qui améliorent les fonctionnalités du thème, telles que les logos, les menus, la couleur, les vignettes, les scripts et les feuilles de style.
• 404.php – un code d’erreur indiquant que le fichier demandé est introuvable.

Afin de personnaliser votre modèle, vous devrez également incorporer certains paramètres Bootstrap. Nous vous guiderons à travers les premières étapes de cette personnalisation dans cet article. Voir la liste ci-dessous.

Étape 1 : Créer un dossier pour contenir les fichiers que vous allez ajouter

Nous devons savoir où se trouvent les fichiers qui composent un thème WordPress dans une installation WordPress si nous voulons construire des thèmes. C’est une tâche simple. Nous savons qu’une installation WordPress contient généralement un répertoire WordPress comme répertoire racine. Voici comment notre répertoire racine apparaît.

Des dossiers:

• compozer.json
• index.php
• licence.txt
• readme.html
• wp-activate.php
• wp-blog-header.php
• wp-commentaires-post.php
• wp-config.php
• wp-config-exemple.php
• wp-cron.php
• wp-links-opml.php
• wp-load.php
• wp-login.php
• wp-mail.php
• wp-settings.php
• wp-signup.php
• wp-trackback.php
• xmlrpc.php

Dossiers

• wp-admin
• wp-content
• wp-include

Themes est un dossier dans le dossier wp-content. L’emplacement de votre nouveau thème dans le dossier “thèmes”, sera faisable pour l’activer et l’utiliser en ligne. C’est aussi le dossier dans lequel vous trouverez un ou plusieurs thèmes à utiliser avec votre site WordPress.

Étape 2 : Créer les fichiers index.php et style.css

Vous devez en outre créer deux fichiers nécessaires index.php et style.css lorsque vous avez terminé la construction de votre dossier de thème.

• style.css

Seul le nom du thème est requis dans style.css afin que WordPress puisse localiser et répertorier votre thème afin que vous puissiez l’activer.

• /*
• Nom du thème : thème personnalisé
• Auteur : Simplewebsite
• URI de l’auteur : https://simplewebsite.fr
• Version : 1.0
•  */

Nous attribuons simplement un nom de thème, un auteur, un URI d’auteur et un numéro de version à notre thème dans l’exemple. Mais si vous voulez un thème plus décent, vous pouvez inclure ces informations ci-dessous :

Nom du thème – Un nom de thème doit toujours être fourni. Si vous ne le faites pas, le nom du dossier sera utilisé, qui dans ce cas est my-custom-theme.

URI du thème – il doit diriger les utilisateurs vers un site Web où ils peuvent en savoir plus sur le thème.

Auteur – C’est là que vous mettez votre nom.

URI de l’auteur – Ici, vous pouvez ajouter un lien vers votre site Web personnel ou professionnel.

Description – s’affiche à la fois dans le modal du thème wp-admin et dans la liste des thèmes WordPress.

Version – Les numéros de version aident les développeurs à suivre les modifications et à s’assurer que les clients utilisent la version la plus récente. Pour indiquer la gravité des changements dans une mise à jour, nous utilisons le système de numérotation SemVer.

Licence – Vous pouvez choisir la licence de votre thème, mais s’il n’est pas compatible GPL, vous ne pourrez pas le distribuer sur WordPress.

Licence URI – juste un lien.

Domaine de texte – Le domaine de texte est utilisé lors de la traduction de votre thème dans d’autres langues. Ne vous inquiétez pas, nous vous donnerons plus d’informations à ce sujet plus tard. Pour l’instant, il suffit de savoir que le dossier de thème et le domaine de texte doivent être le nom du thème séparé par des tirets plutôt que par des espaces.

Balises – Ce n’est que lors du téléchargement d’un thème dans le répertoire de thèmes WordPress.org que ces variables sont utilisées. Le processus de “Filtre de fonctionnalités” est construit autour d’eux.

Bien qu’aucun des champs ne soit techniquement essentiel, ils sont fortement recommandés si vous souhaitez que votre thème apparaisse décent dans wp-admin. Ils sont également essentiels si vous allez utiliser WordPress pour distribuer votre thème.

• index.php

WP charge les messages qui seront affichés à l’écran à l’aide de ce fichier. De plus, si un fichier de base WP est manquant, wp l’utilisera.

• <h1>Thème personnalisé !</h1>

Étape 3 : Dans le tableau de bord WordPress, activez le thème

Accédez au tableau de bord WordPress, choisissez « Apparence », puis « Thèmes » et voyez si le thème nouvellement créé apparaît parmi les possibilités.

Pour vérifier si les informations saisies dans le style sont correctes, accédez à « Détails du thème ».

Le fichier CSS est correct.

Sur WordPress, rendez-vous sur la page Thèmes et gérez vos thèmes.

Cliquez sur “Activer” pour activer votre nouveau dans WP, puis voyez si le site Web si les modifications ont été appliquées.

Étape 4 : Modifier les paramètres dans le fichier index.php

Pour tester si votre thème fonctionne, revenez à la ligne de commande index.php et effacez le contenu que vous venez de taper.

Ensuite, créez une ligne de commande pour WP afin de récupérer dans la base de données les publications et de les afficher sur la page. Vous devez restaurer le titre et le contenu de la publication afin que tous les fichiers soient visibles sur la page d’accueil.

La commande « avoir des articles » indique à WP de rechercher des articles de blog dans la base de données. La page sera mise à jour s’il y a de nouvelles annonces. Sinon, le message pour la condition de réponse négative que nous avons défini dans le code sera affiché (faux).

Il existe une fonction nommée “le message” qui doit être ajoutée à la boucle “avoir des messages” pour que WP affiche ce fichier chaque fois que la condition “avoir des messages” est vraie. WordPress recherche de nouvelles entrées dans cette boucle et les affiche sur la page si nécessaire.

En réalité, si la base de données comprend des publications, toutes les actions de la boucle seront exécutées pour tous les fichiers de publication identifiés lors de leur découverte. Sinon, WP informera l’utilisateur qu’il n’y a pas de messages accessibles. Regardez le code ci-dessous :

<?php
 if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
     <h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
 <?php the_content() ?>
 <?php endwhile;
 else :
echo ‘<p>There are no posts!</p>’;
 endif;
 ?>

Dans cette boucle, deux fonctions, “avoir des messages” et “le message”, sont utilisées dans leur forme la plus élémentaire. Si des publications dans la base de données doivent être répétées, utilisez la méthode “avoir des publications”. Vrai ou faux sera renvoyé par cette fonction, vrai signifiant qu’il y a des messages à afficher. Il n’y en a pas si elle renvoie false.

La méthode “la publication” récupère la publication la plus récente et effectue les ajustements nécessaires pour l’afficher chronologiquement sur la page du thème. Comme il s’agit d’une boucle, si la fonction renvoie true, chaque fois qu’un nouveau message est créé, il sera instantanément ajouté.

Le contenu est attaché au titre du fichier mis sur la page à l’aide de la fonction « le contenu ». La fonction “le permalien” crée un lien vers chaque message individuel, permettant aux utilisateurs de visualiser les informations sans avoir à faire défiler l’intégralité du texte sur la page principale.

Utilisez simplement la méthode “l’extrait” au lieu de la méthode “le contenu” pour ajouter un résumé rapide sous le titre du fichier avec les 200 premiers caractères du contenu. Par conséquent, lorsque l’utilisateur clique sur le lien, il n’obtient que l’intégralité du texte.

Dans ce cas, vous devrez créer un nouveau fichier dans le dossier de votre thème qui ressemble à “index.php” (copiez et collez simplement la boucle index.php et remplacez la fonction “l’extrait” par “le contenu”) .

Étape 5 : Ajouter un en-tête et un pied de page

Créez de nouveaux fichiers dans le même dossier que votre thème comme à l’étape suivante, où style.css et index.php sont déjà présents. Header.php et footer.php sont leurs noms.

Il est préférable d’inclure wp head dans tous vos thèmes car il s’agit d’une fonction spécifique qui résume la sortie dans la section head> du fichier header.php . Il doit être placé avant la balise de fermeture /head> pour faciliter l’ajout de plugins au site, car ce crochet peut être utilisé pour ajouter des styles, des scripts ou des méta-composants à la région head>.

• Bas de page

Le fichier footer.php peut fermer les balises utilisées dans les fonctions, comme décrit ci-dessous :

Étape 6 : Créez le dossier functions.php

À ce stade, le thème personnalisé comporte quatre dossiers de fichiers : index.php, style.css, header.php et footer.php. Le prochain fichier que vous devriez écrire est functions.php, qui donne de la personnalité à WordPress en permettant à la ligne de commande de modifier le comportement par défaut du CMS. Voici ses caractéristiques :

• ne nécessite pas de texte d’en-tête unique ; ne fonctionne que lorsque le thème est actif ;
• s’applique uniquement au thème actuel ;

Ce code inclura ou activera la feuille de style pour votre thème personnalisé :

Go!

C’est fini! Votre thème a été construit et les liens qui renvoient le visiteur vers une page exclusive pour chaque article fonctionnent bien. De plus, vous avez déjà inclus l’en-tête, le pied de page et le CSS de votre thème personnalisé.

Vous avez appris les bases de la création d’un thème WordPress dans cette leçon. Étant donné que l’apparence du site Web est vitale, en particulier pour les applications professionnelles, vous pouvez utiliser Bootstrap pour ajouter des lignes de scripts de modèles prêts à l’emploi à votre page, ce qui facilite l’ajout de nouvelles fonctionnalités.

Dans la même catégorie :

Aucun article similaire