Utilisez wp_enqueue_script()dans votre thème
La réponse de base est d'utiliser wp_enqueue_script()dans un wp_enqueue_scriptscrochet pour front-end admin_enqueue_scriptspour admin. Cela pourrait ressembler à quelque chose comme ceci (qui suppose que vous appelez depuis le functions.phpfichier de votre thème ; notez comment je référence le répertoire de la feuille de style):
<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}
C'est la base.
Scripts dépendants prédéfinis et multiples
Mais supposons que vous souhaitiez inclure jQuery et jQuery UI Sortable dans la liste des scripts par défaut fournis avec WordPress et que vous souhaitiez que votre script en dépende? Facile, il suffit d' inclure les deux premiers scripts en utilisant les prédéfinis poignées définies dans WordPress et pour votre script fournir un 3ème paramètre wp_enqueue_script()qui est un tableau du script utilisé par poignées chaque script, comme suit:
<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}
Scripts dans un plugin
Et si vous voulez le faire dans un plugin à la place? Utilisez la plugins_url()fonction pour spécifier l'URL de votre fichier Javascript:
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );
function my_plugin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}
Versions de vos scripts
Notez également que ci - dessus, nous avons attribué à notre plug-in un numéro de version que nous lui avons transmis en tant que 4ème paramètre wp_enqueue_script(). Le numéro de version est indiqué dans le code source sous forme d'argument de requête dans l'URL du script et force le navigateur à télécharger à nouveau le fichier éventuellement mis en cache si la version est modifiée.
Charger des scripts uniquement sur les pages où cela est nécessaire
La 1ère règle de Web Performance stipule de minimiser les requêtes HTTP afin de limiter le plus possible le chargement des scripts, le cas échéant. Par exemple, si vous n'avez besoin que de votre script dans l'administrateur, limitez-le aux pages d'administration à l'aide du admin_enqueue_scriptscrochet:
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}
Chargez vos scripts dans le pied de page
Si vos scripts font partie de ceux qui doivent être chargés dans le pied de page, un cinquième paramètre wp_enqueue_script()indique à WordPress de le retarder et de le placer dans le pied de page (en supposant que votre thème ne se soit pas mal comporté et qu'il appelle effectivement le hook wp_footer comme tout le monde). bons thèmes WordPress devraient ):
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}
Contrôle plus fin du grain
Si vous avez besoin d'un contrôle plus précis que cela, Ozh a publié un article intitulé Comment: charger du code JavaScript avec votre plug - in WordPress, qui détaille davantage.
Désactiver les scripts pour prendre le contrôle
Justin Tadlock a un bel article intitulé Comment désactiver les scripts et les styles au cas où vous souhaiteriez:
- Combinez plusieurs fichiers en un seul fichier (le kilométrage peut varier avec JavaScript ici).
- Chargez les fichiers uniquement sur les pages que nous utilisons le script ou le style.
- Ne plus avoir à utiliser! Important dans notre fichier style.css pour effectuer de simples ajustements CSS.
Passer des valeurs de PHP à JS avec wp_localize_script()
Sur son blog, Vladimir Prelovac a publié un excellent article intitulé " Meilleure pratique pour ajouter du code JavaScript aux plugins WordPress", dans lequel il discute de l'utilisation wp_localize_script()afin de vous permettre de définir la valeur des variables dans votre PHP côté serveur pour une utilisation ultérieure dans votre code Javascript côté client.
Contrôle vraiment fin avec grain wp_print_scripts()
Et enfin, si vous avez besoin d'un contrôle vraiment précis, vous pouvez vous pencher wp_print_scripts()sur Beer Planet dans un article intitulé Comment inclure CSS et JavaScript de manière conditionnelle et uniquement lorsque cela est nécessaire .
Epiloque
C’est à peu près tout pour les meilleures pratiques d’inclusion de fichiers Javascript avec WordPress. Si j'ai oublié quelque chose (que j'ai probablement), assurez-vous de me le faire savoir dans les commentaires afin que je puisse ajouter une mise à jour pour les futurs voyageurs.
