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 :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
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;
}
[/pastacode]
16 Commentaires
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 … ).
Merci pour l’astuce ! Au passage, on peut même se simplifier la vie en insérant directement la dernière MàJ de Jquery : http://code.jquery.com/jquery-latest.min.js
@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 :)
Superbe astuce, merci à toi, j’essaie un maximum d’éviter de devoir installer des plugins du genre “javascript in footer” etc…
Super et sympa. Merci pour l’astuce.
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.
@ Tim: En supprimant ce que vous aviez ajouté avant que ça bug ? :)
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.
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.
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.
@mai14: Votre remarque est bonne. Cet article date de 2011, la version de jQuery est donc à mettre à jour.
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
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.
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
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
février 2017 et le code est toujours ok, à condition de remettre la version jquery à jour bien sur !
un grand merci