¿Cómo agregar la etiqueta defer = “defer” en plugins javascripts?

29

No pude agregar etiquetas diferidas en plugins javascripts. La prueba de velocidad de página del desarrollador de Google me sugiere agregar una etiqueta diferida en el formulario de contacto 7 javascripts.

Así es como el formulario de contacto 7 incluye JavaScript en el encabezado.

add_action( 'wp_enqueue_scripts', 'wpcf7_enqueue_scripts' );

function wpcf7_enqueue_scripts() {
    // jquery.form.js originally bundled with WordPress is out of date and deprecated
    // so we need to deregister it and re-register the latest one
    wp_deregister_script( 'jquery-form' );
    wp_register_script( 'jquery-form', wpcf7_plugin_url( 'jquery.form.js' ),
        array( 'jquery' ), '2.52', true );

    $in_footer = true;
    if ( 'header' === WPCF7_LOAD_JS )
        $in_footer = false;

    wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'scripts.js' ),
        array( 'jquery', 'jquery-form' ), WPCF7_VERSION, $in_footer );

    do_action( 'wpcf7_enqueue_scripts' );
}

Ahora, ¿cómo agregar la etiqueta defer = "defer" en el código anterior?

Giri
fuente
2
Boleto
scribu
1
Buena pregunta @Viruthagiri.
Ramkumar M

Respuestas:

57

A partir de WordPress 4.1 hay un filtro: script_loader_tag. Puedes usarlo para encontrar el script correcto:

add_filter( 'script_loader_tag', function ( $tag, $handle ) {

    if ( 'contact-form-7' !== $handle )
        return $tag;

    return str_replace( ' src', ' defer="defer" src', $tag );
}, 10, 2 );

Vieja respuesta

No hay un filtro dedicado disponible ... al menos no puedo ver uno. Pero …

  • wp_print_scripts() llamadas WP_Scripts->do_items()
  • que llama WP_Scripts->do_item()
  • que usa esc_url()
  • lo que hace ofrecer un filtro: 'clean_url'.

Y aquí vamos:

function add_defer_to_cf7( $url )
{
    if ( FALSE === strpos( $url, 'contact-form-7' )
      or FALSE === strpos( $url, '.js' )
    )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}
add_filter( 'clean_url', 'add_defer_to_cf7', 11, 1 );

Advertencia: no probado, solo una idea. :)

Actualizar

He escrito y probado un complemento con este código. Ver https://gist.github.com/1584783

fuxia
fuente
Esto es perfecto también para usar con data-main en requirejs
Nicola Peluchetti
Es un buen truco, y muy simple. ¡Creo que sería bueno también para agregar charset = 'utf-8' cuando sea necesario!
webaware
Muy bien, pero ¿por qué: Debe ser un' no "!?
henrywright
@henrywright WordPress agrega 'en ambos lados de la cadena devuelta, "resultaría en un HTML no válido.
fuxia
2
Probablemente una buena idea en caso de que alguien quiera convertir esto para que funcione con otros scripts será asegurarse de validar para usarlo solo en el final de la fuente, tal vez usar if( ! is_admin() ){}complementos populares como ACF podría causarle dolor de cabeza.
crissoca