Cómo incluir correctamente los efectos jquery-ui en wordpress

25

He estado tratando de incluir los efectos jquery ui (más específicamente el efecto de sacudida) en mi tema de wordpress. Hasta ahora, solo he podido incluir el script jQuery, pero realmente no tengo idea de dónde colocar los scripts ui y cómo ponerlos en cola.

Este es el código que tengo. Obviamente no funciona:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

¡Gracias por tu ayuda!

jquery wp-enqueue-script dabito
fuente
55
Una nota: no debería necesitar poner en cola jquery, porque ya está listado como una dependencia de jquery-ui-core.
goldenapples

Respuestas:

36

Si bien WordPress incluye las bibliotecas de jQuery UI, no incluye la biblioteca de UI / Efectos. Esa biblioteca es independiente y autónoma. Deberá incluir una copia del archivo effects.core.js y ponerla en cola por separado.

Tenga en cuenta que debe nombrarlo jquery-effects-core al ponerlo en cola, para nombrar la coherencia.

Puedes incluirlo así:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

Editar : Esta respuesta fue escrita antes de WordPress 3.3, que ahora incluye varias bibliotecas de efectos como parte del núcleo. Simplemente puede poner en cola las piezas de la biblioteca de efectos que necesita usar ahora.

La lista de slugs para estos archivos se puede encontrar en wp-includes / script-loader.php, pero el slug del núcleo es jquery-effects-core.

wp_enqueue_script("jquery-effects-core");
Otón
fuente
1
Tenga en cuenta que para un efecto real (ciego, rebote, desvanecimiento, ...) debe colocar ese efecto explícitamente. Me gusta para 'fade':wp_enqueue_script( 'jquery-effects-fade' );
SunnyRed
El usuario debe colocar su propio Javascript en un archivo separado y luego poner en cola ese archivo y enumerar las dependencias que necesita. De esa manera, WordPress (y los complementos de rendimiento) conocen el orden requerido para cargar estos scripts y los colocarán en el orden correcto en la página.
Dave Hilditch
8

@dabito,

No está cargando sus scripts correctamente ... No llame wp_enqueue_script()dentro de su archivo de plantilla de tema (parece que es header.php). Debe llamar a esta función desde un enlace separado.

En el functions.phparchivo de su tema , coloque el siguiente código:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

Si ambos scripts están registrados correctamente, esto debería cargarlos bien (agregando las <script />etiquetas apropiadas en el encabezado. Entonces su otro código JavaScript debería funcionar.

Si desea agregar scripts al lado administrativo de las cosas, agregue su acción a admin_enqueue_scripts.

EAMann
fuente
1
No es exactamente cierto. Mientras los llame antes de la llamada wp_head (), eso debería funcionar bien. No tienen que estar enganchados, y de todos modos no deberían estar enganchados a init. Si va a engancharlos en algún lugar, conéctelos al gancho de acción 'wp_enqueue_scripts'. Para eso está ahí.
Otto
1
@Otto Lo que dijiste suena lógico. ¿Pero tiene una explicación de por qué en el códice dice lo que escribió @EAMann: "Use la acción init para llamar a esta función"? Y su ejemplo está tomado de allí ... codex.wordpress.org/Function_Reference/wp_enqueue_script
Lea Cohen
El códice es casual en algunos lugares. La mejor acción a utilizar para esto es 'wp_enqueue_scripts' para el front-end, o 'admin_enqueue_scripts' en el back-end. Enganchar a init funcionará, pero innecesariamente pondrá en cola el script en todo el sitio.
Otto
He actualizado mi fragmento de código en consecuencia. Originalmente fue una reacción rápida e intuitiva basada en la referencia del Codex ... el uso wp_enqueue_scriptses definitivamente la mejor manera de hacerlo y evita la necesidad de un is_admin()control adicional .
EAMann
Esta también es la manera incorrecta: los complementos de rendimiento necesitan conocer las dependencias. El autor debe escribir su propio archivo .js y ponerlo en cola y nombrar las dependencias: WordPress se encargará del resto.
Dave Hilditch
7

También puede poner en cola toda la interfaz de usuario jQuery directamente desde Google. Así es como lo hago:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

Y dado que jQuery aparece como una dependencia para la interfaz de usuario de jQuery, no necesita ponerla en cola manualmente. WordPress lo hará automáticamente por ti.

Rodrigo Sieiro
fuente
3
Incluso puede cargar todas las bibliotecas jQuery desde el CDN de Google en lugar de su propio sitio.
Jan Fabry
Desalentaría mucho la carga de scripts de fuentes extranjeras. Lo hice durante mucho tiempo y (rara vez) sucedió que el host no funcionaba, por lo que varios clientes tuvieron problemas con sus páginas a la vez.
Julian F. Weinert
1
@ JulianF.Weinert es una espada de doble filo, con un buen cdn significa menor latencia pero falta de control si falla. Dicho esto, si el CDN de Google deja de funcionar, la mitad de Internet fallará, por lo que el suyo no será el único. Sin embargo, las posibilidades de que esté inactivo y no almacenado en caché en el navegador de un usuario son escasas. Para la mayoría de las situaciones, usar un CDN es un beneficio.
Alex
Cierto. No estaba hablando de un CDN completo, que, por supuesto, estaría absolutamente bien aquí, ya que está diseñado exactamente para ese uso. Sin embargo, cargar guiones de cualquier sitio web de john-doe.com es un poco arriesgado
Julian F. Weinert
3

No parece haber una carga predeterminada para esta biblioteca jQuery (lista completa aquí ), por lo que es probable que tenga que registrar el script antes de ponerlo en cola.

editor
fuente
1
Pensé que podría estar en lo cierto (a veces los nombres bajo los que WP registra los scripts son diferentes a los nombres estándar utilizados) pero en este caso el registro de 'jquery-ui-core' debería funcionar. Está listado en core.trac.wordpress.org/browser/branches/3.0/wp-includes/…
goldenapples
¡Buen punto! Supuse que quería cargar solamente esa biblioteca jQuery, en el que la carga caso el resto sería un poco bloaty.
editor
3

Solo unos pequeños consejos. Cuando pone en cola su script, se pone en cola para todo el sitio, incluido el panel de administración. Si no desea el script en el panel de administración, solo puede incluirlos para el sitio en la interfaz.

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
Tareq
fuente
44
No deberías usar el gancho init para hacer cola. Use el enlace wp_enqueue_scripts para el front-end solamente o el enlace admin_enqueue_scripts para el back-end
Otto
No sabía que la wp_enqueue_scriptsacción es solo para front-end. Gracias :)
Tareq
0

Todas las respuestas aquí, mientras funcionan, son técnicamente incorrectas.

La forma correcta de incluir jquery-ui y otras bibliotecas es incluirlas como dependencias de su propio script.

Esto es importante, porque las herramientas de rendimiento pueden verificar estas dependencias para alterar el orden de carga de sus scripts para optimizar el sitio.

Por lo tanto, si desea usar jquery y jquery-ui, cree su propio archivo de script .js y póngalo de esta manera, con las dependencias enumeradas, sin necesidad de un comando en cola separado para cada biblioteca que esté usando:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

Puede encontrar una lista de todos los scripts disponibles para agregar como dependencias aquí: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Dave Hilditch
fuente
1
Lo tienes bien Usar dependencias en sus propias llamadas wp_enqueue_script es la forma correcta de incluir jquery / jquery-ui / etc. No hay necesidad de colocarlos por separado.
Michae Pavlos Michael
Y si los coloca en cola por separado cuando su script depende de ellos, su script puede / se romperá en sitios que optimizan el rendimiento, por ejemplo, si los scripts se combinan en un solo script para acelerar la carga, o si son diferidos o minimizados (depende de la minifcación pero El orden puede cambiar). Si no le ha dicho a WordPress que su secuencia de comandos depende de otras secuencias de comandos, no puede garantizar el orden en que se cargarán.
Dave Hilditch