Usa wp_enqueue_script()nel tuo tema
La risposta di base è utilizzare wp_enqueue_script()un wp_enqueue_scriptshook per front-end admin_enqueue_scriptsper admin. Potrebbe assomigliare a questo (che presuppone che tu stia chiamando dal functions.phpfile del tuo tema ; nota come faccio riferimento alla directory del foglio di stile):
<?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" );
}
Queste sono le basi.
Script dipendenti predefiniti e multipli
Ma supponiamo che tu voglia includere sia l'interfaccia utente jQuery che jQuery ordinabile dall'elenco degli script predefiniti inclusi in WordPress e desideri che lo script dipenda da essi? Facile, basta includere i primi due script usando gli handle predefiniti definiti in WordPress e per il tuo script fornire un terzo parametro a wp_enqueue_script()cui è un array di handle di script utilizzati da ogni script, in questo modo:
<?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' ) );
}
Script in un plugin
Cosa succede se si desidera farlo in un plug-in? Utilizzare la plugins_url()funzione per specificare l'URL del file 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 );
}
Controllo delle versioni degli script
Nota anche che sopra abbiamo dato al nostro plugin un numero di versione e lo abbiamo passato come quarto parametro a wp_enqueue_script(). Il numero di versione viene generato nell'origine come argomento di query nell'URL per lo script e serve a forzare il browser a scaricare nuovamente il file eventualmente memorizzato nella cache se la versione viene modificata.
Caricare gli script solo sulle pagine dove necessario
La prima regola delle prestazioni Web dice di ridurre al minimo le richieste HTTP, quindi quando possibile dovresti limitare il caricamento degli script solo dove necessario. Ad esempio, se hai solo bisogno del tuo script nell'amministratore, limitalo alle pagine dell'amministratore usando admin_enqueue_scriptsinvece l' hook:
<?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 );
}
Carica i tuoi script nel piè di pagina
Se i tuoi script sono uno di quelli che devono essere caricati nel piè di pagina, c'è un quinto parametro wp_enqueue_script()che dice a WordPress di ritardarlo e posizionarlo nel piè di pagina (supponendo che il tuo tema non si sia comportato male e che in effetti chiama l'hook wp_footer come tutti i buoni temi di WordPress dovrebbero ):
<?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 );
}
Controllo granulare più fine
Se hai bisogno di un controllo più preciso di quello, Ozh ha un ottimo articolo intitolato Come: caricare Javascript con il tuo plugin WordPress che dettaglia di più.
Disabilitazione degli script per ottenere il controllo
Justin Tadlock ha un bell'articolo intitolato Come disabilitare script e stili nel caso in cui tu voglia:
- Combina più file in singoli file (il chilometraggio può variare con JavaScript qui).
- Carica i file solo nelle pagine che stiamo utilizzando lo script o lo stile.
- Smetti di usare! Important nel nostro file style.css per fare semplici aggiustamenti CSS.
Passando valori da PHP a JS con wp_localize_script()
Sul suo blog Vladimir Prelovac ha un ottimo articolo intitolato Best practice per l'aggiunta di codice JavaScript ai plugin di WordPress in cui discute l'utilizzo wp_localize_script()per consentire all'utente di impostare il valore delle variabili nel PHP lato server da utilizzare successivamente nel Javascript lato client.
Controllo a grana davvero fine con wp_print_scripts()
E infine, se hai bisogno di un controllo molto preciso, puoi esaminare wp_print_scripts()come discusso su Beer Planet in un post intitolato Come includere CSS e JavaScript in modo condizionale e solo quando necessario per i post .
Epiloque
Questo è tutto per le migliori pratiche di includere file Javascript con WordPress. Se ho perso qualcosa (che probabilmente ho) assicurati di farmi sapere nei commenti in modo da poter aggiungere un aggiornamento per i futuri viaggiatori.
