La création de votre premier site WordPress peut être délicate. Avec des milliers de thèmes parmi lesquels choisir, il peut être difficile de trouver celui qui convient à votre marque.
C'est là que la création d'un thème personnalisé qui répond à toutes vos exigences s'avère utile.
Cependant, la partie délicate pour les débutants est qu'elle nécessite généralement une expérience en codage et une connaissance approfondie de WordPress.
Mais avec le bon constructeur de thèmes WordPress, vous pouvez simplement utiliser un constructeur par glisser-déposer pour créer votre propre thème.
Dans cet article, nous vous montrerons comment créer un thème personnalisé en quelques étapes simples, sans aucun codage requis.
Qu'est-ce qu'un thème WordPress ?
Pour commencer, clarifions ce qu'est exactement un thème WordPress et de quoi il se compose.
Un thème WordPress est un ensemble de fichiers placés dans un dossier commun dans le répertoire des thèmes WordPress de votre hébergement.
Cet ensemble comprend des modèles de page écrits en HTML, PHP et JavaScript, des feuilles de style CSS et des graphiques.
Lorsqu'il s'agit de créer un thème personnalisé à partir de zéro, il existe 2 méthodes typiques :
- Faites-le vous-même : Cela nécessite une vaste expérience en développement web et beaucoup de temps libre.
- Engagez un développeur ou une agence web : Le prix moyen varie de quelques centaines à quelques milliers de dollars.
Pour des raisons évidentes, ces deux méthodes sont difficilement acceptables pour les débutants.
Heureusement, il existe une troisième façon de créer un thème personnalisé sans se ruiner ni être un gourou du codage.
C'est possible grâce à l'utilisation d'un constructeur de sites web WordPress comme SeedProd. Examinons-le en détail et découvrons pourquoi il est si populaire auprès des utilisateurs de WordPress.
Pourquoi utiliser SeedProd pour créer un thème WordPress personnalisé ?
SeedProd est le plugin de création de sites web n°1 alimenté par l'IA pour WordPress, facile à utiliser pour les débutants.
C'est un véritable game-changer, car il vous permet de créer des thèmes WordPress personnalisés de premier ordre en quelques minutes, sans codage requis.
L'ingrédient secret est l'éditeur visuel pratique et puissant de SeedProd. En l'utilisant, vous pouvez facilement faire glisser et déposer les éléments, blocs ou même sections entières nécessaires sur votre page.
Voici un bref aperçu de son fonctionnement :
SeedProd optimise automatiquement les pages et les thèmes pour un chargement rapide. Il vous permet d'assurer la meilleure expérience utilisateur pour vos visiteurs.
Ils sont également réactifs et prêts pour mobile par défaut, vous n'avez donc pas à vous soucier de l'apparence de votre site sur différents appareils.
En plus de cela, SeedProd est livré avec des fonctionnalités puissantes telles que :
- Des centaines de modèles de page prêts à l'emploi : Vous n'avez pas l'inspiration pour créer un thème à partir de zéro ? Vous pouvez utiliser l'un des plus de 200 modèles pré-construits et les personnaliser facilement pour répondre à vos besoins.
- Intégration WooCommerce : Vous vendez des produits en ligne ? SeedProd est entièrement compatible avec WooCommerce, vous pouvez donc créer des pages de lancement et de paiement modernes, des grilles de produits, et plus encore.
- Tableau de bord de gestion des abonnés par e-mail : Vous avez une newsletter par e-mail ? SeedProd vous permet de collecter des e-mails et de suivre le statut de vos abonnés sur un tableau de bord pratique.
- Code optimisé pour le SEO : Vous vous souciez de la clarté du code ? Le code des thèmes et des pages que vous créez avec SeedProd est adapté au SEO et répond à toutes les exigences des moteurs de recherche.
De plus, SeedProd dispose d'une équipe de support formidable et réactive.
Même si ce plugin est très facile à utiliser, si vous avez des questions, ils sont toujours prêts à venir à la rescousse.
Les retours des utilisateurs enthousiastes ne laissent aucun doute sur le fait que cette note est bien méritée.
Voici ce que les gens disent de leur expérience avec SeedProd :
Maintenant que vous savez pourquoi utiliser SeedProd est le meilleur moyen de créer un thème personnalisé pour les débutants, voyons comment vous pouvez le faire.
Comment créer un thème WordPress personnalisé
Ce tutoriel détaillé comporte 6 étapes faciles. Suivez-les pour créer un magnifique thème WordPress personnalisé sans toucher une seule ligne de code.
Voici une table des matières pour vous aider à naviguer :
- Étape 1 : Installer et activer le plugin SeedProd
- Étape 2 : Sélectionner un thème WordPress pré-construit
- Étape 3 : Personnaliser les parties de votre thème WordPress
- Étape 4 : Personnaliser le CSS global de votre thème (sans code)
- Étape 5 : Connecter votre service de marketing par e-mail
- Étape 6 : Publier votre thème WordPress personnalisé
- Bonus : Créer des formulaires de recherche et une page de résultats personnalisés
Étape 1 : Installer et activer le plugin SeedProd
Pour commencer, vous pouvez obtenir votre copie de SeedProd ici.
Ensuite, vous pouvez vous connecter à votre compte SeedProd et aller dans l'onglet Téléchargements.
Cliquez ensuite sur le bouton Télécharger SeedProd Pro pour commencer à télécharger le fichier ZIP du plugin sur votre ordinateur.
Une fois le téléchargement terminé, copiez votre clé de licence dans le même onglet. Vous en aurez besoin plus tard pour activer votre copie de SeedProd.
L'étape suivante consiste à téléverser le fichier ZIP téléchargé sur votre site et à installer le plugin. Si vous avez besoin d'aide, vous pouvez suivre ce tutoriel sur comment installer un plugin WordPress.
Après avoir installé le plugin, vous verrez l'écran de bienvenue de SeedProd. Ici, vous pouvez aller sur votre tableau de bord WordPress et cliquer sur le bouton SeedProd dans le panneau de gauche.
Ensuite, collez votre clé de licence dans le champ de licence et appuyez sur le bouton Vérifier la clé.
Une fois votre copie de SeedProd activée, vous êtes prêt à commencer à créer votre thème WordPress personnalisé.
Étape 2 : Sélectionner un thème WordPress pré-construit
Pour commencer, naviguez vers SeedProd » Constructeur de thèmes dans votre tableau de bord.
Sur cette page, vous pouvez gérer vos thèmes personnalisés et en créer de nouveaux.
À partir d'ici, vous avez 2 façons de commencer.
La première consiste à créer chaque partie de votre thème personnalisé à partir de zéro.
Chaque thème WordPress se compose des parties suivantes :
- En-tête
- Pied de page
- Article unique
- Page unique
- Archive (Page du blog)
- Page d'accueil
- Barre latérale
Ces parties constituent votre thème, et SeedProd vous permet de les créer et de les personnaliser individuellement.
Pour commencer à créer une nouvelle partie de votre thème, appuyez sur le bouton Ajouter un nouveau modèle de thème.
Ici, vous pouvez choisir le type de votre partie de thème, lui donner un nom, puis commencer à la construire à partir de zéro.
Mais, si vous trouvez cela trop écrasant pour votre première tentative, il existe une deuxième façon de créer votre thème WordPress personnalisé.
SeedProd est livré avec un tas de modèles de thèmes préconçus d'aspect professionnel. Vous pouvez les sélectionner et les personnaliser selon vos besoins.
Dans ce tutoriel, nous nous concentrerons sur cette méthode car elle est plus facile pour les débutants et nous permet de vous montrer plus de fonctionnalités de SeedProd.
Pour commencer à personnaliser l'un des modèles de thème prêts à l'emploi, appuyez sur le bouton Kits de modèles de thème.
Ici, vous trouverez une variété de thèmes à des fins différentes.
Par exemple, il existe des thèmes pour les blogs personnels, les portfolios, les sites d'affaires ou de commerce électronique, et plus encore.
Pour choisir un thème que vous aimez, placez votre curseur dessus et cliquez sur l'icône de coche.
Par exemple, nous choisirons l'un des modèles de démarrage.
Une fois que vous avez sélectionné un modèle, SeedProd crée automatiquement les parties qui le composent.
Comme vous pouvez le voir, notre thème comprend non seulement des modèles de parties de page, tels que l'en-tête, le pied de page et la barre latérale.
Il existe également des modèles pour des pages entières, comme une page unique, un article, des archives et une page d'accueil.
Si vous n'avez pas besoin d'un modèle spécifique sur votre site, vous pouvez le désactiver en basculant l'interrupteur à côté de celui-ci.
Pour changer le nom d'un modèle ou modifier les conditions d'affichage sur votre site, cliquez sur le lien Modifier les conditions.
Cela ouvrira une fenêtre modale où vous pourrez nommer un modèle comme vous le souhaitez et modifier son type, sa priorité et ses conditions.
Lorsque vous avez terminé, cliquez simplement sur le bouton Enregistrer.
Maintenant que vous savez comment gérer les parties de votre thème, vous êtes prêt à commencer à le personnaliser.
Étape 3 : Personnaliser les parties de votre thème WordPress
Tout d'abord, personnalisons l'en-tête car c'est la première chose que les visiteurs voient en arrivant sur votre site.
En-tête
Pour commencer, faites défiler la page Constructeur de thème vers le bas, trouvez le modèle En-tête et cliquez dessus.
Remarque : L'en-tête et le pied de page sont communs à l'ensemble du site. Cela signifie que chaque modification que vous y apportez sera visible sur chaque page de votre site.
Comme vous pouvez le voir, notre en-tête se compose de deux parties. Il y a la partie gauche avec le logo du site et la partie droite avec le menu de navigation.
SeedProd dispose d'un éditeur visuel par glisser-déposer. Vous pouvez interagir avec n'importe quel élément de la page et en ajouter de nouveaux en les faisant simplement glisser sur la page.
Essayons de changer le logo. Pour ce faire, cliquez simplement dessus, et une barre latérale apparaîtra où vous pourrez modifier les paramètres de l'élément.
Chaque type d'élément dans l'éditeur SeedProd possède son propre ensemble de paramètres et d'options de personnalisation.
Par exemple, notre logo est de type Image. Il possède donc tous les paramètres que vous attendez normalement d'une image, tels que son fichier source, son texte alternatif, sa taille, etc.
Vous pouvez également basculer entre les onglets Contenu, Modèles et Avancé dans la barre latérale gauche pour découvrir encore plus d'options de personnalisation.
Maintenant, disons que vous souhaitez remplacer le logo par défaut par le vôtre.
Pour ce faire, cliquez sur l'image du logo actuel, puis vous pouvez sélectionner l'image que vous souhaitez utiliser à la place.
Voici à quoi ressemble notre nouveau logo sur notre site de test :
Maintenant, changeons la couleur d'arrière-plan de l'en-tête.
Pour ce faire, placez le curseur sur votre en-tête jusqu'à ce qu'il soit entouré d'un contour bleu, puis cliquez dessus.
Après cela, vous verrez les options de personnalisation de l'en-tête dans la barre latérale gauche. Il a le type d'élément Ligne.
Dans l'onglet Contenu, vous pouvez changer la couleur d'arrière-plan de votre en-tête, la remplacer par une image et choisir la largeur de l'en-tête.
Pour changer la couleur d'arrière-plan, cliquez sur l'icône de la palette de couleurs et sélectionnez la couleur souhaitée.
Ensuite, dans l'onglet Avancé, vous pouvez ajouter une ombre ou une bordure à votre en-tête, modifier ses paramètres d'espacement, et plus encore.
Pour la touche finale, agrandissons un peu la police du menu de navigation.
Pour ce faire, placez le curseur sur le menu et cliquez dessus.
Maintenant, dans le champ Taille de la police de la barre latérale gauche, entrez la taille de police souhaitée.
Il suffit de déplacer le curseur ou d'entrer un nombre pour modifier la taille de la police.
Lorsque vous avez terminé de personnaliser l'en-tête, appuyez sur le bouton Enregistrer dans le coin supérieur droit.
Ensuite, appuyez sur l'icône de sortie pour quitter l'éditeur visuel et revenir à la page des modèles de thème.
Ensuite, personnalisons la Page d'accueil.
Page d'accueil
Pour ce faire, trouvez le modèle Page d'accueil parmi les autres modèles de thème et cliquez dessus.
Le modèle de démarrage a une page d'accueil avec des fonctionnalités que l'on trouve sur un site d'entreprise typique, telles que :
- Section de description de l'entreprise
- Liste des clients avec leurs logos
- Fonctionnalités de l'entreprise
- Témoignages
- Section FAQ
- et plus encore…
Comme pour l'en-tête, vous pouvez interagir avec chaque élément de la page et modifier son apparence.
Par exemple, vous pouvez voir comment changer facilement le titre, la description et le texte du bouton dans la section héroïque en quelques clics seulement :
Maintenant, essayons d'ajouter quelque chose de nouveau à notre page.
Si aucun élément de la page n'est actuellement sélectionné, dans la barre latérale gauche, vous pouvez voir l'onglet Blocs.
Pour changer la position de la section, placez le curseur sur sa bordure supérieure, choisissez l'option Déplacer la section et faites-la glisser de la même manière qu'un bloc.
Par exemple, vous pouvez trouver des blocs tels que l' auteur de l'article, le tableau des prix, le formulaire de recherche, et bien d'autres.
Pour ajouter un bloc spécifique à votre page, faites-le glisser et déposez-le à l'endroit souhaité.
Par exemple, ajoutons un bloc Compte à rebours à la section Fonctionnalités :
De plus, si vous allez dans l'onglet Sections, vous trouverez des tonnes de sections préfabriquées que vous pouvez également ajouter à votre page, telles que :
- En-têtes
- Pieds de page
- Appel à l'action
- Fonctionnalités
- Témoignages
- et bien d'autres encore...
Pour ajouter une nouvelle section à la page, survolez la section souhaitée avec votre souris et cliquez sur l'icône plus.
Par exemple, ajoutons une nouvelle section Appel à l'action à notre page.
Par défaut, la nouvelle section apparaîtra tout à la fin de la page.
Pour modifier la position de la section, placez le curseur sur sa bordure supérieure, choisissez l'option Déplacer la section et faites-la glisser de la même manière qu'un bloc.
Lorsque vous avez terminé de personnaliser votre page d'accueil, vous pouvez voir à quoi elle ressemble sur les appareils mobiles.
Pour ce faire, cliquez sur l'icône d'aperçu mobile dans le coin inférieur gauche.
S'il y a des blocs ou des sections qui ne s'affichent pas correctement, vous pouvez les déplacer.
De cette façon, vous pouvez vous assurer que votre version mobile offre la meilleure expérience utilisateur.
Lorsque vous êtes satisfait de votre page d'accueil, n'oubliez pas d'appuyer sur le bouton Enregistrer pour sauvegarder toutes les modifications que vous avez apportées.
Pages d'index du blog, d'archives et de recherche
Examinons maintenant un modèle appelé Index du blog, Archives, Recherche.
Comme son nom l'indique, ce modèle est responsable de l'affichage de la page des articles de blog, des archives et des résultats de recherche.
C'est pratique car vous pouvez modifier l'apparence de 3 pages à la fois.
Comme vous avez déjà appris à personnaliser des pages et à y ajouter de nouveaux blocs et sections, concentrons-nous sur la configuration d'éléments spécifiques.
Par exemple, si vous cliquez sur l'élément Articles, vous pouvez modifier l'ordre des articles, exclure des articles de catégories, tags ou auteurs spécifiques, et plus encore.
De plus, vous êtes libre de personnaliser entièrement la mise en page de la liste des articles.
À savoir, vous pouvez modifier le nombre de colonnes et d'articles par page, modifier la visibilité du nom de l'auteur, de la date de publication, de l'heure et du nombre de commentaires.
Il est rare qu'un constructeur de sites Web vous permette de contrôler de telles choses, sans codage, ce qui est une autre raison de la popularité de SeedProd.
Article unique
Lorsque vous avez terminé de personnaliser votre page de blog, modifions également le modèle Article unique .
Un article de blog typique se compose des parties suivantes :
- Image mise en avant
- Titre de l'article
- Infos de l'article
- Contenu de l'article
- Boîte d'auteur
- Section des commentaires
Le mieux, c'est qu'avec SeedProd, vous pouvez personnaliser entièrement chacune de ces parties.
Par exemple, si vous cliquez sur l'élément Infos de l'article, vous pouvez y ajouter de nouvelles données utiles.
Il peut s'agir d'une date de publication ou de modification, d'informations supplémentaires sur l'auteur de l'article, ou de tout autre élément que vous souhaitez spécifier.
Par exemple, disons que nous voulons afficher le nombre de commentaires dans notre section d'informations d'article. Pour commencer, appuyez sur le bouton Ajouter un élément.
Ensuite, cliquez sur le menu déroulant Type et sélectionnez l'option Commentaires.
Après cela, vous verrez que le nombre de commentaires s'affiche désormais dans l'élément d'informations de l'article.
De cette façon, vous pouvez facilement personnaliser n'importe quel élément de la page.
Barre latérale
Changeons également l'apparence de la barre latérale de notre thème. Rendez-vous sur le tableau de bord du constructeur de thème et cliquez sur le modèle Barre latérale.
La barre latérale est très populaire parmi les propriétaires de sites WordPress.
C'est un excellent endroit pour placer des éléments pertinents du site tels qu'une liste des derniers articles, un formulaire d'inscription, et bien d'autres.
SeedProd vous permet également de personnaliser entièrement votre barre latérale de la même manière que les autres modèles.
Par exemple, vous pouvez ajouter un formulaire d'inscription à la newsletter par e-mail à votre barre latérale en quelques clics.
Pour ce faire, faites simplement glisser et déposez l'élément Formulaire d'option de l'onglet Blocs dans votre barre latérale :
Ensuite, si vous cliquez dessus, vous pouvez modifier le nombre de champs, leur type et plus encore.
Maintenant que vous savez comment travailler dans l'éditeur visuel de SeedProd, vous êtes prêt à personnaliser le CSS global de votre thème.
Étape 4 : Personnaliser le CSS global de votre thème (sans code)
Tout d'abord, clarifions ce qu'est le CSS et comment vous pouvez modifier l'apparence globale de votre site en modifiant ce fichier.
CSS signifie feuilles de style en cascade. C'est un fichier qui contient du code qui détermine le style global, la typographie et les couleurs de votre site.
Lorsque vous modifiez l'apparence d'un élément dans le fichier CSS, ces modifications s'appliquent à cet élément sur l'ensemble de votre site.
Chaque thème WordPress a son propre fichier CSS. Généralement, pour y apporter des modifications, vous devez avoir des connaissances en développement web.
Mais SeedProd vous permet de personnaliser le CSS global de votre site dans un éditeur simple et convivial pour les débutants.
Pour commencer, cliquez sur le modèle CSS global dans le tableau de bord de vos modèles de thème.
Cela vous mènera à l'éditeur visuel des paramètres CSS globaux.
Sur le côté gauche, vous trouverez des onglets où vous pouvez modifier la couleur, les polices, l'arrière-plan de votre site, et plus encore.
Et sur le côté droit, vous pouvez voir les résultats des modifications que vous avez apportées en temps réel.
Par exemple, changeons la police des titres.
Pour ce faire, vous pouvez cliquer sur l'onglet Polices.
Pour changer la police de tous les titres de H1 à H6, sélectionnez une nouvelle police dans le menu déroulant sous le titre Police des en-têtes.
Il existe également une option pour changer la couleur de la police.
Si vous souhaitez modifier la police d'un titre particulier, vous pouvez activer le bouton Afficher les paramètres H1 - H6.
Ensuite, cliquez sur le bouton Modifier à côté de l'option Typographie d'un titre choisi et sélectionnez la police que vous souhaitez.
Par exemple, nous allons changer la police du titre H1 en Comic Sans. Comme vous pouvez le voir, la police a changé instantanément.
Lorsque vous avez terminé d'ajuster les paramètres CSS, cliquez sur le bouton Enregistrer pour sauvegarder les modifications que vous avez apportées.
De cette façon, vous pouvez personnaliser de nombreux éléments liés à l'apparence de votre thème WordPress personnalisé.
Maintenant que vous savez comment modifier les paramètres CSS globaux, vous êtes prêt à passer à la connexion de votre compte de service de marketing par e-mail.
Étape 5 : Connecter votre service de marketing par e-mail
SeedProd s'intègre parfaitement aux services de marketing par e-mail les plus populaires. Cette liste comprend, sans s'y limiter, Mailchimp, Constant Contact et Drip.
C'est une excellente nouvelle si vous avez déjà une base active d'abonnés par e-mail ou si vous souhaitez commencer à développer votre première liste d'e-mails.
Pour connecter votre compte de marketing par e-mail, accédez d'abord à l'onglet Générateur de thèmes et cliquez sur n'importe quel modèle.
Ensuite, allez dans l'onglet Connexion dans le panneau supérieur.
Une fois sur place, placez le curseur sur un service que vous utilisez, appuyez sur le bouton Connecter et suivez les instructions à l'écran.
Lorsque vous avez terminé de connecter votre service de messagerie, appuyez sur le bouton Enregistrer en haut à droite pour sauvegarder les modifications.
Désormais, SeedProd collectera les e-mails des visiteurs qui ont rempli votre formulaire d'inscription et les ajoutera à votre base d'e-mails.
Étape 6 : Publier votre thème WordPress personnalisé
La dernière étape consiste à publier votre thème personnalisé et à le rendre visible sur votre site Web.
Pour ce faire, allez d'abord dans SeedProd » Générateur de thèmes depuis votre tableau de bord WordPress.
Ensuite, activez le bouton Activer le thème SeedProd en haut à droite.
C'est tout. Votre thème WordPress personnalisé est en ligne et vous pouvez le voir sur votre site.
Pour ce faire, visitez simplement votre site Web et découvrez le nouveau thème personnalisé.
Par exemple, voici notre page d'accueil personnalisée sur notre site de démonstration :
Et voici le modèle d'article de blog unique que nous avons également personnalisé en quelques clics avec SeedProd :
Bonus : Créer des formulaires de recherche et une page de résultats personnalisés
Souhaitez-vous maintenant améliorer également l'expérience de recherche sur votre nouveau site WordPress au thème personnalisé ?
La recherche WordPress par défaut manque de nombreuses fonctionnalités et échoue souvent à fournir des résultats pertinents, surtout si vous avez beaucoup d'articles ou de produits sur votre site.
C'est là que SearchWP peut vous aider. C'est le meilleur plugin de recherche pour WordPress et il améliore la recherche par défaut en vous permettant d'inclure des champs personnalisés, des étiquettes, des catégories, des détails de produits, des fichiers multimédias, des documents, et plus encore dans le processus de recherche.
Avec SearchWP, vous pouvez configurer des formulaires de recherche personnalisés et les lier à des moteurs de recherche spécifiques. Il offre également des mises en page prédéfinies et de nombreuses options de personnalisation.
Ce n'est pas tout ! SearchWP est également livré avec un modèle de résultats pour WordPress. Vous pouvez personnaliser l'apparence des résultats de recherche sur votre site et choisir parmi des modèles prédéfinis.
Pour en savoir plus, consultez notre guide sur la façon de créer une page de recherche d'aspect professionnel dans WordPress.
Nous espérons que cet article vous a aidé à apprendre à créer un thème WordPress personnalisé en 6 étapes faciles, sans codage. Vous voudrez peut-être aussi consulter notre guide sur les meilleurs plugins de recherche WordPress pour améliorer la recherche de votre site et comment créer une page de recherche dans WordPress.
Si vous souhaitez également améliorer la recherche WordPress, vous pouvez commencer avec SearchWP ici.
