Forma correcta de poner en cola jquery-ui


8

Me está costando mucho incluir scripts y estilos jquery-ui en mi plugin. Parece que mis wp_enqueue_scriptllamadas simplemente se ignoran.

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

En el constructor de mi clase llamo:

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

y luego, a continuación:

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

Verifiqué que el código realmente se ejecuta cada carga de página. Sin embargo, las páginas carecen de las <link>etiquetas para la biblioteca jquery-ui. Ya he intentado con y sin la jquerydependencia especificada explícitamente en el tercer argumento de las wp_enqueue_scriptllamadas.

También he intentado con una instalación simple de WP 4.8 sin complementos instalados que no sean los míos, y solo con el tema predeterminado de diecisiete años. No dados.

¿Qué tiene de malo mi código?

Respuestas:


20

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

// no need to enqueue -core, because dependancies are set
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 de acuerdo con las Pautas del complemento

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

  • Llamar a CDN de terceros por motivos que no sean inclusiones de fuentes; todos los JavaScript y CSS no relacionados con el servicio deben incluirse localmente

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


1
ps: el constructor es. No es un lugar óptimo . para agregar ganchos,
birgire

1
Si va a enviar su complemento al repositorio de wordpress.org, debe cargar el CSS localmente (consulte: developer.wordpress.org/plugins/wordpress-org/… ).
butlerblog

1
@butlerblog Gracias por el aporte, actualicé la respuesta.
kero

3

Si está creando su propia secuencia de comandos, simplemente puede 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>

1

He modificado tu guión. prueba con esto, 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');
}

Lamentablemente en mi caso no funciona.
Lucio Crusca

@LucioCrusca Por favor, mira mi respuesta. Mientras que WordPress registra jQuery UI guiones , no lo hacen por estilos , que tiene que hacer usted mismo como mostré
kero
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.