Comment créer facilement un thème WordPress personnalisé (sans aucun code)

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

Dans le passé, vous deviez suivre le codex WordPress et avoir des connaissances de codage décentes pour créer un thème WordPress personnalisé. Mais grâce aux nouveaux générateurs de thèmes WordPress, n'importe qui peut désormais créer un thème WordPress entièrement personnalisé en une heure (aucune connaissance en codage requise).

Dans cet article, nous vous montrerons comment créer facilement un thème WordPress personnalisé sans écrire de code.

Créez un thème WordPress personnalisé pour les débutants

Contrairement aux sites HTML statiques, les thèmes WordPress sont un ensemble de fichiers modèles écrits en PHP, HTML, CSS et JavaScript. Habituellement, vous devez avoir une bonne compréhension de tous ces langages de conception Web ou embaucher un développeur Web pour créer un thème WordPress personnalisé.

Si vous avez embauché un développeur ou une agence, le coût d'un thème WordPress personnalisé peut atteindre des milliers de dollars.

Étant donné que de nombreux propriétaires de petites entreprises ne pouvaient pas se permettre les coûts élevés d'un thème WordPress personnalisé, beaucoup d'entre eux se contentaient simplement des thèmes par défaut fournis avec WordPress.

Ceux qui ne voulaient pas se mettre en place et voulaient des personnalisations, utilisaient un générateur de page glisser-déposer WordPress ou utilisaient un cadre de thème pour créer un thème personnalisé.

Bien que les cadres de thèmes WordPress aient facilité la création d'un thème WordPress, ils sont une solution pour les développeurs, et non pour un propriétaire de site Web moyen.

D'un autre côté, les plugins de création de pages WordPress ont rendu très facile la création de mises en page personnalisées à l'aide d'une interface glisser-déposer, mais ils n'étaient limités qu'aux mises en page. Vous ne pouviez pas créer de thèmes personnalisés avec.

Même Beaver Builder, l'un des meilleurs plugins de création de pages WordPress, a décidé de résoudre ce problème avec son plugin nommé Beaver Themer.

Beaver Themer est un plugin de création de site qui vous permet de créer des conceptions de thèmes personnalisées à l'aide d'une interface glisser-déposer et sans apprendre à coder.

Voyons comment utiliser Beaver Themer pour créer facilement un thème WordPress.

Tutoriel vidéo

Abonnez-vous à WPBeginner

Si vous n'aimez pas la vidéo ou avez besoin de plus d'instructions, lisez la suite.

Configurer Beaver Themer pour créer un thème personnalisé

Beaver Themer est un plugin supplémentaire pour Beaver Builder, vous aurez donc besoin des deux plugins pour cet article.

Tout d'abord, vous devez installer et activer les plugins Beaver Builder et Beaver Themer. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Beaver Themer vous permet de créer un thème personnalisé, mais vous aurez toujours besoin d'un thème pour commencer. Nous vous recommandons d'utiliser un thème léger qui inclut un modèle de page pleine largeur pour servir de thème de départ.

Vous pouvez trouver bon nombre de ces thèmes dans le répertoire des thèmes WordPress.org. La plupart des thèmes WordPress modernes incluent un modèle pleine largeur. Nos meilleures options sont:

• Astra – Un thème WordPress polyvalent gratuit et léger qui est livré avec un support intégré pour Beaver Builder.

• OeanWP – Un autre thème WordPress polyvalent gratuit et populaire qui comprend un support de création de page complète.

• Thèmes StudioPress: Tous vos thèmes sont compatibles avec Beaver Builder et fonctionneraient parfaitement avec Beaver Themer.

Pour les besoins de ce tutoriel, nous utiliserons Astra, qui est un thème WordPress léger et facile à personnaliser.

Configurez votre thème pour Beaver Themer

Lors de la création d'un thème WordPress personnalisé avec Beaver Themer, il est important de s'assurer que Beaver Themer a accès au corps entier de la page (d'un bord à l'autre).

Il s'agit de la disposition par défaut d'Astra. Comme vous pouvez le voir, cette conception comprend une barre latérale qui peut être difficile à utiliser lorsque vous utilisez Beaver Themer.

Vous pouvez changer cela en visitant le panneau d'administration de votre site Web, puis accédez à Apparence »Personnaliser page. À partir d'ici, vous devez passer à Design »Barres latérales la langue.

Une fois sur place, sélectionnez simplement «Pas de barre latérale» dans l'option de mise en page par défaut et cliquez sur le bouton Publier pour enregistrer les modifications.

Votre thème va maintenant commencer à utiliser un design sans barres latérales. C'est la meilleure conception à utiliser avec Beaver Themer.

Cette mise en page pleine page permet à Beaver Themer d'utiliser chaque pouce de l'écran, afin que vous puissiez créer une belle expérience visuelle de bout en bout.

La plupart des thèmes WordPress incluent un fichier modèle pour les pages pleine largeur. Si vous utilisez un autre thème, vous pouvez trouver une option pour supprimer les barres latérales dans les paramètres de votre thème.

Si vous ne le trouvez pas, contactez votre développeur de thème et il pourra vous aider.

Une fois que vous avez configuré votre thème dans une mise en page pleine largeur, vous êtes prêt à créer votre thème WordPress personnalisé avec Beaver Themer.

Les bases de Quick Beaver Themer

Beaver Themer travaille sur Beaver Builder. En tant que module complémentaire du générateur de pages, Beaver Builder vous permet de faire glisser et de déposer des éléments sur une page pour créer des mises en page personnalisées.

Il contient les éléments suivants que vous pouvez utiliser dans vos conceptions:

• Modèle – Une collection de colonnes, de lignes et de modules qui constituent une mise en page complète.
• Colonnes – modules de disposition verticale qui aident à aligner le contenu horizontalement.
• Lignes: collection horizontale de plusieurs modules
• Module: un élément qui génère des informations spécifiques telles que le titre, le bloc de texte, le tableau, la galerie, etc.

Modifiez simplement une page dans Beaver Builder, puis cliquez sur le bouton Ajouter dans le coin supérieur droit. Ensuite, vous pouvez faire glisser et déposer des colonnes, des lignes, des modules sur votre page et commencer à les modifier immédiatement.

Si vous ne voulez pas recommencer à zéro, sélectionnez une liste de modèles prédéfinis pour commencer.

Beaver Builder vous permet également d'enregistrer vos conceptions, puis de les utiliser plus tard comme modèles.

Pour plus d'informations, consultez notre article sur la création d'une mise en page personnalisée avec Beaver Builder.

Cependant, nous ne voulons pas simplement créer des mises en page. Nous voulons créer un thème personnalisé complet.

C'est à ce moment que Beaver Themer entre en jeu.

Ajoutez un autre élément à Beaver Builder appelé "Themer Layout".

Les mises en page Themer vous permettent de créer des mises en page personnalisées pour l'en-tête, le pied de page, les zones de contenu, la page 404 et d'autres parties du modèle.

Ce sont les blocs de construction de tous les thèmes WordPress, et en les utilisant, vous pourrez créer un thème personnalisé qui répond à vos besoins.

Utilisation de modèles Beaver Themer pour créer un thème WordPress personnalisé

Dans les instructions suivantes, nous vous guiderons à travers les étapes nécessaires pour créer les éléments de thème personnalisé les plus populaires. Au moment où vous avez terminé, vous aurez complètement transformé votre thème de base en un thème enfant WordPress entièrement personnalisé.

Créez un en-tête personnalisé pour votre thème

Commençons par la zone d'en-tête de votre site Web. Un en-tête personnalisé est un composant essentiel d'un thème, et sa création peut être délicate en utilisant des méthodes traditionnelles.

Heureusement, Beaver Themer a des fonctionnalités d'en-tête intégrées. Vous pouvez utiliser le modèle pré-créé ou utiliser les modules de menu et d'image avec une disposition à deux colonnes.

Pour accéder à cette zone d'en-tête, nous devons d'abord configurer une disposition d'en-tête dans Beaver Themer. Visiter Beaver Builder »Ajouter un nouveau page et donnez un titre à votre en-tête.

Après cela, sélectionnez "Themer Layout" comme type et "Header" comme option de mise en page. Une fois que vous avez terminé, cliquez sur le bouton "Ajouter un design Themer" pour continuer.

Cela vous amènera à la page de configuration de la mise en page. À partir d'ici, vous devez sélectionner "Site entier" comme emplacement où le modèle d'en-tête sera affiché.

Cliquez ensuite sur le bouton "Démarrer Beaver Builder" pour ouvrir l'interface du générateur.

Beaver Builder se lancera avec une simple colonne de base et une disposition d'en-tête à deux lignes comme point de départ.

Vous pouvez utiliser les mêmes outils de glisser-déposer de Beaver Builder pour modifier l'arrière-plan, les couleurs, le texte, etc. Vous pouvez également ajouter d'autres modules, charger des modèles prédéfinis et ajouter des lignes / colonnes en cliquant sur le bouton Ajouter dans le coin supérieur droit.

Une fois que vous êtes satisfait de la conception, cliquez sur le bouton Terminé pour enregistrer ou publier votre conception.

Vous pouvez maintenant visiter leur site Web pour voir l'en-tête de votre thème personnalisé en action. Comme vous pouvez le voir, nous avons appliqué la disposition d'en-tête à notre thème personnalisé.

Autre que l'en-tête, il n'affichera toujours aucun contenu et vous verrez probablement la zone de pied de page du thème de base.

Changeons cela.

Créez un pied de page personnalisé pour votre thème

Vous pouvez créer un pied de page personnalisé pour votre thème à l'aide de Beaver Themer tout comme vous avez créé un en-tête personnalisé.

Se diriger vers Beaver Builder »Ajouter un nouveau page et fournir un titre pour votre mise en page de pied de page. Sélectionnez ensuite "Themer Layout" comme type et "Footer" comme option de mise en page.

Cliquez sur le bouton "Ajouter un design Themer" pour continuer.

Cela vous amènera à la page de configuration de la mise en page. À partir d'ici, vous devez sélectionner "Site complet" comme emplacement où le modèle sera affiché.

Après cela, cliquez sur le bouton "Démarrer Beaver Builder" pour ouvrir l'interface du générateur.

Beaver Builder sera lancé avec une disposition de pied de page en trois colonnes. Vous pouvez utiliser cette conception comme point de départ et commencer à éditer.

Vous pouvez ajouter des modules, des blocs de texte ou tout ce que vous voulez. Vous pouvez toujours changer les couleurs, les polices, ajouter une image d'arrière-plan, etc.

Une fois que vous êtes satisfait de la conception, cliquez sur le bouton Terminé pour enregistrer ou publier votre conception.

Créer une zone de contenu pour les publications et les pages

Maintenant que nous avons créé des en-têtes et des pieds de page pour chaque page et publication sur le site Web, il est temps de créer la publication ou le corps de la page (la zone de contenu).

Nous allons commencer de la même manière que nous construisons l'en-tête et le pied de page en ajoutant la disposition "Singular" sur la page Ajouter un nouveau.

Vous choisirez ensuite où afficher ce dessin. Vous pouvez choisir le singulier à utiliser pour tous les articles et les pages individuelles, ou vous pouvez choisir des articles ou seulement des pages.

Après cela, cliquez sur le bouton "Démarrer Beaver Builder" pour ouvrir l'interface du générateur.

Beaver Builder chargera un exemple de mise en page unique avec le titre de la publication / page en haut, suivi du contenu, de la boîte bio de l'auteur et de la zone de commentaire.

Vous pouvez pointer et cliquer pour modifier l'un de ces éléments ou ajouter de nouveaux modules, colonnes et lignes selon vos besoins.

Une fois que vous êtes satisfait de la conception, cliquez sur le bouton Terminé pour enregistrer et publier vos modifications.

Vous pouvez maintenant visiter leur site Web pour le voir en action.

Créez des dispositions de fichiers pour votre thème personnalisé

Maintenant que votre thème personnalisé a commencé à se former, vous pouvez continuer à créer des mises en page pour d'autres parties de votre site Web. Les pages d'archives sont l'endroit où WordPress affiche vos catégories, vos balises, votre auteur et vos fichiers mensuels.

Créons une mise en page de fichier sur votre thème personnalisé.

Vous commencerez par visiter Beaver Builder »Ajouter un nouveau page et fournir un titre pour la mise en page de votre fichier.

Après cela, sélectionnez "Themer Layout" comme type et "File" comme option de mise en page. Cliquez sur le bouton "Ajouter un design Themer" pour continuer.

Cela vous amènera à la page de configuration de la mise en page. À partir d'ici, vous devez sélectionner "Tous les fichiers" comme emplacement où le modèle sera affiché. Vous pouvez également créer des dispositions distinctes pour chaque type de fichier individuel, comme la date, les résultats de la recherche, la catégorie, les balises, etc.

Après cela, cliquez sur le bouton "Démarrer Beaver Builder" pour ouvrir l'interface du générateur.

Beaver Builder se lancera avec une disposition de fichier de base à colonne unique. Il affichera le titre du fichier en haut, suivi des articles.

Vous pouvez pointer et cliquer sur n'importe quel élément pour modifier ses propriétés. Vous pouvez également ajouter de nouveaux modules, lignes et colonnes selon vos besoins.

Après cela, cliquez sur le bouton "Terminé" pour enregistrer et publier vos modifications.

Créez d'autres designs pour votre thème WordPress personnalisé

Beaver Themer vous permet également de créer des mises en page pour d'autres pages de la hiérarchie des modèles, par exemple, la page 404, des parties de modèle, la page de résultats de recherche, etc.

En utilisant la fonctionnalité intégrée de glisser-déposer de Beaver Builder, vous pouvez facilement créer votre propre thème WordPress personnalisé à partir de zéro sans avoir à écrire de code. C'est vraiment la méthode de développement de thème WordPress la plus conviviale pour les débutants.

Nous espérons que cet article vous a aidé à apprendre à créer un thème WordPress personnalisé sans apprendre à coder. Vous pouvez également consulter notre guide sur la façon d'accélérer votre site Web WordPress pour une meilleure expérience utilisateur et SEO.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter y Facebook.