Qu'est-ce que WP Enqueue et comment l'utilisez-vous ?

Publié: 2017-10-28

Lorsque vous apprenez le HTML pour la première fois, la seule façon d'insérer n'importe quel type d'interactivité consiste à utiliser des balises de script dans l'en-tête ou le pied de page de la page pour définir le type et la source d'un fichier JavaScript externe. (Ou si vous êtes vraiment en train d'apprendre, toute la fonction JS entre les balises de script juste là dans le corps lui-même. C'est bien pour apprendre, mais c'est une très mauvaise pratique une fois que vous passez au développement WordPress avancé. Entrez la fonction de mise en file d'attente .

Une fois que vous avez dépassé des sites Web simples d'une page, ces pratiques pour débutants peuvent créer des situations vraiment délicates. Au fur et à mesure que vous commencez à ajouter de plus en plus de JavaScript, votre site Web devient de plus en plus lent. La mise à jour prend plus de temps. Finalement, vous avez fait un gros tas de JavaScript-getti et peu importe vos efforts, ce tas de nouilles ne se démêle pas.

Heureusement, vous pouvez utiliser la fonction de mise en file d'attente de WordPress pour ajouter des styles et des scripts que le CMS prend en charge pour vous. Tout le désordre est géré pour vous. Bien que ce ne soit pas aussi simple que de coller directement le script ou les styles souhaités dans l'en-tête ou le pied de page de chaque page, c'est la bonne façon de le gérer. WordPress n'est pas très opiniâtre, il existe certainement une série de bonnes pratiques que vous devriez connaître

Et wp_enqueue_scripts est à la pointe de ces pratiques.

Quel est le gros problème ?

La principale raison pour laquelle vous voudrez utiliser wp_enqueue est que votre site fonctionne correctement et rapidement. La vitesse de la page est importante et utiliser les mêmes scripts et styles encore et encore n'aide pas. Du tout.

Heureusement, wp_enqueue est un exemple de programmation fonctionnelle. Tout cela signifie que vous écrivez un seul morceau de code à exécuter (votre extrait de code JavaScript), et vous utilisez wp_enqueue pour l'appeler au lieu d'avoir à réécrire/coller le tout à chaque fois que vous en avez besoin.

C'est. Impressionnant.

Encore plus génial, en utilisant la méthode de mise en file d'attente, WordPress lui-même insère les balises _script_ dans l'en-tête et le pied de page où elles appartiennent automatiquement, les chargeant sans avoir à les saisir séparément sur chaque page.

Syntaxe et paramètres de mise en file d'attente WP

La mise en file d'attente des scripts n'est vraiment pas si difficile. Si vous êtes suffisamment averti pour travailler avec JavaScript, les fonctions PHP que vous utilisez pour la mise en file d'attente seront un jeu d'enfant.

Dans une balise de script typique, vous importerez directement le fichier .js externe ou collerez l'intégralité du long extrait de code entre les balises elles-mêmes. (C'est aussi ce que vous faites si vous collez quelque chose dans le module de code Divi ou dans les widgets WP Custom HTML ou Text).

Vous avez juste besoin de connaître quelques paramètres de base et la syntaxe.

Le Codex donne ceci comme code de mise en file d'attente de base : 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Dans l'ensemble, c'est assez simple à décomposer en bits utilisables par paramètres.

  • wp_enqueue_script() est la fonction tout ce qui mettra tout le code dans la page où il va.
  • $handle est un nom unique pour le script lui-même.
  • $src représente l'URL du fichier .js réel que vous mettez en file d'attente.
  • $deps sont les $handle s de toutes les dépendances requises par celui-ci.
  • $ver sera le numéro de version. Si aucune n'est spécifiée, vous obtenez la version d'installation de WP ajoutée automatiquement.
  • $in_footer ou $in_header indique à WordPress où mettre votre script.

La documentation complète pour mettre les scripts en file d'attente peut être consultée dans le Codex.

Attention, étudiants : l'inscription au WP commence maintenant !

En plus de _wp_enqueue__, WP dispose également d'une méthode pratique appelée _wp_register__. Les deux méthodes utilisent les mêmes paramètres et la même syntaxe, vous obtenez donc vraiment un accord deux pour un avec la paire d'entre elles. Essentiellement, enregistrer un script revient à nommer une fonction en JavaScript.

Bien que cela ne soit pas nécessaire, l'enregistrement de vos scripts peut vous faciliter la vie car vous n'aurez pas à les déclarer en tant que dépendances ultérieurement. Ils seront déjà enregistrés. Par conséquent…_wp_register__. Une fois qu'un script est enregistré, vous pouvez le rappeler par son $handle , comme vous le verrez dans l'exemple ci-dessous.

Vous allez enregistrer votre code comme ceci : 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

Ensuite, chaque fois que vous en avez à nouveau besoin, vous pouvez toujours le rappeler comme ceci :

wp_enqueue_script( 'jquery' );

De plus, l'enregistrement signifie que vous n'avez pas à charger un script même lorsqu'il n'est pas nécessaire. WPMU a un exemple génial de création de shortcode : si vous enregistrez le script dans un shortcode qui utilise _wp_enqueue__, il ne sera utilisé que lorsque le shortcode l'est. Cependant, si vous ne l'appelez qu'en le mettant en file d'attente, il sera chargé même si le shortcode n'est pas utilisé.

Vous pouvez tout lire sur la méthode dans le Codex.

De plus, les auteurs de plugins sont tenus de mettre les scripts en file d'attente s'ils souhaitent les inclure dans le référentiel WordPress.org, donc si cela vous concerne… mieux vaut vous mettre en file d'attente.

Mettre ensemble

L'implémentation du code est simple. Déposez simplement un extrait comme celui ci-dessous dans votre functions.php . et WordPress gère le reste. Je veux dire, c'est un extrait vraiment basique pour appeler jQuery, mais vous pouvez voir comment les choses fonctionnent ensemble.

Vous utiliseriez normalement quelque chose qui ressemble à ceci : 

<script type="text/javascript" src="jquery.js"></script>

Une fois que vous aurez appris à utiliser enqueue_scripts_ , vous verrez quelque chose comme ceci : 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

Maintenant, remarquez dans le code ci-dessus comment il utilise la fonction add_scripts()_ qui fait déjà partie de WordPress pour décrire l'ordre des prochaines étapes. Tout d'abord, la fonction wp_register_ obtient tous les détails spécifiés et place le script dans le pied de page, puis utilise wp_enqueue pour l'appeler enfin une fois que tout est configuré.

Emballer

C'est vraiment tout ce qu'il y a à faire. Eh bien, ce n'est pas vrai – la mise en file d'attente est une partie assez ancrée de WP. Mais ce sont les bases qui vous poussent à faire plus avec WordPress que vous ne l'aviez peut-être auparavant.

Les bases que nous avons tous apprises sur l'insertion de scripts lorsque nous avons commencé le développement Web fonctionnent toujours, mais ce n'est pas toujours la meilleure façon de faire les choses. Une partie de la beauté de WordPress construit sur PHP réside dans le fait que vous pouvez intégrer ce type de logique dans votre travail tout en conservant la même structure de base et le même flux de travail que vous auriez eu de toute façon.

Image miniature de l'article par hanss / shutterstock.com