web-dev-qa-db-fra.com

Quel est le moyen préféré pour ajouter des fichiers javascript personnalisé sur le site?

J'ai déjà ajouté mes scripts, mais je voulais connaître la méthode préférée.
Je viens de placer une balise <script> directement dans le header.php de mon modèle.

Existe-t-il une méthode préférée pour insérer des fichiers js externes ou personnalisés?
Comment lier un fichier js à une seule page? (J'ai la page d'accueil en tête)

theme-developmentjavascript
68
naugtur

Utilisez wp_enqueue_script() dans votre thème

La réponse de base consiste à utiliser wp_enqueue_script() dans un point d'ancrage wp_enqueue_scripts pour l'interface admin_enqueue_scripts pour l'administrateur. Cela pourrait ressembler à quelque chose comme ceci (qui suppose que vous appelez depuis le fichier functions.php 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 à la fois jQuery et jQuery UI Sortable à partir de liste des scripts par défaut inclus avec WordPresset _ vous voulez que votre script en dépende? Facile, il suffit d’inclure les deux premiers scripts à l’aide de les poignées définies dans WordPress et pour votre script, fournissez un troisième paramètre à wp_enqueue_script(), qui est un tableau des poignées de script utilisées par chaque script, ainsi:

<?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 fonction plugins_url() 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 above nous avons donné à notre plugin un numéro de version et l’avons passé comme 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

Le 1re règle de Web Performance dit: Réduire les requêtes HTTP aussi, autant que possible, limitez le nombre de scripts à charger uniquement si nécessaire. Par exemple, si vous n'avez besoin que de votre script dans l'administrateur, limitez-le aux pages d'administration à l'aide du hook admin_enqueue_scripts:

<?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, il existe un cinquième paramètre de wp_enqueue_script() qui 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 le soit effectivement appelle le wp_footer crochet comme tous les 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 contient un excellent article intitulé Comment: charger JavaScript avec votre plugin WordPress qui détaille plus.

Désactiver les scripts pour prendre le contrôle

Justin Tadlock a un article de Nice intitulé Comment désactiver les scripts et les styles au cas où vous voudriez:

  1. Combinez plusieurs fichiers en un seul fichier (le kilométrage peut varier avec JavaScript ici).
  2. Chargez les fichiers uniquement sur les pages que nous utilisons le script ou le style.
  3. 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é Méthode recommandée pour ajouter du code JavaScript aux plugins WordPress dans lequel il explique comment utiliser wp_localize_script() pour vous permettre de définir la valeur des variables de votre serveur PHP à être utilisé plus tard dans votre Javascript côté client.

Contrôle vraiment fin avec une wp_print_scripts()

Enfin, si vous avez besoin d’un contrôle vraiment précis, vous pouvez consulter wp_print_scripts() comme indiqué dans Beer Planet dans un article intitulé Comment inclure CSS et JavaScript sous condition et uniquement lorsque les articles le nécessitent .

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.

78
MikeSchinkel

Pour complimenter Mikes de la merveilleuse illustration de l’utilisation des files d’attente, je tiens à souligner que les scripts inclus en tant que dépendances n’ont pas besoin d’être mis en file d'attente ...

J'utiliserai l'exemple sous les scripts dans un plugin dans la réponse de Mike.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

Cela peut être réduit pour lire ..

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

Lorsque vous définissez des dépendances, WordPress les trouve et les met en file d'attente pour votre script. Vous n'avez donc pas besoin d'appeler de manière indépendante ces scripts.

De plus, certains d'entre vous se demandent peut-être si la définition de plusieurs dépendances peut entraîner la sortie de scripts dans le mauvais ordre, laissez-moi vous donner un exemple.

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

Si le script deux dépend du script trois (c.-à-d. Que le script trois doit être chargé en premier), cela n'a pas d'importance, WordPress déterminera les priorités de mise en file d'attente pour ces scripts et les affichera dans le bon ordre. En bref, tout se règle automatiquement. pour vous par WordPress.

11
t31os

Pour les petits morceaux de script, que vous pouvez ne pas vouloir inclure dans un fichier séparé, par exemple parce qu'ils sont générés dynamiquement, WordPress 4.5 et d'autres offres wp_add_inline_script . Cette fonction verrouille le script sur un autre script.

Supposons, par exemple, que vous développiez un thème et que vous souhaitiez que votre client puisse insérer ses propres scripts (tels que Google Analytics ou AddThis) via la page des options. Vous pouvez ensuite utiliser wp_add_inline_script pour verrouiller ce script sur votre fichier js principal (disons mainjs) comme ceci:

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);
0
cjbj

Ma méthode préférée est d'obtenir de bonnes performances. Par conséquent, plutôt que d'utiliser wp_enqueue_script, j'utilise HEREDOC avec l'API Fetch pour tout charger de manière asynchrone en parallèle:

$jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$jquery_dependent_script_paths = [
  get_theme_file_uri( '/assets/js/global.js' ),
  get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
  get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
  get_theme_file_uri( '/assets/js/navigation.js' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.Push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.Push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.Push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
})();
</script>
EOD;

Et ensuite, insérez-les dans la tête, parfois avec des styles comme celui-ci:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

Il en résulte une chute d'eau qui ressemble à ceci, chargeant tout en même temps mais contrôlant l'ordre d'exécution:

 enter image description here 

Remarque: Ceci nécessite l'utilisation de l'API Fetch, qui n'est pas disponible dans tous les navigateurs.

0
Josh Habdas