Qual è il modo migliore per aggiungere file javascript personalizzati al sito?

Per completare la meravigliosa illustrazione di Mike sull'uso degli enqueue, vorrei far notare che gli script inclusi come dipendenze non hanno bisogno di essere accodati separatamente...

Userò l'esempio sotto l'intestazione Script in un Plugin nella risposta di 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);
}

Questo può essere semplificato come segue...

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

Quando imposti le dipendenze, WordPress troverà e accoderà automaticamente gli script necessari per il tuo script, quindi non è necessario fare chiamate separate per questi script.

Inoltre, alcuni di voi potrebbero chiedersi se l'impostazione di dipendenze multiple possa causare l'output degli script nell'ordine sbagliato. Ecco un esempio:

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

Se lo script due dipendesse dallo script tre (cioè lo script tre dovrebbe caricarsi per primo), questo non sarebbe un problema. WordPress determinerà le priorità di accodamento per questi script e li produrrà nell'ordine corretto. In breve, WordPress risolverà magicamente tutto per te automaticamente.

Per piccoli pezzi di script, che potresti non voler includere in un file separato, ad esempio perché sono generati dinamicamente, WordPress 4.5 e versioni successive offre la funzione wp_add_inline_script. Questa funzione fondamentalmente aggancia lo script a un altro script.

Supponiamo, ad esempio, che stai sviluppando un tema e vuoi che il tuo cliente possa inserire i propri script (come Google Analytics o AddThis) attraverso la pagina delle opzioni. Potresti quindi utilizzare wp_add_inline_script per agganciare quello script al tuo file js principale (diciamo mainjs) in questo modo:

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

Il mio metodo preferito per ottenere buone prestazioni è, invece di utilizzare wp_enqueue_script, usare HEREDOC con l'API Fetch per caricare tutto in modo asincrono e in parallelo:

$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;

E poi inserirli nell'head, a volte insieme agli stili in questo modo:

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

Ottenendo un caricamento a cascata che appare così, caricando tutto contemporaneamente ma controllando l'ordine di esecuzione:

Nota: Questo metodo richiede l'uso dell'API Fetch, che non è disponibile in tutti i browser.