Care este modul recomandat de a adăuga fișiere javascript personalizate în site?

Pentru a completa ilustrația minunată a lui Mike despre utilizarea funcțiilor de enqueue, doresc să subliniez că scripturile incluse ca dependințe nu trebuie să fie încărcate manual...

Voi folosi exemplul din secțiunea Scripturi într-un Plugin din răspunsul lui 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);
}

Acest cod poate fi simplificat astfel:

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

Când setați dependințele, WordPress va găsi și va încărca automat scripturile necesare, așa că nu este nevoie să le încărcați separat.

În plus, unii dintre voi s-ar putea întreba dacă setarea mai multor dependințe ar putea determina încărcarea scripturilor în ordinea greșită. Iată un exemplu:

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

Dacă al doilea script ar depinde de al treilea script (adică al treilea script ar trebui să se încarce primul), acest lucru nu ar conta. WordPress va determina prioritățile de încărcare pentru aceste scripturi și le va afișa în ordinea corectă. Pe scurt, WordPress rezolvă automat toate aceste detalii pentru voi.

Pentru fragmente mici de scripturi, pe care poate nu doriți să le includeți într-un fișier separat, de exemplu pentru că sunt generate dinamic, WordPress 4.5 și versiunile ulterioare oferă funcția wp_add_inline_script. Această funcție atașează practic scriptul la un alt script.

Să presupunem, de exemplu, că dezvoltați o temă și doriți ca clientul dvs. să poată insera propriile scripturi (cum ar fi Google Analytics sau AddThis) prin pagina de opțiuni. Ați putea folosi wp_add_inline_script pentru a atașa acel script la fișierul js principal (să spunem mainjs) astfel:

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

Modul meu preferat de a obține performanță bună este să evit folosirea wp_enqueue_script și să utilizez HEREDOC cu Fetch API pentru a încărca totul asincron și în paralel:

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

Apoi le inserez în head, uneori împreună cu stiluri, astfel:

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

Rezultând într-o încărcare paralelă, dar cu control asupra ordinii de execuție, ca în exemplul următor:

Notă: Această metodă necesită utilizarea Fetch API, care nu este disponibil în toate browserele.