Vous voulez créer un thème WordPress personnalisé qui ressemble exactement à ce que vous avez imaginé ? Dans ce guide, je vous guiderai à travers le processus exact que j'ai utilisé pour concevoir mon propre thème, chaque page, couleur et mise en page, sans toucher au code.
Lorsque j'ai lancé mon site WordPress, j'ai utilisé un thème préétabli, mais je me heurtais constamment à des obstacles. Je ne pouvais pas déplacer les sections où je voulais, les couleurs de ma marque n'avaient jamais l'air correctes, et les petites modifications prenaient des heures. Apprendre à créer un thème WordPress personnalisé a résolu tous ces problèmes, et je vous montrerai exactement comment le faire aussi.
La façon la plus simple de créer un thème WordPress personnalisé :
- Etape 1. Installer SeedProd et choisir un modèle
- Étape 2. Personnaliser l'en-tête et le pied de page de WordPress
- Étape 3. Créer une page d'accueil WordPress personnalisée
- Étape 4. Créer des modèles de page de blog et d'article unique
- Étape 5. Créer une page de présentation
- Étape 6. Créer une page de contact
- Étape 7. Ajuster les paramètres globaux du thème
- Étape 8. Publier le thème WordPress personnalisé
Qu'est-ce qu'un thème WordPress personnalisé ?
Un thème WordPress personnalisé est une conception de site web que vous créez pour répondre à vos besoins exacts, au lieu d'utiliser un thème prémâché qui est livré avec des mises en page et des styles prédéfinis. Avec un thème personnalisé, vous choisissez l'apparence et le fonctionnement de chaque partie de votre site, de l'en-tête et du pied de page à la mise en page du blog et au style des boutons.
Traditionnellement, il fallait écrire du PHP, du CSS et du HTML pour en créer un. Aujourd'hui, avec des constructeurs de thèmes visuels comme SeedProdvous pouvez créer un thème WordPress entièrement personnalisé sans toucher au code. Vous concevez chaque partie de votre site en glissant et déposant des sections, en changeant les couleurs et les polices, et en prévisualisant le tout en direct.
Cela signifie que vous n'êtes pas obligé d'apporter de petites modifications à la conception de quelqu'un d'autre. Vous pouvez créer un thème qui correspond à votre marque, qui se charge plus rapidement et qui offre à vos visiteurs l'expérience exacte que vous souhaitez qu'ils aient.
Pourquoi créer un thème WordPress personnalisé (au lieu d'utiliser un thème préfabriqué) ?
Lorsque j'ai commencé, j'ai pensé que choisir un thème populaire me ferait gagner du temps. C'est ce qui s'est passé pendant une semaine. Puis je me suis heurtée à un mur. Je ne pouvais pas déplacer les sections où je le souhaitais, les polices de caractères me semblaient incorrectes et chaque modification nécessitait de fouiller dans des paramètres confus.
C'est alors que j'ai commencé à chercher un moyen de concevoir mon propre thème sans avoir à coder. J'ai trouvé SeedProdun constructeur visuel de thèmes WordPress qui vous permet de créer chaque partie de votre site par glisser-déposer. Pas de fichiers PHP, pas de modifications CSS, et pas de recherche du bon menu.
Avec SeedProd, c'est possible :
- Correspondre à ma marque dès le départ. Les couleurs, les polices et l'espacement correspondent exactement à l'image que je m'en faisais.
- Supprimer le superflu. Seules les mises en page et les fonctionnalités dont j'avais réellement besoin, ce qui a permis à mon site de se charger plus rapidement.
- Effectuez des modifications en quelques minutes. Modifiez les mises en page, échangez des images ou redessinez des sections entières sans toucher au code.
- Planifier mon site en fonction de mes visiteurs. Je construisais les pages dans un ordre logique au lieu de forcer le contenu à entrer dans la structure de quelqu'un d'autre.
Une fois que j'ai vu à quel point il était plus facile de travailler sur mon propre thème SeedProd plutôt que de me battre avec un thème pré-fabriqué, j'ai su que je ne reviendrais pas en arrière.
Que faire avant de créer un thème WordPress personnalisé ?
Avant de créer un thème WordPress avec SeedProd, vous devez vous assurer d'avoir un filet de sécurité. Si vous avez déjà un site web avec du contenu que vous souhaitez conserver, vous devriez faire une sauvegarde de votre installation WordPress, juste au cas où.
Pour éviter toute mésaventure dans le développement de votre thème sur votre site en ligne, vous devriez également créer un site de mise à l'essai. Cela vous donne un environnement séparé et privé pour expérimenter avec SeedProd et développer votre thème sans affecter votre site en ligne.
Comment construire un thème WordPress sans code ?
Vous vous souvenez que j'ai dit que je ne savais pas coder ? Eh bien, ce n'était pas du tout un problème. SeedProd a rendu incroyablement facile la construction d'un thème personnalisé, étape par étape visuelle. Voici comment j'ai procédé.
Etape 1. Installer SeedProd et choisir un modèle
Tout d'abord, procurez-vous le plan SeedProd Pro. Il fournit toutes les fonctionnalités dont vous avez besoin (y compris le constructeur de thèmes) à un prix abordable.
Une fois installé, vous serez prêt à créer un thème WordPress personnalisé à partir d'un kit de démarrage et à l'adapter à votre site.
Une fois que vous avez votre clé de licence, allez sur votre site d'essai et installez le plugin. L'installation de SeedProd est aussi simple que de télécharger le fichier du plugin et de cliquer sur "Activer".
Une fois le plugin activé, allez dans le menu SeedProd de votre tableau de bord WordPress et cliquez sur "Theme Builder". Ensuite, cliquez sur le bouton "Theme Template Kits" pour choisir votre thème de départ.
SeedProd propose tellement de modèles de thèmes de blocs conçus par des professionnels que je dois admettre que même moi, j'ai été un peu gâté par le choix.
Vous pouvez filtrer les modèles de SeedProd par catégorie et les trier par popularité ou récence. Choisissez simplement celui qui se rapproche le plus de votre style, car vous personnaliserez tout par la suite.
Ne vous inquiétez pas si elle n'est pas parfaite. Vous pourrez en personnaliser chaque centimètre à l'étape suivante.
J'ai finalement opté pour le thème Elite Consulting Business Theme. Son look épuré et moderne correspondait parfaitement à l'ambiance que je recherchais.
Pour importer votre fichier de thème, placez le curseur de votre souris sur le kit de thème et cliquez sur l'icône de la coche.
Cliquez ici pour prévisualiser le modèle que j'ai choisi pour cette conception afin de le comparer à la version personnalisée.
Après avoir choisi un kit, vous pouvez voir tous les modèles individuels qui constituent les composants d'un thème WordPress. Le mien comprenait par exemple une page d'accueil, un en-tête, un pied de page, une page de blog et une barre latérale.
Il comportait également des modèles personnalisés pour des sections distinctes du thème, telles qu'une section sur les récompenses, une page sur les services, un tableau des prix, un modèle de page personnalisé pour les produits, et bien d'autres encore.
Il est probable que vous n'ayez pas besoin de tous ces modèles pour votre site. Concentrez-vous donc sur ce dont vous avez besoin et supprimez les modèles dont vous ne voulez pas en cliquant sur "Corbeille".
Si cela ne vous convient pas, vous pouvez toujours désactiver l'option "Publié" afin que le modèle n'apparaisse pas sur votre site web.
Étape 2. Personnaliser l'en-tête et le pied de page de WordPress
Une fois les éléments de base de votre thème en place, vous pouvez commencer à modifier chaque section du thème. Pour mon site, j'ai commencé par les sections de l'en-tête et du pied de page.
Pour modifier une section du thème, il vous suffit de la survoler et de cliquer sur le lien Modifier la conception.
Lorsque vous éditez une section de thème dans SeedProd, vous accédez à son constructeur visuel par glisser-déposer. Sur cet écran, vous pouvez personnaliser l'en-tête de votre thème en pointant et en cliquant simplement.
Le modèle d'en-tête original comportait trois colonnes, ce qui était un peu trop chargé à mon goût. Dans ce cas, il vous suffit de le supprimer et de faire glisser un bloc de deux colonnes dans le panneau de gauche.
L'ajout d'un logo est également un jeu d'enfant avec le bloc Image - il suffit de le sélectionner dans votre bibliothèque de médias et d'utiliser les commandes pointer-cliquer pour ajuster sa taille et son emplacement.
C'est aussi le bon moment pour revérifier vos décisions en matière de design. Voici une liste des erreurs de conception les plus courantes que je vois chez les débutants lorsqu'ils personnalisent leur thème.
Pour le menu de navigation, vous pouvez utiliser le bloc Nav Menu de SeedProd et choisir le paramètre "Simple Menu". Cela vous permet de créer facilement la structure de menu exacte que vous avez en tête.
Une fois que vous êtes satisfait de votre en-tête, enregistrez vos modifications. Ensuite, retournez dans le constructeur de thèmes et ouvrez le modèle Footer pour personnaliser la section du pied de page.
Le pied de page original de mon modèle contenait un peu plus d'informations que je n'en avais besoin, je l'ai donc simplifié en supprimant les blocs inutiles.
J'ai conservé les informations sur l'entreprise et les éléments du menu des médias sociaux, mais je les ai centrés pour une présentation plus équilibrée. Ensuite, j'ai simplement remplacé le contenu des espaces réservés par le mien.
Apportez des modifications similaires à votre modèle de pied de page pour obtenir l'aspect que vous souhaitez pour votre thème personnalisé.
Une fois que votre en-tête et votre pied de page sont élégants et stylés, il est temps de s'attaquer au cœur de votre site web : la page d'accueil. Rappelez-vous que vous pouvez trouver vos fichiers de modèles sous SeedProd " Theme Builder.
Étape 3. Créer une page d'accueil WordPress personnalisée
Si vous vous êtes déjà demandé comment construire visuellement un thème WordPress, cette partie montre à quel point c'est simple.
L'objectif principal de la personnalisation de la page d'accueil est probablement de créer une première impression forte, de montrer votre expertise et de fournir à vos clients potentiels des raisons convaincantes de vous choisir ou de choisir votre entreprise.
Personnellement, j'aimais bien la présentation générale de la page d'accueil du thème Elite Consulting Business, mais je voulais la simplifier davantage et y ajouter ma touche personnelle.
J'ai conservé la section "héros" en haut de page, car c'est un excellent moyen de faire une déclaration audacieuse. J'ai simplement remplacé l'image par défaut par une autre qui reflète mieux ma marque, et j'ai mis à jour le titre et la description.
De même, j'ai modifié le style du bouton CTA. Vous pouvez le faire en cliquant sur les paramètres avancés du bloc. Il vous donne accès à un sélecteur de couleurs, dans lequel vous pouvez sélectionner une nouvelle couleur d'arrière-plan et arrondir les angles du bouton pour lui donner un aspect plus doux.
Pour instaurer la confiance et mettre en valeur mon expérience, j'ai.. :
- Ajout d'une bande de logos de marques avec lesquelles j'ai travaillé,
- Mise à jour des compteurs de chiffres pour mettre en évidence les statistiques clés
- Création d'un carrousel de témoignages avec des citations de clients
- Inclusion d'un mini-portefeuille d'écriture utilisant des blocs d'images et d'en-têtes
En quelques clics et glissements, votre page d'accueil prendra l'aspect que vous souhaitez.
Étape 4. Créer des modèles de page de blog et d'article unique
D'accord, je n'ai pas eu besoin de cette étape parce que je n'avais pas l'intention d'avoir un blog sur mon site web. Mais je sais que beaucoup d'entre vous voudront partager leurs pensées et leur expertise avec le monde, alors voici un bref aperçu de la façon dont SeedProd facilite la création de superbes pages de blog et de modèles d'articles uniques.
Modèle de page de blog
Votre modèle de page de blog se trouve dans la liste des modèles de thèmes sous "Blog Index, Archives, Search" ou, dans mon cas, "Blog Page". Comme pour le modèle de page personnalisé précédent, vous pouvez le personnaliser en cliquant sur le lien "Modifier le design".
Ici, vous pouvez personnaliser l'affichage de vos articles de blog - vous pouvez choisir d'afficher des images en vedette, des extraits, des informations sur l'auteur, etc.
Vous pouvez également ajouter des éléments tels qu'une barre de recherche, des boutons de partage de médias sociaux ou même un appel à l'action pour encourager les visiteurs à explorer davantage.
Modèle d'article unique
Tout comme le modèle de page personnalisée de blog, vous pouvez modifier et personnaliser le modèle d'article de blog unique.
Pour une présentation cohérente, SeedProd vous permet de styliser l'affichage d'éléments tels que le titre de l'article, l'image vedette, la méta-description et même la biographie de l'auteur.
Sur WordPress, ces balises sont appelées balises de modèle. Elles extraient automatiquement des données de votre site sans que vous ayez à les créer manuellement.
Par exemple, avec les balises du modèle Featured Image, vous pouvez afficher automatiquement les images en vedette sur la page de votre blog.
Étape 5. Créer une page de présentation
Après la page d'accueil, la page "À propos" est sans doute la partie la plus importante de tout site web personnel. C'est là que les clients et collaborateurs potentiels apprennent à connaître la personne qui se cache derrière les services. Je voulais que la mienne soit authentique et engageante et qu'elle donne une image claire de qui je suis et de ce que je propose.
Le thème Elite Consulting Business incluait déjà un modèle de page WordPress personnalisé de base pour une page à propos, auquel je pouvais accéder en allant dans Pages " All Pages dans mon tableau de bord WordPress et en cliquant sur "Edit with SeedProd".
J'ai décidé de conserver les deux premières sections de la maquette originale, qui se concentrent sur mon expérience professionnelle et les services que je propose. J'ai simplement remplacé le contenu et les images par les miennes.
Ensuite, je voulais mettre en avant mes certifications pour asseoir ma crédibilité. C'est là que les Template Parts de SeedProd se sont avérés utiles.
Les parties de modèle sont des sections préfabriquées que vous pouvez insérer et réutiliser sur différentes pages de votre site web, ce qui représente un gain de temps considérable. Le thème est fourni avec une partie de modèle appelée "Prix et reconnaissance".
J'ai simplement modifié ce modèle pour y inclure mes certifications, puis je l'ai facilement inséré dans ma page "À propos".
Pour conclure, j'ai créé une dernière section avec une touche plus personnelle. J'ai parlé de mes loisirs, de mon lieu de résidence et d'autres éléments qui aideraient les visiteurs à établir un lien avec moi à un niveau plus personnel.
Ces personnalisations m'ont permis de concevoir mon propre thème WordPress sans avoir recours à un développeur.
Étape 6. Créer une page de contact
La dernière chose que je voulais, c'était une page de contact encombrée et confuse. Bien que le thème Elite Consulting Business soit livré avec une page de contact pré-construite, elle me semblait un peu surchargée.
J'ai décidé de simplifier les choses de manière drastique. J'ai supprimé la plupart du contenu par défaut et je l'ai remplacé par le bloc Contact Form de SeedProd. Ce bloc facilite grandement l'intégration avec WPForms, l'un des plugins de construction de formulaires les plus populaires de WordPress.
Note rapide : WPForms n'est pas fourni avec SeedProd, mais vous pouvez télécharger la version gratuite de WPForms à partir du répertoire des plugins WordPress - il contient tout ce dont vous avez besoin pour un formulaire de contact de base.
Avec WPForms installé, vous pouvez créer un formulaire de contact directement dans SeedProd - pas besoin de jouer avec des paramètres compliqués ou des shortcodes.
Étape 7. Ajuster les paramètres globaux du thème
Mon site web commençait à prendre forme. Il était temps d'ajouter les touches finales qui lui donneraient un aspect très soigné et professionnel. Entrez dans les paramètres globaux de SeedProd.
Le modèle CSS global se trouve dans laliste des modèles de thèmes- il suffit de cliquer sur "Modifier la conception" pour l'ouvrir. Il s'agit de votre centre de commande pour contrôler l'aspect général de votre site web.
Couleurs
Tout d'abord, vous devez vous assurer de la cohérence des couleurs sur toutes les pages. SeedProd facilite cette tâche en vous permettant de définir des couleurs globales pour tout, des en-têtes au texte en passant par les boutons, les liens et les arrière-plans.
Polices de caractères et typographie
Bien que j'apprécie la police par défaut du thème Elite Consulting Business, je voulais modifier les graisses et les couleurs des titres et des liens pour qu'ils correspondent mieux à l'esthétique de ma marque.
Contexte
Pour garder les choses cohérentes, j'ai changé la couleur d'arrière-plan de la page. SeedProd vous permet même d'ajouter une image de fond ici si vous voulez faire preuve de fantaisie.
Boutons
Les boutons sont essentiels pour les appels à l'action, alors assurez-vous qu'ils se démarquent. Jouez avec différents styles de police, couleurs et rayons de bordure jusqu'à ce que vous trouviez l'aspect qui vous convient.
CSS personnalisé
SeedProd vous donne même la possibilité d'ajouter votre propre CSS personnalisé. C'est là que les choses deviennent un peu plus techniques, mais cela vous donne encore plus de contrôle sur votre design.
Par exemple, j'ai utilisé un bout de CSS personnalisé pour que le bouton de soumission du formulaire WPForms s'harmonise avec le style de mes autres boutons.
Si vous le souhaitez, vous pouvez suivre mon guide sur l'ajout de CSS personnalisés dans WordPress.
Étape 8. Publier le thème WordPress personnalisé
Après avoir mis tant de soin à concevoir votre thème WordPress personnalisé, ne sautez pas les dernières vérifications. Utilisez la fonction de prévisualisation intégrée pour vérifier comment tout se présente sur différentes tailles d'écran - des ordinateurs de bureau aux tablettes en passant par les smartphones.
Vous devez vous assurer que votre thème a une apparence fantastique, quelle que soit la façon dont les gens le visualisent.
Bien entendu, vous devez également tester vos éléments interactifs. Envoyez un message test via votre formulaire de contact (et faites une petite danse de la victoire lorsqu'il arrivera dans votre boîte de réception ! 🎉)
J'ai cliqué sur chaque bouton et chaque lien de menu, juste pour m'assurer qu'ils menaient au bon endroit.
Enfin, le moment de vérité. Retournez dans le SeedProd Theme Builder, respirez profondément, et trouvez la bascule "Enable SeedProd Theme" dans le coin supérieur droit. D'un clic satisfait, mettez-le en position "on".
Votre thème WordPress personnalisé est LIVE ! Vous pouvez maintenant visiter votre site et le voir en action.
Autres façons de créer un thème WordPress personnalisé (sans SeedProd)
Je suis conscient que tous ceux qui liront ce guide ne voudront pas suivre mon processus de création de modèles et de thèmes personnalisés. C'est pourquoi j'ai recherché d'autres moyens de créer un site web professionnel.
| Méthode | Difficulté | Coder ? | Meilleur pour |
|---|---|---|---|
| Codage traditionnel | Avancé | Oui (PHP, HTML, CSS, JS) | Développeurs, agences |
| Caractères de soulignement (_s) | Intermédiaire | Oui (PHP, CSS) | Développeurs apprenant le développement de thèmes |
| Thèmes pour enfants | Débutant/Intermédiaire | Quelques CSS | Les passionnés de WordPress |
| Thèmes des blocs | Intermédiaire | Non | Utilisateurs modernes de WordPress |
Chacun d'entre eux a sa place, mais ils peuvent toujours sembler limitatifs si vous essayez de construire un thème WordPress sans codage. Les thèmes enfants nécessitent des ajustements CSS, et les thèmes blocs ne sont pas toujours adaptés aux débutants. SeedProd vous offre une véritable expérience sans code avec un contrôle total de la conception visuelle, de sorte que vous pouvez créer un thème entièrement personnalisé sans toucher au code.
Si vous cherchez un moyen rapide et flexible de construire un thème qui ressemble exactement à ce que vous voulez, SeedProd est l'option vers laquelle je reviens toujours.
Exemples de thèmes WordPress personnalisés pour des sites web réels
Vous ne savez pas quoi construire avec votre thème personnalisé ? Voici des exemples concrets que vous pouvez suivre pour concevoir le site parfait pour votre nichée, tous construits avec le constructeur visuel de SeedProd et quelques ajustements simples.
- Professionnels du fitness : Suivez ce guide pour créer un site web d'entraîneur personnel qui présente les services, les témoignages et les options de réservation.
- Églises et organisations à but non lucratif : Apprenez à créer un site web d'église avec des fonctions d'événements, de sermons et de dons.
- Restaurants et cafés : utilisez ce tutoriel pour concevoir un site web de restaurant comprenant des menus, des heures d'ouverture et des formulaires de réservation.
- Boutiques en ligne : Vous voulez vendre des produits ? Ce guide vous montre comment créer une boutique en ligne sur WordPress avec un thème personnalisé et un contrôle total de la mise en page.
- Photographes et créatifs : Découvrez comment créer un site web de photographie qui mette en valeur votre travail grâce à des mises en page audacieuses et visuelles.
- Agents immobiliers : Suivez ce guide pour créer un site web immobilier avec des grilles d'inscription, des formulaires de contact et des cartes.
- Auteurs et blogueurs : Apprenez à créer un site web d'auteur sous WordPress pour promouvoir vos livres, vos reportages et vos événements.
- Mariages et événements : Utilisez ce pas-à-pas pour créer un site web de mariage avec des formulaires RSVP, des sections d'articles et des galeries de photos.
Questions fréquemment posées
Créer un thème personnalisé pour n'importe quel site Web WordPress
Avec les bons outils, n'importe qui peut concevoir un thème WordPress personnalisé et créer un site qui correspond exactement à sa vision, sans qu'aucun développeur ne soit nécessaire. Que vous créiez un blog personnel, un site professionnel ou quelque chose de tout à fait unique, vous avez désormais le contrôle total de son apparence et de son fonctionnement.
Si vous êtes prêt à aller plus loin, voici quelques autres guides utiles qui s'accordent bien avec votre nouveau thème personnalisé :
- Comment créer une page de blog sur WordPress
- Comment dupliquer une page dans WordPress
- Comment créer une image en vedette pour les articles de blog
- Comment créer un blog de maman avec WordPress
- Comment créer un blog de voyage et gagner de l'argent
Merci d'avoir lu ! Si vous avez des questions ou si vous voulez partager votre thème personnalisé, laissez un commentaire ci-dessous. Et suivez-nous sur YouTube, X (anciennement Twitter) et Facebook pour plus d'astuces et de tutoriels WordPress.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
