In che modo WordPress introduce correttamente JavaScript?Caricamento personalizzato di file JS e CSS

Da usareSito Web WordPressprogrammatori, in via di sviluppoPlugin WordPressOppure, quando si personalizza un tema WordPress, si fa riferimento ad alcune risorse di scripting JavaScript e CSS.

• Di solito, le persone usano link, tag di script direttamente per HTML.
• In effetti, WordPress ha funzioni e metodi sofisticati integrati per fare riferimento agli script.
• Quindi, l'utilizzo dei riferimenti ai metodi integrati di WordPress è più professionale ed estensibile.

Il metodo di citazione imperfetto

Ci sono due metodi di citazione comuni, va bene, semplicemente non è perfetto o ragionevole.

Tipo 1:i tag link si riferiscono a file CSS

• I tag di script applicano i file JS.Non dettagliato qui.

Tipo 2:Usa la funzione wp_head

• La funzione wp_head viene utilizzata per generare contenuto personalizzato o definito dal sistema.
• A volte utilizziamo il codice seguente per fare riferimento a questo file:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Copia il codice sopra nel file functions.php per fare riferimento ai file corrispondenti.

Meccanismo delle risorse degli script di accodamento di WordPress

Come tutti sappiamo, WordPress ha molti plugin:

• Quasi tutti i plugin fanno riferimento a un file di risorse.
• Inevitabilmente, ci saranno conflitti tra le risorse referenziate da due plugin, che diventeranno instabili e potrebbero influire sull'efficienza.

Utilizzare la funzione wp_enqueue_script

• Per fare riferimento a una risorsa in WordPress dovresti usarewp_enqueue_scriptUna funzione che ha la parola enqueue nel nome della funzione accodata o ordinata.
• Con il modo di accodare le risorse di WordPress (Enqueue Scripts), i riferimenti sono separati dai file corrispondenti e dal codice principale.
• Se l'utente desidera disabilitare la risorsa, può eliminarla, modificarla e commentarla senza modificarla dal codice principale.

Inoltre, alcune librerie di uso comune come jQuery, jQuery UI, ecc. sono integrate in WordPress.

Possiamo usare la funzione wp_enqueue_script per chiamare direttamente la libreria incorporata, che salva il codice e una specifica più chiara.

Se usi questa funzione per fare riferimento ai tuoi file JS e CSS, devi usarewp_register_scriptLa funzione registra un identificatore (handle) e quindi utilizzawp_enqueue_scriptLa funzione chiama la risorsa corrispondente a questo flag.

Come importare correttamente file JS e CSS in WordPress?

WordPress fornisce metodi di importazione ragionevoli per i metodi JS e CSS.

Puoi utilizzare il codice seguente per importare il file plugin.css nel plugin ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Quanto sopra usa la funzione wp_register_script per creare una risorsa con l'identificatore plugin_stylesheet.

Quindi, aggiungi le sue richieste in coda awp_enqueue_scriptsle azioni sono in atto.

Sebbene il nome della funzione sia uno script, non ha nulla a che fare con il tipo di file di risorse ed è valido sia per CSS che per JS.

La funzione wp_register_script non è davvero così semplice, può avere cinque parametri:

1) $maniglia:Identificatore della risorsa.

• 由wp_enqueue_scripttrasferimento.

2) $sorgente:La posizione della risorsa.

• Gli indirizzi relativi o assoluti utilizzano le funzioni integrate di WordPress per ottenere indirizzi, ecc.
• ComunePosizionamentofunzione haplugins_url,get_template_directory_uri等.

3) $ approfondimenti:fare affidamento.

• Se ti riferisci al plugin jQuery e devi fare affidamento sulla build jQuery, devi compilare jQuery.
• Si noti che viene passato come array.

4) $ver:Versione risorsa, facoltativa.

5) $in_footer:Lo metti in fondo?

• Normalmente, i file JS devono essere posizionati nella parte inferiore della pagina, puoi impostare questo parametro su True, lasciarlo vuoto o False per l'output in alto.

Diamo un'occhiata a un esempio di riferimento di file JavaScript più completo ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

I temi WordPress utilizzano wp_enqueue_script per importare risorse

Programmatori nello sviluppo di temi WordPress, usowp_enqueue_scriptImporta risorse.

• Gli esempi precedenti sono esempi di risorse di riferimento per lo sviluppo di plugin per WordPress.
• Il metodo a cui si fa riferimento nell'argomento è simile.

La differenza principale consiste nell'utilizzare la funzione corrispondente per ottenere la directory del tema per ottenere l'indirizzo del file di risorse sotto il tema.

Puoi usareget_template_directory_urifunzione per ottenere la directory del tema corrente.

Se stai usando un tema figlio, dovrai usarloget_stylesheet_directory_uriLa funzione ottiene la directory del tema principale per ottenere le risorse corrispondenti.