{"id":234210,"date":"2023-02-13T17:32:00","date_gmt":"2023-02-13T14:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234210"},"modified":"2022-11-12T00:25:44","modified_gmt":"2022-11-11T21:25:44","slug":"tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-6-fonctions-dun-theme-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-6-fonctions-dun-theme-php\/","title":{"rendered":"Tutoriel sur le th\u00e8me WordPress pour les d\u00e9butants \u2013 Partie 6 : Fonctions d’un th\u00e8me.php"},"content":{"rendered":"\n

Aujourd’hui, nous allons apprendre o\u00f9 et comment ajouter du code en dehors des mod\u00e8les de notre th\u00e8me. Nous faisons cela en ajoutant le fichier du th\u00e8me functions.php<\/code>. En cours de route, nous apprendrons \u00e9galement comment ajouter correctement vos feuilles de style et vos scripts.<\/p>\n

Le fichier functions.php d’un th\u00e8me<\/h2>\n

Un th\u00e8me a besoin d’un endroit pour placer du code qui ne fait pas partie des mod\u00e8les. Il y a toujours un tas de code que tous les th\u00e8mes doivent ajouter pour g\u00e9rer les fonctionnalit\u00e9s. Par exemple, l’activation de la fonctionnalit\u00e9 d’images en vedette de WordPress (avez-vous remarqu\u00e9 qu’elle manquait\u00a0?), la prise en charge des menus, des widgets, l’ajout de feuilles de style et de scripts (de la bonne mani\u00e8re), etc.<\/p>\n

Ce fichier est functions.php<\/code>. WordPress charge automatiquement et toujours ce fichier s’il existe dans votre th\u00e8me. Il est toujours charg\u00e9 \u00e0 la fois en admin et en frontend.<\/p>\n

Ajout d’un fichier functions.php \u00e0 notre th\u00e8me<\/h2>\n

Cr\u00e9ons un nouveau fichier vide dans notre dossier de th\u00e8me racine et nommons-le functions.php<\/code>.<\/p>\n

Dans ce fichier, commencez imm\u00e9diatement par une balise PHP d’ouverture (<?php<\/code>) et n’incluez pas la balise de fermeture<\/strong>. Le functions.php<\/code>fichier est destin\u00e9 au code PHP, pas au HTML. Votre th\u00e8me peut casser (ou m\u00eame simplement agir bizarrement) si vous avez des caract\u00e8res ou des retours \u00e0 la ligne en dehors des balises PHP dans ce fichier. Vous pouvez \u00e9videmment sortir des balises PHP pour g\u00e9n\u00e9rer du HTML, mais cela doit \u00eatre fait \u00e0 l’int\u00e9rieur de fonctions ou de crochets. Permettez-moi d’expliquer cela avec une exp\u00e9rience.<\/p>\n

Testons ce fichier pour voir comment cela fonctionne. \u00c0 l’ int\u00e9rieur functions.php<\/code>, \u00e9crivez un \u00e9cho d’un texte factice\u00a0:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
Actualisez votre interface. Le texte factice appara\u00eet. Mais si vous inspectez ou affichez la source HTML, vous verrez que le texte appara\u00eet avant d’ouvrir <html><\/code>. Cela rend le code HTML compl\u00e8tement invalide\u00a0!<\/p>\n
\"Tutoriel<\/a><\/p>\n
Acc\u00e9dez \u00e0 votre panneau d’administration et appuyez sur Actualiser. Il fait la m\u00eame chose ici (il peut \u00eatre cach\u00e9 derri\u00e8re la barre d’administration, mais il est l\u00e0 dans le HTML).<\/p>\n
Comme vous pouvez le voir, tout code dans vos functions.php<\/code>charges avant toute autre chose dans nos mod\u00e8les. Par cons\u00e9quent, en r\u00e8gle g\u00e9n\u00e9rale, toute sortie (HTML en dehors des balises PHP ou echo<\/code>) doit \u00eatre \u00e0 l’int\u00e9rieur de fonctions qui seront ex\u00e9cut\u00e9es au bon moment, normalement accroch\u00e9es \u00e0 des actions ou \u00e0 des filtres.<\/p>\n
Rappelez-vous quand nous avons appris et ajout\u00e9 des crochets dans la partie 3<\/a> du didacticiel sur le th\u00e8me WordPress pour les d\u00e9butants. La fa\u00e7on dont nous ex\u00e9cutons du code sur un crochet consiste \u00e0 attacher une fonction au crochet avec add_action()<\/code>. Testons autre chose\u00a0; Cr\u00e9ons une fonction accroch\u00e9e \u00e0 un crochet que nous avons d\u00e9j\u00e0 d\u00e9fini dans nos mod\u00e8les\u00a0; wp_footer<\/code>.<\/p>\n
functions.php<\/code>Supprimez le que nous avons echo<\/code>ajout\u00e9 \u00e0 des fins de test et \u00e9crivez \u00e0 la place\u00a0:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Appuyez sur rafra\u00eechir dans le frontend et voyez que la cha\u00eene appara\u00eet bien \u00e0 l’endroit exact que vous avez d\u00e9fini wp_footer<\/code>, juste avant la fermeture <\/body><\/code>. Notez \u00e9galement que cela ne fera pas \u00e9cho \u00e0 quoi que ce soit dans l’administration. C’est parce wp_footer<\/code>qu’il s’agit d’un hook qui n’est ex\u00e9cut\u00e9 qu’en frontend.<\/p>\n
Faisons nos premi\u00e8res op\u00e9rations correctes en functions.php<\/code>!<\/p>\n
Remarque: En PHP, il n’est pas possible d’avoir deux fonctions portant exactement le m\u00eame nom. Cela inclut les noms de fonction dans WordPress, votre th\u00e8me et tout plugin activ\u00e9! Suivez les meilleures pratiques et pr\u00e9fixez vos fonctions avec votre slug de th\u00e8me, comme dans l’exemple ci-dessus: " wptutorial_<function_name><\/code>". Cela emp\u00eache consid\u00e9rablement WordPress de planter fatalement \u00e0 cause de noms de fonctions identiques.<\/p>\n
Remarque 2: Peu importe l’ordre dans lequel vous ajoutez des fonctions et des crochets dans votre fichier functions.php<\/code>. N’oubliez pas que les crochets sont de toute fa\u00e7on ex\u00e9cut\u00e9s \u00e0 certains points de contr\u00f4le, et non dans l’ordre dans lequel ils se trouvent functions.php<\/code>. La seule exception est si vous incluez d’autres fichiers ou si vous initialisez vos propres classes.<\/p>\n
La bonne fa\u00e7on d’ajouter des styles et des scripts vs la mauvaise fa\u00e7on<\/h2>\n
Certains d’entre vous se souviendront peut-\u00eatre de la partie 3<\/a> o\u00f9 nous avons ajout\u00e9 le wp_head<\/code>crochet dans notre fichier header.php<\/code>. Apr\u00e8s cela, WordPress a pu charger ses styles et ses scripts, y compris la barre d’administration. Vous pensez peut-\u00eatre que pour ajouter nos feuilles de style, nous devons cr\u00e9er une fonction accroch\u00e9e wp_head<\/code>et g\u00e9n\u00e9rer le <link><\/code>pour la feuille de style\u2026 Habituellement, vous auriez raison !<\/p>\n
Cependant, dans WordPress, il existe une mani\u00e8re sp\u00e9ciale d’ajouter des scripts et des styles. Il s’agit principalement de g\u00e9rer l’ordre de chargement et d’\u00e9viter de charger des biblioth\u00e8ques en double. Par exemple, en tant qu’auteur de th\u00e8me, vous souhaiterez peut-\u00eatre ajouter des Javascripts qui d\u00e9pendent de la jQuery<\/code>biblioth\u00e8que. Ensuite, vous devez vous assurer qu’il jQuery<\/code>est charg\u00e9 avant vos fichiers. Mais WordPress et tous les plugins ont le m\u00eame besoin, s’assurer jQuery<\/code>qu’ils sont \u00e9galement charg\u00e9s avant leurs scripts. Vous ne pouvez pas charger la jQuery<\/code>biblioth\u00e8que plusieurs fois car cela cause des probl\u00e8mes. WordPress a donc un moyen de g\u00e9rer dans quel ordre<\/strong> les scripts et les feuilles de style sont charg\u00e9s.<\/p>\n
Ajouter des feuilles de style (dans le bon sens)<\/h2>\n
Pour ajouter des styles et des javascripts, nous utilisons un hook appel\u00e9 wp_enqueue_scripts<\/code>. Oui, vous utilisez \u00e9galement ce crochet pour les styles, malgr\u00e9 son nom. L’ajout de scripts et de styles est appel\u00e9 "mise en file d’attente" – comme mettre dans une file d’attente. Mettons en file d’attente (ajoutons) notre feuille de style en utilisant la fonction wp_enqueue_style<\/a> dans notre functions.php<\/code>:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
La wp_enqueue_style<\/code>fonction prend au minimum deux param\u00e8tres. Le premier est un nom unique (handle ou "ID de slug"), et le second l’emplacement du fichier. Le handle doit \u00eatre unique car c’est l’identifiant que WordPress utilise pour d\u00e9terminer s’il y a des doublons.<\/p>\n
En ce qui concerne le retour du chemin vers votre th\u00e8me, de nombreuses fonctions sont disponibles. Ci-dessus, j’ai utilis\u00e9 get_stylesheet_directory_uri()<\/code>qui renvoie l’URL de votre dossier de th\u00e8me, puis j’ai ajout\u00e9 le reste du chemin \u00e0 notre feuille de style.<\/p>\n
PS: WordPress propose une fonction distincte pour renvoyer l’URL compl\u00e8te vers votre th\u00e8me style.css<\/code>: get_stylesheet_uri()<\/code>. J’ai utilis\u00e9 l’autre fonction ci-dessus car il est plus utile de se familiariser avec. Vous l’utiliserez pour tous les autres fichiers que vous devez mettre en file d’attente.<\/p>\n
La fonction wp_enqueue_style<\/code>accepte des param\u00e8tres plus utiles, tels que les d\u00e9pendances (que d’autres fichiers CSS doivent \u00eatre charg\u00e9s avant) et le num\u00e9ro de version (utile \u00e0 des fins de mise en cache).<\/p>\n
Actualisez votre frontend et voyez que votre feuille de style est charg\u00e9e dans <head><\/code>la balise\u00a0!<\/p>\n
Si vous faites partie de ceux qui ont h\u00e2te de rendre votre th\u00e8me plus joli tout en le codant, voici votre chance. Je vous encourage \u00e0 commencer \u00e0 d\u00e9finir votre code HTML, vos classes et vos wrappers et \u00e0 ajouter du style dans votre fichier style.css<\/code>. Nous ajouterons plus de contenu qui n\u00e9cessitera un style au fur et \u00e0 mesure de cette s\u00e9rie de didacticiels.<\/p>\n
Ajouter des scripts (dans le bon sens)<\/h2>\n
Voyons comment nous ajoutons des javascripts \u00e0 notre th\u00e8me. Cela se fait en utilisant le m\u00eame crochet (vous pouvez donc tout mettre dans une seule fonction). Mais pour les scripts, nous utilisons une fonction l\u00e9g\u00e8rement diff\u00e9rente.<\/p>\n
Pour mettre un script en file d’attente, vous utilisez wp_enqueue_script()<\/code>. Les param\u00e8tres sont les m\u00eames que wp_enqueue_style()<\/code>. Le premier est le handle unique et le second est le chemin d’acc\u00e8s au script. Le troisi\u00e8me (facultatif) est le tableau des d\u00e9pendances. Comme quatri\u00e8me param\u00e8tre (facultatif), vous d\u00e9finissez le num\u00e9ro de version. Et enfin cinqui\u00e8me (facultatif) vous d\u00e9finissez si le script doit \u00eatre charg\u00e9 ou non dans la <head><\/code>balise ou \u00e0 la fin de <\/body><\/code>.<\/p>\n
WordPress est livr\u00e9 avec une large gamme de biblioth\u00e8ques d\u00e9j\u00e0 incluses. Ils ne sont pas toujours tous charg\u00e9s, mais disponibles si vous en avez besoin. Si vous souhaitez ajouter un script de biblioth\u00e8que commun, v\u00e9rifiez d’abord si WordPress l’a d\u00e9j\u00e0<\/a>. Les exemples sont jQuery, tous les modules jQuery UI, Underscore et Backbone.<\/p>\n
Si vous ajoutez l’un des scripts inclus dans WordPress en tant que d\u00e9pendance, vous n’avez pas besoin de mettre ce script en file d’attente\u00a0! Faisons cela en pratique.<\/p>\n
Cr\u00e9ez un dossier assets<\/code>et \u00e0 l’int\u00e9rieur un sous-dossier js<\/code>dans notre dossier de th\u00e8me, puis ajoutez un nouveau main.js<\/code>fichier vide. Disons que ce script n\u00e9cessite la jQuery<\/code>biblioth\u00e8que, nous le d\u00e9finissons donc comme d\u00e9pendance. Nous savons que WordPress est livr\u00e9 avec des jQuery<\/code>bundles et que le handle est jquery<\/code>. Nous allons mettre notre script en file d’attente comme ceci\u00a0:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Si vous actualisez le frontend et v\u00e9rifiez votre code source, vous devriez voir que votre script, main.js<\/code>, est ajout\u00e9, mais aussi que la jQuery<\/code>biblioth\u00e8que est charg\u00e9e. Et jQuery<\/code>est charg\u00e9 avant votre fichier !<\/p>\n
\"Tutoriel<\/a><\/p>\n
Vous avez maintenant appris \u00e0 ajouter des styles et des scripts. Pour ajouter plus de fichiers, ajoutez un wp_enqueue_style()<\/code>ou wp_enqueue_script()<\/code>pour chaque nouveau fichier.<\/p>\n
Documentation sur les m\u00e9thodes utilis\u00e9es<\/h2>\n