24mn de lecture
Créer un design pour son site WordPress peut sembler difficile, lorsque vous n’avez aucune compétence dans le développement web. Ainsi, vous pouvez être obligé de payer les services d’un développeur ou ceux d’une agence web afin d’obtenir un design de site parfaitement soigné. Cela peut donc vous coûter une fortune. 😇 Depuis l’apparition de ChatGPT, les professionnels ont la possibilité de générer n’importe quel type de contenus, y compris du code. ChatGPT peut de ce fait vous aider à générer gratuitement du code pour le design de votre site. Comment vous devez procéder ? Retrouvez les détails dans cet article.👇
Objectif
L’objectif de cet article est de vous apprendre les notions dont vous avez besoin pour interagir avec ChatGPT et trouver des idées de design pour votre site WordPress.🤗
Une solution clés en main pour créer un site WordPress ?
LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.
Prérequis pour personnaliser son thème WordPress avec ChatGPT
Pour travailler, vous devez avoir un accès à ChatGPT. Si c’est la première fois que vous allez interagir avec cette IA, vous devez créer un compte sur le site OpenAI. De plus, vous devez disposer d’un nom de domaine et un espace d’hébergement si vous souhaitez déployer un nouveau site.
Si vous avez déjà un site WordPress, vous devez avoir les accès au tableau de bord d’administration de votre site, en tant qu’administrateur, afin d’intégrer le design créé sur votre site.
Comment personnaliser son thème WordPress en utilisant ChatGPT ?
Vous n’avez pas besoin d’être expert pour créer un design de base pour votre site WordPress en utilisant ChatGPT. Pour gagner du temps, nous allons vous guider dans la partie ci-dessous, sur la façon de rédiger vos prompts.
Étape 1 : générer une structure de code pour son site WordPress
La première étape consiste à créer une structure basique de code contenant des exemples de pages pour votre site WordPress. Pour cela, nous allons utiliser Bootstrap, l’un des frameworks les plus populaires sur le web moderne.
Pour commencer, rendez-vous sur ChatGPT et utilisez le prompt suivant : « Générez un modèle de page d’accueil en utilisant le design réactif Bootstrap. Cette page d’accueil doit avoir un menu principal avec les pages pour les services, le blog, la page à propos ainsi que le bouton de demande de devis dans l’en-tête du site« .
Soyez le plus précis possible, pour permettre à ChatGPT de générer un bon code sans faire de confusion. Vous devez décrire tous les éléments nécessaires à insérer dans votre page d’accueil.
Vous pouvez modifier l’invite ci-dessus pour l’adapter à la structure de site WordPress qui répond à vos critères. En exécutant notre prompt, ChatGPT a généré la structure de code comme prévu.
Nous allons à présent le tester pour voir à quoi celui-ci ressemble visuellement. Pour cela, nous allons utiliser l’environnement de test de CodePen.
Comme il s’agit simplement du code HTML, nous allons le copier en cliquant sur le bouton « Copy code » de ChatGPT et nous allons le coller dans le champ correspondant au HTML sur CodePen.
Et voici le résultat ! 😎
Nous n’avons pas jusqu’ici inséré de liens vers les fichiers JavaScript et CSS. Ces derniers permettront de rendre notre site très attrayant et interactif.
Étape 2 : créer un design de page de blog pour son site WordPress
ChatGPT peut également vous aider à générer un modèle de page de blog attractif pour votre site WordPress. Vous devez juste expliquer la structure de la page que vous souhaitez avoir.
Voici l’exemple de l’invite à utiliser : « Générez un modèle de page de blog qui répertorie les 5 derniers articles publiés en incluant les métadonnées telles que le nom de l’auteur, la date de publication et la catégorie pour chaque article « .
En générant du code, ChatGPT s’est arrêté à mi-chemin. Si vous remarquez cela, cliquez sur le bouton « Continue generating » pour terminer la structure de code ou utilisez le bouton « Regenerate response » pour demander une nouvelle structure de code.
Une fois que l’ensemble du code est généré, vous pouvez aussi le tester sur CodePen avant de le charger sur votre site WordPress.
Ensuite, vous pouvez intégrer du JavaScript ou du CSS pour améliorer le design de votre page de blog.
Étape 3 : créer un modèle de design pour d’autres pages WordPress
Comme dans les étapes précédentes, vous pouvez respectivement demander à ChatGPT de créer divers autres modèles de design pour les différentes pages de votre site WordPress. Pour notre exemple, nous avons demandé un modèle pour une page de devis.
Le prompt utilisé est celui-ci : « Génère une page contenant un formulaire de demande de devis avec les champs suivants : nom du client, adresse e-mail, numéro de téléphone et détails de la demande du client« .
En copiant le code généré sur CodePen, le résultat correspond exactement à ce à quoi, nous nous attendions. 
Vous pouvez aller plus loin et demander du code pour chacune de vos pages.
Étape 4 : intégrer le design de code généré avec ChatGPT sur son site WordPress
Maintenant, vous connaissez comment interagir avec ChatGPT pour générer des idées de design pour votre site WordPress. La dernière chose que vous devez faire, c’est l’intégration de ce code sur votre site. Cela ne vous prendra que quelques minutes.
Supposons que vous avez généré un design code HTML pour votre page de contact et que vous souhaitez l’intégrer sur votre site WordPress. Commencez par vous connecter à votre espace d’administration. Ensuite, accédez à la section « Pages › ajouter ».
Dans l’interface d’édition des contenus de Gutenberg, ajoutez un titre à votre page, puis cliquez sur le bouton « + » pour ajouter un nouveau bloc.
Recherchez le bloc « HTML personnalisé » et cliquez dessus pour l’ajouter dans votre page. 
Copiez et collez ensuite le code que vous avez généré sur ChatGPT dans le champ « Écrire du HTML ».
Publiez votre page et prévisualisez les modifications pour voir à quoi elles ressemblent. Comme vous le voyez sur l’image ci-dessous, le résultat est plus ou moins satisfaisant.
De même, si vous avez généré une page d’accueil ou n’importe quelle autre page avec ChatGPT, vous pouvez suivre la même procédure pour intégrer le design sur votre site WordPress.
En outre, vous pouvez aussi ajouter votre code dans un widget, généralement lorsque vous avez généré des sections pour la barre latérale ou pour le pied de page de votre site WordPress avec ChatGPT.
De plus, vous pouvez également générer du code CSS pour votre site WordPress avec ChatGPT. Pour intégrer du CSS généré avec ChatGPT sur WordPress, vous devez utiliser un plugin. Dans la bibliothèque de WordPress, il existe de plugins tels que Simple Custom CSS ou encore Custom CSS Pro.
Par ailleurs, vous pouvez aussi utiliser la fonctionnalité d’ajout de CSS personnalisé intégrée dans votre thème. Dans ce dernier cas, il est surtout recommandé d’utiliser un thème enfant, car sans cela, vos modifications pourront disparaître lors de la prochaine mise à jour de votre thème.
Conclusion
En résumé, ChatGPT est une IA très puissante pour pratiquement tout générer. Mais, vous pouvez exploiter les potentialités de ChatGPT qu’en créant des prompts précis et contenant tous les détails nécessaires. Dans cet article, vous avez appris étape par étape comment vous pouvez utiliser cette IA pour créer des idées de design et personnaliser votre thème WordPress. Ce qu’il vous reste à faire, c’est de passer à la pratique.🤗
Si vous avez des questions sur comment personnaliser votre thème WordPress en utilisant ChatGPT, n’hésitez pas à nous écrire dans la section Commentaires.
Besoin d’un hébergement WordPress rapide et de qualité ?
LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.
Commentaires (0)