Articles

comment créer un thème WordPress à partir de zéro: Guide des débutants (2020)

créer un thème WordPress peut être vraiment simple si vous connaissez HTML, CSS et JavaScrip de base. Toutefois, si vous êtes nouveau sur WordPress, tout ce que vous avez à faire est de suivre les étapes dans ce tutoriel pour les débutants. J’ai énuméré les étapes requises et discuté des aspects importants de la création D’un thème WordPress. Alors, lisons ce guide de tutoriel et apprenons à créer un thème WordPress à partir de zéro.,

WordPress est un système de gestion de contenu open source (CMS) largement utilisé dans le monde entier. Un total de 34.7% des sites Web utilisent WordPress. Vous pouvez également choisir cette plate-forme pour créer une forte présence en ligne et établir votre entreprise en ligne sans effort avec l’aide du puissant logiciel WordPress website builder. WordPress est un choix évident et le plus simple pour commencer. Et c’est la principale raison pour laquelle chaque développeur suggère de choisir comme base de votre site web., Cependant, si vous n’êtes toujours pas sûr de ce Qu’est WordPress ou de ce qui est un CMS open-source, la lecture de ce guide apportera certainement un peu de lumière sur les connaissances.

donc, sans trop de bruit, commençons par créer un thème WordPress étape par étape.

comment créer un thème WordPress? Tutorial for beginners

Les concepteurs et les développeurs ont été inconsciemment partiaux envers les thèmes basés sur WordPress pour non seulement une mais plusieurs raisons. Parfois, certains clients demandent spécifiquement un site Web WordPress. Et la principale raison derrière L’énorme popularité de WordPress réside dans sa simplicité., En fait, c’est un CMS très flexible et puissant. Par conséquent, ceux qui travaillent avec d’autres CMS comme Joomla, Drupal, etc. peut parfois souhaiter migrer, c’est-à-dire de Joomla vers WordPress ou ainsi de suite. Alors, comprenons maintenant pourquoi les gens aiment tellement cette plate-forme.

quelles sont les exigences pour créer un thème WordPress?

1. Installer WordPress localement

Tout d’abord, vous devez installer WordPress. Ne vous inquiétez pas, ce n’est pas une science de fusée pour apprendre à installer WordPress. Vous pouvez facilement le faire vous-même.

2. Procédure pour créer un thème WordPress à partir de zéro.,

  • manuel – création D’un thème WordPress via le codage
  • automatisé – création D’un thème WordPress à l’aide d’un générateur de thème WordPress

pour le thème WordPress, tout se fera uniquement dans le répertoire wp_content. Créez simplement un nouveau sous-dossier de thème dans le dossier Wp_content → thèmes. Supposons que vous l’appeliez « mytheme ».

La deuxième chose est de décider de la mise en page du thème. Ici, le tutoriel montre la mise en page de base composée d’en-tête, zone principale, pied de page, barre latérale.

fondamentalement, WordPress n’a besoin que de 2 fichiers, c’est-à-dire de style.la css et de l’index.php., Mais pour cette mise en page, vous avez besoin de 5 fichiers, comme suit:

  • en-tête.php-contient le code de la section d’en-tête du thème.
  • index.php-contient le code de la zone principale et spécifiera où les autres fichiers seront inclus. Ceci est le fichier principal du thème.
  • barre latérale.php – contient les informations sur la barre latérale.
  • le pied de page.php-gère la section pied de page.
  • style.css-responsable du style de votre thème.
  • bootstrap.css-aucun code CSS séparé n’est requis; très réactif.
  • bootstrap.,js-fournit son propre js pour la barre de navigation, ou les onglets, etc.

Vous devez télécharger le package Bootstrap. Bootstrap.js & Bootstrap.cs fichier doit être copié dans le dossier du thème.

comment créer un thème WordPress personnalisé étape par étape?

  1. créez un thème WordPress à partir de zéro en codant (manuellement)

  2. créez un thème WordPress avec TemplateToaster (automatisé)

Vous pouvez créer ces fichiers localement avec un éditeur de texte comme Notepad. Vous trouverez ci-dessous les fichiers que vous devez créer pour commencer.,

étapes pour créer un thème WordPress à partir de zéro en codant

Étape 1: en-tête.Fichier php

Vous devez mettre ce code dans l’en-tête.fichier php.

Ce fichier d’en-Tête.php contient le code de la partie d’en-tête dans laquelle le fichier js et style est lié. Il affiche l’en-tête de la page.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Cette ligne ajoutée après le titre indique à WordPress de charger un style.fichier css qui gérera le style du site web.

ici,

<?php bloginfo('stylesheet_url'); ?>

est une fonction WordPress qui charge réellement la feuille de style.,

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Ici, nous avons utiliser Bootstrap. C’est l’un des cadres de conception web réactifs bien connus. Il fournit des fichiers CSS intégrés pour styliser votre site web. Vous pouvez garder le bootstrap.fichier css dans votre dossier thème / css.

Ensuite, un « div” avec la classe ttr_header est ajouté et ce sera le conteneur principal du site web. Maintenant, définissez-lui une classe afin que vous puissiez la modifier via le style.fichier css.

Après cela, ajoutez un en-tête d’étiquette simple dans un  » div id « avec la classe” ttr_header « qui sera spécifiée plus tard dans la classe”jumbotron ».

Étape 2: index.,php File

l’index du fichier principal.php contiendra le code suivant;

la toute première ligne de code de ce fichier

<?php get_header(); ?>

inclura l’en-tête.fichier php et le code sont sur la page principale.

le code ci-dessus affiche le contenu principal de la publication que vous avez créée via la zone administrative WordPress.
Ensuite, ajoutez la barre latérale.fichier php comme indiqué ci-dessous

<?php get_sidebar(); ?>

Dans ce fichier, vous pouvez afficher vos derniers messages, archives, informations de contact, etc.,

Après cette ligne, un « div” vide inséré qui séparera la zone principale et la barre latérale du pied de page.

Enfin, ajouté une dernière ligne

<?php get_footer(); ?>

qui va inclure le pied de page.fichier php.

Étape 3: Barre latérale.Fichier php

Dans la barre latérale.php, ajoutez le code suivant

dans ce fichier, les fonctions internes WordPress sont appelées pour afficher les différentes catégories, Archives des posts., La fonction WordPress les renvoie sous forme d’éléments de liste, vous devez donc envelopper les fonctions réelles dans des listes non triées (les balises <ul>).

Étape 4: pied de page.php File

ajoutez les lignes de code ci-dessous au pied de page.php file:

<div id= "ttr_footer"><h1>FOOTER</h1></div></div></body></html>

cela ajoutera une étiquette de pied de page simple. Cependant, vous pouvez également ajouter des liens, du texte supplémentaire, les informations de copyright pour votre thème à la place du texte de pied de page simple.

Étape 5: style.Fichier css

Ajoutez les lignes suivantes au style.,fichier css

Ce fichier CSS définit l’apparence de base de votre thème. Cela définira l’arrière-plan de la page et ajoutera les bordures selon vos besoins.

votre page ressemblera un peu à ceci:

Maintenant, vous pouvez modifier davantage le fichier CSS en ajoutant des images, des animations et d’autres contenus à votre thème et le rendre aussi beau que vous le souhaitez.

mais, cela nécessitera la connaissance des fonctions HTML, PHP et WordPress. Ainsi, une meilleure alternative consiste à utiliser un générateur de thème WordPress puissant qui n’inclut même pas une seule ligne de code. Oui! Sans codage!, Un logiciel qui vous permet de créer votre propre thème WordPress à partir de zéro sans aucune connaissance en codage.

Désireux de connaître cette solution, Eh bien, je parle de votre propre logiciel de création de thème TemplateToaster. Il fournit un éventail de fonctionnalités fantastiques avec une interface de glisser-déposer & facile à utiliser. Alors, sans perdre une minute, commençons à développer le thème WordPress à partir de zéro avec TemplateToaster.

comment créer un thème WordPress avec TemplateToaster?

TemplateToaster est assez facile à installer et n’implique aucun codage., Visitez simplement le site Web et téléchargez le programme D’installation de TemplateToaster. Cependant, la version d’essai est gratuite. Maintenant, tout ce que vous avez à faire est de suivre ces étapes faciles pour créer votre propre thème WordPress. Le premier écran qui apparaîtra après l’installation ressemble à

suivez ces étapes pour créer un thème WordPress & lancez le développement de votre thème WordPress

Étape 1: Choisissez une plateforme

ici, vous pouvez faire la sélection du CMS. Puisque nous créons un thème WordPress, le choix évident pour moi est WordPress.,

Maintenant, vous pouvez voir un écran avec deux options, C’est-à-dire aller avec des exemples de modèles et recommencer à zéro. Vous pouvez facilement trouver un modèle approprié pour votre site web à partir de la pléthore de thèmes WordPress gratuits. Puisque nous sommes impliqués dans le développement de modèles WordPress ainsi, je vais choisir  » partir de zéro”.

Maintenant, vous verrez la toute première fenêtre contextuelle, c’est-à-dire pour sélectionner la couleur et la typographie à partir des options données. Et cliquez sur le bouton OK.,

Étape 2: Conception d’un en-Tête

Ici, vous devez sélectionner la largeur et la hauteur de l’en-tête. Vous pouvez garder la largeur de pleine largeur, égale à conteneur largeur, et la largeur peut être réglée.

Sélectionnez la Couleur d’arrière-plan pour elle. Vous pouvez définir une couleur, un dégradé ou parcourir une image à partir de la galerie de stock intégrée ou utiliser votre propre image personnalisée.

Maintenant, vous pouvez ajouter « zone de texte” et « icônes sociales” à l’en-tête et le rendre aussi interactif que vous le souhaitez.

L’en-Tête est fait.,

Étape 3: Concevoir le Menu

Maintenant, il est temps de conception de Menu. Allez à l’onglet menu et sélectionnez la largeur et la hauteur que vous voulez pour votre Menu dans les options respectives.

Vous pouvez également définir la couleur d’arrière-plan, le dégradé ou l’image dans le menu à partir de L’arrière-plan.

maintenant, mettez un Logo dans le menu à partir des options données. Cependant, vous pouvez également personnaliser votre Logo.,

Maintenant, sélectionnez « Propriétés du bouton de Menu”, puis alignez le bouton comme alignement → Horizontal → de droite à gauche et ainsi vos boutons de menu seront alignés à droite de la page.

Vous pouvez également choisir de définir la typographie pour les éléments de menu.

Le Menu est prêt maintenant.

Étape 4: Créer et styliser un diaporama

  • sélectionnez maintenant L’onglet Diaporama dans la barre d’outils ci-dessus et vous pouvez choisir entre les options pour définir ses fonctionnalités.,

  • Vous pouvez sélectionner la couleur d’arrière-plan que vous souhaitez pour le diaporama, L’Image d’arrière-plan, etc. En outre, appliquez des propriétés telles que la position du diaporama, les effets de transition, la largeur, la hauteur et une zone de texte pour le rendre aussi beau que vous le souhaitez. Et des composants tels que Slideshow peuvent améliorer votre engagement web. Et il y a certains composants que les meilleurs développeurs WordPress incluent dans leurs thèmes pour les rendre brillants et attrayants.

Étape 5: modifier le contenu (zone principale)

vient maintenant la zone principale, c’est-à-dire la zone de contenu., Tout d’abord, définissez le nombre de colonnes que vous voulez dans une seule ligne.

en cliquant simplement sur le texte, vous pourrez ajouter le contenu à votre site web. Toutefois, vous pouvez utiliser plusieurs options vous pouvez définir la typographie, la couleur de police, l’alignement du texte, la taille de police, etc. et obtenir votre texte est prêt.

Si vous souhaitez ajouter une image, supprimez simplement le contenu de la première colonne à l’aide de l’onglet Éditeur.,

onglet Éditeur → Image → Parcourir l’image →Ouvrir→OK

de Même, vous pouvez facilement concevoir le reste des colonnes comme indiqué ci-dessous.

Etape 6: Conception/Personnaliser le Pied de page

  • Maintenant, allez à l’onglet Pied de page. Il affichera de nombreuses options pour concevoir un pied de page. Tout d’abord, définissez un arrière-plan pour le pied de page. Vous pouvez également définir une image en arrière-plan de l’image ou de parcourir votre propre image.
  • Ensuite, à partir de la Cellule de Pied de page option, définissez le nombre de lignes, de colonnes & largeur du pied de page., Comme ici, 4 colonnes dans la première ligne et au total 2 lignes sont sélectionnées. Placez les icônes des médias sociaux partout où vous les trouvez appropriées.

  • Mettre le contenu et le style à travers les options de Typographie. Vous pouvez également définir différentes couleurs de police à différents états des liens comme Active, Hover, Normal.
  • De Même, vous pouvez styliser conçu par le texte& lien dans la deuxième ligne. Cependant, vous pouvez également choisir d’afficher/masquer cette de la case à cocher à tout moment.
  • L’aspect final du Pied de page sera un peu comme ça., Donc, pour le concevoir magnifiquement, vous avez essentiellement besoin de quelques clics de souris seulement.

ainsi, la page d’accueil est magnifiquement créée. De même, vous pouvez créer d’autres pages de votre site web. Tout ce que vous avez à faire est de cliquer sur l’icône  » +  » sur le côté gauche et ajouter autant de pages que vous le souhaitez.

Cependant, si vous souhaitez ajouter un enfant de page pour une page particulière, alors vous pouvez le faire aussi bien., Et tout ce que vous avez à faire est de cliquer sur les ellipses (trois points) correspondant au nom de la page, vous devez cliquer avec le bouton droit de la souris sur la page souhaitée et choisir « Ajouter une Page enfant ». Quelque chose comme montrer une hiérarchie virtuelle.

nom de la Page → → → Ajouter une page enfant

ici, vous pouvez également voir d’autres options, C’est-à-dire Supprimer, Modifier et cloner. Vous pouvez les utiliser pour prendre des mesures appropriées.

Hourra!! Vous avez terminé le processus de création de thème WordPress formulaire scratch. Et vous pouvez gagner des bénéfices avec le développement de thèmes WordPress et garder votre petite arme secrète en sécurité.,

le logiciel de conception Web TemplateToaster offre de nombreuses options plus avancées comme la mise en arrière-plan vidéo, des diaporamas, de nouveaux styles de menu, etc. Vous pouvez en savoir plus sur la façon de créer un site Web WordPress, créer un site web de commerce électronique avec WooCommerce, comment créer des thèmes et des modèles professionnels, et comment utiliser WordPress theme check plugin ainsi de suite.

Quelle méthode utilisez – vous pour créer un thème WordPress?

donc, cela nous amène à la fin de ce tutoriel complet., Je suis sûr que cela vous aidera à construire votre propre thème WordPress, expliquez également les principaux aspects de la création D’un thème WordPress à partir de zéro. Créer un thème WordPress est assez simple et le choix du CMS dépend de l’objectif de création de votre site web. Comme si vous êtes sur le point de lancer le développement de site web de commerce électronique ou si vous souhaitez créer un thème enfant dans WordPress ou si vous voulez même savoir quel thème WordPress est que, l’autre site utilise, ou si vous voulez commencer le développement de thème WordPress en utilisant Bootstrap, etc., Il y a certaines choses à garder à l’esprit avant de choisir le thème WordPress, car Choisir le meilleur thème WordPress n’est pas un jeu d’enfant. Découvrez les meilleurs thèmes WordPress et Thèmes WordPress gratuits.

Conclusion de comment créer un thème WordPress

alors, gardez tout dans votre esprit clair avant d’entrer dans l’arène du développement de thèmes WordPress. Cependant, vous pouvez choisir de travailler avec WordPress Theme builder comme sans écrire une seule ligne de code. Par conséquent, créer un thème WordPress à partir de zéro n’est plus une tâche difficile maintenant., Mais la méthode pour créer un thème WordPress à partir de Zéro est entièrement entre vos mains. Quoi que vous choisissiez, faites-moi savoir comment cela a fonctionné pour vous dans les commentaires ci-dessous.