Comment créer un thème WordPress à partir de zéro: premières étapes –

Les thèmes WordPress permettent aux utilisateurs de WordPress de modifier complètement l'apparence d'un site Web WP et d'y ajouter des fonctionnalités. Dans cette série en trois parties, nous présenterons les thèmes WordPress, en montrant leur fonctionnement, leur structure, l’architecture PHP qui les sous-tend, ainsi que d’autres informations pertinentes. Nous entreprendrons ensuite un voyage pour créer un thème WordPress.

Ce premier article nous prépare à ce voyage en discutant de la théorie qui sous-tend les thèmes WordPress.

Un mot ou deux sur les bases

WordPress a été conçu comme un moteur de blog ou un simple système de gestion de contenu orienté blogs. Il a été initialement publié en 2003 par Matt Mullenweg et Mike Little. Depuis lors, sa base d’utilisateurs n’a cessé de croître. WordPress est une application Web basée sur PHP qui utilise MySQL comme base de données et est généralement exécuté derrière un programme serveur, tel que NGINX ou Apache.

WordPress est fondamentalement juste un groupe de fichiers PHP qui fonctionnent ensemble comme une application. Un interprète PHP utilise ces fichiers pour créer des pages Web destinées aux visiteurs. Il produit du HTML, pour être plus précis.

Le rôle du moteur de modélisation de WordPress est de nous permettre d’écrire (principalement) des instructions de présentation – des instructions sur la manière de structurer et de styler exactement le contenu HTML que WordPress produira. Ces instructions sont encapsulées dans des thèmes WordPress .

Chaque thème est constitué d’un dossier contenant des fichiers PHP, CSS et parfois JavaScript. Les fichiers que chaque thème WordPress doit avoir – au minimum – sont style.css et index.php . Il s'agit du technique minimum requis pour que le thème fonctionne, mais aucun thème WordPress sérieux ne reste composé de ces deux fichiers uniquement.

Modèle de base et fichiers partiels

Le minimum index.php [Lefichier capture toutes les requêtes sans leurs fichiers de modèle spécialisés dans un thème. front-page.php home.php page.php taxonomy.php author.php ] archive.php sont quelques-uns des modèles que nous pouvons utiliser dans nos thèmes pour structurer davantage des pages ou des requêtes spécifiques de notre thème.

Par exemple, le archive.php . file spécifiera la structure de sortie HTML lorsqu'un visiteur demande certaines des pages affichant la liste des publications. page.php précisera comment afficher des pages individuelles, etc.

Les fichiers partiels encapsulent des parties répétables de pages d'un site Web WordPress. Par exemple, l'en-tête et le pied de page sont généralement cohérents sur toutes les pages d'un site Web. Les thèmes WordPress séparent ces éléments de page en header.php et footer.php . comments.php sera utilisé pour afficher les commentaires, le cas échéant.

Ces fichiers sont ensuite requis à partir des fichiers modèle que nous avons expliqués.

Ainsi, nous adhérons aux Principe DRY et ne répétez pas le code dans tous ces fichiers.

Hiérarchie des modèles

Dans le système de templates de WordPress, il existe une hiérarchie de fichiers modèles que WordPress essaiera d'utiliser pour chaque demande. . Cette hiérarchie est basée sur la spécificité. WordPress essaiera d'utiliser le fichier le plus spécifique pour chaque demande, s'il existe. S'il n'existe pas, il recherchera le fichier suivant, moins spécifique, et ainsi de suite.

Pour expliquer cela dans une requête page – lorsque le visiteur visite une page spécifique sur un site Web WordPress – WordPress essaiera d’abord de trouver le modèle que l’auteur de la page lui a attribué dans le backend wp-admin . Cela peut être un fichier modèle totalement personnalisé, voire même statique.

S'il n'existe aucun modèle, ou s'il n'a pas été affecté, WordPress essaiera de trouver un fichier modèle avec un slug de cette page. dans son nom de fichier. Cela ressemblerait à page-mypageslug.php – quel que soit notre mypageslug .

Le prochain fichier que WordPress tentera d'utiliser sera un fichier avec l'identifiant de cette page dans son nom de fichier – comme page-48.php .

Si aucun de ces fichiers spécifiques à une page n'existe, WordPress essaiera d'utiliser page.php – utilisé pour tout les pages sauf indication contraire.

S'il ne trouve pas page.php il essaiera d'utiliser singular.php . Ce fichier de modèle est utilisé lorsque – pour posts – single.php est introuvable et pour pages lorsque page.php n'est pas trouvé. Maintenant, si aucun de ceux-ci ne se trouve dans notre exemple de requête page WordPress reviendra à index.php .

Ceci, brièvement, explique le WordPress hiérarchie des modèles. Tous les modèles de fichiers que nous avons mentionnés incorporeront (nécessiteront) des partiels tels que header.php footer.php et d’autres au besoin. Ils peuvent également spécifier leurs partiels spécifiques à utiliser – par exemple, un en-tête spécifique à une page.

La prochaine chose à connaître pour comprendre la thématique est le type de message WordPress . ].

Types de publication WordPress

Le contenu de WordPress existe sous la forme de type de publication . Les types intégrés sont posts et pages . Ce sont les logiques. WordPress possède également un type de publication en pièce jointe intégré, des menus de navigation et des révisions . Techniquement, ce sont aussi des types de posts.

Nous pouvons également spécifier nos propres types de posts, que ce soit dans nos thèmes ou dans nos plugins. Nous devons utiliser les éléments suivants:

 register_post_type ($ post_type, $ args)

Ici, nous spécifions le nom du type de message, sa structure, sa représentation dans wp-admin etc.

Lorsque nous avons défini ce type de fichier, nous pouvons également créer des fichiers de modèle spécifiques. pour ce type de message. Les types de publication personnalisés, tels que les pages et ont leur propre hiérarchie de modèles.

Vous trouverez plus d'informations sur la hiérarchie de modèles ici . 19659031] style.css

style.css est un fichier essentiel du style de tous les thèmes WordPress. Sa fonction va au-delà du style. Ce fichier est utilisé pour fournir des informations de base sur le thème à WordPress. Sans cela, WordPress ne pourrait pas enregistrer un thème en tant que thème.

Le WordPress Codex fournit plus d'informations sur tous les détails de ce fichier. Par souci de brièveté, nous n'en examinerons que quelques-uns. Dans les commentaires d'en-tête de ce fichier CSS, nous fournissons des informations WordPress sur les éléments suivants:

• nom du thème
• auteur
• description
• thème URI
• version
• licence
• et autres détails

WordPress utilise ces détails pour afficher correctement le thème dans le back-end.

Par exemple, l'en-tête méta du thème Twenty Seventeen ressemble à ceci:

 / *
Nom du Thème: Twenty Seventeen
URI du thème: https://wordpress.org/themes/twentyseventeen/
Auteur: l'équipe WordPress
URI de l'auteur: https://wordpress.org/
Description: Twenty Seventeen donne vie à votre site avec une vidéo d’en-tête et des images immersives. Axé sur les sites professionnels, il comporte plusieurs sections sur la page d'accueil, ainsi que des widgets, des menus de navigation et sociaux, un logo, etc. Personnalisez sa grille asymétrique avec un jeu de couleurs personnalisé et présentez votre contenu multimédia avec des formats de publication. Notre thème par défaut pour 2017 fonctionne très bien dans de nombreuses langues, pour toutes les capacités et sur tous les appareils.
Version: 1.7
Licence: Licence publique générale GNU v2 ou ultérieure
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Domaine texte: vingt-sept
Tags: une colonne, deux colonnes, barre latérale droite, en-tête flexible, prêt pour l'accessibilité, couleurs personnalisées, en-tête personnalisé, menu personnalisé, logo personnalisé, style de l'éditeur, images-vedette, widgets de pied de page, formats postérieurs, prise en charge de la langue RTL, post-collant, options de thème, commentaires filetés, version prête à être traduite

Ce thème, comme WordPress, est sous licence GPL.
Utilisez-le pour créer quelque chose de cool, amusez-vous et partagez ce que vous avez appris avec d’autres.
* /

Ceci dit, le fichier style.css est évidemment utilisé pour styliser nos pages WordPress.

Les actions et filtres de filtrage WordPress

WordPress – et les thèmes et plugins WordPress – font largement appel à crochets à filtre et filtres à crochets . Celles-ci font partie d'une architecture événementielle . Une explication simple à cela serait que, dans le processus d’exécution de la page connectée à la demande Web des visiteurs, certains points enregistrés – crochets – nous permettent de déclencher des actions sur ces points. Nous accrochons les fonctions PHP sur ces points à exécuter. Ce sont des actions crochets. Les crochets de filtre sont axés sur le traitement – la modification – de données dans le cycle d'exécution. Ainsi, si le crochet de filtre est enregistré pour un élément de donnée (variable PHP), nous pouvons accrocher notre propre fonction et modifier, ou traiter, cet élément de données.

Bien que peu orthodoxe, par rapport au modèle omnipresent MVC le recours au système de points d'ancrage dans WordPress a joué un rôle important dans la vulgarisation de WordPress, car il est très simple d'y insérer de nouvelles fonctionnalités, sans qu'il soit nécessaire de toucher – ou même pour comprendre profondément – le noyau de base lui-même.

Les crochets sont expliqués ici plus longuement, et nous en parlerons plus en détail dans d’autres parties de ce guide. 19659049] The Loop

The Loop est la partie élémentaire du cycle de demande WordPress. Comme le dit le codex WordPress:

The Loop est le code PHP utilisé par WordPress pour afficher des posts. À l'aide de The Loop, WordPress traite chaque message à afficher sur la page en cours et le formate en fonction des critères spécifiés dans les balises The Loop.

La boucle WordPress est, au fond, un fichier PHP et . boucle qui affiche les messages en fonction de la demande des visiteurs et critères spécifiés dans le fichier de modèle dans lequel elle est spécifiée.

Dans la boucle, qu’elle ne publie qu'un seul message ou une page, ou une liste de eux, nous pouvons afficher différentes parties de la publication, telles que le titre et le contenu. Nous pouvons spécifier n'importe quelle sortie HTML ou structure que nous voulons. Nous pouvons également utiliser des balises conditionnelles, etc.

L'exemple le plus rudimentaire de la boucle pourrait ressembler à ceci:

 if (have_posts ()) {
    while (have_posts ()) {
        la poste();
        //
        // Publier le contenu ici
        //
    } // fin tout en
} // fin si

Nous pouvons utiliser plusieurs boucles sur une page (dans ce cas, nous devons les réinitialiser), et il existe des fonctions WordPress spécifiques qui peuvent être utilisées à l'intérieur.

Les balises conditionnelles WordPress sont des extraits de code PHP qui nous permettent d'afficher des éléments de contenu uniquement lorsque certaines conditions sont remplies. Par exemple, nous avons le fichier header.php utilisé sur toutes les pages du site, mais nous souhaitons peut-être que certains extraits HTML ne soient affichés que sur la page d'accueil ou sur une autre page. 19659005] Ainsi, dans le premier exemple, nous utiliserions is_front_page () et cela ressemblerait à ceci:

 if (is_front_page ()) {
    # faire quelque chose
}

Il y a beaucoup de balises conditionnelles fournies et elles permettent une grande flexibilité dans le développement de WordPress.

Ce sont les blocs de construction de WordPress, mais il existe également des taxonomies – qui peuvent être intégrés ou personnalisés, nous pouvons spécifier – et termes dans ces taxonomies. Nous les utilisons pour classer et trier nos messages.

Structure du thème

À la fin de cette partie, et avant de tenter de créer notre propre thème, nous allons utiliser l'outil WP-CLI . échafauder un thème minimal basé sur Underscores – maintenu par Automattic – pour obtenir un aperçu de la structure de thème typique et minimale de WordPress:

À partir de là, nous pouvons avoir une idée de la manière dont nous pouvons structurer nos fichiers de thèmes, dossiers, etc.

Conclusion

Dans cette première partie de notre guide sur la thématisation de WordPress, nous avons présenté la terminologie et les éléments de base des thèmes WordPress, que nous utiliserons dans la suite. tutoriels suivants pour construire notre propre thème WordPress

Tonino est un développeur Web et un consultant en informatique qui a plongé dans le code source ouvert pendant plus de dix ans. Il est également un passionné de crypto, un fan de Linux et un libertaire modéré.