Comment ajouter la balise defer = "defer" dans les javascripts du plugin?

Question

Comment ajouter la balise defer = "defer" dans les javascripts du plugin?

31

34634 2012-01-09

Jen'aipaspu ajouter debalise defer dans lesjavascripts duplugin. Letest de vitesse depage des développeurs Googleme suggère d'ajouter unebalise defer dans le formulaire de contact 7 javascripts.

Voici comment leformulaire de contact 7inclut dujavascript dans l'en-tête.

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

Maintenant,comment ajouter labalise defer="defer" dans le code ci-dessus?

I couldn't add defer tag in plugin javascripts. Google developer pagespeed test suggests me to add defer tag in contact form 7 javascripts.

This is how contact form 7 includes javascript in header.

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

Now how to add defer="defer" tag in the above code?

- Billetpertinent: http://core.trac.wordpress.org/ticket/12009
  
  Relevant ticket: http://core.trac.wordpress.org/ticket/12009
  - 2
  - 2012-01-09
  - scribu
- Belle question @Viruthagiri.
  
  Nice Question @Viruthagiri.
  - 1
  - 2012-02-02
  - Ramkumar M

1 réponses

votes

fuxia · Accepted Answer · 2012-01-09

60

2012-01-09

Depuis WordPress 4.1,ilexiste unfiltre: script_loader_tag . Vouspouvez l'utiliserpourtrouver lebon script:

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

Ancienne réponse

Iln'y apas defiltre dédié disponible… dumoinsje nepeuxpasen voir un. Mais…

wp_print_scripts() appelle WP_Scripts->do_items()
qui appelle WP_Scripts->do_item()
qui utilise esc_url()
qui propose unfiltre: 'clean_url'.

Etnous y voilà:

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

Attention:nontesté,juste uneidée. :)

Mise àjour

J'ai écritet testé unplugin avec ce code. Voir https://gist.github.com/1584783

As of WordPress 4.1 there is a filter: script_loader_tag. You can use it to find the correct script:

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

Old answer

There is no dedicated filter available … at least I cannot see one. But …

wp_print_scripts() calls WP_Scripts->do_items()
which calls WP_Scripts->do_item()
which uses esc_url()
which does offer a filter: 'clean_url'.

And here we go:

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

Caveat: not tested, just an idea. :)

Update

I have written and tested a plugin with this code. See https://gist.github.com/1584783

C'estparfait égalementpour une utilisation avec data-main dans requirejs

This is perfect also to use with data-main in requirejs
- 0
- 2012-06-06
- Nicola Peluchetti
C'est unbon hack,et si simple.Jepense que ce serait aussibien d'ajouter charset='utf-8' sinécessaire!

That's a nice hack, and so simple. I reckon it'd be good also for adding charset='utf-8' when necessary!
- 0
- 2013-01-16
- webaware
Génial,maispourquoi: doit être un ",pas"!?

Great, but why: Must be a ', not "! ?
- 0
- 2014-02-01
- henrywright
@henrywright WordPress ajoute `` des deux côtés de la chaîne renvoyée,un `" `entraînerait un HTMLinvalide.

@henrywright WordPress add `'` on both side of the returned string, an `"` would result in invalid HTML.
- 0
- 2014-02-01
- fuxia
Probablement unebonneidée au cas où quelqu'un voudrait que celafonctionne avec d'autres scripts sera de s'assurer de validerpour l'utiliser uniquement à l'extrémité de lapolice,peut-êtreen utilisant `if (! Is_admin ()) {}` despluginspopulaires comme ACFpourraientvous donner unmal detête.

Probably a good idea in case someone wants to turn this to work with other scripts will be to make sure to validate to use it only on the font-end maybe using `if( ! is_admin() ){}` popular plugins like ACF might give you a headache.
- 2
- 2015-04-28
- crissoca
@crissoca,mercimonpote.J'avais oublié celajusqu'à ce que TinyMCEn'aitpasfait ce qu'il devait (qtagsmanquantset ainsi de suite :-D).Alors oui,utilisez-le UNIQUEMENTen front-end!

@crissoca, thanks mate. Had forgotten this till TinyMCE didn't do what it should (missing qtags and so on :-D ). So yes use this ONLY at the front-end!
- 0
- 2015-06-12
- Charles