Tout savoir sur WordPress
Tutoriel WordPress

Insérer automatiquement son javascript dans le footer

Une astuce WordPress va nous permettre d’insérer automatiquement nos fichiers JavaScript dans le footer de notre site Internet.

Les développeurs se souciant de l’optimisation d’un site Internet savent qu’il est conseillé d’insérer son code javascript juste avant la fermeture de la balise <body>.

Grâce à une astuce WordPress, nous allons pouvoir injecter automatiquement nos scripts JS dans le footer.

Cette manipulation est possible grâce aux fonctions wp_register_script() et wp_enqueue_script().

Par défaut, votre script est envoyé dans la balise et sera accessible en appelant la fonction wp_head().

En précisant le booléen « true » au dernier argument de la fonction wp_register_script(), votre script sera inséré juste au dessus de la fermeture </body> et sera disponible en appelant la fonction wp_footer().

Profitons-en pour mettre à jour jQuery avec la version 1.5.2 et supprimer la version 1.4.4 de WordPress.

Copier le code ci-dessous dans le fichier functions.php présent à la racine de votre thème :

add_action('init', 'gkp_insert_js_in_footer');
function gkp_insert_js_in_footer() {

// On verifie si on est pas dans l'admin
if( !is_admin() ) :

    // On annule jQuery installer par WordPress (version 1.4.4
    wp_deregister_script( 'jquery' );

    // On declare un nouveau jQuery dernière version grace au CDN de Google
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js','',false,true);
    wp_enqueue_script( 'jquery' );

    // On insere le fichier de ses propres fonctions javascript
    wp_register_script('functions', get_bloginfo( 'template_directory' ).'/js/functions.js','',false,true);
    wp_enqueue_script( 'functions' );

endif;
}

Cet article a été mis à jour il y a 2474 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

16 Commentaires

  1. Un énorme merci pour cette astuce,
    j’avoue que j’ai eu bcp de mal à trouver l’info, meme dans le forum officiel (je suis novice en wp).

    Juste pour préciser, il faut coller ce code dans functions.php (au début j’essayais dans le … ).

  2. @Ronan : Ah merci pour l’astuce, je ne connaissais pas le lien qui permet de DL auto la dernière version de jQuery.

    Merci bien :)

  3. Bonjour,

    Je débute sur wordpress et m’occupe actuellement d’optimiser le chargement de page de mon site. Le problème est qu’après avoir copié/collé les lignes dans mon fichier functions.php, le plugin revolution slider ne fonctionne plus. Sauriez-vous m’indiquer la marche à suivre pour revenir à un état anterieur et fonctionnel ?

    Merci d’avance pour votre réponse.

  4. Hann j’ai fait une bêtise ! J’ai copié collé ton code tel quel, ça fonctionnait bien, j’ai modifié d’autres choses, et je me rend compte que le footer arrive sous l’article et que la sidebar descend sous le footer o.O

    Après quelques recherches c’était simplement la version de Jquery dans ton code, qui était moins récente que celle utilisée sur WP3.8 avec le thème 2013.

    Par contre, c’est pour ça que je viens commenter, est-ce logique de d’utiliser jquery pour aller rajouter un margin-top automatiquement au footer pour qu’il reste sous la sidebar ? La sidebar est en position absolute, est-ce propre à votre avis ?

    Merci pour vos réponses ;)

    Et sinon merci pour ces articles intéressants qui permettent d’évoluer dans ce beau CMS ! En tout cas une erreur que je ne suis pas prêt de refaire.

    Etienne.

  5. Je sais qu’il est recommandé d’insérer wp_footer() au sein du footer de wp, par contre cer dernier va charger pas mal de scripts supplémentaires :

    – admin-bar.min.js?ver=3.8.1
    – admin-bar.min.css?ver=3.8.1
    et d’autres feuilles de styles et js inutiles chargés par d’autres plugins

    en plus de jquery cités dans le tutorial.
    Pour l’optimisation je prefère coller en dur l’url vers les scripts que mon site aura besoin, comme ça pas de pollution.

  6. Bonjour,
    Néophyte pour ce code, je pense que les valeurs de la version de WP doivent être changée : 1.4.4 vers 1.5.2, non?
    Que mentionne t’on comme version pour que ce script soit efficace à la place de 1.4.4 et 1.5.2 ?
    J’utilise la version 3.8.2
    Cordialement.

  7. @mai14: Votre remarque est bonne. Cet article date de 2011, la version de jQuery est donc à mettre à jour.

  8. Bonjour,
    Merci pour la réponse, mais Que mentionne t’on comme version pour que ce script soit efficace à la place de 1.4.4 et 1.5.2 ?
    Merci

  9. Suite : quoi que je fasse, la rapidité de mon site est 70/100 pour les mobiles et 80 à 85/100 pour les ordinateurs.
    J’obtiens bien les conseils de PageSpeedInsight pour optimiser mais je ne sais pas modifier quoi que ce soit.
    Que puis-je faire pour augmenter la vitesse de chargement?
    Cordialement.

  10. Bonjour !
    Je suis entrain d’optimiser mon blog et on m’a dit que je pouvais ajouter juste ces lignes :
    /* Scripts dans le footer*/
    add_action(‘init’, ‘gkp_insert_js_in_footer’);
    function gkp_insert_js_in_footer() {
    // On verifie si on est pas dans l’admin
    if( !is_admin() ) :
    // On insere le fichier de ses propres fonctions javascript
    wp_register_script(‘functions’, get_bloginfo( ‘template_directory’ ).’/js/functions.js’, »,false,true);
    wp_enqueue_script( ‘functions’ );
    endif;
    }

    Est-ce correct ?? ou devrais-je ajouter les autres lignes cite dans votre article ? je suis novice donc je ne connais pas trop bien les codes.
    Je vous remercie

  11. Ah oui une seconde question je rajoute la ligne de code dans le functions.php juste avant ?> n’est ce pas ??
    je vous remercie pour votre aide

12456271ea345895d1cb063d9294c76fc