WordPress : plugins et ligne de flottaison

Sur WordPress, beaucoup de plugins appellent leurs scripts dès le head, c’est-à-dire qu’avant d’afficher la page, de très nombreux scripts sont appelés. Cela peut se révéler problématique, car ll’ajout de nombreux plugins surchargera la page de manière à ce que les différents outils analysant la rapidité de votre site vous signalent systématiquement que vous devriez déplacer vos scripts dans le footer.

La ligne de flottaison est tout simplement la balise . Tout se qui se trouve au-dessus peut ralentir le chargement de la page, d’autant plus si vous faites comme nombre de débutants et que vous avez installé une foultitude d’outils, de plugins, d’extensions et de scripts.

WordPress permet aux développeurs d’utiliser la fonction wp_enqueue_script(), qui ajoutera votre code là où vous le souhaitez, en fonction des paramètres que vous inclurez dans le fichier function.php.

Le problème est que beaucoup de plugins accrochent leurs scripts directement dans le … D’autant plus que si votre thème est plutôt « vieillot », vous n’aurez même pas à disposition les hooks wp_head() and wp_footer()…

Il n’y a pas véritablement de secrets pour placer les scripts de vos extensions dans le pied de page. Si vous les réécrivez, vous perdrez vos modifications dès que vous effectuerez une mise à jour de vos plugins. En revanche, dans le cadre d’un ajout de fichier CSS ou JS, vous allez pouvoir utiliser un outil très simple, fiable et stable, qui vous aidera à ajouter du javascript ou des CSS à votre thème

Insert Headers and Footers

Le plugin Insert Headers And Footers que vous pouvez télécharger ici offre la possibilité d’ajouter votre propre code, que vous allez pouvoir appeler dans votre pied de page ou dans votre head. Bien évidemment, et autant que possible, je vous invite à effectuer cela dans votre pied de page.

Afin d’être ordonné et de ne pas envoyer vos fichiers n’importe où sur votre FTP, je vous invite à créer un dossier dédiés à vos scripts, que vous allez trier selon le type de code utilisé.

Par exemple, à la racine de votre site, créez un dossier nommé « scripts », dans lequel vous allez ajouter deux dossiers, nommés « css » et « js ». Pour des raisons de sécurité, placez dans chacun de ces dossiers un fichier index.php vide. Cela permettra d’afficher une page blanche à toute personne cherchant à atteindre ce dossier depuis le navigateur.

Ajout d’un script CSS

Créez donc votre fichier CSS, et rangez-le dans le dossier concerné, à savoir /scripts/css. Nommez-le custom.css par exemple.

Installez le plugin Insert Headers and Footers, et via l’onglet « Réglages » puis « Insert Headers and Footers », vous allez pouvoir appeler votre script. Dans les deux champs qui sont proposés, il est donc bien évident que vous allez insérer votre script dans le footer (via le champ « Scripts in footer »).

Voici le code standard utilisé pour appeler un fichier CSS :

Afin de vérifier, ajoutez une CSS plutôt voyante, vous pourrez regarder par la suite sur votre site le résultat obtenu.

Ajout d’un fichier Javascript/Jquery

Maintenant que vous avez compris le principe, l’opération à réaliser pour inclure un fichier Javascript est donc très facile.. Dans le même champs « Scripts in footer », vous allez pouvoir saisir ceci :

Et pensez bien évidemment à ajouter votre script sur votre FTP, dans le dossier concerné.

Et voilà ! Vous savez à présent utiliser un plugin très simple qui « hookera » vos scripts de manière très propre et légère à votre site ! Dans le cadre d’un script Jquery, pensez à coder en mode NoConflict, afin de ne pas avoir de problèmes et pour optimiser votre code.

Allez, comem je suis sympa, je vous donne ici la syntaxe à adopter :-p

$j=jQuery.noConflict();

$j(document).ready(function(){
	
});