Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

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

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

Écrit par : image de l'auteur Stacey Corrin
image de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : John Turner
image du réviseur John Turner
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Vous avez toujours voulu créer un thème WordPress personnalisé pour votre site web sans avoir à écrire un code complexe ou à engager un développeur ?

Grâce aux générateurs de thèmes WordPress comme SeedProd, tout le monde peut maintenant créer des thèmes professionnels avec facilité. Dans ce guide, je vous montrerai comment utiliser SeedProd pour créer un thème WordPress personnalisé sans aucune connaissance en codage.

Dans ce guide

Pourquoi créer un thème WordPress personnalisé ?

La création d'un thème WordPress personnalisé présente plusieurs avantages :

  • Contrôle total de la conception: Réalisez un site web qui reflète parfaitement votre marque et votre vision esthétique sans les contraintes des modèles de pages préexistants.
  • Fonctionnalité unique: Mettez en œuvre des fonctionnalités adaptées aux objectifs spécifiques de votre site web et aux besoins des utilisateurs.
  • Amélioration des performances: Les thèmes personnalisés se chargent souvent plus rapidement et offrent une expérience utilisateur plus fluide.
  • Sécurité: Les thèmes personnalisés peuvent être moins vulnérables aux exploits courants s'ils sont codés de manière experte.

Si vous faites appel à un développeur ou à une agence de développement web, la création d'un thème personnalisé à partir de zéro peut coûter des milliers d'euros. De nombreuses petites entreprises n'ont pas les moyens de s'offrir des thèmes WordPress personnalisés et se contentent donc des thèmes par défaut fournis avec la plateforme.

Cependant, si vous êtes un propriétaire de site web qui ne veut pas se contenter de ce qui est proposé par défaut, vous pouvez utiliser un plugin de construction de pages WordPress. Ils permettent de créer facilement des mises en page personnalisées à l'aide d'une interface de type "glisser-déposer", mais ils ont aussi leurs limites.

Les constructeurs de pages ne vous permettent que de créer des mises en page ; en général, vous ne pouvez pas les utiliser pour créer des thèmes personnalisés. C'était jusqu'à ce que SeedProd résolve ce problème avec son constructeur de thème WordPress.

SeedProd Constructeur de site web WordPress Drag and Drop

SeedProd est déjà un puissant constructeur de pages par glisser-déposer qui compte plus d'un million d'utilisateurs. Avec son constructeur de thèmes, c'est maintenant un constructeur de sites web à part entière, où n'importe quel utilisateur non technicien peut créer un thème WordPress sans avoir besoin de coder.

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

Le plugin est livré avec :

  • Interface visuelle de type "glisser-déposer
  • Plus de 150+ modèles professionnels
  • 2 millions de photos d'archives
  • Prise en charge de WooCommerce pour les sites de commerce électronique
  • Tableau de bord de gestion des abonnés
  • Intégration du marketing par courriel
  • Des options de personnalisation infinies

Et bien d'autres fonctionnalités et widgets pour créer rapidement un site web personnalisé.

C'est pourquoi nous allons voir comment créer un thème WordPress personnalisé en utilisant SeedProd, étape par étape.

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

Pour créer un thème WordPress avec SeedProd, vous aurez besoin d'un site web WordPress. Ensuite, vous pouvez installer le plugin SeedProd.

Si vous ne disposez pas encore d'une installation WordPress, vous pouvez suivre les étapes suivantes. Elles vous montreront comment créer un site web WordPress.

Votre site web doit également être doté d'un thème WordPress simple. Vous trouverez de nombreuses solutions gratuites dans le répertoire des thèmes WordPress.

Vous n'aurez pas à vous soucier de l'apparence du thème. SeedProd le remplacera lorsque vous publierez vos personnalisations.

Il est également conseillé d'utiliser un environnement de développement lorsque vous modifiez votre thème WordPress. Vous éviterez ainsi de casser accidentellement votre site web.

Des sociétés d'hébergement populaires comme BlueHost proposent par défaut des environnements de test et d'essai.

bluehost meilleure solution d'hébergement WordPress

Vous devez également sauvegarder votre site web avant d'y apporter des modifications essentielles. Voici une liste des meilleurs plugins de sauvegarde WordPress que vous pouvez utiliser, ainsi que leurs prix.

Une fois que votre site WordPress est prêt, suivez les étapes ci-dessous pour commencer à créer votre thème.

Étape 1. Installer et activer SeedProd

Tout d'abord, vous aurez besoin d'une licence SeedProd Pro ou Elite pour accéder à la fonction de création de thèmes.

Après avoir téléchargé le fichier zip du plugin, téléchargez-le dans votre tableau de bord WordPress, puis installez-le et activez-le.

Entrez votre clé de licence SeedProd en naviguant vers SeedProd " Paramètres dans votre zone d'administration WordPress.

Si vous avez besoin d'aide pour cette étape, suivez ce guide sur l'installation d'un plugin WordPress.

Entrez votre clé de licence pour le créateur de thème SeedProd

Vous pouvez trouver votre clé de licence en visitant votre compte SeedProd. Ensuite, vous pouvez la copier à partir de l'onglet Téléchargements.

Trouvez votre clé de licence SeedProd

Une fois installé, naviguez vers SeedProd " Theme Builder pour voir la vue d'ensemble du Theme Builder. Ici, vous pouvez créer une hiérarchie de modèles pour votre thème WordPress, y compris des parties telles que l'en-tête, le pied de page, l'article unique, et plus encore.

SeedProd WordPress theme builder overview (en anglais)

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

  • En-tête
  • Pied de page
  • Poste unique
  • Page unique
  • Archive (page du blog)
  • Page d'accueil
  • Encadré

Vous pouvez créer chacune de ces parties de thème individuellement. Il vous suffit de cliquer sur le bouton Ajouter un nouveau modèle de thème.

Ajouter un nouveau modèle de thème

Mais si cela vous semble trop compliqué pour votre première tentative, il existe une autre façon de créer votre thème.

Vous pouvez utiliser les modèles de thèmes prédéfinis pour créer le cadre de base de votre thème. Ensuite, vous pouvez les personnaliser pour répondre à vos besoins de conception sans code.

Comme cette solution est facile pour les débutants, c'est sur elle que je me concentrerai dans ce tutoriel.

Note : SeedProd offre des centaines de modèles réactifs pour créer des pages d'atterrissage personnalisées.

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

Le constructeur de thèmes de SeedProd a déjà créé plusieurs thèmes pour vous. Pour les trouver, cliquez sur le bouton Theme Template Kits .

Kits de modèles pour le thème SeedProd

Au moment de la rédaction de ce guide, il existe plus de 160 modèles de thèmes. Ces modèles répondent à différents besoins en matière de sites web, ce qui vous permet de sélectionner le point de départ idéal pour votre projet :

  • Thèmes professionnels : Si vous dirigez une société de conseil, un thème professionnel avec une mise en page professionnelle et des boutons d'appel à l'action clairs peut vous aider à convertir les visiteurs en clients.
  • Thèmes de commerce électronique : Un magasin de vêtements en ligne bénéficierait d'un thème eCommerce qui met en valeur les produits avec de grandes images, inclut les commentaires des clients et offre un processus de paiement transparent .
  • Thèmes de blog : Un blog personnel sur les voyages ou le style de vie utilisera un thème de blog qui met l'accent sur l'imagerie et une mise en page simple pour faciliter la lecture .
  • Thèmes de portfolio : Un graphiste peut utiliser un thème de portfolio pour présenter ses projets sous forme de grille, ce qui permet aux clients potentiels de visualiser leur travail d'un seul coup d'œil.
  • Thèmes à but non lucratif : Une organisation caritative locale peut utiliser un thème à but non lucratif pour promouvoir les événements à venir, mettre en évidence sa mission et permettre aux visiteurs de faire des dons ou de s'impliquer.
Modèles de thèmes WordPress prémodelés SeedProd

Pour choisir un modèle de thème, passez votre souris sur la vignette et cliquez sur l'icône de la coche. Pour ce guide, j'utiliserai le thème de démarrage SeedProd parce qu'il contient les éléments essentiels dont j'ai besoin pour un site web complet.

Vous pouvez toujours vous inspirer du thème de démarrage pour en faire votre propre thème.

Choisir un modèle de thème SeedProd

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

Modèles de thèmes WordPress SeedProd

S'il existe une fonctionnalité que vous ne souhaitez pas afficher sur votre site, cliquez sur le bouton situé sous l'en-tête Publier. Cette partie du thème sera alors désactivée.

dépublier une section d'un thème WordPress

Si vous cliquez sur le lien des conditions pour chaque partie de modèle, vous pouvez modifier son nom, son type et sa priorité. Vous pouvez également choisir le moment et l'endroit où il apparaît sur votre site web.

Modifier les conditions du thème WordPress

Étape 3. Personnaliser les parties de votre thème WordPress

Les éléments de base de votre thème étant en place, il est temps de commencer à modifier chaque section du thème.

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

modifier la conception d'un thème WordPress

Je commencerai par modifier l'en-tête.

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.

Comme vous pouvez le voir, le thème Starter a un en-tête à deux colonnes avec un logo et un menu de navigation. Vous pouvez le personnaliser pour afficher votre logo personnalisé en cliquant dessus dans l'aperçu en direct.

Modifier le logo de l'en-tête de WordPress

Vous pouvez supprimer le logo fictif dans le panneau de gauche et en télécharger un nouveau à partir de votre ordinateur ou de la bibliothèque de médias de 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 l'en-tête. Attendez que son contour devienne violet, puis cliquez dessus. Vous pouvez donner à votre en-tête une couleur d'arrière-plan personnalisée et choisir la largeur à partir de là.

Donnez une couleur d'arrière-plan personnalisée à votre en-tête WordPress

Vous pouvez personnaliser l'ombre, l'espacement, la bordure et d'autres éléments de votre en-tête dans l'onglet Avancé.

Paramètres avancés de l'en-tête de WordPress

Lorsque vous êtes satisfait de votre en-tête WordPress personnalisé, cliquez sur Enregistrer. Il se trouve dans le coin supérieur droit.

Maintenant, répétez ces étapes pour éditer votre pied de page WordPress. Cliquez sur Edit Design pour l'ouvrir dans l'éditeur visuel. Cliquez ensuite sur n'importe quel élément pour personnaliser le contenu, les couleurs, les liens, etc.

Pied de page personnalisé pour le thème WordPress

Créer une page d'accueil personnalisée pour un thème WordPress

Ensuite, je vais personnaliser la page d'accueil de WordPress. C'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.

Puisque j'ai déjà personnalisé l'en-tête et le pied de page. Le nouveau design se trouvera en haut et en bas de la page d'accueil. Mais ne vous inquiétez pas, vos modifications sur cet écran n'affecteront pas votre en-tête ou votre pied de page ; ils sont là à titre de guide visuel.

Personnalisez votre modèle de page d'accueil WordPress

Le modèle Starter Theme de SeedProd possède toutes les fonctionnalités dont la plupart des sites web d'entreprise ont besoin.

Il comprend

  • Zone du héros
  • Logos des clients
  • Caractéristiques
  • Témoignages
  • Section FAQ

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

La zone du héros présente les caractéristiques suivantes :

  • Section
  • Disposition en 2 colonnes
  • Image
  • Rubrique
  • Texte
  • Bouton

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

Vous pouvez modifier le titre et la description en cliquant sur chaque bloc. Remplacez ensuite le contenu par votre texte personnalisé.

Modifier le contenu du modèle de page d'accueil

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

personnaliser les boutons du thème WordPress

Vous trouverez ces éléments dans le panneau des blocs de gauche. Ainsi, vous pouvez faire glisser un bloc depuis la gauche et le déposer dans votre design pour ajouter du contenu à votre thème.

glisser-déposer le contenu

Suivez cette procédure pour personnaliser le reste de votre page d'accueil.

Par exemple, vous pouvez ajouter des informations sur les services de votre entreprise. Ou mettre en avant les caractéristiques de vos produits dans la section "Caractéristiques".

Ajoutez une section "caractéristiques" à votre page d'accueil

Vous pouvez ensuite utiliser le bloc de témoignages intégré. Il ajoute une preuve sociale positive de la part de vos clients existants.

ajouter des témoignages de clients à votre thème WordPress

J'ai également modifié la couleur d'arrière-plan de cette section pour qu'elle corresponde à l'en-tête du thème. Pour ce faire, ouvrez les paramètres de la section et choisissez une couleur différente.

couleur d'arrière-plan de la section personnalisée

Après avoir personnalisé votre page d'accueil, vous pouvez cliquer sur l'icône de prévisualisation mobile pour voir comment votre design se présente sur les appareils mobiles.

Prévisualisation du thème WordPress sur mobile

Vous pouvez déplacer des éléments jusqu'à ce que votre écran mobile offre une bonne expérience à l'utilisateur.

créer un thème WordPress personnalisé et le prévisualiser sur mobile

Lorsque vous êtes satisfait de l'aspect de votre page d'accueil, cliquez sur le bouton Enregistrer et revenez au générateur de thèmes.

Thème WordPress personnalisé 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 de thème que vous pouvez personnaliser dans ce but.

Cette section est Blog Index, Archives, Search dans le constructeur de thème. Vous pouvez l'utiliser pour personnaliser la page des articles de votre blog, les archives des articles et la page des résultats de recherche. Cela leur permet de correspondre à l'image de marque de votre site web.

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

SeedProd WordPress blog archive template

Le thème de démarrage de ma page utilise des balises de modèle. Il tire des informations dynamiques de WordPress, notamment le titre de l'archive et les articles.

Si votre modèle est similaire, cliquez sur ces blocs pour afficher leurs paramètres. Ils apparaissent dans le panneau de gauche.

Par exemple, lorsque vous cliquez sur la balise de modèle Posts, vous pouvez afficher les posts de trois manières : par défaut, par type personnalisé (posts, médias ou posts personnalisés) ou par paramètres de requête.

Ajouter la balise posts template dans WordPress pour les pages de blog

Vous pouvez également choisir le nombre de colonnes par page, afficher ou masquer l'image vedette, un extrait, etc.

Après avoir personnalisé votre page d'archives ou de blog, allez dans le constructeur de thèmes. Modifiez ensuite la section " Single Posts".

SeedProd template WordPress pour un seul article

Cette partie du thème utilise ces balises de modèle pour obtenir des informations sur les articles WordPress :

  • Titre du poste
  • Informations sur les postes
  • Contenu de l'article
  • Boîte d'auteur
  • Commentaires sur le poste
  • Navigation postale

Vous pouvez éditer ces blocs comme vous le feriez pour n'importe quel autre bloc SeedProd. Dans le panneau de configuration, vous pouvez cliquer sur n'importe quel élément pour le personnaliser.

Par exemple, si vous cliquez sur le bloc Post Info, vous pouvez ajouter des méta-informations. Vous pouvez également modifier l'alignement et la couleur des icônes.

post info settings

De nombreux sites web WordPress utilisent encore des barres latérales. Celles-ci affichent des informations importantes pour les visiteurs, notamment les profils de médias sociaux, les derniers articles, les formulaires de contact et les inscriptions à la lettre d'information.

Contrairement à de nombreux thèmes WordPress pré-fabriqués, SeedProd vous permet de créer une barre latérale WordPress personnalisée en utilisant son éditeur de blocs visuels.

Pour ce faire, cliquez sur Edit Design dans la partie Sidebar template. Vous pouvez faire glisser et déposer le contenu de votre choix sur votre barre latérale.

Modèle de barre latérale SeedProd

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

Vous pouvez également utiliser le bloc de formulaires d'opt-in de SeedProd pour collecter des adresses e-mail afin de développer votre liste dans votre barre latérale. L'avantage est que vous n'aurez besoin d'aucune connaissance technique pour le faire.

Ajoutez un formulaire d'optin à votre modèle de barre latérale

Thème WordPress personnalisé CSS global

A ce stade, vous avez construit la majeure partie de votre thème WordPress personnalisé sans code. Mais il y a encore une partie que vous devez regarder pour vous assurer que tout est cohérent dans votre thème. 

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

SeedProd global css

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

  • Couleurs
  • Polices de caractères
  • Contexte
  • Boutons
  • Formulaires
  • Mise en page
  • CSS personnalisé

Par exemple, vous pouvez ouvrir la section Boutons et choisir une couleur personnalisée. Cette couleur s'affichera alors sur tous les boutons de votre thème.

Boutons de thèmes globaux personnalisés

Vous pouvez faire de même dans la rubrique Polices et attribuer une couleur personnalisée à chaque lien de votre thème.

Personnalisez les couleurs de vos liens WordPress

Modifiez donc ces paramètres jusqu'à ce que votre thème ait l'aspect que vous souhaitez. Cliquez ensuite sur le bouton Enregistrer pour sauvegarder vos modifications.

Après avoir personnalisé votre thème, vous voudrez peut-être voir comment vous pouvez l'appliquer à un projet spécifique. Pour vous inspirer, consultez notre guide sur la création d'un site web de mariage avec WordPress.

Étape 4. Connectez votre service de marketing par courriel

Si l'un des objectifs de votre entreprise est de développer votre liste d'adresses électroniques, il se peut que votre thème WordPress contienne un formulaire d'inscription. Pour ajouter de nouveaux contacts à votre liste, vous devrez connecter votre formulaire à votre service de marketing par courriel.

SeedProd s'intègre à de nombreux services d'email marketing populaires, y compris Constant Contact, Mailchimp, Drip, etc. et il est facile de le lier à votre compte.

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

Intégrations SeedProd pour le marketing par courriel

Cliquez ensuite sur n'importe quelle intégration de la liste et suivez les instructions qui s'affichent à l'écran. En remplissant votre formulaire d'opt-in, vous ajoutez des utilisateurs à votre liste d'adresses électroniques.

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

Une fois que vous êtes satisfait de la conception et des fonctionnalités, ne vous précipitez pas pour lancer votre site. Des tests approfondis sur différents navigateurs et appareils sont essentiels pour détecter les problèmes inattendus avant qu'ils n'affectent vos utilisateurs.

Utilisez l'outil de prévisualisation de SeedProd pour tester votre thème sur les ordinateurs de bureau, les tablettes et les appareils mobiles. Ensuite, vérifiez-le dans des navigateurs tels que Chrome, Edge et Safari.

Si tout semble correct, vous pouvez aller de l'avant et activer votre thème WordPress personnalisé.

Pour ce faire, trouvez l'en-tête Enable SeedProd Theme (Activer le thème SeedProd) dans le coin supérieur droit. Ensuite, mettez l'interrupteur en position "on".

Activer votre thème WordPress personnalisé

Votre nouveau thème remplacera votre thème par défaut. De cette façon, vous pouvez voir vos personnalisations sur la partie frontale de votre site web.

Voilà, c'est fait ! Votre nouveau thème WordPress personnalisé est en ligne sur votre site web.

Voici la page d'accueil que j'ai créée avec un nouvel en-tête et un nouveau pied de page sur mon site de test :

Page d'accueil personnalisée du thème WordPress

Voici la page du blog que j'ai créée avec une barre latérale WordPress personnalisée :

Thème WordPress personnalisé avec page de blog et barre latérale

Questions fréquemment posées

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. Ils créent le design et les fonctions de votre site WordPress.

Un thème WordPress typique comprendra certains, voire tous les fichiers de thème suivants :

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

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

Puis-je créer un thème WordPress personnalisé sans aucune expérience en matière de codage ?

Vous pouvez créer un thème WordPress sans expérience du codage en utilisant un constructeur de thème comme SeedProd. Il propose une interface de type "glisser-déposer" et des modèles préconstruits, qui vous aident à concevoir facilement votre thème.

Comment exporter le thème personnalisé que j'ai créé avec SeedProd ?

Vous pouvez exporter votre thème WordPress sous forme de fichier .zip en utilisant la fonction d'import/export de SeedProd. Suivez ce guide pour apprendre à exporter un thème WordPress avec SeedProd.

Félicitations !

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

Vous n'avez pas besoin de compétences techniques. Vous n'avez pas non plus besoin de développeurs WordPress ou d'un gros budget. C'est grâce au constructeur de thème WordPress simple et puissant de SeedProd.

La puissance et la fonctionnalité sont entre vos mains lorsque vous installez le plugin.

Si vous souhaitez créer un type de site web spécifique, vous apprécierez peut-être ces tutoriels WordPress :

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.