Comment créer un thème WordPress personnalisé à partir de zéro (2022)

Publié: 2022-02-03

Vous souhaitez créer un thème WordPress personnalisé pour donner à votre site un look unique ?

Construire un thème WordPress était auparavant impossible sans développeurs coûteux ou sans avoir vous-même des connaissances en codage. Mais aujourd'hui, certains plugins WordPress vous permettent de créer votre propre thème personnalisé à l'aide d'une simple fonctionnalité de glisser-déposer.

Dans cet article, nous allons vous montrer comment créer votre propre thème WordPress personnalisé sans écrire de code.

Pour accéder à une section particulière du didacticiel, vous pouvez utiliser les liens rapides avant :

  1. Installer le plug-in SeedProd
  2. Sélectionnez un modèle de thème
  3. Personnalisez vos parties de thème WordPress
  4. Connectez-vous avec un service de messagerie
  5. Publiez votre thème WordPress personnalisé

Comment pouvez-vous créer un thème WordPress à partir de zéro ?

Les thèmes WordPress sont construits en utilisant une combinaison de PHP, CSS, JavaScript et HTML. Ce sont des langages de codage qui nécessitent beaucoup de formation pour apprendre. Donc, si vous n'étiez pas vous-même développeur, votre seule option consistait à embaucher des agences de développement pour créer des thèmes pour vous, ce qui peut être très coûteux.

Mais grâce à SeedProd, vous pouvez désormais créer votre propre thème WordPress personnalisé sans codage. Il est livré avec une interface simple de glisser-déposer que tout le monde peut utiliser, et il vous permet de personnaliser facilement chaque aspect de la conception de votre thème.

WPForms est le meilleur plugin WordPress Form Builder. Achetez le gratuitement!

Pourquoi SeedProd ?

SeedProd est le plugin de création de pages de destination le plus convivial pour WordPress.

Page d'accueil de SeedProd

Il offre un haut niveau de personnalisation et est livré avec une grande variété de fonctionnalités supplémentaires, notamment :

  • Générateur de thème
  • Plus de 150 modèles de pages de destination
  • Générateur de glisser-déposer
  • Intégrations de marketing par e-mail
  • 2 millions de photos
  • et plus.

Grâce à ces fonctionnalités, vous pouvez rapidement créer des pages de destination sur votre site Web dans un thème WordPress existant. Mais maintenant, SeedProd a ajouté une nouvelle fonctionnalité qui vous permet de créer votre propre thème WordPress personnalisé en utilisant sa même conception de glisser-déposer pour une facilité d'utilisation maximale.

Voyons comment créer un thème WordPress avec SeedProd.

Comment créer un thème WordPress personnalisé avec SeedProd

Nous allons supposer que vous avez déjà un site Web WordPress hébergé sur un domaine pour ce didacticiel. Sinon, vous pouvez consulter ce guide sur la création d'un site Web WordPress.

Si vous souhaitez remplacer votre thème WordPress existant par celui que vous allez créer, nous vous recommandons d'utiliser un site de développement de test pour celui-ci. De cette façon, vous ne courez pas le risque de provoquer accidentellement des erreurs sur votre site principal. Les meilleurs services d'hébergement WordPress comme Bluehost offrent des environnements de développement pour WordPress.

Page d'accueil Bluehost

Enfin, assurez-vous de sauvegarder votre site avant de créer votre thème. Cela garantit que vous pouvez toujours restaurer votre site dans un état stable en cas de problème. Vous pouvez trouver diverses options dans cette liste de plugins de sauvegarde WordPress.

Après avoir fait ces préparatifs, il est temps de commencer à créer un thème WordPress personnalisé sans code !

Étape 1. Installez le plugin SeedProd

Tout d'abord, installez le plugin SeedProd sur votre site WordPress. Vous pouvez voir les instructions d'installation des plugins WordPress si vous n'avez jamais installé de plugin auparavant.

Vous aurez besoin d'au moins la licence SeedProd Pro pour déverrouiller la fonction de création de thème. Pour activer la licence Pro, ouvrez votre espace compte SeedProd et cliquez sur l'onglet Téléchargements . Faites défiler vers le bas pour trouver votre clé de licence et copiez-la.

Licence SeedProd

Ensuite, ouvrez votre espace d'administration WordPress et allez dans SeedProd »Paramètres. Entrez ensuite la clé que vous avez copiée dans le champ Clé de licence et appuyez sur Vérifier .

Entrez la clé de licence seedprod

Maintenant, rendez-vous sur SeedProd » Theme Builder. C'est le tableau de bord où vivront tous vos différents éléments de thème.

Menu du créateur de thème

Maintenant, il y a deux façons de créer votre thème avec SeedProd : créez vous-même chaque partie de votre thème ou utilisez un modèle prédéfini et modifiez les parties que vous n'aimez pas.

Chaque thème WordPress se compose de différentes parties dont :

  • Entête
  • Bas de page
  • Page d'accueil
  • Message unique
  • Une seule page
  • Page d'archive ou de blog
  • Barre latérale

Ajouter un modèle de thème seedprod

Il peut être un peu intimidant de créer chacune de ces parties à partir de zéro si c'est la première fois que vous créez un thème. Dans ce cas, il existe un moyen plus simple de procéder.

SeedProd est livré avec divers modèles de thème prédéfinis qui définissent la structure globale de votre thème complet. De cette façon, toutes les différentes parties sont automatiquement ajoutées à la structure, mais vous pouvez toujours personnaliser chaque partie selon vos préférences.

Pour le reste du didacticiel, nous utiliserons l'un des thèmes de SeedProd pour vous montrer les étapes, car il s'agit de la méthode la plus conviviale pour créer un thème WordPress personnalisé.

Étape 2. Sélectionnez un modèle de thème

La fonction de création de thèmes comporte plusieurs thèmes prédéfinis inspirés de sites Web professionnels de différents types. Pour voir les thèmes disponibles, cliquez sur le bouton Thèmes .

Bouton de modèle de générateur de thème SeedProd

SeedProd est livré avec des modèles pour différentes entreprises et industries, notamment les agences de marketing, les restaurants, les entreprises de soins pour animaux de compagnie, etc.

Sélection du thème SeedProd

Nous allons utiliser le thème Starter pour cet exemple. Dès que vous sélectionnez un thème, SeedProd créera automatiquement toutes les parties individuelles du thème.

Parties thématiques

Vous pouvez également désactiver différentes parties du thème si vous n'en avez pas besoin pour votre site Web. Pour désactiver une section, vous pouvez utiliser les boutons bascule sous l'en-tête Publié.

Désactiver une partie de thème

Vous pouvez modifier les paramètres de chaque partie de votre thème en cliquant sur le bouton Modifier les conditions .

Modifier les conditions du thème seedprod

Cela ouvrira un modal où vous pourrez modifier le nom, le type, la priorité et configurer les conditions pour quand et où cette partie doit apparaître sur votre site Web.

Edit conditions modal seedprod

Dans la plupart des cas, vous pouvez laisser ces paramètres par défaut et passer à la personnalisation de chaque partie du thème.

Étape 3. Personnalisez vos parties de thème WordPress

Maintenant que tous les composants essentiels de votre thème sont définis, nous pouvons personnaliser la conception de chacun pour qu'il ressemble exactement à ce que nous voulons.

Pour commencer l'édition, déplacez votre curseur sur une partie de thème et cliquez sur Modifier le design .

Modifier la conception 2

Pour ce didacticiel, nous allons personnaliser l'en-tête, le pied de page, la page d'accueil et la page de blog. Les mêmes principes de personnalisation s'appliquent à toutes les autres pages.

En-tête et pied de page

Pour commencer à modifier l'en-tête, cliquez sur le bouton Modifier le design qui apparaît lorsque vous survolez l'en-tête. Cela vous mènera à l'interface de création de thèmes par glisser-déposer de SeedProd. Pointez et cliquez sur la zone d'en-tête pour ouvrir les options de personnalisation, qui apparaîtront dans le volet de gauche.

Par défaut, l'en-tête porte le logo de SeedProd. Vous pouvez le remplacer très facilement par le logo de votre entreprise. Cliquez sur l'image pour la supprimer ou la remplacer en téléchargeant votre propre logo.

Modifier l'en-tête seedprod

SeedProd vous permet de modifier la taille et l'alignement de votre logo. Vous pouvez également ajouter un lien personnalisé au logo. Par exemple, vous souhaiterez peut-être rediriger les utilisateurs vers la page d'accueil lorsqu'ils cliquent sur le logo.

Vous pouvez également modifier la couleur d'arrière-plan de votre en-tête. Déplacez simplement votre souris sur la zone d'en-tête jusqu'à ce que vous voyiez un contour bleu. Cliquez dessus pour trouver un nouveau menu d'options sur le panneau de gauche. Maintenant, vous pouvez changer la couleur de l'en-tête et choisir une couleur unie ou même un dégradé.

Changer la couleur de l'en-tête

Maintenant, cliquez sur l'onglet Avancé pour accéder à plus de paramètres tels que l'ombre, l'espacement, la bordure, la position, etc.

Onglet avancé de l'en-tête

Lorsque vous avez terminé d'apporter toutes les modifications, cliquez sur le bouton Enregistrer en haut à droite du générateur et cliquez sur le bouton croix pour quitter le tableau de bord principal du générateur de thème.

Enregistrer l'en-tête

Si vous souhaitez inclure un en-tête dans votre site, vous pouvez répéter ces mêmes étapes pour modifier le design de votre pied de page.

Ensuite, nous allons modifier la page d'accueil.

Page d'accueil

La page d'accueil est la façade de votre site Web. Normalement, il contient des éléments importants qui définissent qui vous êtes, ce que vous faites et fournissent une preuve sociale à travers des critiques et des témoignages.

Générateur de thème de page d'accueil

Le modèle de thème de démarrage que nous utilisons contient toutes les sections clés que vous trouverez normalement sur la page d'accueil d'un site Web d'entreprise, notamment :

  • Zone des héros
  • Rubrique Fonctionnalités
  • Témoignages
  • Foire aux questions

Vous pouvez modifier chaque bloc de cette page, y compris les images, le texte, les boutons, les couleurs et la mise en page.

Dans le gif ci-dessous, nous allons vous montrer à quel point il est facile de modifier différentes parties de la page en utilisant de simples actions de glisser-déposer.

Personnaliser le thème

Utilisez les paramètres et les blocs du menu de gauche pour modifier le design jusqu'à ce que vous soyez entièrement satisfait. Lorsque vous avez effectué toutes les modifications, assurez-vous de vérifier l'aperçu mobile.

Aperçu mobile de SeedProd

Si des éléments du site semblent se décomposer en vue mobile, vous pouvez revenir à l'édition et faire des ajustements jusqu'à ce qu'ils soient parfaits.

SeedProd Mobile Voir le site de démonstration

Lorsque vous êtes satisfait de votre page d'accueil, appuyez sur le bouton Enregistrer et revenez au tableau de bord de votre créateur de thème SeedProd.

Blog

Créons maintenant une page de blog personnalisée pour votre site. Sur le tableau de bord de votre créateur de thème, cliquez sur le lien Modifier le design sous la section Index du blog, Archives, Recherche pour commencer à le modifier.

Modèle de page de blog SeedProd

Ici, vous pouvez ajouter ou supprimer différents éléments tels que le contenu de la publication, l'extrait, la biographie de l'auteur et bien plus encore à l'aide de l'interface glisser-déposer. Cliquez sur l'un des messages affichés sur cette page pour accéder à plus de paramètres.

Ces paramètres vous permettent de modifier le type de requête de publication, la mise en page et la pagination. Vous pouvez également modifier le contrôle des détails supplémentaires qui doivent apparaître avec chaque publication, tels que la date de publication, l'auteur, l'image en vedette, l'extrait, etc.

Paramètres des articles de blog seedprod

Après avoir personnalisé la page du blog, cliquez sur Enregistrer et revenez à nouveau à votre tableau de bord.

CSS global

La section CSS globale configure les paramètres globaux pour les couleurs, la typographie, la mise en page et le style de votre thème.

Dans votre tableau de bord Theme Builder, cliquez sur Modifier le design dans la section CSS globale de votre thème.

Paramètres CSS globaux du thème SeedProd

Par exemple, vous pouvez choisir une couleur et une police de bouton que vous souhaitez voir apparaître sur l'ensemble de votre site.

Paramètres CSS globaux pour les boutons seedprod

De même, vous pouvez modifier les polices de texte, les arrière-plans, la mise en page et même ajouter du CSS personnalisé à votre thème. Ces changements s'appliqueront à l'ensemble de votre site et assureront une cohérence stylistique.

Lorsque vous avez terminé d'ajuster les paramètres à votre convenance, cliquez sur le bouton Enregistrer .

Étape 4. Connectez-vous à un service de messagerie

SeedProd vous permet de vous connecter à votre service de marketing par e-mail, ce qui est une étape importante si vous souhaitez inclure un formulaire d'abonnement ou d'inscription dans votre thème.

En fait, si vous avez installé WPForms sur votre site, il s'intègre automatiquement à SeedProd. Ainsi, vous pouvez intégrer tous les formulaires que vous avez créés avec WPForms dans n'importe quelle partie de votre thème à l'aide de SeedProd.

Une fois que vous avez créé un formulaire, vous devez vous assurer que votre service de marketing par e-mail est connecté à SeedProd afin que vous puissiez envoyer et recevoir des e-mails liés au formulaire.

Pour connecter votre service de marketing par e-mail à votre thème SeedProd, cliquez sur l'onglet Connexion dans la barre supérieure de l'écran du créateur de thème pendant que vous modifiez une partie du thème.

Intégration du mailer SeedProd

Cliquez sur n'importe quel expéditeur de la liste et suivez les instructions à l'écran pour terminer l'intégration avec votre thème SeedProd. Lorsque vous avez terminé, vos entrées de formulaire optin seront automatiquement ajoutées à votre liste de diffusion.

Étape 5. Publiez votre thème WordPress personnalisé

Votre thème est maintenant prêt à être déployé ! Pour mettre votre thème en ligne, accédez au tableau de bord de votre créateur de thème et cliquez sur le bouton bascule Activer le thème SeedProd en haut à droite de l'écran.

Activer le thème SeedProd

Maintenant, jetons un coup d'œil à notre thème WordPress personnalisé nouvellement créé !

Ceci est la page d'accueil du thème avec l'en-tête :

Démo de la page d'accueil de SeedProg

Et voici la page du blog.

Aperçu de la page du blog

Et c'est tout! Vous venez de créer votre premier thème WordPress personnalisé sans code !

Ensuite, créez des formulaires de contact pour votre site WordPress

Maintenant que vous avez un tout nouveau site WordPress, vous devriez envisager d'ajouter des formulaires de contact pour permettre aux visiteurs de vous joindre facilement. WPForms est le créateur de formulaires WordPress le plus convivial avec plus de 5 millions d'installations actives.

Non seulement vous pouvez développer votre liste de diffusion avec WPForms, mais également effectuer une foule d'autres activités comme la collecte de dons pour votre organisation à but non lucratif.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaire WordPress le plus simple. WPForms Pro comprend de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.