Sommaire
Vous voulez apprendre à ajouter correctement des JavaScripts et des styles dans WordPress ? L’ajout de code dans WordPress peut être évité la plupart du temps en utilisant des plugins, mais l’écriture du code a ses propres avantages. Le principal avantage est que le code est léger par rapport à l’installation d’un plugin. Cela vous aidera également à maintenir la vitesse et les performances de votre site web.
Bien sûr, bien que ce soit minime, l’installation de nombreux plugins finira par avoir un effet négatif sur les performances et la vitesse de votre site. Un site plus lent peut être très ennuyeux pour vos visiteurs, et la vitesse est l’un des nombreux facteurs SEO qui déterminent votre classement sur les moteurs de recherche comme Google et Bing. De nombreux petits plugins WordPress peuvent être éliminés en écrivant ou en trouvant quelques lignes de code qui peuvent faire ce que ces plugins font. Aujourd’hui, je vais vous montrer comment ajouter correctement des JavaScripts et des styles dans WordPress.
Dois-je vraiment utiliser JaveScript et les styles dans WordPress
La réponse est simple : non. Il est tout à fait possible de créer un site web qui fonctionne bien sans jamais écrire une seule ligne de code. C’est d’ailleurs l’une des raisons pour lesquelles la plateforme WordPress prospère. Tout le monde peut créer un site web sans avoir de connaissances en matière de codage. Ce n’est pas parce que vous pouvez créer un site web sans écrire de code que vous devez le faire. Vous pouvez optimiser votre site web en écrivant un code qui effectue les tâches courantes des plugins. Cela peut améliorer les performances de votre site web et garantir une meilleure expérience à vos visiteurs.
Erreurs courantes commises lors de l’ajout de JavaScripts et de styles dans WordPress
Si vous ne connaissez pas le code, il est très probable que vous puissiez faire une erreur, mais la plupart de ces erreurs sont très simples à corriger. Le plus grand problème pour les nouveaux codeurs sur WordPress est le placement du code. Il y a beaucoup de fichiers dans le dossier wp-content et il est très simple de cliquer sur le mauvais fichier et d’y placer du code. Les problèmes peuvent aller de rien d’important à l’arrêt de votre site web, c’est pourquoi il est fortement recommandé de créer une sauvegarde de votre site web avant d’insérer un code quelque part.
L’un des problèmes les plus courants qui ralentissent un site web est l’utilisation de jQuery. Bien que ce type de codage soit nécessaire dans de nombreux plugins pour fonctionner correctement, il cause des problèmes en appelant une bibliothèque JavaScript plus souvent qu’il n’est nécessaire. Cela est souvent dû au fait que des codeurs inexpérimentés introduisent du code redondant. L’un des meilleurs moyens de tester les doublons de JavaScript consiste peut-être à utiliser des outils comme le Pingdom Website Speed Test ou le PageSpeed Insight de Google. L’un ou l’autre de ces outils vous montrera quel JavaScript provoque une réaction lente de vos pages web.
Comment ajouter en toute sécurité du JavaScript et du code de style à WordPress
Aujourd’hui, je vais vous montrer comment ajouter correctement des JavaScripts et des styles dans WordPress. Non seulement vous pouvez écrire ou trouver le code que certains plugins font et vous en débarrasser entièrement, mais on vous demande parfois d’ajouter des lignes de code au fichier functions.php de votre thème WordPress. Vous devez savoir comment ajouter du code en toute sécurité, ce qui est très facile. WordPress a une très grande communauté de développement et cela est dû au système des Enqueue Scripts. En utilisant ce code, vous pouvez dire à WordPress quand charger un fichier, quand ouvrir un fichier et quelles sont les dépendances des fichiers.
Vous devez avoir accès à tous les fichiers qui font fonctionner votre site web. Ces fichiers se trouvent sur le cPanel et votre hébergeur vous donnera les informations de connexion lors de la création d’un compte. Une fois que vous vous êtes connecté à votre cPanel, cliquez sur l’option Gestionnaire de fichiers.
Vous devez maintenant localiser l’endroit où vous voulez coller ou écrire le code. En général, toute votre écriture de code se fera dans le fichier functions.php de votre thème. Cliquez sur le répertoire public_html. Cliquez sur le dossier wp-content. Cliquez sur le dossier themes. Cliquez sur le dossier du thème que vous utilisez actuellement. Faites un clic droit sur le fichier functions.php et sélectionnez l’option “Edit”.
Dans le fichier functions.php, vous verrez beaucoup de code pour les différents éléments de votre site web. L’une des règles de base les plus importantes est de s’assurer que vous n’insérez pas de code dans un autre bloc de code. Il s’agit d’un très gros “non” qui non seulement empêchera le code que vous avez inséré de fonctionner, mais qui brisera aussi le code de ce dans quoi vous l’avez inséré. Pour être sûr, je recommande toujours d’aller au bas de la page et d’insérer le code au-dessus de la section “Inclure des fichiers” comme indiqué ci-dessous.
Vous devez maintenant ajouter le code nécessaire pour appeler les scripts à charger à l’aide de la bibliothèque jQuery. Copiez et collez l’exemple de code suivant :
fonction call_scripts() {
wp_register_script(‘new_script’, plugins_url(‘new_script.js’,
__File__), array(‘jquery’), ‘1.1′, true) ;
wp_enqueue_script(‘new_script’) ;
add_action( ‘wp_enqueue_scripts’, ‘call_scripts’ );
Ceci est à nouveau un exemple de code, il ne fonctionnera pas dans son état actuel. Expliquons chaque élément du code. La première ligne de tout code que vous placerez sera toujours “fonction “nom”()” et vous devriez toujours essayer soit de créer un nom facile à identifier et l’ajout d’un commentaire peut vous aider à rester organisé. C’est à l’intérieur des lignes de wp_register_script que toute la magie se produit.
La structure est faite pour être $handle, $src, $deps, $ver, $in_footer. Dans cet exemple :
Nom du scénario : $handle = ‘new_script’ (nouveau script)
Localisation : $src = plugins_url(‘new_script.js’, _File_)
Dépendances : $deps = array(‘jquert’)
Version : $ver = “1.1” (facultatif)
Charge dans le pied de page : $in_footer = true (faux si vous ne le voulez pas dans le pied de page)
Remplacez toutes les informations par ce dont vous avez besoin ou ce que vous voulez faire sur votre site web. Si vous utilisez des informations erronées, vous risquez d’obtenir un code d’erreur. Chaque fois que vous voulez appeler le script, tapez simplement wp_enqueue_scripts().
Maintenant, de manière très similaire à l’ajout de JavaScripts, vous pouvez également créer des styles de file d’attente :
fonction call_styles() {
wp_register_style(‘new_stylesheet’, plugins_url(‘new-stylesheet.css’, __File__)) ;
wp_enqueue_style(‘new_stylesheet’) ;
add_action( ‘wp_enqueue_scripts’, ‘call_styles’ );
Il est très similaire et utilise même la même convention d’appel, wp_enqueue_scripts().
Félicitations, vous avez appris où ajouter le code d’appel et comment il fonctionne. Tant que vous insérez les bonnes informations à l’intérieur, vous n’aurez aucun problème pour appeler des scripts ou des styles dans WordPress.
Se familiariser avec le code dans WordPress
Vous n’avez peut-être pas besoin de code pour créer un site web et il y en a beaucoup qui n’en ont pas besoin, mais l’utilisation de code dans WordPress est un excellent moyen d’améliorer les performances de votre site web et de gagner un avantage sur la concurrence en ayant un chargement de page plus rapide. Être plus rapide n’est pas seulement bon pour les visiteurs, mais peut aussi vous aider à augmenter vos performances de référencement, puisque la vitesse est l’un des nombreux facteurs utilisés pour déterminer votre classement dans les moteurs de recherche.
Il existe de nombreuses ressources en ligne pour vous aider à apprendre à coder et YouTube est un endroit idéal pour regarder gratuitement des conférences sur le codage. Il n’y a pas lieu de se précipiter car, comme je l’ai dit, on peut tout à fait gérer un site web sans codage, mais on peut en gérer un meilleur avec du codage.
À quel niveau de codage étiez-vous lorsque vous avez commencé à utiliser la plate-forme WordPress ? Pensez-vous que l’augmentation des performances de votre site vaut la peine d’apprendre une bonne étiquette de codage ?
