WordPress Javascript : un guide du débutant

Si vous demandez à un million de développeurs Web ce qu'est JavaScript, vous obtiendrez en retour un million de réponses différentes. Pratiquement tout ce qui est interactif sur le Web se fait à l'aide de JavaScript.

En tant que système de gestion de contenu (CMS) moderne, WordPress et bon nombre de ses plugins reposent en partie sur JavaScript pour faire le travail. Contrairement à ce que cela peut paraître, JavaScript n'a aucun rapport avec le langage de programmation Java. On ne l'appelle ainsi qu'à des fins de marketing.

Plongeons dans tout ce que vous devez savoir pour exploiter la puissance combinée de JavaScript et WordPress.

Qu'est-ce que JavaScript ?

Il y a longtemps, Internet reposait exclusivement sur HTML et CSS. Cette combinaison permet un style très basique du contenu. Cependant, très peu de choses pouvaient être faites pour rendre le contenu dynamique et la création d'applications Web était hors de question.

Étant donné que les serveurs étaient beaucoup plus coûteux à entretenir, les développeurs ont décidé d'écrire du JavaScript pour fonctionner sur la machine cliente. Écrit de la même manière que d'autres langages de programmation fonctionnels, JavaScript peut intégrer des données dans des fonctions, les traiter et générer des données.

Les navigateurs Web ont un moteur JavaScript qui sait comment exécuter du code JavaScript. Par exemple, le moteur JavaScript dans Chrome est v8, tandis que le moteur JavaScript FireFox est SpiderMonkey. Pour cette raison, Javascript s'appuie sur les navigateurs pour « comprendre » comment interpréter, gérer et manipuler l'affichage des données.

Les aspects techniques de JavaScript

Vous souhaitez en savoir plus sur la technologie derrière JavaScript ? Il y a quelques différenciateurs importants à connaître pour ceux qui ont de l'expérience dans d'autres types de développement. Premièrement, JavaScript est agnostique de type comme PHP. Cela signifie que ses variables n'ont pas de type défini, et n'importe quelle variable donnée peut être affectée à presque n'importe quel type de valeur.

La plupart des langages modernes sont « orientés objet », ce qui signifie qu'ils reposent sur des « classes » réutilisables qui représentent un objet littéral. Le plus proche de JavaScript est celui des "prototypes". Ces structures de données peuvent être réutilisées et peuvent contenir certaines valeurs, mais leur fonctionnalité et leur facilité d'utilisation sont bien plus limitées que les langages construits autour du concept orienté objet, comme Java.

Que fait JavaScript ?

En raison de l'énorme soutien de la communauté et des investissements de grandes entreprises comme Facebook et même Netflix, JavaScript peut faire bien plus que fonctionner dans les navigateurs Web. JavaScript peut faire quelque chose d'aussi simple que de saisir l'année en cours pour l'afficher à côté du symbole du droit d'auteur sur un site Web, et un travail plus complexe tel que faire l'essentiel du traitement pour un éditeur d'images en ligne.

En un mot, JavaScript fait à peu près tout ce que le développeur veut qu'il fasse sur la machine du client. JavaScript se met en cache localement sur la machine cliente lorsque le client visite un site qui l'utilise.

Alors que les données sensibles doivent être traitées sur le serveur, de nombreuses applications Web utilisent massivement JavaScript pour tirer parti de la puissance de traitement de la machine cliente. Maintenant que nous sommes à l'ère des « frameworks » sans fin qui accélèrent le développement de divers types de contenu, les possibilités sont infinies.

JavaScript est-il sûr ?

Comme la majorité des protocoles et des langages plus anciens, JavaScript n'a pas été initialement conçu dans un souci de sécurité. C'est une chose parfaitement raisonnable à se demander, étant donné la prévalence des cyberattaques.

Il existe des extensions de navigateur telles que "NoScript" qui bloquent simplement l'exécution de tout le code JavaScript. Tant que vous suivez la règle générale du Web et que vous ne visitez pas de sites non fiables, vous pouvez autoriser JavaScript à s'exécuter.

Parce qu'il s'agit d'un langage de programmation, les utilisateurs malveillants peuvent bien sûr en abuser pour attaquer votre ordinateur. Les navigateurs modernes détecteront automatiquement la plupart de ces attaques. Si vous êtes préoccupé par la sécurité avec WordPress JavaScript, vous pouvez avoir l'esprit tranquille avec un plugin de sécurité WordPress qui met la plupart des aspects de la sécurité du site Web sur pilote automatique.

Deux principaux types d'attaques JavaScript

L'adage « Gardez vos amis proches et vos ennemis proches » est pertinent en matière de développement et de sécurité. Il est très important de comprendre comment les méchants profitent de JavaScript pour que vous puissiez contrecarrer leurs efforts !

Script inter-sites (XSS)

Les scripts intersites (XSS) sont un type d'attaque de malware qui est exécuté en exploitant les vulnérabilités intersites sur n'importe quel site WordPress. En fait, c'est le moyen le plus courant pour les sites WordPress d'être piratés car il y a tellement de plugins WordPress qui ont des vulnérabilités XSS.

Une attaque de script intersite est utilisée si une page autorise l'envoi de données sur celle-ci. Dans cette attaque, l'utilisateur malveillant place du code JavaScript dans les données à soumettre sur une page accessible au public.

Si aucune mesure d'atténuation n'est en place, ce code malveillant exécute en fait le code JavaScript sur l'ordinateur de toute personne qui visite cette page. C'est pourquoi il est important de « désinfecter » les entrées. Cela signifie qu'avant sa publication, vous supprimez des éléments tels que les crochets et les guillemets qui rendraient le code inutile.

Contrefaçon de demande intersites (CSRF)

Ce type d'attaque tire parti des pages Web auxquelles vous êtes peut-être déjà connecté. Le scénario le plus courant impliquerait que vous soyez connecté à votre banque.

Supposons que vous soyez connecté à votre compte bancaire, mais que vous décidiez ensuite d'aller sur un site Web torrent sur lequel CSRF est prêt à fonctionner. CSRF, en l'absence d'atténuations du navigateur, adopte le modèle de lien pour effectuer des opérations telles que les virements bancaires pour chaque grande banque, puis les exécute sur votre machine en arrière-plan.

Un scénario qui s'est réellement produit avec un site majeur et une grande banque était que le lien de la banque pour transférer de l'argent ressemblait à : www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 pour transférer 1 000 $ sur un compte numéroté 12345 .

Pour la banque, il semble que vous l'ayez demandé, et comme la demande proviendrait de votre adresse IP, il est difficile de prouver que vous ne l'avez pas initiée. Heureusement, la plupart des navigateurs modernes le détecteront automatiquement et l'empêcheront.

Puis-je utiliser JavaScript dans WordPress ?

Oui, vous pouvez utiliser JavaScript lorsque vous développez pour WordPress. Gardez à l'esprit que WordPress est un système de gestion de contenu flexible qui dispose de deux modes d'édition. L'un d'eux vous permet d'éditer directement du code, et l'autre vous permet d'utiliser un éditeur similaire à ce que vous pourriez voir sur un traitement de texte, également connu sous le nom d'éditeur « WYSIWYG ». Dans la version la plus récente de WordPress, l'éditeur WYSIWYG s'appelle Gutenberg.

Gardez à l'esprit que vous pouvez également utiliser JavaScript lorsque vous développez des extensions pour WordPress. Alors que le côté serveur de WordPress est PHP, le côté client est presque 100% du temps JavaScript.

Dois-je apprendre JavaScript pour WordPress ?

La réponse à ces questions dépend de ce que vous comptez faire avec WordPress. Si vous voulez juste quelques pages statiques que vous générez à l'aide de la plate-forme, vous vous en sortirez probablement sans apprendre JavaScript.

Du côté positif, il est assez facile de démarrer avec JavaScript, et vous en apprendrez également beaucoup sur le fonctionnement de HTML et CSS. Cependant, en plus de la formation WordPress, vous aurez envie de travailler sur l'apprentissage de JavaScript si vous souhaitez créer un site dynamique et mémorable.

Un avertissement rapide : si vous êtes un développeur Web débutant, ne vous attendez pas à maîtriser JavaScript en quelques jours. JavaScript est connu pour avoir des messages d'erreur très vagues et il est souvent critiqué pour être du « code spaghetti ». Cela signifie qu'au fil des ans, les développeurs ont accumulé beaucoup de code sans l'organiser correctement. En plus de cela, la plupart des développeurs apprennent à programmer dans des frameworks qui utilisent JavaScript mais dont la syntaxe est un peu différente.

Vous devriez surtout investir du temps dans l'apprentissage de JavaScript si vous êtes un pigiste ou une agence qui gère les sites des clients. Bien qu'il existe des outils de premier ordre qui vous permettent de gérer plusieurs sites WordPress, aucun plugin ne peut créer les sites pour vous !

De plus, si vous aspirez à devenir développeur Web, l'apprentissage de JavaScript est bénéfique pour ces carrières :

• Développeur frontal
• Développeur back-end
• Développeur full-stack

De plus, l'apprentissage de JavaScript, ainsi que de HTML, CSS et PHP plus avancés, constituent une base solide pour WP qui vous permettra probablement de réduire vos frais généraux. Vous n'aurez plus besoin de payer des sous-traitants externes, réduisant ainsi votre résultat net, pour effectuer des tâches qui, en réalité, peuvent prendre quelques minutes. Une fois que vous maîtrisez JavaScript, vous pouvez passer à des frameworks populaires, tels que React et Angular, pour créer des applications vraiment uniques et réactives au sein de WordPress.

Comment écrire du JavaScript lors du codage dans WordPress ?

Même si l'ajout de JavaScript à un site WordPress n'est pas aussi simple que l'ajout de CSS et de HTML, cela ne vous prendra pas longtemps pour commencer. Il y a deux façons différentes de l'aborder, et chacune a un objectif différent.

Méthode 1 : sur chaque page

Si vous cherchez à exécuter le même script sur chaque page de votre site WordPress, ajouter le code manuellement à chaque page serait pour le moins fastidieux. L'endroit approprié pour insérer JavaScript dans HTML est dans l'en-tête et le pied de page de la page.

Il existe quelques plugins gratuits qui prendront votre JavaScript personnalisé et le déposeront dans l'en-tête et/ou le pied de page de chaque page de votre site WordPress. Les administrateurs WordPress adorent ces plugins car ils fonctionnent parfaitement avec Google Analytics, garantissant que chaque page visitée est comptée, aidant à améliorer le classement SEO plus rapidement.

Méthode 2 : JavaScript différent sur chaque page

Disons que vous utilisez un site WordPress qui a un outil différent sur chaque page qui s'appuie sur au moins une « bibliothèque » pour fonctionner. Obliger tout votre JavaScript pour charger sur chaque page, surtout quand il est pas nécessaire, sera tout simplement un accès lent vers le bas sur votre site. Le bon sens nous dit que ralentir l'expérience de vos visiteurs n'est pas le meilleur moyen de gagner des affaires !

Il existe de nombreux tutoriels sur le Web qui présentent des méthodes incroyablement compliquées pour effectuer ce processus. S'il est vrai que cela peut être fait en effectuant des modifications complexes dans votre fichier functions.php, il n'est pas vraiment nécessaire d'adopter cette approche, sauf si vous aimez les maux de tête.

Au lieu de cela, installez le plugin Code Embed sur votre site. Cela vous permettra d'ajouter du JavaScript et de l'intégrer où vous le souhaitez dans la page.

Utilisation du plug-in CodeEmbed

Après avoir installé le plug-in Code Embed, accédez à Options d'écran et cochez la case "Champs personnalisés". Cela vous permettra d'ajouter votre JavaScript à la page.

Sur la page d'édition, vous verrez une boîte qui dit "Champs personnalisés", avec une option pour "Entrer de nouveaux" champs personnalisés. Cliquez dessus et vous aurez des zones de texte vides pour entrer le nom de votre code JavaScript, ainsi que pour le code lui-même.

Pour éviter les conflits avec les codes WordPress existants, vous devez commencer le nom de votre code JavaScript par les lettres majuscules « CODE ». Quelque chose comme "CODEtimer" serait bien. Ensuite, vous ajouterez le JavaScript réel dans l'autre boîte. Assurez-vous d'inclure les balises d'ouverture et de fermeture du script !

Une fois que vous avez terminé, cliquez simplement sur le bouton qui dit « Ajouter un champ personnalisé ». Enfin, identifiez où sur la page vous souhaitez que le code JavaScript s'exécute. Par exemple, si le code charge un minuteur, recherchez l'endroit de votre page où vous souhaitez insérer ce minuteur. Vous utiliserez ensuite la syntaxe exacte [[CODEtimer]] pour que WordPress y insère votre JavaScript, et le tour est joué !

Comment inclure mes fichiers JavaScript et CSS dans WordPress ?

Bien que WordPress ait des thèmes intégrés, de nombreux développeurs Web préfèrent avoir un design plus unique et utiliseront leur propre CSS. Vous aurez également besoin d'un moyen de stocker ces fichiers JavaScript.

Dans cette partie, vous devrez vous diriger vers votre gestionnaire de fichiers et localiser le fichier appelé "functions.php". Notez que ce sera dans le dossier où se trouve le thème de base de votre site.

Ajout de CSS à functions.php

Une fois dans le fichier functions.php , suivez ces étapes :

1. Sur une nouvelle ligne, créez une fonction vide en ajoutant la fonction code
   addMyCSS() { #Remplissez ceci plus tard }
2. « Enregistrez » votre fichier CSS avec WordPress en utilisant la fonction intégrée appelée wp_register_style à l'étape suivante
3. Supprimez le remplissage que nous avons mis dans le code et mettez à la place wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. Nous avons maintenant dit à WordPress comment appeler notre style CSS et où il se trouve. Il est maintenant temps de « mettre en file d'attente » le style ou de dire à WordPress que nous sommes prêts à l'utiliser.
5. En restant dans le bloc fonctionnel addMyCSS , ajoutez le code wp_enqueue_style('name_of_css_style'); juste en dessous du code que nous avons entré dans la dernière étape.
6. Il y a une dernière étape, mais d'abord, assurez-vous que vous êtes EN DEHORS de toute la fonction que nous avons créée et dans la partie générale du fichier PHP.
7. En dehors de addMyCSS , ajoutez simplement la ligne suivante : add_action('wp_enqueue_scripts','name_of_css_style'); . Cela indique à WordPress de déclencher le chargement de ce fichier lors du chargement de la page.

Vous vous demandez peut-être pourquoi nous avons wp_enqueue_scripts dans la fonction add_action pour une feuille de style. C'est simplement la façon dont WordPress a toujours implémenté la fonctionnalité.

Ajouter des fichiers JavaScript à WordPress

Maintenant que nous avons parcouru le processus de génération d'une fonction, d'enregistrement d'un fichier et d'ajout d'une action, cette partie devrait être un jeu d'enfant !

1. Créez une fonction dans functions.php appelée addMyJS comme nous l'avons fait avec addMyCSS .
2. Nous utiliserons la fonction wp_register_script , mais c'est un peu plus complexe. Il a cinq « paramètres » (les éléments mis entre parenthèses). Regardez ci-dessous pour voir ce qu'est chaque paramètre.
3. wp_register_script (1. Votre nom de script, 2. plugins_url (location_of_script.js, __FILE__), 3. tableau de dépendances JS, généralement array(jquery), 4. version (facultatif) de votre fichier JS entre guillemets simples, 5. devrait être true si vous voulez le JS dans votre pied de page, false si vous le voulez dans l'en-tête);
4. Voici un exemple pratique de JavaScript à exécuter dans le pied de page d'un thème : wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. Encore une fois, EN DEHORS de notre fonction addMyJS , « mettez en file d'attente » votre script en le mettant dans votre zone générale de PHP : add_action( 'wp_enqueue_scripts', 'addMyJS' );

Cela peut sembler complexe, mais une fois que vous aurez pris le coup, cela prendra moins d'une minute, alors n'ayez crainte !

Quels plugins puis-je utiliser pour ajouter du JavaScript à WordPress ?

Il existe de nombreux plugins entièrement gratuits à cet effet. Chacun fonctionne légèrement différemment, vous en expérimentez donc quelques-uns avant de vous engager. Voici cinq principaux à essayer.

• ASync – Unique, ce plugin charge à la fois vos fichiers JS et CSS séparément du reste de votre page. Cela peut être particulièrement utile s'il y a une erreur de codage qui empêcherait indéfiniment le chargement de votre page.

• JS dans Widgets – Vous avez juste besoin d'ajouter quelques lignes de codes pour quelque chose comme Google Analytics ? Ce plugin vous simplifie la tâche et permettra d'ajouter de petits extraits à vos sites WordPress.

• Zia CSS/JS Helper - Celui-ci est de loin le meilleur pour ceux qui ont l'habitude du développement Web HTML/CSS/JS classique. Il rend votre fonctionnalité d'édition WordPress tout comme l'édition d'un site via le gestionnaire de fichiers de cPanel. Vous pouvez utiliser CSS et JavaScript en ligne pour ajouter rapidement des morceaux de code, créer et gérer des fichiers externes, etc.

Sauvegardez toujours votre site en premier !

Alors que la grande majorité des plugins WordPress ne feront aucun mal à votre site, il y a toujours une chance que vous rencontriez des problèmes. Avant d'installer des plugins supplémentaires ou de modifier votre site, effectuez une sauvegarde de votre site à l'aide d'un plugin de sauvegarde WordPress capable de gérer des sauvegardes complètes de votre installation WordPress, comme BackupBuddy. Épargnez-vous des heures de retouches possibles et assurez-vous que tout votre travail acharné ne soit pas gaspillé.

Puis-je utiliser les API WordPress en utilisant JavaScript ?

Comme vous le savez peut-être, WordPress dispose d'une vaste série d'API ou d'interfaces de programmation d'applications. Les API sont essentiellement des fonctions côté serveur que vous pouvez utiliser dans des langages comme JavaScript. La méthode la plus récente et la plus moderne permettant aux développeurs d'apprendre les fonctionnalités de l'API WordPress se fait via la page de référence du code des API WordPress WordPress.

C'est là que nous avons obtenu ces "fonctions intégrées" que nous avons utilisées plus tôt. Nous pourrions parler pendant des jours de chaque fonction des API et de leur fonctionnement en tandem avec JavaScript. Cependant, il s'agit d'un sujet avancé qui nécessite simplement du temps et du dévouement individuels pour apprendre.

Existe-t-il des bibliothèques JavaScript adaptées à WordPress ?

Oui! Reconnaissant que de nombreux développeurs ne maîtrisent pas l'intégralité du contenu de l'API WordPress, de nombreux programmeurs ont créé des bibliothèques JavaScript qui peuvent être facilement intégrées, en utilisant l'un des plugins dont nous avons parlé précédemment.

La plupart des bibliothèques JavaScript se trouvent sur GitHub et sont entièrement gratuites. Il existe des centaines de milliers de bibliothèques JavaScript compatibles avec WordPress, allant de celle qui ajoute des effets amusants à WordPress à celle qui vous permet de créer un site avec une mise en page très similaire à Pinterest !

La bibliothèque la plus connue utilisée avec WordPress (et la plupart des sites) s'appelle jQuery. jQuery élimine la complexité de JavaScript et une fois que vous aurez compris, vous écrirez des fonctions rapidement et facilement.

Aider! Mon JavaScript WordPress ne fonctionne pas !

L'un des aspects les moins chanceux de JavaScript est que les erreurs ne sont pas évidentes. Et ajouter WordPress en plus peut le rendre assez déroutant.

Certaines erreurs peuvent être causées aussi facilement qu'un guillemet oublié. D'autres peuvent être causées par des erreurs de codage majeures qui ne sont pas si faciles à identifier. Alors, comment les développeurs professionnels font-ils la différence ?

Il existe deux clés principales pour le dépannage : la fonction JavaScript console.log et la console de débogage du navigateur. La console de Chrome en particulier est idéale pour cela.

console.log

Cela peut être utilisé pour voir quelle est la valeur d'une variable à un point donné d'une fonction et s'assurer que des parties des fonctions sont réellement atteintes. Dans un fichier JavaScript, vous mettez simplement quelque chose comme console.log("test"); .

La console de débogage

Selon le navigateur utilisé, la configuration de la console sera différente. Généralement, il vous suffit d'appuyer sur F12 pour l'ouvrir, puis de cliquer sur l'onglet "Console".

La console montrera quelle ligne, de quel fichier JavaScript, il y a eu une erreur. Il montre généralement la « trace de pile » complète ou la série de fichiers à parcourir jusqu'à ce que vous atteigniez le coupable. C'est également là que vos messages console.log s'impriment.

Conclusion : JavaScript + WordPress

Il existe des outils professionnels qui vous donneront beaucoup plus de perspicacité, mais ceux-ci coûtent généralement un joli centime. La bonne nouvelle est qu'au fur et à mesure que vous évoluerez en tant que prochain plus grand développeur de JavaScript WordPress au monde, les outils évolueront avec vous !

Kristen Wright

Kristen écrit des tutoriels pour aider les utilisateurs de WordPress depuis 2011. Vous pouvez généralement la trouver en train de travailler sur de nouveaux articles pour le blog iThemes ou de développer des ressources pour #WPprosper. En dehors du travail, Kristen aime tenir un journal (elle a écrit deux livres !), faire de la randonnée et du camping, cuisiner et vivre des aventures quotidiennes avec sa famille, dans l'espoir de vivre une vie plus présente.