Anatomie d'un thème WordPress

Il s'agit d'un chapitre de "Up and Running : A Practical Guide to WordPress Development", un guide multimédia sur le développement WordPress qui sera lancé le 16 juin. et des entretiens de présentation de code avec 13 des meilleurs développeurs WordPress au monde. Précommandez maintenant sur upandrunningwp.com pour une réduction de 20 % !

Points clés à retenir:

• Un thème WordPress est composé d'un ensemble de parties cohérentes. Les parties cruciales d'un thème non enfant incluent style.css , functions.php et plusieurs types de fichiers de modèle PHP (tels que header.php , footer.php et index.php ).
• En tant que principale source de style CSS du thème, style.css dicte l'apparence visuelle du thème. Une section de commentaires en haut de style.css est également l'endroit où le nom du thème, l'auteur, etc., sont enregistrés.
• functions.php est l'endroit où vous ajoutez des fonctionnalités de présentation à votre thème. Grâce à functions.php , vous ajouterez des feuilles de style CSS, des fichiers JavaScript, des menus de navigation, des zones de widgets et d'autres fonctionnalités.
• Les fichiers de modèle peuvent être divisés de manière informelle en : fichiers de modèle « toujours utilisés » ( header.php et footer.php , et sidebar.php cas échéant) ; fichiers dans la hiérarchie des modèles WordPress (tels que index.php , single.php et page.php ) ; et "parties de modèle" (extraits incomplets extraits d'autres fichiers de modèle pour réduire les répétitions).
• Les thèmes peuvent être arbitrairement vastes et complexes ; mais ce sont là les pièces les plus importantes et les plus prévisibles.

Ce court chapitre s'articule autour d'un grand schéma. Pourquoi attendre? C'est ici:

Ne pas paniquer! Vous le comprendrez bien assez tôt. Dans le reste de ce chapitre, nous expliquerons plus en détail chaque partie du diagramme.

Qu'est-ce qu'il y a dans un nom?

WordPress décide comment traiter les fichiers de thème en fonction de leur nom.

La première chose à remarquer est que chaque fichier du diagramme a un nom spécial. functions.php , style.css , index.php — aucun de ces fichiers n'est nommé par accident, et aucun de leurs noms n'est arbitraire.

WordPress décide comment traiter les fichiers de thème en fonction de leur nom. Il a un traitement spécial écrit pour functions.php , mais pas du tout pour functionz.php . Donc, si vous téléchargez un ensemble d'instructions en tant que functions.php , WordPress les interprétera ; mais si vous téléchargez ces mêmes instructions que functionz.php , WordPress ignorera par défaut ce fichier et ses instructions complètement.

style.css

style.css est la source principale de l'apparence visuelle du thème.

style.css est la principale source de style CSS du thème. En tant que tel, il s'agit de la principale source de l'apparence visuelle du thème, du choix des polices et des couleurs à la question de savoir si le thème fonctionne sur une grille réactive.

Ainsi, par exemple, si vous entrez le CSS suivant dans le style.css de votre thème :

p {
color: blue;
}

… alors tout ce qui se trouve dans un paragraphe, n'importe où sur votre site pendant qu'il exécute votre thème, deviendra bleu. Vraiment cool, non ?

style.css est l'endroit où vous ferez l'essentiel de votre travail pour donner à vos thèmes l'apparence que vous souhaitez.

Ce type de contrôle visuel signifie qu'il y a beaucoup de travail à faire dans style.css - c'est là que vous ferez l'essentiel de votre travail pour donner à vos thèmes l'aspect que vous souhaitez.

style.css est aussi la façon dont vous enregistrez votre thème

style.css contient également une section de commentaires dans son en-tête, où les données du thème (le nom du thème, l'auteur, le thème parent le cas échéant, etc.) sont enregistrées. Cela ressemble à ceci:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress lit ces commentaires pour obtenir ses informations sur votre thème. Ainsi, le petit bloc de commentaires ci-dessus - et rien de plus sophistiqué ou de plus technique - est ce qui fait apparaître votre thème dans la liste des thèmes de votre site dans Apparence > Thèmes dans la zone d'administration de WordPress :

Vous pouvez voir un exemple des données d'enregistrement réelles d'un thème sur les lignes 1 à 6 de style.css dans ce grand graphique, Anatomie d'un thème WordPress.

fonctions.php

functions.php est l'endroit où vous ajoutez des fonctionnalités personnalisées à votre thème. Cela pourrait être beaucoup, y compris :

• Ajout de feuilles de style CSS (y compris style.css lui-même) et de fichiers JavaScript
• Enregistrement des zones de menu de navigation et des zones de widget
• Définir les tailles d'image personnalisées que vous souhaitez voir disponibles sur votre site
• Filtrer le contenu de votre page

functions.php "parle" au reste de WordPress principalement via des crochets WordPress (également appelés crochets d'action et de filtre), qui lui permettent d'ajouter des fonctionnalités aux bons endroits. Nous approfondissons le fonctionnement de functions.php dans Concepts de base des thèmes WordPress : 3. Ajout de fonctionnalités avec functions.php , et nous approfondissons les crochets dans WordPress Hooks (Actions et filtres) : Ce qu'ils font et comment ils fonctionnent.

Fichiers de modèle PHP

Les fichiers de modèle d'un site WordPress déterminent le balisage du site. Sans eux, il n'y a littéralement rien sur la page.

La majeure partie des fichiers d'un thème sont ses fichiers de modèle PHP. Si functions.php est le cerveau d'un thème, et style.css est ses vêtements, et les fichiers modèles sont son corps réel.

Les fichiers modèles sont des fichiers ,code>.php qui contiennent un mélange de balisage HTML et de code PHP. (Vérifiez ce graphique et vous verrez à quoi ils ressemblent.)

Les fichiers de modèle créent un balisage de deux manières

Ensemble, ces fichiers déterminent le balisage du site : le code HTML réel que le navigateur affiche lorsqu'il visite votre site. Ils le font de deux manières.

1.HTML

Tout d'abord, les fichiers de modèle impriment le code HTML directement dans le navigateur, tout comme le ferait un fichier .html normal. Tout ce qui n'est pas à l'intérieur de <!--?php?--> n'est pas PHP : c'est juste du HTML qui va directement sur la page. Ainsi, si le header.php d'un thème inclut un peu de HTML tel que le suivant :

<body class="site-body">

C'est exactement ce qu'un navigateur verra sur chaque page Web WordPress qui inclut header.php , qui devrait être tous.

2.PHP

Les fichiers modèles opèrent vraiment leur magie en utilisant PHP, qui se compile ou se transforme en HTML. À titre d'exemple simple, notre même fichier header.php pourrait à la place contenir le code suivant :

<body class="<?php echo 'site-body'; ?>">

Le PHP ajouté fait simplement écho (imprime) la chaîne site-body directement sur la page. Ainsi, le serveur a effectué un traitement PHP supplémentaire de son côté, mais le navigateur voit toujours le même ancien code HTML.

Comme vous pouvez l'imaginer, les fichiers de modèle d'un thème sont tout à fait cruciaux : sans eux, il n'y a littéralement rien sur la page.

Fichiers modèles "toujours utilisés"

header.php et footer.php sont généralement utilisés partout dans un thème, car la plupart des sites veulent un en-tête et un pied de page cohérents sur différentes pages.

Certains fichiers modèles sont utilisés sur chaque page Web d'un site. Les principaux exemples sont header.php et footer.php .

Ces fichiers sont si souvent utilisés que WordPress a des fonctions spéciales pour les inclure dans d'autres fichiers modèles : get_header() et get_footer() . Appelées de cette façon, sans paramètres, ces fonctions récupèrent simplement header.php et footer.php , et les déposent là où la fonction a été appelée.

Pourquoi ces fichiers sont-ils utilisés partout ? C'est parce que la plupart des sites veulent un en-tête et un pied de page cohérents sur différentes pages. Si une page contient le logo de votre entreprise et le menu de navigation principal, il y a fort à parier que vous souhaiterez que les autres pages fassent de même. Il en va de même pour votre pied de page en bas de page.

Notez que sidebar.php est également une sorte de ce type de fichier, car il arrive souvent que la plupart des types de pages Web d'un site partagent une seule barre latérale, peut-être à l'exception des pages pleine largeur dédiées à l'affichage. Type de page des postes. sidebar.php a également sa propre fonction, get_sidebar() .

Fichiers dans la hiérarchie des modèles WordPress

La véritable excitation se produit dans des fichiers comme index.php , single.php et page.php . Ces fichiers dictent le balisage qui apparaîtra pour différents types de données de publication .

Pour reformuler cela, WordPress sait quelle page utiliser pour quel type de données de publication. Par example:

• Si la page Web demandée implique une publication de type Page (par exemple, votre page À propos), WordPress utilisera probablement page.php pour créer cette page Web.
• Si la page Web demandée est un article individuel de type Post (par exemple, vous consultez un article de blog particulier), WordPress utilisera probablement single.php pour le créer.
• Si vous parcourez tous les articles de type Post que vous avez écrits en 2014, WordPress utilisera probablement archive.php pour créer cette page Web.

C'est la magie de la hiérarchie des modèles WordPress , que nous couvrons en profondeur dans Concepts de base des thèmes WordPress : 1. La hiérarchie des modèles.

Ces fichiers modèles sont basés autour de la boucle

Ces fichiers de modèles « dans la hiérarchie des modèles » partagent tous quelque chose de très important : ils sont construits autour de la boucle, l'un des principes fondamentaux absolus du développement WordPress.

Nous approfondissons la boucle dans les concepts de base des thèmes WordPress : 2. Traitement des messages avec la boucle. The Loop est vraiment cool, donc si vous êtes nouveau, tenez bien vos chaussettes pour que The Loop ne les fasse pas exploser !

Pièces de modèle

Disons qu'il y a une section à la fois de index.php et de page.php qui est exactement la même. Devrions-nous répéter ce code dans ces deux fichiers ?

En fait, DRY - "Ne vous répétez pas!" - est un cri de guerre pour les bons programmeurs. La répétition cause toutes sortes de problèmes. Que faire si vous souhaitez modifier quelque chose dans la section répétée ? Maintenant, vous devez le changer à deux endroits. Que faire si vous oubliez de le modifier à un endroit, ou si vous faites une erreur dans un fichier mais pas dans un autre ? Maintenant, votre code est désynchronisé et votre site est bogué. (Maintenant : que se passe-t-il si vous répétez vingt fois le même code ? Vous devez répéter chaque modification effectuée vingt fois, et espérer que vous les « aurez tous compris ».)

Les parties de modèle prennent une partie susceptible d'être répétée d'un fichier de modèle et les déplacent dans un nouveau fichier. De cette façon, index.php et page.php peuvent simplement faire référence à la même partie de modèle, plutôt que de l'écrire individuellement deux fois ; et si vous souhaitez modifier cette section, vous ne la modifiez qu'une seule fois.

Vous connaissez maintenant l'anatomie de votre thème

Ce sont les choses à vraiment comprendre sur un thème WordPress. Même un thème ThemeForest bien trop grand sera construit autour de ce squelette de base, alors comprenez comment ces pièces s'imbriquent et vous aurez beaucoup de pouvoir pour comprendre les thèmes WordPress.

Une fois cette leçon d'anatomie terminée, les trois chapitres suivants plongent dans quatre des principes de programmation cruciaux qui expliquent comment un thème fonctionne :

1. La hiérarchie des templates WordPress
2. La boucle
3. fonctions.php
4. Crochets WordPress

En avant!