Accentsconagua

Mise en file d'attente JS et CSS conditionnelle sur des pages frontales

Code
Share

Nous l'avons lu à plusieurs reprises - un bon citoyen WordPress ne charge son code JavaScript que là où il est nécessaire. Cette pratique minimise les temps de chargement du site et les conflits avec d'autres scripts. Cependant, la plupart des articles ne traitent que de l'utilisation de wp_enqueue_script pour le chargement conditionnel de JavaScript dans le contexte de l'administrateur WordPress, des pages d'administration du plug-in ou des pages front-end dans leur ensemble. Mais qu'en est-il d'isoler notre JavaScript à un particulier l'extrémité avant page? Nous pourrions potentiellement avoir envie de si WordPress fournit une API utile avec un filtre pour gérer ce genre de choses sans problème. si - alors jetons un coup d'oeil sous le capot.

"un bon citoyen WordPress charge uniquement son JavaScript là où il le faut"

Sous la capuche


Chargeur de modèles

Lorsqu'une page WordPress est demandée par un lecteur, le chargeur de modèles WordPress vérifie si le modèle approprié existe et une fonction nommée get_query_template est appelé. Cette fonction localise le modèle approprié en fonction de la demande de page WordPress et renvoie le chemin d'accès complet au modèle. Cependant, avant de renvoyer le chemin, cela permet de modifier la sortie à l’aide de la touche $ type _template filtre. $ type est le nom de fichier du modèle sans l'extension.


get_query_template Une fonction

Donc, si un lecteur demandait un page de post unique sur un site qui a utilisé le thème Twenty Eleven, $ type évaluerait à 'unique' et nous pourrions utiliser un filtre nommé 'single_template' pour modifier le chemin d'accès au modèle de publication unique avant qu'il ne soit renvoyé pour être chargé par WordPress. Ce filtre ressemblerait à ceci:

add_filter ('single_template', 'benchpress_single_template'); function benchpress_single_template ($ template_path) // on fait quelque chose ici return $ template_path;

et nous donne exactement ce dont nous avons besoin: un moyen de cibler chaque type de fichier / modèle de page spécifique afin d’isoler notre code JavaScript de certaines pages frontales de WordPress. Tout fichier de page / modèle peut maintenant être ciblé en utilisant simplement un filtre avec le nom du fichier de modèle. Impressionnant!

Maintenant mettons-les ensemble, étape par étape.

Mettre ensemble

Étape 1 Ajoutez le filtre approprié à functions.php

Rappelez-vous que le nom du filtre sera le nom du fichier modèle sans l'extension. Donc, en utilisant le thème Twenty Eleven et désirant cibler notre JavaScript à la auteur pages uniquement, nous ajouterions le code suivant à notre functions.php fichier:

add_filter ('author_template', 'benchpress_author_template');

Étape 2 Mettez en file d'attente nos fichiers JavaScript (et CSS) dans la fonction de rappel du filtre

function benchpress_author_template ($ template_path) wp_enqueue_script ('nom unique du script', get_stylesheet_directory_uri (). 'chemin / vers / script'); wp_enqueue_style ('nom unique de la feuille de style', get_stylesheet_directory_uri (). 'chemin / vers / feuille de style'); return $ template_path;

Notez que le filtre passe la valeur du chemin du gabarit à notre rappel et nous retournons $ template_path sains et saufs parce que nous n'avons pas besoin de le changer.

Qu'en est-il du chargement conditionnel de JavaScript généré dans mon PHP?

J'ai vu cette question et bien que je ne sois pas sûr que ce soit le cas meilleur Ainsi, voici une façon de gérer cela.

Ajoutez la ligne suivante à la fonction de rappel du filtre:

add_action ('wp_head', 'benchpress_dynamic_js');

Ajoutez ensuite votre fonction de rappel pour le wp_head filtre:

fonction benchpress_dynamic_js () if (! is_admin ()) echo '';

Donc le code complet ressemblera à ceci:

add_filter ('author_template', 'benchpress_author_template'); function benchpress_author_template ($ template_path) wp_enqueue_script ('nom unique du script', get_stylesheet_directory_uri (). 'chemin / vers / script'); wp_enqueue_style ('nom unique de la feuille de style', get_stylesheet_directory_uri (). 'chemin / vers / feuille de style'); add_action ('wp_head', 'benchpress_dynamic_js'); return $ template_path;  function benchpress_dynamic_js () if (! is_admin ()) echo '';

Résumé

Références dans cet article

Fonctions WordPress

  • wp_enqueue_script
  • get_query_template
  • add_filter
  • wp_enqueue_style
  • is_admin

Filtres WordPress

  • $ type _template
  • wp_head

Fichiers de modèle WordPress

  • single.php
  • author.php
Code
×