{"id":234234,"date":"2023-02-18T12:53:00","date_gmt":"2023-02-18T09:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234234"},"modified":"2022-11-12T01:26:24","modified_gmt":"2022-11-11T22:26:24","slug":"tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-3-contenu-dynamique","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-3-contenu-dynamique\/","title":{"rendered":"Tutoriel sur le th\u00e8me WordPress pour les d\u00e9butants \u2013 Partie 3 : Contenu dynamique"},"content":{"rendered":"\n

Dans cette le\u00e7on du didacticiel sur le th\u00e8me WordPress pour les d\u00e9butants, nous d\u00e9couvrirons les crochets dans WordPress et ajouterons quelques crochets dans notre th\u00e8me qui sont n\u00e9cessaires pour qu’un th\u00e8me fonctionne correctement avec WordPress et les plugins. Nous commencerons \u00e9galement \u00e0 acc\u00e9der au contenu dynamique de WordPress dans notre en-t\u00eate, par exemple en obtenant automatiquement le titre de la page actuelle.<\/p>\n

Nous devons d’abord en apprendre un peu plus sur les hooks dans WordPress. Les crochets sont une fonctionnalit\u00e9 de base avec laquelle vous devez vous familiariser. Je ne suis pas fan de montrer tout un tas de code dans lequel vous devez copier + coller sans savoir ce qu’il fait vraiment. Si vous suivez ce tutoriel, vous voulez apprendre cela correctement, n’est-ce pas\u00a0?<\/p>\n

Ne vous inqui\u00e9tez pas, je vais faire court pour le moment. Nous en apprendrons plus \u00e0 ce sujet plus loin dans ce tutoriel.<\/p>\n

Crochets dans WordPress<\/h2>\n

Bref; comme WordPress ex\u00e9cute tout le code pour charger et afficher une page, il existe certains \u00ab\u00a0points de contr\u00f4le\u00a0\u00bb – que nous appelons des points d’ancrage. Ces points permettent aux d\u00e9veloppeurs de modifier ou d’ajouter leur propre code. WordPress a d\u00e9fini tout un tas de \u00ab\u00a0points de contr\u00f4le\u00a0\u00bb o\u00f9, chacun avec un nom unique. Si vous connaissez son nom, vous pouvez ajouter votre propre code \u00e0 ces points de contr\u00f4le. Et ainsi dire facilement \u00e0 WordPress d’ex\u00e9cuter votre code lorsqu’il atteint ce point de contr\u00f4le dans le cadre de son processus.<\/p>\n

Il existe deux types de crochets; actions et filtres. Les actions<\/strong> sont des points dans le code o\u00f9 vous pouvez ajouter du code personnalis\u00e9, par exemple produire quelque chose ou faire quelque chose \u00e0 vos propres fins. Les filtres<\/strong> sont des points dans le code o\u00f9 vous pouvez modifier une certaine variable avant qu’elle ne soit utilis\u00e9e ou sortie. Ils sont tr\u00e8s similaires, mais les filtres sont attach\u00e9s \u00e0 une variable sp\u00e9cifique et les actions ne le sont pas.<\/p>\n

Les plugins, les th\u00e8mes et WordPress lui-m\u00eame peuvent "accrocher" leur code en utilisant add_action()<\/code>des actions et add_filter()<\/code>des filtres. Ces deux fonctions indiquent \u00e0 WordPress d’ex\u00e9cuter le code hook\u00e9 chaque fois que l’ex\u00e9cution atteint ces hooks.<\/p>\n

Afin de d\u00e9finir des crochets que vous utilisez do_action()<\/code>pour les actions et apply_filters()<\/code>pour les filtres.<\/p>\n

Pour tous ceux qui souhaitent en savoir plus, j’ai un autre article qui d\u00e9taille les crochets<\/a> dans WordPress.<\/p>\n

Un th\u00e8me WordPress doit inclure certains crochets importants sp\u00e9cifiques (actions). Ces crochets permettent \u00e0 WordPress, aux plugins et \u00e0 notre th\u00e8me lui-m\u00eame de s’accrocher et de faire des choses critiques. Regardons ces crochets critiques que nous devons ajouter.<\/p>\n

Crochets d’en-t\u00eate et de pied de page du th\u00e8me<\/h2>\n

Tous les th\u00e8mes WordPress doivent avoir deux crochets dans les mod\u00e8les. Une action doit \u00eatre plac\u00e9e dans l’en-t\u00eate (\u00e0 l’int\u00e9rieur de la <head><\/code>balise), et une autre dans le pied de page (juste avant la fermeture de la <\/body><\/code>balise). Ces deux crochets sont absolument n\u00e9cessaires pour que WordPress, votre th\u00e8me et n’importe quel plugin puissent ajouter leurs scripts et leur code de styles \u00e0 votre th\u00e8me.<\/p>\n

Les crochets dont nous avons besoin sont wp_head<\/code>et wp_footer<\/code>pour l’en-t\u00eate et le pied de page, respectivement.<\/p>\n

Normalement, lorsque nous voulons ex\u00e9cuter un hook, nous appelons do_action(<hook name>)<\/code>. Mais parce que ces deux crochets sont si critiques, WordPress les a simplifi\u00e9s pour nous en les mettant dans un simple appel de fonction. Donc, pour ces deux crochets, vous pouvez simplement utiliser wp_head()<\/code>et wp_footer()<\/code>. En arri\u00e8re-plan, ces deux ex\u00e9cutent le do_action()<\/code>.<\/p>\n

Ajoutons ces deux crochets (appels de fonction) \u00e0 nos mod\u00e8les d’en-t\u00eate et de pied de page, et voyons ce qui se passe.<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n\u00a0\n        <?php wp_head(); ?>\n    <\/head>\n<body><\/code><\/pre>\n
        <?php wp_footer(); ?>\n    <\/body>\n<\/html><\/code><\/pre>\n
Cliquez sur Actualiser sur votre frontend. Si vous \u00eates connect\u00e9, vous devriez maintenant voir appara\u00eetre la barre d’administration de WordPress! Cela signifie que WordPress est d\u00e9sormais en mesure d’ajouter avec succ\u00e8s ses scripts et ses styles \u00e0 votre th\u00e8me.<\/p>\n
\"Tutoriel<\/a><\/p>\n
Vous pouvez v\u00e9rifier votre source HTML et voir que votre en-t\u00eate contient maintenant pas mal de code. C’est du code que vous n’avez pas ajout\u00e9 \u00e0 votre th\u00e8me. Comme vous pouvez le voir, WordPress lui-m\u00eame utilise les crochets que nous avons ajout\u00e9s pour faire ses propres choses.<\/p>\n
Passons aux crochets et commen\u00e7ons \u00e0 examiner comment nous pouvons r\u00e9cup\u00e9rer dynamiquement le contenu de WordPress et le publier dans notre en-t\u00eate.<\/p>\n
Contenu dynamique dans l’en-t\u00eate<\/h2>\n
Disons \u00e0 WordPress de d\u00e9finir dynamiquement le titre du document (pour la <title><\/code>balise). Pour cela, nous allons utiliser une fonction (qui a un filtre d’ailleurs), appel\u00e9e wp_title()<\/code>. Comme nous l’avons appris ci-dessus, parce que wp_title()<\/code>c’est un filtre, vous, WordPress ou les plugins pouvez modifier la sortie. Nous y ajouterons un filtre plus loin dans ce tutoriel.<\/p>\n
La fonction wp_title()<\/code>prend plusieurs arguments<\/a> que vous pouvez ajuster \u00e0 votre guise, mais pour l’instant j’ajouterai une cha\u00eene vide afin qu’elle n’affiche que le titre de la page \u00e0 laquelle nous nous trouvons.<\/p>\n
Transformez votre <title><\/code>tag header.php<\/code>en ceci\u00a0:<\/p>\n
<title><?php wp_title(''); ?><\/title><\/code><\/pre>\n
Les passionn\u00e9s d’entre vous auront peut-\u00eatre remarqu\u00e9 que la page d’accueil ne g\u00e9n\u00e9rera pas de titre. Il s’agit du comportement standard de WordPress que nous corrigerons plus tard dans ce didacticiel (nous le ferons \u00e0 l’aide du filtre). Si vous visitez un seul article ou une seule page, vous devriez obtenir le titre de l’article.<\/p>\n
WordPress a une fonction astucieuse qui g\u00e9n\u00e8re dynamiquement un tas de classes pour la <body><\/code>balise en fonction de la page sur laquelle nous nous trouvons ; appel\u00e9 body_class<\/a>. Mettez \u00e0 jour la <body><\/code>balise header.php<\/code>dans ceci\u00a0:<\/p>\n
<body <?php body_class(); ?>><\/code><\/pre>\n
Actualisez et jetez un \u0153il \u00e0 toutes les classes ajout\u00e9es \u00e0 la <body><\/code>balise. Jetez un oeil sur diff\u00e9rentes pages (frontpage, single, cat\u00e9gorie). Toutes ces classes sont tr\u00e8s utiles pour styliser et diff\u00e9rencier diff\u00e9rentes pi\u00e8ces similaires. Vous en utiliserez tr\u00e8s probablement quelques-uns dans votre CSS.<\/p>\n
Pour suivre les bonnes pratiques HTML, nous devons \u00e9galement informer sur la langue du site dans le HTML. Pour cela, nous utilisons une fonction WordPress pour obtenir la langue \u00e0 partir des param\u00e8tres ; attributs_langue<\/a>.<\/p>\n
<html <?php language_attributes(); ?>><\/code><\/pre>\n
Et enfin, j’aimerais ajouter quelques balises m\u00e9ta et autres qui ne sont pas sp\u00e9cifiques \u00e0 WordPress, mais qui suivent les pratiques de conception Web courantes. Voici \u00e0 quoi header.php<\/code>ressemble le fichier complet\u00a0:<\/p>\n
<!DOCTYPE html>\n<html class=\"no-js\" <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?php wp_title(''); ?><\/title>\n\u00a0\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>><\/code><\/pre>\n
Pour la prochaine \u00e9tape de ce didacticiel, nous allons partir header.php<\/code>et plonger dans index.php<\/code>pour apprendre \u00e0 r\u00e9cup\u00e9rer du contenu plus dynamique, tel que des publications.<\/p>\n
Documentation sur les m\u00e9thodes utilis\u00e9es<\/h2>\n