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

Navega tus respuestas
22

He estado tratando de incluir los efectos de jquery ui (más específicamente el efecto Shake) en mi tema de wordpress. Hasta ahora, solo he podido incluir la secuencia de comandos jQuery, pero realmente no tengo ni idea de dónde colocar las secuencias de comandos ui y cómo ponerlas 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!

    
pregunta dabito 18.01.2011 - 23:49

6 respuestas

32

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

Ten en cuenta que deberías nombrarlo jquery-effects-core cuando lo pongas en cola, para nombrar la consistencia.

Puedes incluirlo así: 

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

Editar : esta respuesta se escribió antes de WordPress 3.3, que ahora incluye las diversas 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");
    
respondido por el Otto 19.01.2011 - 02:52
7

@dabito,

No está cargando sus scripts correctamente ... No llame a 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 independiente.

En el archivo functions.php de tu tema, coloca 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 correctamente registrados, esto debería cargarlos bien (agregando las etiquetas <script /> apropiadas en el encabezado. Luego, su otro código JavaScript debería funcionar.

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

    
respondido por el EAMann 19.01.2011 - 00:06
6

También puede poner en cola toda la IU de 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 está listado como una dependencia para jQuery UI, no es necesario encolarlo manualmente. WordPress lo hará automáticamente por ti.

    
respondido por el Rodrigo Sieiro 19.01.2011 - 13:00
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.

    
respondido por el editor 18.01.2011 - 23:51
3

Sólo 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 la secuencia de comandos 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');
    
respondido por el Tareq 24.08.2011 - 17:45
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, ya que 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 cuélguelo de esta manera, con las dependencias listadas. No es necesario un comando de salida en cola por separado para cada biblioteca que esté utilizando: p> 

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í: enlace

    
respondido por el Dave Hilditch 27.04.2017 - 09:24

Lea otras preguntas en las etiquetas

Excluir ID de publicación de wp_query Repositorio de complementos de WPSE: los complementos que surgieron de WP-Answers