Cargar jQuery en WordPress

Question

Cargar jQuery en WordPress

29 jul 2012, 15:09:30

Vistas: 36.5K

Votos: 2

Estoy construyendo mi primer tema desde cero en WordPress 3.4.1, sé que WordPress ya tiene la última versión de jQuery a través de Google. He leído sobre problemas si el script no se llama correctamente, así que quiero intentar mantener todo lo más cercano posible al código recomendado. Quiero asegurarme de que el script esté cargado, lo cual creo que se realiza mediante el siguiente script PHP en el archivo functions.php (tomado del Codex de WordPress).

<?php
function my_scripts_method() {
wp_enqueue_script( 'jquery' );
}

Básicamente quiero tener un menú personalizado usando jQuery, entonces ¿es solo cuestión de colocar el script que quiero activar en el header o sección PHP?

Además, si quisiera cargar otro script que no está incluido en WordPress, ¿simplemente agrego el siguiente PHP al código anterior en el archivo functions.php?

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Estoy bien con HTML y CSS pero PHP y JavaScript son relativamente nuevos para mí, cualquier ayuda es muy apreciada.

Gracias,

Ant

157

jquery wp enqueue script

Comentarios

posible duplicado de ¿Dónde es el lugar correcto para registrar/encolar scripts y estilos?

Chris_O

30 jul 2012 15:29:17

Todas las respuestas a la pregunta

Debes usar wp_enqueue_script para cargar el script de tu tema, la función wp_register_script solo registra el script con una palabra clave.

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Esto simplemente registrará un nuevo script con el nombre jqueryexample y podrás cargar ese script cuando sea necesario usando la función wp_enqueue_script.

Aquí hay un código de ejemplo para cargar un script ya registrado como jQuery y un nuevo script propio como jQuery Example

<?php
function wpse_60056_load_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
    wp_enqueue_script( 'jqueryexample' );

}    
add_action('wp_enqueue_scripts', 'wpse_60056_load_scripts');
?>

Sin embargo, puedes usar solo la función wp_enqueue_scripts para cargar un JavaScript remoto, aquí hay un ejemplo -

wp_enqueue_script('jqueryexample','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Amit Kosti

3.61K

29 jul 2012 15:56:05

Comentarios

Amit, gracias por esto y lo había pasado por alto antes, realmente lo aprecio.

Ant

29 jul 2012 16:24:44

+1 Nota: desde la versión 3.3 puedes usar wp_enqueue_script dentro de los callbacks de shortcodes/widgets (o de otra forma en el cuerpo de la página). Esto significa que puedes registrar un script en el hook wp_enqueue_scripts y luego cargarlo solo cuando sea necesario.

Stephen Harris

29 jul 2012 16:57:46

Es útil saberlo, supongo que todo esto se reduce a la optimización de la página web, gracias Stephen.

Ant

29 jul 2012 17:19:07

Cuando cargas un script como sugiere Stephen Harris, los scripts se colocarán en el footer. Ten esto en cuenta cuando tu script debe cargarse antes que otros. Además, si realmente deseas forzar que un script se cargue en el footer, puedes establecer el quinto argumento de 'wp_enqueue_scripts' o 'wp_register_script' como verdadero (Codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_script).

W van Dam

29 jul 2012 18:55:06

Comentarios

W van Dam, muchas gracias por la respuesta rápida y la información, pondré esto en práctica. Solo un tema por ahora (no quiero correr antes de saber gatear) pero interesante lo que comentas sobre un plugin. Saludos, Ant

Ant

29 jul 2012 15:56:46

De nada. Amit también hace un buen aporte. Cualquier script que registres también necesitas ponerlo en cola. Otro consejo: Si solo necesitas jQuery en página(s) específica(s), usa etiquetas condicionales como is_home() para cargar el script solo en esas páginas. Esto hace tu sitio más eficiente. Probablemente no sea relevante para tu caso actual, pero puede ser útil más adelante. (Página del Codex: http://codex.wordpress.org/Conditional_Tags)

W van Dam

29 jul 2012 16:02:17

Dam, esto es bueno y lo tendré en cuenta, quiero asegurar que la velocidad del sitio web siga siendo rápida así que tiene sentido lo que dices. Solo desearía poder usar algunas transiciones CSS3 pero IE me decepciona en esto y son bastante fáciles de codificar.

Ant

29 jul 2012 17:24:55

No hay problema. PD: ¿Podrías votar o aceptar mi respuesta? Me gustaría agregar un comentario a lo que Stephen Harris mencionó arriba, pero actualmente todavía me falta 1 voto para poder comentar en las respuestas de otros. Stack Exchange es genial, pero también molesto en algunos aspectos.

W van Dam

29 jul 2012 17:44:42

Listo, no hay problema. Supongo que el sistema de recompensas funciona de cierta manera y los puntos significan premios, al menos obtuve respuestas aquí y rápidamente.

Ant

29 jul 2012 18:24:03

Mostrar los 6 comentarios restantes

W van Dam 196 · Accepted Answer · 2012-07-29T15:44:39Z

Vas por buen camino, pero te falta una pieza:

add_action('wp_enqueue_scripts', 'my_scripts_method');

add_action te permite ejecutar código en momentos específicos durante la carga de páginas o eventos específicos. La acción anterior le dice a WP que ejecute tu función cuando está agregando los scripts al elemento head del html. Tu función a su vez le indica a WP que agregue el script de jQuery.

Lo mismo aplica para registrar un nuevo script, pero con un hook diferente:

add_action('wp_enqueue_scripts', 'my_register_script_method');

function my_register_script_method () {
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

Si estás sobrescribiendo un script pre-registrado, también deberías primero desregistrar ese script. Yo uso algo como el siguiente código para reemplazar el script de jquery (nota: lee la 2da edición al final):

function my_register_script_method () {
    wp_deregister_script('jquery');
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

En cuanto a dónde deberías poner ese código. Si el código es específico del tema, debes colocarlo en functions.php en la carpeta de tu tema. Si vas a reutilizar el código en múltiples temas, sería más fácil mantener un plugin con todo el código compartido.

Edición: Como Stephen Harris señala abajo, desde WP 3.3 también puedes usar wp_enqueue_scripts después de que wp_head se haya activado, por ejemplo en shortcodes o widgets. El js se cargará entonces en el footer.

Edición 2: Para jQuery y otras bibliotecas alojadas en Google se recomienda que uses http://wordpress.org/extend/plugins/use-google-libraries/ Lee los comentarios para ver la motivación de Otto.