Tutoriel sur le thème WordPress pour les débutants – Partie 6 : Fonctions d’un thème.php
Aujourd’hui, nous allons apprendre où et comment ajouter du code en dehors des modèles de notre thème. Nous faisons cela en ajoutant le fichier du thème functions.php. En cours de route, nous apprendrons également comment ajouter correctement vos feuilles de style et vos scripts.
Le fichier functions.php d’un thème
Un thème a besoin d’un endroit pour placer du code qui ne fait pas partie des modèles. Il y a toujours un tas de code que tous les thèmes doivent ajouter pour gérer les fonctionnalités. Par exemple, l’activation de la fonctionnalité d’images en vedette de WordPress (avez-vous remarqué qu’elle manquait ?), la prise en charge des menus, des widgets, l’ajout de feuilles de style et de scripts (de la bonne manière), etc.
Ce fichier est functions.php. WordPress charge automatiquement et toujours ce fichier s’il existe dans votre thème. Il est toujours chargé à la fois en admin et en frontend.
Ajout d’un fichier functions.php à notre thème
Créons un nouveau fichier vide dans notre dossier de thème racine et nommons-le functions.php.
Dans ce fichier, commencez immédiatement par une balise PHP d’ouverture (<?php) et n’incluez pas la balise de fermeture. Le functions.phpfichier est destiné au code PHP, pas au HTML. Votre thème peut casser (ou même simplement agir bizarrement) si vous avez des caractères ou des retours à la ligne en dehors des balises PHP dans ce fichier. Vous pouvez évidemment sortir des balises PHP pour générer du HTML, mais cela doit être fait à l’intérieur de fonctions ou de crochets. Permettez-moi d’expliquer cela avec une expérience.
Testons ce fichier pour voir comment cela fonctionne. À l’ intérieur functions.php, écrivez un écho d’un texte factice :
<?php
echo 'This is an experiment';Actualisez votre interface. Le texte factice apparaît. Mais si vous inspectez ou affichez la source HTML, vous verrez que le texte apparaît avant d’ouvrir <html>. Cela rend le code HTML complètement invalide !
Accédez à votre panneau d’administration et appuyez sur Actualiser. Il fait la même chose ici (il peut être caché derrière la barre d’administration, mais il est là dans le HTML).
Comme vous pouvez le voir, tout code dans vos functions.phpcharges avant toute autre chose dans nos modèles. Par conséquent, en règle générale, toute sortie (HTML en dehors des balises PHP ou echo) doit être à l’intérieur de fonctions qui seront exécutées au bon moment, normalement accrochées à des actions ou à des filtres.
Rappelez-vous quand nous avons appris et ajouté des crochets dans la partie 3 du didacticiel sur le thème WordPress pour les débutants. La façon dont nous exécutons du code sur un crochet consiste à attacher une fonction au crochet avec add_action(). Testons autre chose ; Créons une fonction accrochée à un crochet que nous avons déjà défini dans nos modèles ; wp_footer.
functions.phpSupprimez le que nous avons echoajouté à des fins de test et écrivez à la place :
<?php
add_action('wp_footer', 'wptutorial_print_footer');
function wptutorial_print_footer() {
echo 'This sentence will appear in footer!';
}Appuyez sur rafraîchir dans le frontend et voyez que la chaîne apparaît bien à l’endroit exact que vous avez défini wp_footer, juste avant la fermeture </body>. Notez également que cela ne fera pas écho à quoi que ce soit dans l’administration. C’est parce wp_footerqu’il s’agit d’un hook qui n’est exécuté qu’en frontend.
Faisons nos premières opérations correctes en functions.php!
Remarque: En PHP, il n’est pas possible d’avoir deux fonctions portant exactement le même nom. Cela inclut les noms de fonction dans WordPress, votre thème et tout plugin activé! Suivez les meilleures pratiques et préfixez vos fonctions avec votre slug de thème, comme dans l’exemple ci-dessus: " wptutorial_<function_name>". Cela empêche considérablement WordPress de planter fatalement à cause de noms de fonctions identiques.
Remarque 2: Peu importe l’ordre dans lequel vous ajoutez des fonctions et des crochets dans votre fichier functions.php. N’oubliez pas que les crochets sont de toute façon exécutés à certains points de contrôle, et non dans l’ordre dans lequel ils se trouvent functions.php. La seule exception est si vous incluez d’autres fichiers ou si vous initialisez vos propres classes.
La bonne façon d’ajouter des styles et des scripts vs la mauvaise façon
Certains d’entre vous se souviendront peut-être de la partie 3 où nous avons ajouté le wp_headcrochet dans notre fichier header.php. Après cela, WordPress a pu charger ses styles et ses scripts, y compris la barre d’administration. Vous pensez peut-être que pour ajouter nos feuilles de style, nous devons créer une fonction accrochée wp_headet générer le <link>pour la feuille de style… Habituellement, vous auriez raison !
Cependant, dans WordPress, il existe une manière spéciale d’ajouter des scripts et des styles. Il s’agit principalement de gérer l’ordre de chargement et d’éviter de charger des bibliothèques en double. Par exemple, en tant qu’auteur de thème, vous souhaiterez peut-être ajouter des Javascripts qui dépendent de la jQuerybibliothèque. Ensuite, vous devez vous assurer qu’il jQueryest chargé avant vos fichiers. Mais WordPress et tous les plugins ont le même besoin, s’assurer jQueryqu’ils sont également chargés avant leurs scripts. Vous ne pouvez pas charger la jQuerybibliothèque plusieurs fois car cela cause des problèmes. WordPress a donc un moyen de gérer dans quel ordre les scripts et les feuilles de style sont chargés.
Ajouter des feuilles de style (dans le bon sens)
Pour ajouter des styles et des javascripts, nous utilisons un hook appelé wp_enqueue_scripts. Oui, vous utilisez également ce crochet pour les styles, malgré son nom. L’ajout de scripts et de styles est appelé "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 dans notre functions.php:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
}La wp_enqueue_stylefonction prend au minimum deux paramètres. Le premier est un nom unique (handle ou "ID de slug"), et le second l’emplacement du fichier. Le handle doit être unique car c’est l’identifiant que WordPress utilise pour déterminer s’il y a des doublons.
En ce qui concerne le retour du chemin vers votre thème, de nombreuses fonctions sont disponibles. Ci-dessus, j’ai utilisé get_stylesheet_directory_uri()qui renvoie l’URL de votre dossier de thème, puis j’ai ajouté le reste du chemin à notre feuille de style.
PS: WordPress propose une fonction distincte pour renvoyer l’URL complète vers votre thème style.css: get_stylesheet_uri(). J’ai utilisé 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.
La fonction wp_enqueue_styleaccepte des paramètres plus utiles, tels que les dépendances (que d’autres fichiers CSS doivent être chargés avant) et le numéro de version (utile à des fins de mise en cache).
Actualisez votre frontend et voyez que votre feuille de style est chargée dans <head>la balise !
Si vous faites partie de ceux qui ont hâte de rendre votre thème plus joli tout en le codant, voici votre chance. Je vous encourage à commencer à définir votre code HTML, vos classes et vos wrappers et à ajouter du style dans votre fichier style.css. Nous ajouterons plus de contenu qui nécessitera un style au fur et à mesure de cette série de didacticiels.
Ajouter des scripts (dans le bon sens)
Voyons comment nous ajoutons des javascripts à notre thème. Cela se fait en utilisant le même crochet (vous pouvez donc tout mettre dans une seule fonction). Mais pour les scripts, nous utilisons une fonction légèrement différente.
Pour mettre un script en file d’attente, vous utilisez wp_enqueue_script(). Les paramètres sont les mêmes que wp_enqueue_style(). Le premier est le handle unique et le second est le chemin d’accès au script. Le troisième (facultatif) est le tableau des dépendances. Comme quatrième paramètre (facultatif), vous définissez le numéro de version. Et enfin cinquième (facultatif) vous définissez si le script doit être chargé ou non dans la <head>balise ou à la fin de </body>.
WordPress est livré avec une large gamme de bibliothèques déjà incluses. Ils ne sont pas toujours tous chargés, mais disponibles si vous en avez besoin. Si vous souhaitez ajouter un script de bibliothèque commun, vérifiez d’abord si WordPress l’a déjà. Les exemples sont jQuery, tous les modules jQuery UI, Underscore et Backbone.
Si vous ajoutez l’un des scripts inclus dans WordPress en tant que dépendance, vous n’avez pas besoin de mettre ce script en file d’attente ! Faisons cela en pratique.
Créez un dossier assetset à l’intérieur un sous-dossier jsdans notre dossier de thème, puis ajoutez un nouveau main.jsfichier vide. Disons que ce script nécessite la jQuerybibliothèque, nous le définissons donc comme dépendance. Nous savons que WordPress est livré avec des jQuerybundles et que le handle est jquery. Nous allons mettre notre script en file d’attente comme ceci :
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery']);
}Si vous actualisez le frontend et vérifiez votre code source, vous devriez voir que votre script, main.js, est ajouté, mais aussi que la jQuerybibliothèque est chargée. Et jQueryest chargé avant votre fichier !
Vous avez maintenant appris à ajouter des styles et des scripts. Pour ajouter plus de fichiers, ajoutez un wp_enqueue_style()ou wp_enqueue_script()pour chaque nouveau fichier.