¿Cómo incluir archivos jQuery y JavaScript correctamente?


16

Lo estoy haciendo ahora con el siguiente código:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

Esto funciona, pero ¿debería hacerlo para todos, como este, o para todos menos para el administrador (para que el backend use la versión de WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Esta versión no funciona en absoluto, obtengo la versión jQuery de WordPress y no la de Google.

Por lo tanto, ¿debo cancelar el registro de jQuery que se incluye en WordPress?

Además, ¿cómo agrego mis propios scripts (scripts de control deslizante, modernizr y mi propio custom.js) de la manera correcta? Supongo que debería hacer esto a través de functions.php también y no en el encabezado como lo estoy haciendo ahora, pero no estoy seguro de cómo lo haría.

Respuestas:


20

Primera regla general: no anule el registro de las secuencias de comandos incluidas en el núcleo y reemplácelas con otras versiones , a menos que esté absolutamente seguro de que ningún tema, complemento o núcleo en sí se romperá debido al cambio de versión. Realmente, a menos que necesite absolutamente una versión alternativa de un script integrado en el núcleo, solo use lo que está incluido en el núcleo.

En segundo lugar, recomiendo enganchar el wp_enqueue_scriptsregistro y la puesta en cola del script, en lugar de hacerlo init. ( Funciona en init, pero desde la perspectiva de jugar bien con los demás , es mejor usar el gancho más semánticamente correcto).

En tercer lugar, para poner en cola sus propios scripts personalizados, utilice los mismos métodos que anteriormente:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Simplemente agregue los scripts que necesite para poner en cola.


44
+1 en la necesidad absoluta de ! Demasiados temas (generalmente 'premium') registran una versión desactualizada de jQuery. Rompe los complementos.
Stephen Harris

Agregar este script a mi archivo de funciones (sin las declaraciones de php, ya que ya están allí) me da un 'Http-error 500 (Error interno del servidor)'. ¿Hay algún error en alguna parte?
Johan Dahl

Si; Hubo un error de sintaxis en las wp_enqueue_script()llamadas.
Chip Bennett

Gracias ahora funciona! Sin embargo, todavía se muestra en el encabezado. ¿No es mejor si está en el pie de página? Si es así, ¿puedo modificar el código para que lo haga?
Johan Dahl

Ciertamente puede poner en cola en el pie de página. Simplemente establezca el $in_footerparámetro en verdadero en su llamada a wp_enqueue_script().
Chip Bennett

4

Espero que esto ayude, busque el códice para wp_enqueue_scriptsobtener más información.

  1. No utilizar initpara hacer cola . Úselo wp_enqueue_scriptspara material frontal y admin_enqueue_scriptspara el lado administrativo. Sin embargo, puede usar initpara registrar scripts.
  2. El gancho wp_enqueue_scriptssolo se dispara en el front-end (y no en la página de inicio de sesión), por lo que no tiene que verificarlo is_admin().
  3. A menos que tenga una razón específica para hacer lo contrario, sugeriría registrar y poner en cola los scripts utilizando functions.phppara temas o en un complemento de lo contrario. Simplemente pones:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. Si el objetivo es poner en cola un script cuando se usa un shortcode, es posible que desee usarlo wp_enqueue_scripten la devolución de llamada de shortcode para ponerlo en cola solo cuando sea necesario (esto lo imprimirá en el pie de página desde 3.3 ).

  5. No debe volver a registrar el jQuery existente en el lado del administrador. Puedes romper algo: D.

  6. Los complementos no deberían volver a registrar el jQuery existente.

  7. Debe sopesar los pros y los contras de volver a registrar jQuery. Por ejemplo, puede romper algunos complementos si registra una versión anterior (tal vez no ahora, pero en el futuro ...)


1
Anuncio 5) volver a registrarse realmente no importa. Es por eso que tenemos las funciones de cola y registro. :)
Kaiser

2

Advertencia justa: cancelar el registro de la versión empaquetada de WP de jQuery en favor de la suya puede causar problemas, especialmente si no tiene mucho cuidado para asegurarse de cambiar la versión a la que apunta cada vez que WP actualiza su versión. Esto se aplica doblemente a los complementos, que a menudo (o a menudo deberían, al menos) escribir sus complementos para una máxima compatibilidad con la versión WP de jQuery.

Dicho esto, tu primera versión es correcta, está conectada a wp_enqueue_scripts. Su segunda función está conectada init, lo que puede ser la razón por la que no funciona correctamente.

Agregue sus propios scripts de manera similar:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Asumo aquí que está cargando scripts desde un jsdirectorio en su directorio de tema actual; cambie el parámetro URI si eso no es cierto. El tercer parámetro array( 'jquery' )dice que bbg-scriptsdepende de jquery, por lo que debe cargarse después. Consulte https://codex.wordpress.org/Function_Reference/wp_enqueue_script para obtener más detalles.


1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Esto no va a hacer nada ... sospecho que quieres decir

if (!function_exists('load_my_scripts')) {

Su ejemplo solo cargará la función load_my_scripts si ya existe (lo que no es así, no lo hará y si lo hiciera crearía un error)


0

Si, por razones de rendimiento, desea cargar jquery y otros archivos js centrales desde un CDN, asegúrese de cargar la misma versión para evitar que sucedan cosas desagradables con las funciones centrales y de complementos. Me gusta esto:

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

-2

Después de verificar todos los métodos diferentes para cargar jquery (no solo en esta publicación), me di cuenta de que ninguno de ellos hace todo esto:

  1. Registre (y quizás ponga en cola) jquery usando una función, por lo que puede ser utilizado por complementos.
  2. Cárguelo de Google CDN con la URL relativa del protocolo.
  3. Recurrir a copia local si Google está fuera de línea.

Hay muchas versiones alternativas que hacen algunas de estas en la lista, pero no todas, así que escribí mi versión combinando y modificando algunos de los métodos ya disponibles. Aquí está:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Para ahorrar ancho de banda y no hacer ping a Google cada vez que se vuelve a cargar la página, recuerda si Google CDN está en línea o no durante 5 minutos utilizando la API transitoria de Wordpress.


No recomendado. Ahora debe actualizar el script después de cada actualización de WordPress para que coincida con la versión exacta de jQuery que WordPress está utilizando. Además, Google no puede enviar la biblioteca comprimida en algunos casos, por lo que su página se está cargando más lentamente ahora.
fuxia

No estoy usando wordpress 'jquery. Lee el código por favor. Estoy usando la versión del tema. Y si no te gusta google, puedes usar otro cdn.
nautilus7

Pero ese es el punto: debe usar WordPress jQuery para asegurarse de que la versión sea correcta.
fuxia

No te sigo Tomo cualquier versión que necesito de google y agrego la misma versión con mi tema. Así es como todos lo están haciendo. Wordpress puede usar (en la sección de administración) cualquier versión que venga.
nautilus7

1
Puede usar cualquier versión de jQuery que desee, pero si la incluye con un tema, está forzando esto a sus usuarios. Dentro de unos años, cuando todos usen jQuery 1.8.2, sus usuarios estarán atascados en una versión desactualizada a menos que mantengan el tema actualizado.
Chris_O
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.