Comment créer un thème WordPress personnalisé en 5 étapes sans code

Publié: 2022-01-17

Vous souhaitez créer un thème WordPress personnalisé pour votre site Web ?

La création de votre propre thème WordPress à partir de zéro impliquait auparavant d'écrire du code complexe ou d'embaucher des développeurs de thèmes pour créer un thème pour vous. Mais grâce aux nouveaux générateurs de thèmes WordPress faciles à utiliser, n'importe qui peut créer un thème WordPress personnalisé sans écrire de code.

Cet article vous montrera comment créer un thème personnalisé dans WordPress étape par étape.

Qu'est-ce qu'un thème WordPress ?

Les thèmes WordPress sont des fichiers modèles écrits en PHP, HTML, CSS et JavaScript. Chaque fichier fonctionne ensemble pour créer la conception et les fonctionnalités de votre site WordPress.

Un thème WordPress typique comprendra certains, sinon tous, des fichiers de thème suivants :

  • footer.php
  • header.php
  • index.php
  • page.php
  • sidebar.php
  • archive.php

Les thèmes WordPress incluent également un fichier functions.php et un fichier style.css.

En règle générale, vous avez besoin d'une solide compréhension de plusieurs langages de conception Web ou d'un développeur Web pour créer un thème WordPress personnalisé.

Création de thèmes WordPress personnalisés pour les débutants

Si vous embauchez un développeur ou une agence de développement Web, le coût de la création d'un thème personnalisé à partir de zéro peut s'élever à des milliers de dollars. Parce que de nombreuses petites entreprises ne peuvent pas se permettre le coût, elles se contentent des thèmes WordPress par défaut fournis avec la plate-forme.

Pourtant, si vous êtes un propriétaire de site Web qui ne veut pas se contenter de la valeur par défaut, vous pouvez soit utiliser un framework de thème, comme Genesis par StudioPress par exemple, soit un plugin de création de page WordPress pour créer un thème personnalisé pour votre site WordPress.

Les cadres de thème WordPress facilitent la création d'un thème WordPress en gérant automatiquement une grande partie de la conception et des fonctionnalités. Cependant, ils restent une solution quelque peu compliquée, nécessitant des thèmes enfants par exemple, ils conviennent donc mieux aux développeurs qu'au propriétaire de site Web moyen.

D'un autre côté, les constructeurs de pages WordPress facilitent la création de mises en page personnalisées à l'aide d'une interface glisser-déposer, mais ils ont aussi leurs limites. Les constructeurs de pages vous permettent uniquement de créer des mises en page et vous ne pouvez généralement pas les utiliser pour créer des thèmes personnalisés.

Jusqu'à SeedProd, le meilleur constructeur de sites Web WordPress pour les thèmes personnalisés a décidé de résoudre ce problème avec son constructeur de thèmes WordPress.

Qu'est-ce que le générateur de thèmes SeedProd ?

SeedProd best WordPress website Builder

SeedProd est déjà un puissant générateur de pages par glisser-déposer utilisé par plus d'un million de propriétaires de sites Web. Mais avec son constructeur de thèmes, tout utilisateur non technique peut créer un thème WordPress entièrement personnalisé sans code.

Au lieu de jongler avec les fichiers de contenu wp, vous pouvez créer des thèmes à partir de rien en quelques clics. SeedProd créera même votre feuille de style automatiquement.

SeedProd est livré avec :

  • Interface visuelle par glisser-déposer
  • Plus de 150 modèles Pro
  • 2 millions de photos
  • Prise en charge de WooCommerce
  • Tableau de bord de gestion des abonnés
  • Intégrations de marketing par e-mail

Et tant de fonctionnalités et de widgets supplémentaires dont vous avez besoin pour créer rapidement un site Web personnalisé à l'aide de WordPress.

Dans cet esprit, voyons comment créer un thème WordPress personnalisé sans écrire une seule ligne de code à l'aide de SeedProd.

Comment créer un thème WordPress personnalisé sans code

Pour créer un thème WordPress personnalisé avec SeedProd, vous aurez d'abord besoin d'un site Web WordPress pour installer le plugin SeedProd. Si vous n'avez pas encore d'installation WordPress, vous pouvez suivre ces étapes pour apprendre à créer un site Web WordPress.

Votre site Web doit également avoir un thème WordPress simple installé. Vous pouvez trouver de nombreuses solutions gratuites dans le répertoire des thèmes WordPress. Vous n'aurez pas à vous soucier de l'apparence du thème, car SeedProd le remplacera lorsque vous publierez vos personnalisations.

C'est également une bonne idée d'utiliser un environnement de développement lors du changement de votre thème WordPress pour éviter de casser accidentellement votre site Web. Les sociétés d'hébergement WordPress populaires telles que BlueHost proposent des environnements de test par défaut.

bluehost best WordPress hosting solution

Vous devez également sauvegarder votre site Web avant d'apporter des modifications importantes. Voici une liste des meilleurs plugins de sauvegarde WordPress que vous pouvez utiliser.

Une fois votre site WordPress prêt, suivez les étapes ci-dessous pour créer un thème WordPress personnalisé sans code.

Table des matières
  1. Étape 1. Installer et activer SeedProd
  2. Étape 2. Choisissez un modèle de thème
  3. Étape 3. Personnalisez vos parties de thème WordPress
  4. Étape 4. Connectez votre service de marketing par e-mail
  5. Étape 5. Activez votre thème WordPress personnalisé

Étape 1. Installer et activer SeedProd

La première étape consiste à installer et à activer le plugin de création de site Web SeedProd. Pour accéder à la fonctionnalité de création de thèmes, vous aurez besoin d'une licence SeedProd Pro ou Elite.

Obtenez SeedProd ici

Après avoir téléchargé le fichier zip du plugin SeedProd sur votre ordinateur, téléchargez-le, installez-le et activez-le sur votre tableau de bord WordPress. Si vous avez besoin d'aide pour cette étape, suivez ce guide sur l'installation d'un plugin WordPress.

Après avoir installé SeedProd, accédez à SeedProd ≫ Paramètres depuis votre zone d'administration WordPress et entrez votre clé de licence SeedProd.

Enter your SeedProd theme builder license key

Vous pouvez trouver votre clé de licence en visitant votre espace de compte SeedProd et en la copiant depuis l'onglet Téléchargements.

Find your SeedProd license key

Vous pouvez maintenant accéder à SeedProd ≫ Theme Builder et voir la vue d'ensemble du Theme Builder. C'est ici que vous pouvez créer une hiérarchie de modèles pour votre thème WordPress.

SeedProd WordPress theme builder overview

En d'autres termes, c'est là que vous pouvez créer toutes les parties individuelles qui composent votre thème, telles que les suivantes :

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

Vous pouvez créer chacune de ces parties de thème individuellement en cliquant sur le bouton Ajouter un nouveau modèle de thème .

Add new theme template

Mais si cela semble trop écrasant pour votre premier essai, il existe une autre façon de créer votre thème.

Vous pouvez utiliser les modèles de thèmes prédéfinis de SeedProd pour créer rapidement le cadre de base de votre thème et les personnaliser en fonction de vos besoins de conception, sans code. Parce que cette solution est super facile pour les débutants, c'est ce sur quoi nous allons nous concentrer pour ce tutoriel.

Remarque : SeedProd propose également des centaines de modèles de page de destination réactifs pour vous aider à créer des pages de destination personnalisées.

Étape 2. Choisissez un modèle de thème

Le générateur de thèmes de SeedProd a déjà plusieurs thèmes créés pour vous. Pour les trouver, cliquez sur le bouton Thèmes .

Access premade theme templates

Au moment de la rédaction de ce guide, il existe 9 modèles de thèmes, dont :

  1. Thème de démarrage
  2. Entreprise moderne
  3. Agence de commercialisation
  4. Thème de conception de produit
  5. Entreprise de soins pour animaux de compagnie
  6. Thème de stratégie numérique
  7. Thème de la musique en direct
  8. Thème du courtier en hypothèques
  9. Thème des restaurants
SeedProd premade WordPress theme templates

Pour choisir un modèle de thème pour votre site Web, passez votre souris sur la vignette et cliquez sur l'icône de coche. Pour ce guide, nous utiliserons le thème de démarrage SeedProd.

Choose a SeedProd theme template

Après avoir choisi votre template, SeedProd crée automatiquement toutes les parties qui composent votre thème.

SeedProd WordPress theme templates

S'il y a une fonctionnalité spécifique que vous ne souhaitez pas afficher sur votre site Web, vous pouvez cliquer sur la bascule sous l'en-tête Publier et désactiver cette partie du thème.

unpublish a WordPress theme section

Si vous cliquez sur le lien des conditions pour chaque élément de modèle, vous pouvez modifier son nom, son type, sa priorité et choisir quand et où il apparaît sur votre site Web.

Edit WordPress theme conditions

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

Une fois les éléments de base de votre thème en place, il est maintenant temps de commencer à modifier chaque section de thème pour créer un thème WordPress vraiment personnalisé pour votre site.

Pour modifier une section de thème, survolez-la et cliquez sur le lien Modifier le design .

edit WordPress theme design

Nous allons commencer par modifier l'en-tête.

En-tête et pied de page

Lorsque vous modifiez une section de thème dans SeedProd, vous accédez à son générateur visuel de glisser-déposer. Vous pouvez personnaliser l'en-tête de votre thème sur cet écran en pointant et en cliquant simplement.

Comme vous pouvez le voir, le thème de démarrage est livré avec un en-tête à 2 colonnes qui comporte un logo et un menu de navigation. Vous pouvez le personnaliser pour afficher votre logo personnalisé en cliquant sur le logo dans l'aperçu en direct.

Change your WordPress header logo

À partir de là, vous pouvez supprimer le logo de l'espace réservé dans le panneau de gauche et en télécharger un nouveau depuis votre ordinateur ou votre médiathèque WordPress.

Vous pouvez ajuster la taille et l'alignement de votre logo dans le même panneau et ajouter un lien personnalisé, comme l'URL de votre site Web principal.

Si vous souhaitez modifier la couleur d'arrière-plan de votre en-tête, survolez la section d'en-tête jusqu'à ce qu'elle ait un contour violet, puis cliquez dessus pour afficher les paramètres de la section dans le panneau de gauche. À partir de là, vous pouvez donner à votre en-tête une couleur d'arrière-plan personnalisée, une image et choisir la largeur de l'en-tête.

Give your WordPress header a custom background color

Et dans l'onglet Avancé , vous pouvez personnaliser l'ombre, l'espacement, la bordure, etc. de votre en-tête.

Advanced WordPress header settings

Lorsque vous êtes satisfait de votre en-tête WordPress personnalisé, cliquez sur le bouton Enregistrer dans le coin supérieur droit et revenez au créateur de thème.

Répétez maintenant ces étapes pour modifier votre pied de page WordPress. Cliquez sur Modifier le design pour l'ouvrir dans l'éditeur visuel, puis cliquez sur n'importe quel élément pour personnaliser le contenu, les couleurs, les liens, etc.

Custom WordPress theme footer

Page d'accueil

Ensuite, nous personnaliserons la page d'accueil de votre site WordPress, qui est souvent la première page que les utilisateurs voient lorsqu'ils visitent votre site Web. Ouvrez donc la section Page d'accueil dans l'éditeur visuel.

Comme nous avons déjà personnalisé la conception de l'en-tête et du pied de page, vous verrez vos nouvelles conceptions en haut et en bas de votre page d'accueil. Mais ne vous inquiétez pas, les modifications que vous apportez sur cet écran n'affecteront pas votre en-tête ou votre pied de page ; ils sont simplement là comme guide visuel.

Customize your WordPress homepage template

Le modèle de thème de démarrage de SeedProd possède toutes les fonctionnalités dont la plupart des sites Web d'entreprise ont besoin, notamment :

  • Zone des héros
  • Logos clients
  • Caractéristiques
  • Témoignages
  • Foire aux questions

Tout comme l'en-tête, vous pouvez personnaliser chaque centimètre pour le rendre unique. Commençons par changer la zone des héros.

La zone des héros a les fonctionnalités suivantes :

  • Section
  • Mise en page à 2 colonnes
  • Image
  • Titre
  • Texte
  • Bouton

Pour changer l'image par défaut, cliquez simplement dessus et téléchargez une nouvelle image, comme vous l'avez fait avec votre logo.

Vous pouvez également modifier le titre et la description en cliquant sur chaque bloc et en remplaçant le contenu par votre texte personnalisé.

Change your homepage template content

Si vous cliquez sur le bloc de boutons, vous pouvez modifier le texte du bouton, le lien, l'alignement, etc.

customize WordPress theme buttons

Vous pouvez trouver tous ces éléments dans le panneau des blocs de gauche. De cette façon, vous pouvez faire glisser un bloc depuis la gauche et le déposer sur votre conception pour ajouter plus de contenu à votre thème.

drag and drop content

Suivez ce processus pour personnaliser le reste de votre page d'accueil jusqu'à ce qu'elle reflète votre entreprise. Par exemple, vous pouvez ajouter des informations sur les services de votre entreprise ou mettre en évidence les fonctionnalités de votre produit dans la section des fonctionnalités.

Add a features section to your homepage

Ensuite, vous pouvez utiliser le bloc Témoignages intégré de SeedProd pour ajouter une preuve sociale positive de vos clients et clients existants.

add customer testimonials to your WordPress theme

Nous avons également modifié la couleur d'arrière-plan de cette section pour qu'elle corresponde à notre en-tête de thème en ouvrant les paramètres de la section et en choisissant une couleur différente.

custom section background color

Après avoir personnalisé votre page d'accueil, vous pouvez cliquer sur l'icône d'aperçu mobile pour voir à quoi ressemble votre conception sur les appareils mobiles.

Preview WordPress theme in mobile

Si quelque chose ne va pas, vous pouvez déplacer les éléments jusqu'à ce que l'écran de votre mobile offre une bonne expérience utilisateur.

create a custom WordPress theme and preview on mobile

Lorsque vous êtes satisfait de l'apparence de votre page d'accueil, cliquez sur le bouton Enregistrer et revenez au créateur de thème.

Page de blog, articles uniques et pages

Il y a de fortes chances que vous souhaitiez inclure une page personnalisée pour les articles de blog dans votre nouveau thème WordPress. La bonne nouvelle est que SeedProd a une partie thématique que vous pouvez personnaliser spécifiquement à cette fin.

Cette section s'appelle Blog Index, Archives, Search dans le générateur de thème. Il vous permet de personnaliser la page des articles de votre blog, les archives des articles et la page des résultats de recherche pour qu'ils correspondent au reste de l'image de marque de votre site Web.

Cliquez donc sur le lien Modifier la conception pour ouvrir cette partie de thème dans le générateur de glisser-déposer.

SeedProd WordPress blog archive template

Sur cette page, le thème de démarrage utilise des balises de modèle pour extraire des informations dynamiques de WordPress, notamment le titre de l'archive et les publications. Lorsque vous cliquez sur l'un de ces blocs, vous verrez leurs paramètres dans le panneau de gauche.

Par exemple, lorsque vous cliquez sur la balise de modèle de publication, vous pouvez afficher les publications par défaut, personnalisées (publications, médias ou publications personnalisées) ou manuelles en saisissant des paramètres de requête spécifiques.

Add the posts template tag in WordPress for blog pages

Vous pouvez également choisir le nombre de colonnes, de publications par page, afficher ou masquer l'image sélectionnée, afficher un extrait, et bien plus encore.

Après avoir personnalisé votre archive ou votre page de blog, revenez au créateur de thème et modifiez la section Single Posts .

SeedProd WordPress single post template

Cette partie de thème utilise les balises de modèle suivantes pour extraire des informations sur les publications WordPress individuelles :

  • Titre de l'article
  • Informations sur la publication
  • Publier un contenu
  • Boîte Auteur
  • Poster des commentaires
  • Navigation dans les messages

Vous pouvez modifier chacun de ces blocs comme vous le feriez avec n'importe quel autre bloc SeedProd. Cliquez simplement sur n'importe quel élément et personnalisez-le dans le panneau des paramètres.

Par exemple, si vous cliquez sur le bloc Post Info , vous pouvez ajouter plus de méta-informations, modifier l'alignement et ajuster les couleurs des icônes.

post info settings

Barre latérale

De nombreux sites Web WordPress utilisent encore des barres latérales pour afficher des informations importantes aux visiteurs, telles que leurs profils de médias sociaux, leurs derniers messages et leur boîte d'inscription à la newsletter. Mais contrairement à de nombreux thèmes WordPress prédéfinis, vous pouvez utiliser SeedProd pour créer une barre latérale WordPress personnalisée avec ses blocs de construction visuels.

Pour ce faire, cliquez sur Modifier la conception dans la partie du modèle de la barre latérale. À partir de là, vous pouvez faire glisser et déposer tout contenu que vous aimez sur la conception de votre barre latérale.

SeedProd sidebar template

Le thème de démarrage comprend un champ de recherche, des icônes de médias sociaux et des catégories de publication par défaut. Mais vous pouvez ajouter tout ce que vous voulez ici. Par exemple, vous pouvez afficher une liste des articles de blog récents ou une image renvoyant vers un partenaire affilié.

Vous pouvez également utiliser le bloc de formulaire d'inscription de SeedProd et collecter des adresses e-mail pour développer votre liste, directement dans votre barre latérale. La meilleure chose est que vous n'aurez besoin d'aucune connaissance technique pour y arriver.

Add an optin form to your sidebar template

CSS global

À présent, vous avez créé la plupart de votre thème WordPress personnalisé sans code. Mais il y a une autre partie que vous devriez examiner pour vous assurer que tout est cohérent dans votre thème.

C'est votre CSS global , qui contrôle le style global, la typographie, les couleurs et la mise en page de votre thème. Cliquez donc sur Modifier le design sur cette partie de thème pour l'ouvrir dans l'éditeur de page.

SeedProd global css

Comme vous pouvez le constater, cette page vous permet de contrôler une grande partie du style de votre thème. Dans le panneau de gauche se trouvent des sections pour :

  • Couleurs
  • Polices
  • Arrière-plan
  • Boutons
  • Formes
  • Disposition
  • CSS personnalisé

Par exemple, vous pouvez ouvrir la section Boutons et choisir une couleur personnalisée. Ensuite, cette couleur apparaîtra sur chaque bouton de votre thème.

Custom global theme buttons

Vous pouvez faire de même dans l'en-tête Polices et attribuer une couleur personnalisée à chaque lien de votre thème.

Customize your WordPress link colors

Alors allez-y et ajustez ces paramètres jusqu'à ce que votre thème ressemble exactement à ce que vous voulez, puis cliquez sur le bouton Enregistrer pour enregistrer vos modifications.

Étape 4. Connectez votre service de marketing par e-mail

Si l'un de vos objectifs commerciaux est de développer votre liste de diffusion, il est probable que vous ayez ajouté un formulaire d'inscription quelque part dans la conception de votre thème WordPress. Mais pour ajouter automatiquement de nouveaux contacts à votre liste, vous devrez connecter votre formulaire à votre service de marketing par e-mail.

SeedProd s'intègre directement à de nombreux services de marketing par e-mail populaires, tels que Constant Contact, Mailchimp, Drip, etc. Et c'est un jeu d'enfant de se connecter à votre compte.

Modifiez simplement n'importe quelle partie du thème et cliquez sur l'onglet Connexion en haut de l'écran.

SeedProd email marketing integrations

Ensuite, cliquez sur n'importe quelle intégration dans la liste et suivez les instructions à l'écran. En conséquence, toute personne qui remplit votre formulaire d'inscription sera automatiquement ajoutée à votre liste de diffusion.

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

La dernière étape de la création d'un thème WordPress personnalisé avec SeedProd consiste à faire vivre le thème sur votre site Web. Pour ce faire, recherchez l'en-tête Activer le thème SeedProd dans le coin supérieur droit et basculez la bascule en position "on".

Enable your custom WordPress theme

Votre nouveau thème remplacera votre thème par défaut, vous permettant de voir vos personnalisations sur le front-end de votre site Web.

C'est ça! Votre nouveau thème WordPress personnalisé est en ligne sur votre site Web. Voyons à quoi ça ressemble.

Voici la page d'accueil avec vos nouveaux en-tête et pied de page :

Custom WordPress theme homepage

Voici la page de blog avec votre barre latérale WordPress personnalisée :

Custom WordPress theme blog page and sidebar

Toutes nos félicitations!

Vous savez maintenant comment créer un thème WordPress personnalisé sans code.

Avec le générateur de thèmes WordPress simple et puissant de SeedProd, vous n'aurez besoin d'aucune expérience technique, de développeurs WordPress ou d'un budget massif pour créer un thème WordPress personnalisé.

La puissance et les fonctionnalités sont entre vos mains dès que vous installez le plugin.

Alors qu'est-ce que tu attends?

Commencez avec SeedProd aujourd'hui

Merci d'avoir lu. Veuillez nous suivre sur YouTube, Twitter et Facebook pour plus de contenu utile pour développer votre entreprise.