- 1. Tutoriel WordPress: Comment créer un thème WordPress à partir de HTML (partie 1)
- 2. Tutoriel WordPress: Comment créer un thème WordPress à partir de HTML (partie 2)
- 3. En train de lire: Introduction à l'anatomie d'un thème WordPress
Il y a quelque temps, nous vous avons présenté le concept de création d'un thème WordPress à partir de HTML. Nous avons divisé le guide en deux parties et aujourd'hui nous allons développer les deux tutoriels, alors n'hésitez pas à considérer cette publication comme la troisième publication de la série de publications. Mon objectif est de démonter le thème WordPress pour vous donner une idée claire du fonctionnement (du thème).
Cet article suppose que vous avez une connaissance pratique du HTML et du CSS. Je vais aller de l'avant et déclarer que posséder des compétences HTML et CSS est une condition préalable à la conception de thèmes WordPress. Encore une chose, cet article restera exempt de gros mots et de concepts difficiles; Ce sera facile à comprendre, alors préparez-vous à vous amuser et à apprendre.
Un peu de préparation HTML
Chaque page Web HTML est divisée en différentes parties à l'aide de la balise
Une fois que vous avez votre page Web en sections, vous pouvez trier (ou organiser) les sections comme vous le souhaitez en utilisant CSS. Cette opération est connue sous le nom de style et implique l'ajout d'autres éléments de style tels que la couleur, la taille, les bordures, les effets spéciaux, etc. Telle est la puissance du CSS, qui, soit dit en passant, est l'abréviation de Feuilles de style en cascade. Lorsque vous assemblez vos fichiers HTML et CSS et ajoutez quelques images, vous vous retrouvez avec un site Web complet.
Les choses ne sont pas très différentes avec les thèmes WordPress. Comme nous l'avons vu dans la partie 1 de Comment créer un thème WordPress à partir de HTML, les thèmes WordPress sont divisés en différents fichiers. Si vous ne trouvez aucune similitude à ce stade, laissez-moi vous expliquer.
Les pages Web HTML statiques sont divisées en divisions (ce que nous appelions auparavant des sections) à l'aide de balises
De cette façon, au lieu d'avoir tous les éléments du corps (en-tête, contenu principal, barre latérale, pied de page, etc.) vivant dans un seul fichier (comme c'est le cas avec le HTML statique), chacun des éléments du corps (dans les thèmes WordPress ) vit dans des fichiers séparés.
De cette façon, l'en-tête vivra dans header.php, la barre latérale trouvera le début dans sidebar.php, le contenu principal vivra dans index.php ou single.php (s'il s'agit d'un article) ou page.php (si c'est une page). La section de pied de page vivra dans footer.php et ainsi de suite.
Suivez-vous? Reportez-vous à l'illustration suivante:
D'après notre illustration précédente, , Oui ils sont appelés balises de modèle. Votre travail consiste à rechercher header.php, sidebar.php et footer.php dans cet ordre à partir de votre répertoire de thèmes, et d'afficher le contenu dans votre index.php, complétant ainsi la page Web.
Ne laissez pas le .php vous faire peur, le contenu des fichiers php n'est que du code HTML que vous connaissez bien. Par exemple, votre header.php peut contenir une navigation de liste HTML typique. De la même manière, vous pouvez mettre du code HTML typique dans footer.php, sidebar.php et index.php.
En même temps, vous pouvez placer le loop.php cela fonctionne dans votre index.php (ou partout où vous le souhaitez) pour afficher vos articles de blog, mais cela devrait vous ralentir et revenir à l'anatomie des thèmes WordPress. J'ai mentionné quelques choses à propos de la boucle dans la partie 2 de la création d'un thème WordPress à partir de HTML. et nous en parlerons (la boucle) et d'autres fonctions dans le futur.
Vers l'avant…
Un thème WordPress de base est composé d'au moins quatre fichiers de modèle, à savoir:
- index.php
- header.php
- sidebar.php
- footer.php
Voyons ce que chacun de ces éléments comprend magique des dossiers:
Fichier de modèle Index.php
Il s'agit du fichier principal sans lequel vous n'avez pas de thème WordPress fonctionnel. C'est le premier fichier (ou par défaut) à charger lorsque vous visitez un site Web WordPress. Considérez cela comme l'équivalent de index.html.
Un index.php typique dans les thèmes WordPress ressemblera à ceci:
Vous pouvez ajouter la boucle entre Oui pour afficher les articles de blog sur la page d'accueil (index.php) comme indiqué ci-dessous:
> Fichier de modèle Header.php
Ces fichiers de modèle contiennent votre code d'en-tête HTML, votre navigation et votre code d'en-tête. Fondamentalement, header.php stocke tout ce que vous souhaitez afficher en haut de votre site Web. Vous savez, des choses comme le titre de votre site Web et des choses comme ça.
En même temps, vous créez un lien vers votre feuille de style CSS dans le header.php. Voici un exemple de base de header.php:
<? php wp_title ('|', vrai, 'droit'); ?> Ceci est la section d'en-tête. Mettez votre logo et d'autres détails ici.
Fichier de modèle Sidebar.php
Sidebar.php contient tout ce dont vous avez besoin pour apparaître dans vos barres latérales. La barre latérale contient des menus supplémentaires, des widgets, des catégories, des icônes de médias sociaux, du contenu personnalisé, du code HTML tel que des publicités, etc.
Sidebar.php peut contenir du balisage HTML pur ou des appels de fonction php selon vos besoins. En tant que tel, un sidebar.php de base pourrait ressembler à ceci:
Fichier de modèle Footer.php
Que pensez-vous qu'il y a dans footer.php? Vous pouvez mettre vos informations de copyright ici, des menus supplémentaires, des liens, des icônes de réseaux sociaux, tout ce que vous voulez! Souhaitez-vous voir à quoi ressemble un footer.php basique? Ici:
Avez-vous remarqué les balises de fermeture