Modo corretto per accodare jquery-ui

Question

Modo corretto per accodare jquery-ui

20 lug 2017, 11:46:57

Visualizzazioni: 42.1K

Voti: 16

Sto avendo difficoltà nell'includere gli script e gli stili di jquery-ui nel mio plugin. Sembra che le mie chiamate a wp_enqueue_script vengano semplicemente ignorate.

Ci sono già molte domande simili a questa, ma tutte le risposte che ho trovato finora si riducono a chiamare wp_enqueue_script all'interno dell'hook d'azione wp_enqueue_scripts, che sto già facendo.

Nel costruttore della mia classe chiamo:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

e poi, sotto:

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

Ho verificato che il codice venga effettivamente eseguito ad ogni caricamento della pagina. Tuttavia, nelle pagine mancano i tag <link> per la libreria jquery-ui. Ho già provato con e senza la dipendenza jquery specificata esplicitamente nel terzo argomento delle chiamate wp_enqueue_script.

Ho anche provato con un'installazione pulita di WP 4.8 senza plugin installati oltre al mio, e solo con il tema predefinito twenty seventeen. Nessun risultato.

Cosa c'è di sbagliato nel mio codice?

Lucio Crusca

688

sviluppo plugin jquery ui

Tutte le risposte alla domanda

Commenti

ps: il costruttore è .non il posto ottimale per aggiungere hook,

birgire

20 lug 2017 13:09:05

Se hai intenzione di inviare il tuo plugin al repository wordpress.org, allora devi caricare il CSS localmente (vedi: https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/#8-plugins-may-not-send-executable-code-via-third-party-systems).

butlerblog

25 feb 2020 14:39:03

@butlerblog Grazie per il contributo, ho aggiornato la risposta.

kero

25 feb 2020 14:45:31

Se stai accodando il tuo script personalizzato, puoi semplicemente aggiungere 'jquery-ui-accordion', ad esempio, alla lista delle dipendenze. Tutte le dipendenze richieste verranno aggiunte automaticamente. Esempio:

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

Genererà questo codice:

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>

Greg Perham

230

14 giu 2018 20:29:05

Ho modificato il tuo script. Prova con questo, funziona.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}

umesh.nevase

61

20 lug 2017 12:21:20

Commenti

Sfortunatamente nel mio caso non funziona.

Lucio Crusca

20 lug 2017 12:36:37

@LucioCrusca Per favore guarda la mia risposta. Sebbene WordPress registri gli script di jQuery UI, non lo fa per gli stili, devi farlo tu stesso come ho mostrato

kero

20 lug 2017 12:40:32

kero 6.33K · Accepted Answer · 2017-07-20T12:28:25Z

Innanzitutto, WordPress registra jQuery UI tramite wp_default_scripts(). Le dipendenze sono già impostate, quindi devi solo caricare lo script di cui hai realmente bisogno (e non il core). Dal momento che non stai cambiando il numero di versione o altro, va bene utilizzare solo l'handle.

// non è necessario caricare -core, perché le dipendenze sono già impostate
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

Per quanto riguarda i fogli di stile: WordPress non registra gli stili di jQuery UI di default!

Nei commenti, butlerblog ha fatto notare che secondo le Linee Guida per i Plugin

L'esecuzione di codice esterno all'interno di un plugin, quando non si agisce come servizio, non è consentita, ad esempio:

Chiamare CDN di terze parti per motivi diversi dall'inclusione di font; tutto il JavaScript e CSS non correlato ai servizi deve essere incluso localmente

Ciò significa che caricare gli stili tramite CDN non è permesso e dovrebbe sempre essere fatto localmente. Puoi farlo utilizzando wp_enqueue_style().