![\"Cr\u00e9ez](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/customwptheme.png\" "\\"Cr\u00e9ez")
<\/p>\nVoulez-vous cr\u00e9er un th\u00e8me WordPress personnalis\u00e9 \u00e0 partir de z\u00e9ro? <\/p>\n
Dans le pass\u00e9, vous deviez suivre le codex WordPress et avoir des connaissances de codage d\u00e9centes pour cr\u00e9er un th\u00e8me WordPress personnalis\u00e9. Mais gr\u00e2ce aux nouveaux g\u00e9n\u00e9rateurs de th\u00e8mes WordPress, n'importe qui peut d\u00e9sormais cr\u00e9er un th\u00e8me WordPress enti\u00e8rement personnalis\u00e9 en une heure (aucune connaissance en codage requise). <\/p>\n
Dans cet article, nous vous montrerons comment cr\u00e9er facilement un th\u00e8me WordPress personnalis\u00e9 sans \u00e9crire de code. <\/p>\n
<\/p>\n
Contrairement aux sites HTML statiques, les th\u00e8mes WordPress sont un ensemble de fichiers mod\u00e8les \u00e9crits en PHP, HTML, CSS et JavaScript. Habituellement, vous devez avoir une bonne compr\u00e9hension de tous ces langages de conception Web ou embaucher un d\u00e9veloppeur Web pour cr\u00e9er un th\u00e8me WordPress personnalis\u00e9. <\/p>\n
Si vous avez embauch\u00e9 un d\u00e9veloppeur ou une agence, le co\u00fbt d'un th\u00e8me WordPress personnalis\u00e9 peut atteindre des milliers de dollars.<\/p>\n
\u00c9tant donn\u00e9 que de nombreux propri\u00e9taires de petites entreprises ne pouvaient pas se permettre les co\u00fbts \u00e9lev\u00e9s d'un th\u00e8me WordPress personnalis\u00e9, beaucoup d'entre eux se contentaient simplement des th\u00e8mes par d\u00e9faut fournis avec WordPress.<\/p>\n
Ceux qui ne voulaient pas se mettre en place et voulaient des personnalisations, utilisaient un g\u00e9n\u00e9rateur de page glisser-d\u00e9poser WordPress ou utilisaient un cadre de th\u00e8me pour cr\u00e9er un th\u00e8me personnalis\u00e9.<\/p>\n
Bien que les cadres de th\u00e8mes WordPress aient facilit\u00e9 la cr\u00e9ation d'un th\u00e8me WordPress, ils sont une solution pour les d\u00e9veloppeurs, et non pour un propri\u00e9taire de site Web moyen.<\/p>\n
D'un autre c\u00f4t\u00e9, les plugins de cr\u00e9ation de pages WordPress ont rendu tr\u00e8s facile la cr\u00e9ation de mises en page personnalis\u00e9es \u00e0 l'aide d'une interface glisser-d\u00e9poser, mais ils n'\u00e9taient limit\u00e9s qu'aux mises en page. Vous ne pouviez pas cr\u00e9er de th\u00e8mes personnalis\u00e9s avec.<\/p>\n
M\u00eame Beaver Builder, l'un des meilleurs plugins de cr\u00e9ation de pages WordPress, a d\u00e9cid\u00e9 de r\u00e9soudre ce probl\u00e8me avec son plugin nomm\u00e9 Beaver Themer.<\/p>\n
![\"Beaver](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/beaverbuilderpagebuilderplugin.png\" "\\"Beaver")
<\/p>\n
Beaver Themer est un plugin de cr\u00e9ation de site qui vous permet de cr\u00e9er des conceptions de th\u00e8mes personnalis\u00e9es \u00e0 l'aide d'une interface glisser-d\u00e9poser et sans apprendre \u00e0 coder. <\/p>\n
Voyons comment utiliser Beaver Themer pour cr\u00e9er facilement un th\u00e8me WordPress.<\/p>\n
Abonnez-vous \u00e0 WPBeginner<\/p>\n
Si vous n'aimez pas la vid\u00e9o ou avez besoin de plus d'instructions, lisez la suite.<\/p>\n
Beaver Themer est un plugin suppl\u00e9mentaire pour Beaver Builder, vous aurez donc besoin des deux plugins pour cet article. <\/p>\n
Tout d'abord, vous devez installer et activer les plugins Beaver Builder et Beaver Themer. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d'installer un plugin WordPress.<\/p>\n
Beaver Themer vous permet de cr\u00e9er un th\u00e8me personnalis\u00e9, mais vous aurez toujours besoin d'un th\u00e8me pour commencer. Nous vous recommandons d'utiliser un th\u00e8me l\u00e9ger qui inclut un mod\u00e8le de page pleine largeur pour servir de th\u00e8me de d\u00e9part. <\/p>\n
Vous pouvez trouver bon nombre de ces th\u00e8mes dans le r\u00e9pertoire des th\u00e8mes WordPress.org. La plupart des th\u00e8mes WordPress modernes incluent un mod\u00e8le pleine largeur. Nos meilleures options sont: <\/p>\n
Astra – Un th\u00e8me WordPress polyvalent gratuit et l\u00e9ger qui est livr\u00e9 avec un support int\u00e9gr\u00e9 pour Beaver Builder. <\/p>\n<\/li>\n
OeanWP – Un autre th\u00e8me WordPress polyvalent gratuit et populaire qui comprend un support de cr\u00e9ation de page compl\u00e8te.<\/p>\n<\/li>\n
Th\u00e8mes StudioPress: Tous vos th\u00e8mes sont compatibles avec Beaver Builder et fonctionneraient parfaitement avec Beaver Themer.<\/p>\n<\/li>\n<\/ul>\n
Pour les besoins de ce tutoriel, nous utiliserons Astra, qui est un th\u00e8me WordPress l\u00e9ger et facile \u00e0 personnaliser. <\/p>\n
Lors de la cr\u00e9ation d'un th\u00e8me WordPress personnalis\u00e9 avec Beaver Themer, il est important de s'assurer que Beaver Themer a acc\u00e8s au corps entier de la page (d'un bord \u00e0 l'autre). <\/p>\n
Il s'agit de la disposition par d\u00e9faut d'Astra. Comme vous pouvez le voir, cette conception comprend une barre lat\u00e9rale qui peut \u00eatre difficile \u00e0 utiliser lorsque vous utilisez Beaver Themer.<\/p>\n
![\"Disposition](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/default-sidebar.png\" "\\"Disposition")
<\/p>\n
Vous pouvez changer cela en visitant le panneau d'administration de votre site Web, puis acc\u00e9dez \u00e0 Apparence \u00bbPersonnaliser<\/strong> page. \u00c0 partir d'ici, vous devez passer \u00e0 Design \u00bbBarres lat\u00e9rales<\/strong> la langue. <\/p>\n Une fois sur place, s\u00e9lectionnez simplement \u00abPas de barre lat\u00e9rale\u00bb dans l'option de mise en page par d\u00e9faut et cliquez sur le bouton Publier pour enregistrer les modifications. <\/p>\n Votre th\u00e8me va maintenant commencer \u00e0 utiliser un design sans barres lat\u00e9rales. C'est la meilleure conception \u00e0 utiliser avec Beaver Themer.<\/p>\n Cette mise en page pleine page permet \u00e0 Beaver Themer d'utiliser chaque pouce de l'\u00e9cran, afin que vous puissiez cr\u00e9er une belle exp\u00e9rience visuelle de bout en bout. <\/p>\n La plupart des th\u00e8mes WordPress incluent un fichier mod\u00e8le pour les pages pleine largeur. Si vous utilisez un autre th\u00e8me, vous pouvez trouver une option pour supprimer les barres lat\u00e9rales dans les param\u00e8tres de votre th\u00e8me. <\/p>\n Si vous ne le trouvez pas, contactez votre d\u00e9veloppeur de th\u00e8me et il pourra vous aider. <\/p>\n Une fois que vous avez configur\u00e9 votre th\u00e8me dans une mise en page pleine largeur, vous \u00eates pr\u00eat \u00e0 cr\u00e9er votre th\u00e8me WordPress personnalis\u00e9 avec Beaver Themer. <\/p>\n Beaver Themer travaille sur Beaver Builder. En tant que module compl\u00e9mentaire du g\u00e9n\u00e9rateur de pages, Beaver Builder vous permet de faire glisser et de d\u00e9poser des \u00e9l\u00e9ments sur une page pour cr\u00e9er des mises en page personnalis\u00e9es. <\/p>\n Il contient les \u00e9l\u00e9ments suivants que vous pouvez utiliser dans vos conceptions: <\/p>\n Modifiez simplement une page dans Beaver Builder, puis cliquez sur le bouton Ajouter dans le coin sup\u00e9rieur droit. Ensuite, vous pouvez faire glisser et d\u00e9poser des colonnes, des lignes, des modules sur votre page et commencer \u00e0 les modifier imm\u00e9diatement. <\/p>\n Si vous ne voulez pas recommencer \u00e0 z\u00e9ro, s\u00e9lectionnez une liste de mod\u00e8les pr\u00e9d\u00e9finis pour commencer. <\/p>\n Beaver Builder vous permet \u00e9galement d'enregistrer vos conceptions, puis de les utiliser plus tard comme mod\u00e8les. <\/p>\n Pour plus d'informations, consultez notre article sur la cr\u00e9ation d'une mise en page personnalis\u00e9e avec Beaver Builder. <\/p>\n Cependant, nous ne voulons pas simplement cr\u00e9er des mises en page. Nous voulons cr\u00e9er un th\u00e8me personnalis\u00e9 complet. <\/p>\n C'est \u00e0 ce moment que Beaver Themer entre en jeu. <\/p>\n Ajoutez un autre \u00e9l\u00e9ment \u00e0 Beaver Builder appel\u00e9 "Themer Layout". <\/p>\n Les mises en page Themer vous permettent de cr\u00e9er des mises en page personnalis\u00e9es pour l'en-t\u00eate, le pied de page, les zones de contenu, la page 404 et d'autres parties du mod\u00e8le. <\/p>\n Ce sont les blocs de construction de tous les th\u00e8mes WordPress, et en les utilisant, vous pourrez cr\u00e9er un th\u00e8me personnalis\u00e9 qui r\u00e9pond \u00e0 vos besoins. <\/p>\n Dans les instructions suivantes, nous vous guiderons \u00e0 travers les \u00e9tapes n\u00e9cessaires pour cr\u00e9er les \u00e9l\u00e9ments de th\u00e8me personnalis\u00e9 les plus populaires. Au moment o\u00f9 vous avez termin\u00e9, vous aurez compl\u00e8tement transform\u00e9 votre th\u00e8me de base en un th\u00e8me enfant WordPress enti\u00e8rement personnalis\u00e9.<\/p>\n Commen\u00e7ons par la zone d'en-t\u00eate de votre site Web. Un en-t\u00eate personnalis\u00e9 est un composant essentiel d'un th\u00e8me, et sa cr\u00e9ation peut \u00eatre d\u00e9licate en utilisant des m\u00e9thodes traditionnelles. <\/p>\n Heureusement, Beaver Themer a des fonctionnalit\u00e9s d'en-t\u00eate int\u00e9gr\u00e9es. Vous pouvez utiliser le mod\u00e8le pr\u00e9-cr\u00e9\u00e9 ou utiliser les modules de menu et d'image avec une disposition \u00e0 deux colonnes. <\/p>\n Pour acc\u00e9der \u00e0 cette zone d'en-t\u00eate, nous devons d'abord configurer une disposition d'en-t\u00eate dans Beaver Themer. Visiter Beaver Builder \u00bbAjouter un nouveau<\/strong> page et donnez un titre \u00e0 votre en-t\u00eate. <\/p>\n Apr\u00e8s cela, s\u00e9lectionnez "Themer Layout" comme type et "Header" comme option de mise en page. Une fois que vous avez termin\u00e9, cliquez sur le bouton "Ajouter un design Themer" pour continuer. <\/p>\n Cela vous am\u00e8nera \u00e0 la page de configuration de la mise en page. \u00c0 partir d'ici, vous devez s\u00e9lectionner "Site entier" comme emplacement o\u00f9 le mod\u00e8le d'en-t\u00eate sera affich\u00e9. <\/p>\n Cliquez ensuite sur le bouton "D\u00e9marrer Beaver Builder" pour ouvrir l'interface du g\u00e9n\u00e9rateur. <\/p>\n Beaver Builder se lancera avec une simple colonne de base et une disposition d'en-t\u00eate \u00e0 deux lignes comme point de d\u00e9part. <\/p>\n Vous pouvez utiliser les m\u00eames outils de glisser-d\u00e9poser de Beaver Builder pour modifier l'arri\u00e8re-plan, les couleurs, le texte, etc. Vous pouvez \u00e9galement ajouter d'autres modules, charger des mod\u00e8les pr\u00e9d\u00e9finis et ajouter des lignes \/ colonnes en cliquant sur le bouton Ajouter dans le coin sup\u00e9rieur droit.<\/p>\n Une fois que vous \u00eates satisfait de la conception, cliquez sur le bouton Termin\u00e9 pour enregistrer ou publier votre conception. <\/p>\n Vous pouvez maintenant visiter leur site Web pour voir l'en-t\u00eate de votre th\u00e8me personnalis\u00e9 en action. Comme vous pouvez le voir, nous avons appliqu\u00e9 la disposition d'en-t\u00eate \u00e0 notre th\u00e8me personnalis\u00e9. <\/p>\n Autre que l'en-t\u00eate, il n'affichera toujours aucun contenu et vous verrez probablement la zone de pied de page du th\u00e8me de base. <\/p>\n Changeons cela. <\/p>\n Vous pouvez cr\u00e9er un pied de page personnalis\u00e9 pour votre th\u00e8me \u00e0 l'aide de Beaver Themer tout comme vous avez cr\u00e9\u00e9 un en-t\u00eate personnalis\u00e9. <\/p>\n Se diriger vers Beaver Builder \u00bbAjouter un nouveau<\/strong> page et fournir un titre pour votre mise en page de pied de page. S\u00e9lectionnez ensuite "Themer Layout" comme type et "Footer" comme option de mise en page. <\/p>\n Cliquez sur le bouton "Ajouter un design Themer" pour continuer.<\/p>\n Cela vous am\u00e8nera \u00e0 la page de configuration de la mise en page. \u00c0 partir d'ici, vous devez s\u00e9lectionner "Site complet" comme emplacement o\u00f9 le mod\u00e8le sera affich\u00e9.<\/p>\n Apr\u00e8s cela, cliquez sur le bouton "D\u00e9marrer Beaver Builder" pour ouvrir l'interface du g\u00e9n\u00e9rateur.<\/p>\n Beaver Builder sera lanc\u00e9 avec une disposition de pied de page en trois colonnes. Vous pouvez utiliser cette conception comme point de d\u00e9part et commencer \u00e0 \u00e9diter. <\/p>\n 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\u00e8re-plan, etc. <\/p>\n Une fois que vous \u00eates satisfait de la conception, cliquez sur le bouton Termin\u00e9 pour enregistrer ou publier votre conception.<\/p>\n Maintenant que nous avons cr\u00e9\u00e9 des en-t\u00eates et des pieds de page pour chaque page et publication sur le site Web, il est temps de cr\u00e9er la publication ou le corps de la page (la zone de contenu). <\/p>\n Nous allons commencer de la m\u00eame mani\u00e8re que nous construisons l'en-t\u00eate et le pied de page en ajoutant la disposition "Singular" sur la page Ajouter un nouveau. <\/p>\n Vous choisirez ensuite o\u00f9 afficher ce dessin. Vous pouvez choisir le singulier \u00e0 utiliser pour tous les articles et les pages individuelles, ou vous pouvez choisir des articles ou seulement des pages. <\/p>\n Apr\u00e8s cela, cliquez sur le bouton "D\u00e9marrer Beaver Builder" pour ouvrir l'interface du g\u00e9n\u00e9rateur.<\/p>\n 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\u00eete bio de l'auteur et de la zone de commentaire. <\/p>\n Vous pouvez pointer et cliquer pour modifier l'un de ces \u00e9l\u00e9ments ou ajouter de nouveaux modules, colonnes et lignes selon vos besoins.<\/p>\n Une fois que vous \u00eates satisfait de la conception, cliquez sur le bouton Termin\u00e9 pour enregistrer et publier vos modifications. <\/p>\n Vous pouvez maintenant visiter leur site Web pour le voir en action. <\/p>\n Maintenant que votre th\u00e8me personnalis\u00e9 a commenc\u00e9 \u00e0 se former, vous pouvez continuer \u00e0 cr\u00e9er des mises en page pour d'autres parties de votre site Web. Les pages d'archives sont l'endroit o\u00f9 WordPress affiche vos cat\u00e9gories, vos balises, votre auteur et vos fichiers mensuels. <\/p>\n Cr\u00e9ons une mise en page de fichier sur votre th\u00e8me personnalis\u00e9. <\/p>\n Vous commencerez par visiter Beaver Builder \u00bbAjouter un nouveau<\/strong> page et fournir un titre pour la mise en page de votre fichier. <\/p>\n Apr\u00e8s cela, s\u00e9lectionnez "Themer Layout" comme type et "File" comme option de mise en page. Cliquez sur le bouton "Ajouter un design Themer" pour continuer.<\/p>\n Cela vous am\u00e8nera \u00e0 la page de configuration de la mise en page. \u00c0 partir d'ici, vous devez s\u00e9lectionner "Tous les fichiers" comme emplacement o\u00f9 le mod\u00e8le sera affich\u00e9. Vous pouvez \u00e9galement cr\u00e9er des dispositions distinctes pour chaque type de fichier individuel, comme la date, les r\u00e9sultats de la recherche, la cat\u00e9gorie, les balises, etc. <\/p>\n Apr\u00e8s cela, cliquez sur le bouton "D\u00e9marrer Beaver Builder" pour ouvrir l'interface du g\u00e9n\u00e9rateur.<\/p>\n Beaver Builder se lancera avec une disposition de fichier de base \u00e0 colonne unique. Il affichera le titre du fichier en haut, suivi des articles. <\/p>\n Vous pouvez pointer et cliquer sur n'importe quel \u00e9l\u00e9ment pour modifier ses propri\u00e9t\u00e9s. Vous pouvez \u00e9galement ajouter de nouveaux modules, lignes et colonnes selon vos besoins. <\/p>\n Apr\u00e8s cela, cliquez sur le bouton "Termin\u00e9" pour enregistrer et publier vos modifications. <\/p>\n Beaver Themer vous permet \u00e9galement de cr\u00e9er des mises en page pour d'autres pages de la hi\u00e9rarchie des mod\u00e8les, par exemple, la page 404, des parties de mod\u00e8le, la page de r\u00e9sultats de recherche, etc. <\/p>\n En utilisant la fonctionnalit\u00e9 int\u00e9gr\u00e9e de glisser-d\u00e9poser de Beaver Builder, vous pouvez facilement cr\u00e9er votre propre th\u00e8me WordPress personnalis\u00e9 \u00e0 partir de z\u00e9ro sans avoir \u00e0 \u00e9crire de code. C'est vraiment la m\u00e9thode de d\u00e9veloppement de th\u00e8me WordPress la plus conviviale pour les d\u00e9butants.<\/p>\n Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 apprendre \u00e0 cr\u00e9er un th\u00e8me WordPress personnalis\u00e9 sans apprendre \u00e0 coder. Vous pouvez \u00e9galement consulter notre guide sur la fa\u00e7on d'acc\u00e9l\u00e9rer votre site Web WordPress pour une meilleure exp\u00e9rience utilisateur et SEO. <\/p>\n Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour regarder des vid\u00e9os de didacticiel WordPress. Vous pouvez \u00e9galement nous trouver sur Twitter y Facebook.<\/p>\n ![\"D\u00e9sactivez](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/nosidebar.png\" "\\"D\u00e9sactivez")
<\/p>\n![\"Conception](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/newthemelayout.png\" "\\"Conception")
<\/p>\n<\/span>Les bases de Quick Beaver Themer<\/span><\/h4>\n
\n
![\"Utilisation](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/beaverbuilder-1.png\" "\\"Utilisation")
<\/p>\n![\"Mod\u00e8les](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/bbtemplates.jpg\" "\\"Mod\u00e8les")
<\/p>\n![\"Conception](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/themerlayout.png\" "\\"Conception")
<\/p>\n<\/span>Utilisation de mod\u00e8les Beaver Themer pour cr\u00e9er un th\u00e8me WordPress personnalis\u00e9<\/span><\/h4>\n
<\/span>Cr\u00e9ez un en-t\u00eate personnalis\u00e9 pour votre th\u00e8me<\/span><\/h4>\n
![\"Cr\u00e9er](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/headerlayout.png\" "\\"Cr\u00e9er")
<\/p>\n![\"Options](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/layoutsettings.png\" "\\"Options")
<\/p>\n![\"Conception](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/headerlayoutedit.png\" "\\"Conception")
<\/p>\n![\"En-t\u00eate](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/newthemelook.png\" "\\"En-t\u00eate")
<\/p>\n<\/span>Cr\u00e9ez un pied de page personnalis\u00e9 pour votre th\u00e8me<\/span><\/h4>\n
![\"Disposition](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/footerlayout.png\" "\\"Disposition")
<\/p>\n![\"Param\u00e8tres](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/footerlayoutsettings.png\" "\\"Param\u00e8tres")
<\/p>\n![\"Modification](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/editingfooterlayout.png\" "\\"Modification")
<\/p>\n<\/span>Cr\u00e9er une zone de contenu pour les publications et les pages<\/span><\/h4>\n
![\"Cr\u00e9er](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/singularlayout.png\" "\\"Cr\u00e9er")
<\/p>\n![\"Configuration](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/singularlayout-1.png\" "\\"Configuration")
<\/p>\n![\"\u00c9dition](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/editingsinglelayout.png\" "\\"\u00c9dition")
<\/p>\n![\"Conception](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/themelayoutwithcontent.png\" "\\"Conception")
<\/p>\n<\/span>Cr\u00e9ez des dispositions de fichiers pour votre th\u00e8me personnalis\u00e9<\/span><\/h4>\n
![\"Cr\u00e9ez](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/archivelayout.png\" "\\"Cr\u00e9ez")
<\/p>\n![\"Param\u00e8tres](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/archivelayoutsettings.png\" "\\"Param\u00e8tres")
<\/p>\n![\"Modification](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/editarchivelayout.png\" "\\"Modification")
<\/p>\n<\/span>Cr\u00e9ez d'autres designs pour votre th\u00e8me WordPress personnalis\u00e9<\/span><\/h4>\n