Dans cette leçon du didacticiel sur le thème WordPress pour les débutants, nous découvrirons les crochets dans WordPress et ajouterons quelques crochets dans notre thème qui sont nécessaires pour qu’un thème fonctionne correctement avec WordPress et les plugins. Nous commencerons également à accéder au contenu dynamique de WordPress dans notre en-tête, par exemple en obtenant automatiquement le titre de la page actuelle.
Nous devons d’abord en apprendre un peu plus sur les hooks dans WordPress. Les crochets sont une fonctionnalité 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 ?
Ne vous inquiétez pas, je vais faire court pour le moment. Nous en apprendrons plus à ce sujet plus loin dans ce tutoriel.
Crochets dans WordPress
Bref; comme WordPress exécute tout le code pour charger et afficher une page, il existe certains « points de contrôle » – que nous appelons des points d’ancrage. Ces points permettent aux développeurs de modifier ou d’ajouter leur propre code. WordPress a défini tout un tas de « points de contrôle » où, chacun avec un nom unique. Si vous connaissez son nom, vous pouvez ajouter votre propre code à ces points de contrôle. Et ainsi dire facilement à WordPress d’exécuter votre code lorsqu’il atteint ce point de contrôle dans le cadre de son processus.
Il existe deux types de crochets; actions et filtres. Les actions sont des points dans le code où vous pouvez ajouter du code personnalisé, par exemple produire quelque chose ou faire quelque chose à vos propres fins. Les filtres sont des points dans le code où vous pouvez modifier une certaine variable avant qu’elle ne soit utilisée ou sortie. Ils sont très similaires, mais les filtres sont attachés à une variable spécifique et les actions ne le sont pas.
Les plugins, les thèmes et WordPress lui-même peuvent "accrocher" leur code en utilisant add_action()des actions et add_filter()des filtres. Ces deux fonctions indiquent à WordPress d’exécuter le code hooké chaque fois que l’exécution atteint ces hooks.
Afin de définir des crochets que vous utilisez do_action()pour les actions et apply_filters()pour les filtres.
Pour tous ceux qui souhaitent en savoir plus, j’ai un autre article qui détaille les crochets dans WordPress.
Un thème WordPress doit inclure certains crochets importants spécifiques (actions). Ces crochets permettent à WordPress, aux plugins et à notre thème lui-même de s’accrocher et de faire des choses critiques. Regardons ces crochets critiques que nous devons ajouter.
Crochets d’en-tête et de pied de page du thème
Tous les thèmes WordPress doivent avoir deux crochets dans les modèles. Une action doit être placée dans l’en-tête (à l’intérieur de la <head>balise), et une autre dans le pied de page (juste avant la fermeture de la </body>balise). Ces deux crochets sont absolument nécessaires pour que WordPress, votre thème et n’importe quel plugin puissent ajouter leurs scripts et leur code de styles à votre thème.
Les crochets dont nous avons besoin sont wp_headet wp_footerpour l’en-tête et le pied de page, respectivement.
Normalement, lorsque nous voulons exécuter un hook, nous appelons do_action(<hook name>). Mais parce que ces deux crochets sont si critiques, WordPress les a simplifiés pour nous en les mettant dans un simple appel de fonction. Donc, pour ces deux crochets, vous pouvez simplement utiliser wp_head()et wp_footer(). En arrière-plan, ces deux exécutent le do_action().
Ajoutons ces deux crochets (appels de fonction) à nos modèles d’en-tête et de pied de page, et voyons ce qui se passe.
Cliquez sur Actualiser sur votre frontend. Si vous êtes connecté, vous devriez maintenant voir apparaître la barre d’administration de WordPress! Cela signifie que WordPress est désormais en mesure d’ajouter avec succès ses scripts et ses styles à votre thème.
Vous pouvez vérifier votre source HTML et voir que votre en-tête contient maintenant pas mal de code. C’est du code que vous n’avez pas ajouté à votre thème. Comme vous pouvez le voir, WordPress lui-même utilise les crochets que nous avons ajoutés pour faire ses propres choses.
Passons aux crochets et commençons à examiner comment nous pouvons récupérer dynamiquement le contenu de WordPress et le publier dans notre en-tête.
Contenu dynamique dans l’en-tête
Disons à WordPress de définir dynamiquement le titre du document (pour la <title>balise). Pour cela, nous allons utiliser une fonction (qui a un filtre d’ailleurs), appelée wp_title(). Comme nous l’avons appris ci-dessus, parce que wp_title()c’est un filtre, vous, WordPress ou les plugins pouvez modifier la sortie. Nous y ajouterons un filtre plus loin dans ce tutoriel.
La fonction wp_title()prend plusieurs arguments que vous pouvez ajuster à votre guise, mais pour l’instant j’ajouterai une chaîne vide afin qu’elle n’affiche que le titre de la page à laquelle nous nous trouvons.
Transformez votre <title>tag header.phpen ceci :
Les passionnés d’entre vous auront peut-être remarqué que la page d’accueil ne générera pas de titre. Il s’agit du comportement standard de WordPress que nous corrigerons plus tard dans ce didacticiel (nous le ferons à l’aide du filtre). Si vous visitez un seul article ou une seule page, vous devriez obtenir le titre de l’article.
WordPress a une fonction astucieuse qui génère dynamiquement un tas de classes pour la <body>balise en fonction de la page sur laquelle nous nous trouvons ; appelé body_class. Mettez à jour la <body>balise header.phpdans ceci :
Actualisez et jetez un œil à toutes les classes ajoutées à la <body>balise. Jetez un oeil sur différentes pages (frontpage, single, catégorie). Toutes ces classes sont très utiles pour styliser et différencier différentes pièces similaires. Vous en utiliserez très probablement quelques-uns dans votre CSS.
Pour suivre les bonnes pratiques HTML, nous devons également informer sur la langue du site dans le HTML. Pour cela, nous utilisons une fonction WordPress pour obtenir la langue à partir des paramètres ; attributs_langue.
Et enfin, j’aimerais ajouter quelques balises méta et autres qui ne sont pas spécifiques à WordPress, mais qui suivent les pratiques de conception Web courantes. Voici à quoi header.phpressemble le fichier complet :
Pour la prochaine étape de ce didacticiel, nous allons partir header.phpet plonger dans index.phppour apprendre à récupérer du contenu plus dynamique, tel que des publications.