JavaScript pour les utilisateurs de WordPress: ce que vous devez savoir

En décembre, à wordcamp US, Matt Mullenweg, cofondateur de WordPress, a utilisé son discours de situation sur les mots pour nous inciter à « approfondir l’apprentissage du JavaScript ». Mais qu’est – ce que cela signifie? Que doivent savoir les développeurs WordPress sur javascript? JavaScript est un langage de première ligne mature et en évolution qui est traditionnellement utilisé pour créer des animations et des effets sur les pages Web. Si vous avez un plug – in sur votre site pour les curseurs, les liens vers les médias sociaux ou les menus de navigation de réponse, vous pouvez utiliser Javascript pour créer des effets.
Si vous êtes un développeur WordPress habitué à l’utilisation de PHP, vous n’avez peut – être jamais été en contact avec une ligne de JavaScript et vous pourriez être un peu effrayé par la perspective d’un développement en profondeur. Mais la bonne nouvelle est que PHP et Javascript ont des similitudes. Ils fonctionnent de différentes façons et environnements, mais le Code que vous écrivez n’est pas toujours si différent. Dans cet article, je décrirai quelques concepts JavaScript clés que les développeurs de WordPress doivent connaître pour commencer à travailler. Je vais discuter: Javascript et WordPress: comment ils interagissent, les similitudes et les différences dans l’utilisation de JavaScript dans les thèmes et les plug – ins: la façon la plus simple de commencer à apprendre JavaScript à interagir avec l’api WP rest: aperçu. Mais commençons par un bref aperçu de JavaScript et pourquoi il est devenu si populaire.
Qu’est – ce que JavaScript exactement? JavaScript est un langage de programmation frontal (également appelé client), ce qui signifie que lorsque les utilisateurs visitent votre site Web, il communique avec leur navigateur Web. C’est la principale différence entre JavaScript et PHP, un langage d’arrière – plan (ou côté serveur), ce qui signifie qu’il communique avec le serveur. Cela signifie que les sites basés sur JavaScript peuvent fonctionner plus rapidement et être plus réactifs: Si votre site utilise PHP pour répondre à ce que vos utilisateurs font, ric
Hiesta va au serveur pour traiter ce changement, puis la page met à jour et active le changement. Si vous utilisez Javascript, le navigateur traite les modifications, ce qui signifie que la demande n’a pas besoin d’aller au serveur et que la page n’est pas mise à jour. Vous pouvez imaginer les avantages: la suppression de toutes ces requêtes sur le serveur peut rendre votre site plus rapide et vous donner la flexibilité de créer des applications Web qui sont très similaires aux applications de bureau.
En fait, en tant qu’utilisateur de WordPress, vous en utilisez déjà un parce que le logiciel WordPress utilise Javascript pour alimenter les écrans de gestion d’arrière – plan. Si vous avez déjà fait glisser et déposer un projet dans un menu, créé un widget ou utilisé un programme personnalisé, vous bénéficiez du support Javascript pour la gestion WordPress. Mais cela ne signifie pas que JavaScript est toujours meilleur que PHP. Parfois, vous voudrez peut – être que le serveur mette à jour la page, par exemple, si vous voulez générer de nouvelles pages et URL à des fins de référencement (bien qu’il y ait un moyen de contourner cela en javascript).
Un autre inconvénient potentiel de l’utilisation de JavaScript est qu’il ne fonctionnera pas si votre utilisateur n’a pas activé JavaScript dans son navigateur. Les navigateurs modernes (bureau et mobile) peuvent parfaitement fonctionner avec Javascript, mais rien que vous ajoutez avec Javascript ne fonctionnera si vos utilisateurs utilisent un navigateur plus ancien, ou si votre JavaScript ne fonctionne pas avec leur version d’Internet Explorer, ou si l’aide que vous utilisez exige que javascript soit désactivé. Il est donc préférable d’avoir un repli côté serveur au cas où. Enfin, il est important de se rappeler que les balises générées avec Javascript après le chargement de la page ne sont pas toujours numérisées par les moteurs de recherche. Par conséquent, si certains contenus sont essentiels à la mise en page du moteur de recherche, utilisez le langage côté serveur ou U
La gestion impliquant des changements instantanés utilisera Javascript, y compris: créer et modifier des menus créer et modifier des widgets mettre à jour des plug – ins et des sujets en utilisant des personnalisateurs. Ce n’est que lorsque vous cliquez sur les boutons publier, mettre à jour ou enregistrer des modifications activés par PHP que la base de données est sauvegardée en permanence et que l’écran d’administration est mis à jour, c’est pourquoi il est si important de cliquer sur ces boutons.
JavaScript et l’api WP – rest au cours de la dernière année, JavaScript est passé d’un rôle de support à un rôle de leader plus proche dans WordPress grâce à l’api rest de WordPress. Je ne vais pas détailler ici ce qu’est l’api parce que nous l’avons déjà fait, mais c’est un exemple de la façon dont WordPress interagit avec Javascript. L’API elle – même est écrite en PHP parce qu’elle doit interagir avec la base de données dans un langage côté serveur. Mais la différence est que vous pouvez interagir avec Javascript, en particulier avec les objets json.
Plus loin dans cet article, je vais vous donner un aperçu de la façon de faire, mais d’abord je vais voir où la plupart des gens commencent à utiliser javascript avec wordpress: ajoutez – le aux plug – ins et aux thèmes. Utilisation de JavaScript dans les plug – ins et les thèmes si vous voulez ajouter des effets Javascript, vous pouvez le faire à travers les plug – ins et les thèmes. Si vous utilisez l’API rest, vous pouvez le faire dans un plug – in ou un sujet (en utilisant PHP et Javascript optionnel) ou via une application externe (en utilisant JavaScript). À mon avis, il vaut la peine de commencer à ajouter une ou deux interactions en utilisant jquery, car cela vous aidera à vous familiariser avec l’utilisation du JavaScript. Mais si vous voulez passer directement à l’API rest, continuez!
Voyons comment insérer des scripts dans des sujets et des plug – ins, et comment appeler des bibliothèques externes. 1. Ajoutez un script au plug – in et au thème – Si vous écoutez
Matt et vous avez tout appris sur le javascript à Noël, et vous avez probablement rencontré comment Page de. Si vous utilisez du HTML statique, c’est la bonne approche. Mais arrêtez! Dans WordPress, vous ne devriez pas appeler un script à partir d’une Section , Vous voudrez peut – être l’ajouter au fichier d’en – tête. Php ou connectez – le à la tête wp \ u dans le plug – in. Il y a une façon correcte d’ajouter des scripts dans WordPress, appelée queue. Il est préférable de faire la queue pour deux raisons principales: éviter d’ajouter des scripts plusieurs fois, car wordpress ne les chargera pas deux fois si le même script est mis en file d’attente deux fois. Ajoutez l’ordre dans lequel vous travaillez avec les dépendances et les scripts, de sorte que si un script (par exemple, un script que vous écrivez en utilisant jquery) doit charger un autre script (par exemple, jquery), il sera chargé dans l’ordre correct. Notez que jquery (et d’autres) est déjà en file d’attente dans WordPress, donc vous n’avez pas besoin de faire la file d’attente: il suffit de mettre le script en file d’attente et de définir jquery comme une dépendance. Apprenez comment charger correctement les scripts dans WordPress grâce à notre guide de scripts supplémentaires. Vous pouvez utiliser la fonction WP _ enqueue script (), l’insérer dans la fonction, puis crocheter le script WP enqueue script. Si vous chargez un script dans l’écran d’administration, utilisez la fonction WP _ enqueue scripts () de la même façon, mais Suspendez la fonction admin enqueue styles. Par conséquent, pour charger un script dans un thème, vous devez utiliser le code suivant: l’ordre de chargement b21307bacb005482ffa ajoute un script appelé mon script. JS, stocké dans le filtre de script du sujet. J’ajoute toujours des scripts dans un dossier séparé parce qu’ils peuvent garder les choses en ordre et sont particulièrement utiles lorsque vous avez besoin d’ajouter plusieurs scripts. Ce script dépend de jquery et sera chargé sur chaque page. Parfois, tu ne peux pas.
: Javascript a un opérateur de module (%), qui renvoie un nombre divisé par le reste d’un autre nombre. JavaScript et PHP utilisent = assigner et = = pour l’égalité. Fonction. Vous pouvez créer des fonctions en javascript comme en PHP. La syntaxe de base est la même que PHP. Conditions Vous pouvez utiliser if, else et ElseIf en javascript de la même façon que vous utilisez ElseIf, else et ElseIf en PHP. Mais il y a quelques différences entre JavaScript et PHP, et quelques nouveaux concepts. Voici quelques – uns des plus importants: la syntaxe. JavaScript est plus lâche en syntaxe. Par conséquent, si vous perdez un point – virgule, le Code peut encore fonctionner. Méthode. La méthode est ce qui se passe sur l’objet. Il est similaire à une fonction en PHP: lorsque vous créez une fonction, vous pouvez l’appeler en utilisant une méthode, ou vous pouvez appeler une méthode d’intégration. La méthode peut être identifiée entre parenthèses après le nom. Objet. Les objets en javascript sont quelque chose sur la page, comme un élément. Une variable est également un type d’objet. Les objets en PHP sont très différents et ils sont utilisés avec les classes louées aux objets en PHP. Propriété La propriété est la valeur associée à l’objet. Les propriétés sont également utilisées en PHP (avec des classes), mais elles fonctionnent différemment. Les méthodes, les objets et les propriétés sont des concepts de base utilisés lors de l’écriture de JavaScript. Ceci est démontré par un exemple: l’ordre de chargement b2215307bacb005482ffa dans le code ci – dessus, j’a i créé une variable appelée animal (objet). Il a de nombreux attributs, types et couleurs, chacun avec une valeur. J’utilise donc la méthode des documents. Write () renvoie la valeur de la propriété type à la page Web. L’utilisation de la Bibliothèque jquery pour ajouter des effets et des animations au contenu disponible en JavaScript vous offre une large gamme d’effets que vous pouvez utiliser dans les thèmes et les plug – ins et groupés avec wordpress, ce qui en fait un bon point de départ.
Goûtez – en un autre. Animation: en utilisant l’attribut animé (), vous pouvez animer n’importe quel attribut CSS qui accepte des valeurs numériques, telles que la taille du texte, la position de l’élément ou l’opacité. Jquery (ou plus précisément JavaScript) utilise également des fonctions que vous pouvez définir, ce qui n’est pas différent de la façon dont vous l’utilisez en PHP. Si les méthodes et les effets jquery ne sont pas suffisants pour vous, vous pouvez utiliser la Bibliothèque d’interface utilisateur jquery, qui vous donne accès à plus d’interactions et d’effets. JavaScript et API de repos WP c’est intéressant. L’API WP – rest vous permet non seulement d’ajouter des effets en utilisant Javascript, mais aussi d’interagir avec la base de données du site. L’API WP – rest utilise json et le Sous – ensemble JavaScript utilise json (JavaScript OBJECT REPRESENTATION) pour ce faire. Json est conçu pour lire, écrire et modifier des données en javascript. Utilisez les concepts JavaScript que j’ai déjà introduits: objets, tableaux, chaînes et valeurs. Par conséquent, chaque entrée dans la base de données est un objet. Il a une étiquette (chaîne) et une valeur. Votre site contiendra également des tableaux et des tableaux à l’intérieur de ceux – ci. Json peut gérer ça. Comme en PHP, les valeurs peuvent être des chaînes, des nombres, des tableaux (dans ce cas, des tableaux imbriqués) ou des booléens. Il peut aussi être un objet. En savoir plus sur la façon de combiner json avec l’API rest va au – delà du champ d’application de cet article, mais voici une introduction: outils. La première chose dont vous avez besoin est un client http qui interagit avec l’API. Le facteur le plus populaire que j’ai rencontré était Chrome. Donc vous travaillez pour ce client. J’ai trouvé. Avant d’interagir avec le site, vous devez vérifier que l’API rest est activée sur le site. Il existe plusieurs façons de le faire, que vous pouvez voir dans la documentation de l’API rest. Authentification. Pour des raisons de sécurité, vous devez utiliser l’authentification. Vous pouvez utiliser
Une des trois méthodes: vérifier les cookies pour les sujets et les plug – ins qui fonctionnent sur le site; Authentification des applications externes oauth; Et l’authentification de base des clients externes pendant le développement (non recommandé pour la production en raison de la faible sécurité). Apprenez comment il fonctionne sur le site Web de l’API rest. Récupération des données. Vous pouvez le faire en utilisant la commande get. Cela restaurera toutes les données associées au poste, mais ne produira aucun résultat. Ainsi, par exemple, pour obtenir tous les messages dans le site, je vais utiliser: ou pour obtenir seulement un message avec ID 100, je vais utiliser: modifier et entrer les données. Vous pouvez faire plus que simplement récupérer des données: la commande put vous permet d’éditer des données et la commande post vous permet de publier de nouvelles données. Pensez à la façon de mettre à jour et de poster votre billet. Tout d’abord, je vous recommande d’utiliser l’API pour récupérer les données afin d’éviter les erreurs et la perte de données. Publication et traitement des données. Après avoir récupéré les données en utilisant la commande get, vous pouvez les exporter et les manipuler. L’API rest vous offre de nombreuses fonctionnalités pour travailler et filtrer les objets json: l’une des ressources les plus intuitives que j’ai trouvées est le livre électronique de Josh Pollock sur l’API WP – rest. Vous pouvez traiter des données dans un plug – in PHP, ou vous pouvez ignorer complètement PHP et créer des applications autonomes en utilisant Javascript, ce qui est la vraie possibilité. Je recommande de commencer par mélanger JavaScript et PHP, en utilisant les conseils du livre de Josh ou notre guide d’utilisation de l’API WP – rest, parce que la courbe d’apprentissage n’est pas trop raide. JavaScript n’a pas besoin d’être effrayant! L’idée de laisser vos compétences en PHP transpirantes derrière vous et d’apprendre le javascript peut être intimidante. Mais la bonne nouvelle est que JavaScript a beaucoup en commun avec php; Non seulement certains concepts, syntaxe et Code communs sont partagés, mais une structure et une logique sont utilisées