Quelle est la meilleure façon d'ajouter des fichiers javascript personnalisés sur le site?

Question

Je l'ai déjà ajouté mes scripts, mais je voulais connaître la façon préférée.
Je viens de mettre une étiquette <script> directement dans le header.php de mon modèle.

Y at-il une méthode préférée d'insérer des fichiers js externes ou personnalisés?
Comment puis-je lier un fichier js à une seule page? (J'ai la page d'accueil à l'esprit)

Answer 1

Utilisez wp_enqueue_script() dans votre thème

La réponse de base est d'utiliser wp_enqueue_script() dans un crochet wp_enqueue_scripts pour admin_enqueue_scripts frontal pour admin. Il pourrait ressembler à ceci (ce qui suppose que vous appeliez à partir du fichier functions.php de votre thème, note comment je référence le répertoire stylesheet):

<?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" );
}

Ce sont les bases.

Pré-défini et plusieurs scripts dépendants

Mais disons que vous voulez inclure à la fois jQuery et jQuery UI Sortable dans la liste des scripts par défaut inclus dans WordPress et vous voulez que votre script en dépendent? Facile, il suffit d'inclure les deux premiers scripts en utilisant les prédéfinis poignées défini dans WordPress et pour votre script fournir un 3ème paramètre à wp_enqueue_script() qui est un tableau des poignées de script utilisé par 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 plug-in

Que faire si vous voulez le faire dans un plug-in à 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 );
}

Versioning vos scripts

Notez également que ci-dessus nous avons donné notre plugin un numéro de version et adopté comme un 4ème paramètre à wp_enqueue_script(). numéro de version est sortie dans la source comme argument de requête dans l'URL au scénario et sert au navigateur de la force pour re-télécharger le fichier mis en cache peut-être si la version modifiée.

Scripts de charge uniquement sur les pages en cas de besoin

Le 1er règle de performance Web dit Réduire au minimum des requêtes HTTP pour autant que possible vous devez limiter les scripts à charge uniquement en cas de besoin. Par exemple, si vous avez seulement besoin de votre script dans la limite d'administration à des pages d'administration à l'aide du crochet admin_enqueue_scripts à la place:

<?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 );
}

Charger vos scripts dans le pied de page

Si vos scripts est l'un de ceux qui ont besoin d'être chargé dans le pied de page il y a un 5 paramètre de wp_enqueue_script() qui indique WordPress pour retarder et le placer dans le pied de page (en supposant que votre thème n'a pas mal comporté et qu'il fait appelle le crochet wp_footer comme tous les bons thèmes WordPress devrait ):

<?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 );
}

grainé contrôle Finer

Si vous avez besoin plus fine granularité que Ozh a un grand article intitulé Comment:. Javascript charge avec votre WordPress Plugin plus de détails

La désactivation des scripts pour contrôler Gain

Justin Tadlock a un article intitulé belle Comment désactiver les scripts et les styles dans le cas où vous voulez:

1. Combiner plusieurs fichiers dans un seul fichier (kilométrage peut varier avec JavaScript ici).
2. Chargez les fichiers uniquement sur les pages que nous utilisons le script ou le style.
3. Arrêter d'avoir à utiliser! Important dans notre fichier style.css pour faire de simples ajustements CSS.

Transfert de valeurs de PHP à JS avec wp_localize_script()

Sur son blog Vladimir Prelovac a un article intitulé Meilleur pratique pour ajouter du code JavaScript pour plugins WordPress où il traite de l'utilisation wp_localize_script() pour vous permettre de définir la valeur des variables dans votre PHP côté serveur pour être utilisé plus tard dans votre côté client Javascript.

Vraiment à grains fins de contrôle avec wp_print_scripts()

Et enfin, si vous avez vraiment besoin de contrôle à grain fin, vous pouvez regarder dans wp_print_scripts() comme indiqué sur bière planète dans un message intitulé Comment conditionnellement CSS et JavaScript et seulement si nécessaire par les postes de.

Epiloque

C'est à ce sujet pour les meilleures pratiques d'inclure des fichiers Javascript avec WordPress. Si je raté 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 voyageurs futurs.

Answer 2

Pour compléter Mikes merveilleuse illustration de l'utilisation enqueues je voudrais simplement souligner que les scripts inclus comme ne ont pas besoin dépendances être ... en file d'attente

Je vais utiliser l'exemple Scripts dans un plug-in rubrique 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 coupé 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 les dépendances, WordPress trouver et les préparer pour enqueue votre script, de sorte que vous n'avez pas besoin de faire des appels indépendants pour ces scripts.

En outre, certains d'entre vous peut se demander si la fixation d'un plusieurs scripts peut provoquer des dépendances à la production dans le mauvais ordre, ici me laisser donner un exemple

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

ce ne serait pas question, WordPress déterminera si le script deux étaient dépendants sur le script trois (ex: un script trois devrait se charger d'abord.), Les priorités de mise en file pour les scripts et les sorties dans l'ordre correct, bref, tout se élaboré automagiquement pour vous par WordPress.

Answer 3

Pour de petits morceaux de scripts, que vous voudrez peut-être de ne pas 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 essentiellement le script à un autre script.

Regardons les choses en dire, par exemple, que vous développez un thème et que vous voulez que votre client pour être en mesure d'insérer ses propres scripts (comme Google Analytics ou AddThis) via la page d'options. Vous pouvez ensuite utiliser wp_add_inline_script pour verrouiller ce script à votre principal fichier js (disons mainjs) comme ceci:

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

Answer 4

Mon meilleur moyen est d'obtenir de bonnes performances, donc plutôt que d'utiliser heredoc wp_enqueue_script I utilisation avec l'API Fetch à la charge tout en parallèle de manière asynchrone:

$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 puis insérez-les dans la tête, parfois avec des styles comme ceci:

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

Résultant en cascade qui ressemble à ceci, tout le chargement à la fois, mais contrôler l'ordre d'exécution:

Remarque:. Cela nécessite l'utilisation de l'API Fetch, qui ne sont pas disponibles dans tous les navigateurs