{"id":234230,"date":"2023-02-17T19:53:00","date_gmt":"2023-02-17T16:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234230"},"modified":"2022-11-12T01:16:36","modified_gmt":"2022-11-11T22:16:36","slug":"tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-2-modeles","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-2-modeles\/","title":{"rendered":"Tutoriel sur le th\u00e8me WordPress pour les d\u00e9butants \u2013 Partie 2 : Mod\u00e8les"},"content":{"rendered":"\n

Cette le\u00e7on du didacticiel sur le th\u00e8me WordPress pour les d\u00e9butants vous apprendra \u00e0 structurer les principaux \u00e9l\u00e9ments constitutifs d’un th\u00e8me et \u00e0 commencer \u00e0 cr\u00e9er des mod\u00e8les. Nous allons commencer \u00e0 cr\u00e9er une sortie HTML et comment inclure les blocs de construction dans les mod\u00e8les de notre th\u00e8me. Dans l’ \u00e9tape pr\u00e9c\u00e9dente,<\/a> nous avons mis en place le strict minimum d’un th\u00e8me WordPress et l’avons activ\u00e9. Mais pour le moment, il ne fait pas grand-chose et ne contient m\u00eame pas de code HTML valide pour une page Web. R\u00e9parons \u00e7a.<\/p>\n

Blocs de construction d’en-t\u00eate et de pied de page (et barre lat\u00e9rale)<\/h2>\n

Dans nos fichiers mod\u00e8les, nous avons besoin d’un code HTML valide. Nous pourrions \u00e9crire la structure HTML compl\u00e8te (commen\u00e7ant par <html><\/code>, <head><\/code>et full <body><\/code>) dans index.php<\/code>, mais cela devient peu pratique lorsque vous conservez plusieurs fichiers mod\u00e8les dans votre th\u00e8me. Imaginez avoir cr\u00e9\u00e9 un tas de mod\u00e8les, puis r\u00e9alisez que vous avez besoin d’un petit changement dans la partie en-t\u00eate ; vous devrez alors modifier tous les mod\u00e8les afin qu’ils restent coh\u00e9rents. Ce n’est pas intelligent.<\/p>\n

\"Tutoriel<\/a><\/p>\n

La solution consiste \u00e0 diviser la structure HTML compl\u00e8te en parties sensibles\u00a0; blocs de construction. Chaque bloc r\u00e9side dans son propre fichier, et chaque fois que nous en avons besoin dans un mod\u00e8le, nous les incluons. Les blocs les plus courants et les plus sensibles sont un pour l’en-t\u00eate, un pour le pied de page et un pour le contenu, mais si votre th\u00e8me comporte une barre lat\u00e9rale, la barre lat\u00e9rale doit \u00e9galement \u00eatre un b\u00e2timent s\u00e9par\u00e9.<\/p>\n

Ceux d’entre vous qui sont plus familiers avec PHP connaissent probablement les m\u00e9thodes include()<\/code>ou require()<\/code>. C’est pr\u00e9cis\u00e9ment ce que nous ferons, mais nous utiliserons les fonctions de WordPress pour inclure d’autres fichiers car elles pr\u00e9sentent des avantages suppl\u00e9mentaires.<\/p>\n

Dans cette le\u00e7on, nous allons cr\u00e9er l’en-t\u00eate, le pied de page et la barre lat\u00e9rale en tant que blocs de construction. Les barres lat\u00e9rales sont cependant devenues de moins en moins courantes dans les pages Web, mais nous allons toujours impl\u00e9menter une barre lat\u00e9rale droite dans notre th\u00e8me. Ces trois blocs de construction sont une pratique courante dans tous les th\u00e8mes WordPress – et c’est en fait si courant que WordPress offre une automatisation pour ces trois choses.<\/p>\n

Cr\u00e9ation des mod\u00e8les d’en-t\u00eate, de pied de page et de barre lat\u00e9rale<\/h2>\n

Cr\u00e9ons un nouveau fichier vide nomm\u00e9 header.php<\/code>dans notre dossier de th\u00e8me. Nous allons ajouter du HTML tr\u00e8s basique pour le moment (ne vous inqui\u00e9tez pas, nous ajouterons du HTML plus appropri\u00e9 plus tard).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Cr\u00e9ez un nouveau fichier nomm\u00e9 footer.php<\/code>dans votre r\u00e9pertoire de th\u00e8me. Tout ce dont nous avons besoin (pour l’instant) dans ce fichier est la fermeture de notre structure HTML.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
Et enfin, cr\u00e9ez un nouveau fichier vide nomm\u00e9 sidebar.php<\/code>. Nous ajoutons juste la balise HTML \u00e0 l’ <aside><\/code>int\u00e9rieur.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Y compris les blocs de construction<\/h2>\n
Revenons \u00e0 notre index.php<\/code>dossier. Tout ce que nous devons faire maintenant est de dire \u00e0 WordPress o\u00f9 nous voulons inclure le fichier d’en-t\u00eate et de pied de page. \u00c9videmment, nous voulons charger l’en-t\u00eate au tout d\u00e9but et le pied de page \u00e0 la toute fin de ce fichier.<\/p>\n
WordPress propose des fonctions simples pour inclure ces blocs de construction ; get_header()<\/code>et get_footer()<\/code>pour le fichier d’en-t\u00eate et de pied de page, respectivement. Plut\u00f4t intuitif non? Ajoutons-les dans notre index.php et voyons ce qui se passe.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
Actualisez votre interface et inspectez ou affichez la source HTML pour voir que nous avons combin\u00e9 plusieurs blocs de construction pour cr\u00e9er une structure HTML compl\u00e8te.<\/p>\n
\"Tutoriel<\/a><\/p>\n
Vous \u00eates maintenant libre de modifier le contenu de index.php<\/code>ind\u00e9pendamment de l’en-t\u00eate et du pied de page\u00a0!<\/p>\n
Incluons \u00e9galement la barre lat\u00e9rale. Gardez \u00e0 l’esprit que dans votre th\u00e8me, vous voudrez peut-\u00eatre envisager des cas et des mod\u00e8les o\u00f9 vous ne voulez pas la barre lat\u00e9rale, par exemple la page d’accueil.<\/p>\n
Inclure la barre lat\u00e9rale est aussi simple que l’en-t\u00eate et le pied de page\u00a0; pour cela nous utilisons get_sidebar()<\/code>. Ajoutons cela \u00e0 index.php, juste avant d’obtenir le pied de page.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
Actualisez et vous devriez voir la source HTML, y compris notre fichier <aside><\/code>. Ne vous inqui\u00e9tez pas, dans une \u00e9tape ult\u00e9rieure, nous apprendrons \u00e0 le convertir en une v\u00e9ritable zone de barre lat\u00e9rale dans laquelle vous pourrez placer des widgets.<\/p>\n
Notre th\u00e8me est assez statique en ce moment. Dans la prochaine le\u00e7on<\/a> de cette s\u00e9rie de didacticiels sur le th\u00e8me WordPress, nous commencerons enfin \u00e0 plonger correctement dans les fonctions de WordPress afin de charger dynamiquement le contenu et les informations de WordPress dans nos mod\u00e8les.<\/p>\n
Documentation sur les m\u00e9thodes utilis\u00e9es<\/h2>\n