Cómo vincular archivos externos jQuery / Javascript con WordPress

15

Así que estoy usando Starkers para basar mi próximo tema de WP y me he encontrado con un pequeño problema, estaba incluyendo mi propia versión de jQuery en el header.phparchivo, pero al inspeccionar mi sitio usando Firebug noté que jquery se estaba descargando dos veces. investigué un poco y noté que no solo estaba incluyendo el archivo sino también la wp_head()función.

Al tratar de solucionar el problema, noté un comentario en el archivo de encabezado, que se originó en el tema Twenty Ten:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Así que aquí está mi problema, tengo la impresión de que el archivo jQuery debe configurarse antes que cualquier otro archivo que quiera usarlo y eso wp_head()debería ser lo último en el <head>elemento, ahora estoy un poco confundido ya que me pregunto si debería Lo coloco wp_head()en la parte superior para que el archivo jQuery incluido en WP se use para todos mis complementos, a pesar de que dice que no lo haga.

Comenté la línea jQuery en la wp_head()función, pero es necesaria para la página de administración, así que tuve que volver a ponerla.

También me gustaría usar (al menos experimentar) con el uso de la versión Google CDN de jQuery, ¡pero no quiero incluirlo dos veces!

Espero que comprenda lo que estoy tratando de explicar, cualquier sugerencia sobre cómo puedo resolver este problema sería muy apreciada. También agradecería cualquier consejo sobre cómo maneja sus archivos JavaScript con el archivo de encabezado.

¡Gracias!

themes customization theme-development jquery wp-head Ben Everard
fuente
Esto debería retitularse a algo como "Cómo vincular archivos jQuery / Javascript externos con WordPress".
MikeSchinkel
Estoy de acuerdo, no estaba seguro de cómo llamarlo, ya que no estaba muy familiarizado con el problema que tenía :-)
Ben Everard

Respuestas:

9

A partir de la redacción de su pregunta, debe agregar scripts escribiendo <script>etiquetas en su plantilla. Agregue sus propios scripts a través wp_enqueue_script()de su plantilla functions.php, estableciendo adecuadamente las dependencias en jQuery, y wp_head()agregará los scripts por usted.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Vea la página del códice para más información.

Annika Backstrom
fuente
Tienes razón al pensar que estoy agregando scripts usando la <script>etiqueta, esta es la alternativa que estaba buscando, ¡muchas gracias! :-)
Ben Everard
3
Si desea agregar su script solo en el front end, enganche en 'template_redirect'lugar de 'init'.
John P Bloch
Lo bueno, actualizaré mi respuesta. Casi sugerí envolver la cola is_admin().
Annika Backstrom
Generalmente pongo en cola los scripts en el archivo de plantilla sobre el get_header(), haciéndolo en functions.phpcola en cada página que no sea necesaria. Si tengo uno global, lo pongo en cola header.phpantes de que wp_head()se llame. De esa manera, las colas son donde esperarías que estuvieran en el<head>
Joe Hoyle
A veces es mejor agregar scripts en la parte inferior de la página. Es el último parámetro de codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), configúrelo como verdadero. Poca información para aquellos que necesitan más control.
Hakre
7

Sugiero echar un vistazo a 5 consejos para usar jQuery con WordPress . Entre otras cosas, muestra el código necesario para cargar jQuery desde la biblioteca de Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

También puede consultar el complemento Usar bibliotecas de Google .

Travis Northcutt
fuente
1
En realidad, esta es una mejor respuesta, ya que muestra cómo poner en cola la versión Google CDN de jQuery. Sin embargo, como John sugirió en otra parte, si solo desea hacer esto en el front-end, conecte en template_redirectlugar deinit .
EAMann
Buen punto sobre dónde se carga. Aunque realmente, el área de administración también usa jQuery, ¿verdad? De cualquier manera, gracias por mostrar cómo controlarlo.
Travis Northcutt
Sí, acabo de encontrar los 5 consejos para la publicación de jquery / wp, gracias por su respuesta :-)
Ben Everard
5 consejos para usar jQuery con WordPress: el enlace ya no funciona.
Hakre
NOTA: El ejemplo incluye una versión "anterior" de jQuery, la versión actual de WP (3.0.1) ejecuta jQuery 1.4.2 ...
t31os
1

Si bien @tnorthcutt es correcto, debe eliminar correctamente el jquery nativo de WP si desea cargar el suyo propio, es seguro que se encontrará con problemas al cargar una versión de jquery diferente que el núcleo de WP. Tanto el núcleo como los complementos dependen de que esté allí. Entonces, si no actualiza su tema con el jquery más nuevo cada vez que se actualiza WP, su sitio puede fallar.

El siguiente código se asegurará de que su tema siempre cargue la versión correcta de jquery, primero buscando qué versión está utilizando WP y luego cargando esa desde Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
cjbj
fuente