Forma correcta de cargar jquery-ui

Question

Forma correcta de cargar jquery-ui

20 jul 2017, 11:46:57

Vistas: 42.1K

Votos: 16

Estoy teniendo dificultades para incluir los scripts y estilos de jquery-ui en mi plugin. Parece que mis llamadas a wp_enqueue_script simplemente son ignoradas.

Ya hay muchas preguntas similares a esta, pero todas las respuestas que he encontrado hasta ahora se reducen a llamar wp_enqueue_script dentro del hook de acción wp_enqueue_scripts, que ya estoy haciendo.

En el constructor de mi clase llamo a:

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

y luego, más abajo:

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

He verificado que el código realmente se ejecuta en cada carga de página. Sin embargo, las páginas carecen de las etiquetas <link> para la biblioteca jquery-ui. Ya he probado con y sin la dependencia de jquery especificada explícitamente en el tercer argumento de las llamadas a wp_enqueue_script.

También he probado con una instalación limpia de WP 4.8 sin plugins instalados excepto el mío, y solo con el tema predeterminado twenty seventeen. Sin éxito.

¿Qué hay de malo en mi código?

Lucio Crusca

688

desarrollo de plugins jquery ui

Todas las respuestas a la pregunta

Comentarios

ps: el constructor es un lugar no óptimo para añadir hooks.

birgire

20 jul 2017 13:09:05

Si vas a enviar tu plugin al repositorio de wordpress.org, entonces necesitas cargar el CSS localmente (ver: 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 Gracias por el aporte, he actualizado la respuesta.

kero

25 feb 2020 14:45:31

Si estás encolando tu propio script, simplemente puedes agregar 'jquery-ui-accordion', por ejemplo, a la lista de dependencias. Todas las dependencias requeridas se agregarán automáticamente. Ejemplo:

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

Generará este código:

<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 jun 2018 20:29:05

He modificado tu script. Prueba con este, está funcionando.

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 jul 2017 12:21:20

Comentarios

Desafortunadamente en mi caso no funciona.

Lucio Crusca

20 jul 2017 12:36:37

@LucioCrusca Por favor revisa mi respuesta. Mientras que WordPress registra los scripts de jQuery UI, no hace lo mismo con los estilos, necesitas hacerlo manualmente como mostré

kero

20 jul 2017 12:40:32

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

En primer lugar, WordPress registra jQuery UI a través de wp_default_scripts(). Las dependencias ya están configuradas, por lo que solo necesitas encolar el script que realmente necesitas (y no el núcleo). Como no estás cambiando el número de versión ni nada, está bien usar solo el identificador.

// no es necesario encolar -core, porque las dependencias están configuradas
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' );

En cuanto a las hojas de estilo: ¡WordPress no registra los estilos de jQuery UI por defecto!

En los comentarios, butlerblog señaló que según las Directrices de Plugins

No se permite ejecutar código externo dentro de un plugin cuando no actúa como un servicio, por ejemplo:

Llamar a CDNs de terceros por razones distintas a la inclusión de fuentes; todo el JavaScript y CSS no relacionados con servicios debe incluirse localmente

Esto significa que cargar los estilos a través de un CDN no está permitido y siempre debe hacerse localmente. Puedes hacerlo usando wp_enqueue_style().