¿Cómo incluir los archivos jQuery y JavaScript correctamente?

13

Lo estoy haciendo ahora mismo 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 debo hacer esto para todos, de esta manera, o para todos menos admin (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 realidad, obtengo la versión de WordPress jQuery y no la versión de Google.

Por lo tanto, ¿debería cancelar el registro de jQuery que está incluido en WordPress?

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

    
pregunta Johan Dahl 13.03.2012 - 15:28

6 respuestas

18

Primera regla de oro: no cancele el registro de los scripts agrupados en el núcleo y sustitúyalos por 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 la versión. Realmente, a menos que necesite absolutamente una versión alternativa de una secuencia de comandos integrada en el núcleo, solo use lo que se incluye con la base.

En segundo lugar, recomiendo encarecidamente que se enganche en wp_enqueue_scripts para el registro y puesta en cola del script, en lugar de init . ( funciona en init , pero desde la perspectiva de jugar de forma agradable con otros , 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.

    
respondido por el Chip Bennett 13.03.2012 - 15:46
4

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

  1. No use init para poner en cola . Use wp_enqueue_scripts para las cosas de front-end y admin_enqueue_scripts para el lado de administración. Sin embargo, puede utilizar init para registrar los scripts.
  2. El gancho wp_enqueue_scripts solo se dispara en el extremo frontal (y no en el página de inicio de sesión) - para que no tenga que revisar is_admin() .
  3. A menos que tenga una razón específica para hacer lo contrario, sugeriría que se registren y pongan en cola los scripts utilizando functions.php para 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 una secuencia de comandos cuando se utiliza un shortcode, es posible que desee utilizar wp_enqueue_script en la devolución de llamada del shortcode para ponerlo en cola solo cuando sea necesario (esto se 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 (quizás no ahora, pero en el futuro ...)

respondido por el Stephen Harris 13.03.2012 - 15:47
2

Aviso justo: desregistrar la versión empaquetada de WQ de jQuery a 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 es doble para los complementos, que a menudo (o con frecuencia, deberían, al menos) escribir sus complementos para obtener la 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 a 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' );

Supongo que aquí está cargando scripts desde un directorio js en su directorio de tema actual; cambiar el parámetro URI si eso no es cierto. El tercer parámetro array( 'jquery' ) dice que bbg-scripts depende de jquery , por lo que debe cargarse después. Consulte enlace para obtener más detalles.

    
respondido por el Boone Gorges 13.03.2012 - 15:42
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 te refieres a

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)

    
respondido por el Adam 13.03.2012 - 16:46
0

Si, por razones de rendimiento, desea cargar jquery y otros archivos js principales desde un CDN, asegúrese de que está cargando la misma versión para evitar que suceda algo desagradable con las funciones del núcleo y el complemento. Así:

$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');
    
respondido por el cjbj 31.10.2016 - 10:17
-2

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

  1. Registre (y tal vez en cola) jQuery usando una función, para que pueda ser utilizada por complementos.
  2. Cárguelo desde Google CDN con la url relativa al protocolo.
  3. Copia 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 recarga la página, recuerda si Google CDN está en línea o no durante 5 minutos usando la API de Wordpress Transient.

    
respondido por el nautilus7 06.05.2012 - 17:03