TOC

Comment intégrer une application React dans WordPress sous Ubuntu 18.04

L’auteur a sélectionné la Electronic Frontier Foundation pour recevoir un don dans le cadre de la Write for DOnations programme.

introduction

WordPress est un système de gestion de contenu populaire qui, selon W3Techs (Web Technology Surveys), alimente over 33% des sites Web sur Internet. Une des raisons pour lesquelles il est si populaire est qu’il est facile à installer avec une documentation claire et simple. En outre, de nombreuses ressources communautaires soutiennent les développeurs WordPress. WordPress peut résoudre de nombreux cas d’utilisation avec une solution clé en main peu coûteuse ou même gratuite. Enfin, WordPress est livré avec un système de plug-in bien défini, qui permet aux développeurs d’écrire du code personnalisé pour ajouter leurs propres fonctionnalités. Ce système de plugins est bien documenté, fonctionne bien et, comme vous le verrez plus loin dans ce tutoriel, il est facile à utiliser.

Les développeurs qui souhaitent proposer les expériences les plus riches et les plus interactives peuvent utiliser JavaScript, pris en charge par des infrastructures telles que https: // reactjs .org / [React]. React est une bibliothèque JavaScript conçue pour permettre aux développeurs de créer facilement des interfaces utilisateur dynamiques et interactives qui vont au-delà d’une page ou d’un formulaire statique typique. Créée par Facebook et donc bien gérée pour des raisons de sécurité, de stabilité et de facilité d’utilisation, React est populaire car elle dispose d’une bonne documentation et d’un écosystème de documentation et de plug-ins bien établi et axé sur la communauté.

Ce tutoriel vous expliquera les meilleures pratiques pour intégrer une application React à un site WordPress. Pour son exemple, il utilisera un cas d’utilisation courant: créer un widget destiné à être incorporé sur plusieurs pages et parfois plusieurs fois sur une page. Du côté du serveur, il sera implémenté en tant que shortcode WordPress. Un shortcode ressemble à une balise HTML, mais il utilise des crochets (+ […​] +) au lieu de crochets angulaires (+ <…​> +). Au lieu de restituer directement un élément HTML, il appelle une fonction PHP, qui à son tour rend le code HTML interpolé avec les données de la base de données.

À la fin de ce didacticiel, vous aurez créé votre propre code court, vous l’avez inséré dans une page de WP Admin et publié cette page. Sur cette page, vous pourrez voir votre widget React affiché par le navigateur.

Conditions préalables

Pour suivre ce tutoriel, vous devez avoir:

Étape 1 - Mise à jour et configuration des autorisations du système de fichiers

Lorsque vous êtes connecté en tant qu’utilisateur non root créé dans les conditions préalables Initial Server Server avec Ubuntu 18.04, vous n’aura pas accès à la visualisation ou à la modification des fichiers du répertoire WordPress. C’est un problème, car vous allez ajouter et modifier des fichiers ultérieurement pour créer votre plugin WordPress et votre application React. Pour résoudre ce problème, dans cette étape, vous allez mettre à jour votre configuration WordPress afin de vous permettre d’éditer vos fichiers WordPress.

Exécutez la commande suivante en substituant ++ pour le nom de votre utilisateur non root et + / var / www / + pour le chemin d’accès à votre répertoire WordPress (qui est le dossier racine du document Apache que vous avez créé dans les prérequis). :

sudo chown -R :www-data /var/www/

Décomposons cette commande:

  • + sudo + - Ceci vous permet d’exécuter cette commande en tant que + root +, puisque vous modifiez des fichiers ++ n’a pas accès à.

  • + chown + - Cette commande change la propriété du fichier.

  • + -R + - Cet indicateur modifie la propriété de manière récursive, y compris tous les sous-dossiers et fichiers.

  • +: www-data + - Ceci définit le propriétaire en tant qu’utilisateur non root (++) et conserve le groupe en tant que + www-data + afin qu’Apache puisse toujours accéder aux fichiers afin de les servir.

  • + / var / www / + - Ceci spécifie le chemin d’accès à votre répertoire WordPress. C’est le répertoire sur lequel la propriété va changer.

Pour vérifier que cette commande a réussi, répertoriez le contenu du répertoire WordPress:

ls -la /var/www/

Vous verrez une liste du contenu du répertoire:

Outputtotal 216
drwxr-x---  5  www-data  4096 Apr 13 15:42 .
drwxr-xr-x  4 root  root      4096 Apr 13 15:39 ..
-rw-r-----  1  www-data   235 Apr 13 15:54 .htaccess
-rw-r-----  1  www-data   420 Nov 30  2017 index.php
-rw-r-----  1  www-data 19935 Jan  1 20:37 license.txt
-rw-r-----  1  www-data  7425 Jan  9 02:56 readme.html
-rw-r-----  1  www-data  6919 Jan 12 06:41 wp-activate.php
drwxr-x---  9  www-data  4096 Mar 13 00:18 wp-admin
-rw-r-----  1  www-data   369 Nov 30  2017 wp-blog-header.php
-rw-r-----  1  www-data  2283 Jan 21 01:34 wp-comments-post.php
-rw-r-----  1  www-data  2898 Jan  8 04:30 wp-config-sample.php
-rw-r-----  1  www-data  3214 Apr 13 15:42 wp-config.php
drwxr-x---  6  www-data  4096 Apr 13 15:54 wp-content
-rw-r-----  1  www-data  3847 Jan  9 08:37 wp-cron.php
drwxr-x--- 19  www-data 12288 Mar 13 00:18 wp-includes
-rw-r-----  1  www-data  2502 Jan 16 05:29 wp-links-opml.php
-rw-r-----  1  www-data  3306 Nov 30  2017 wp-load.php
-rw-r-----  1  www-data 38883 Jan 12 06:41 wp-login.php
-rw-r-----  1  www-data  8403 Nov 30  2017 wp-mail.php
-rw-r-----  1  www-data 17947 Jan 30 11:01 wp-settings.php
-rw-r-----  1  www-data 31085 Jan 16 16:51 wp-signup.php
-rw-r-----  1  www-data  4764 Nov 30  2017 wp-trackback.php
-rw-r-----  1  www-data  3068 Aug 17  2018 xmlrpc.php

Ces fichiers sont ceux inclus dans le noyau WordPress dans le fichier nommé "+ latest.tar.gz " que vous avez téléchargé à partir de https://wordpress.org/ [` wordpress.org +`] dans la condition préalable https: // www. .digitalocean.com / community / tutorials / comment intégrer une application dans Wordpress sur Ubuntu-18-04 [Comment installer WordPress avec LAMP sous Ubuntu 18.04]. Si les autorisations apparaissent comme dans la sortie précédente, cela signifie que vos fichiers et répertoires ont été mis à jour correctement.

Dans cette étape, vous avez mis à jour votre installation WordPress pour vous permettre d’éditer ses fichiers. Dans la prochaine étape, vous utiliserez cet accès pour créer des fichiers qui composeront un plugin WordPress.

Étape 2 - Créer un plugin WordPress de base

Maintenant que vous avez le droit de modifier des fichiers dans le répertoire WordPress, vous allez créer un plugin WordPress de base et l’ajouter à l’installation. Cela permettra à React d’interagir avec WordPress ultérieurement dans le didacticiel.

Un plugin WordPress peut être aussi simple que:

  1. Un répertoire dans + wp-content / plugins.

  2. Un fichier dans ce répertoire avec le même nom et une extension de fichier + .php +.

  3. Un commentaire spécial en haut de ce fichier fournit à WordPress des métadonnées importantes du plugin.

Pour créer un plugin pour le code React que vous écrirez plus tard, commencez par créer un répertoire pour le plugin WordPress. Pour des raisons de simplicité, ce tutoriel nommera le plugin `. Exécutez la commande suivante en remplaçant ` par votre racine de document Apache:

mkdir /var/www//wp-content/plugins/

Ensuite, accédez au répertoire nouvellement créé. Les commandes suivantes seront exécutées à partir d’ici.

cd /var/www//wp-content/plugins/

Créons maintenant le fichier plugin. Ce tutoriel utilisera nano, appelé avec la commande + nano +, comme éditeur de texte en ligne de commande pour tous les fichiers. Vous êtes également libre d’utiliser tout autre éditeur de texte de votre choix, tel que Pico, https://www.digitalocean.com/community/tutorials/ installer-et-utiliser-l’éditeur-de-texte-vim-sur-un-serveur-cloud [Vim], ou Emacs.

Ouvrez + .php + pour l’édition:

nano .php

Ajoutez les lignes suivantes à votre fichier pour créer le début du plugin:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

La section commentée située en haut fournit les métadonnées pour le plug-in, et la ligne qui recherche la constante + ABSPATH + empêche un mauvais acteur d’accéder à ce script directement par son URL. + ABSPATH + est le chemin absolu de votre répertoire racine WordPress. Par conséquent, si + ABSPATH + est défini, vous pouvez être sûr que le fichier a été chargé dans l’environnement WordPress.

Ensuite, ouvrez un navigateur Web et accédez à la page * Plugins * de votre domaine (+ https: /// wp-admin / plugins.php +). Vous verrez votre plugin répertorié avec les plugins par défaut de WordPress:

image: https: //assets.digitalocean.com/articles/cart_65391/WP_Admin_Plugins_Page.png [Page des plugins d’administrateur WP]

Cliquez sur * Activer * pour activer votre plugin.

Une fois que vous avez activé votre plugin, la ligne contenant votre plugin sera surlignée en bleu, avec une bordure bleue à gauche, et au lieu d’un lien en dessous qui indique * Activate *, il y en aura un qui dit * Désactiver *:

image: https: //assets.digitalocean.com/articles/cart_65391/WP_Admin_Plugins_Page_After_Plugin_Activation.png [Page Plugins d’administrateur WP après l’activation de plug-in]

Ensuite, vous établirez la structure de votre plugin.

Retournez à votre terminal pour ouvrir + .php:

nano .php

Puis mettez-le à jour pour ajouter les lignes en surbrillance suivantes, qui définissent des constantes utiles:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

Dans les lignes nouvellement ajoutées, vous avez défini trois constantes:

  1. + ERW_WIDGET_PATH + - Ce sera le chemin d’accès à l’application React.

  2. + ERW_ASSET_MANIFEST + - Il s’agit du chemin d’accès au manifeste d’actif React, un fichier contenant la liste des fichiers JavaScript et CSS à inclure sur la page pour que votre application fonctionne.

  3. + ERW_INCLUDES + - Ce sous-répertoire contiendra tous les fichiers PHP.

Notez que chaque + define () + fait référence à + ​​plugin_dir_path (FILE) +. Cela représente le chemin du répertoire vers ce fichier.

Après avoir ajouté les définitions de constantes, sauvegardez le fichier et quittez l’éditeur.

Pour créer le dossier + includes / +, qui contiendra les autres fichiers PHP, commencez au niveau supérieur du répertoire du plugin, + / var / www // wp-content / plugins / +. Ensuite, créez le dossier:

mkdir includes

Maintenant que vous avez échafaudé les fichiers et les dossiers liés à PHP nécessaires pour créer un plugin WordPress, vous allez créer les fichiers et les dossiers initiaux pour React.

Étape 3 - Initialisation de l’application React

Dans cette étape, vous utiliserez Create React App pour initialiser votre application React.

Ce tutoriel a été testé avec Create React App version + 3.0.1 +. La version + 3.0.0 + a apporté des modifications importantes à la structure de + asset-manifest.json, cette version précédente n’est pas compatible avec ce tutoriel sans modifications. Pour vous assurer que vous utilisez la version attendue ici, exécutez cette commande pour installer Create React App:

sudo npm install --global [email protected]

Cette commande installera la version + 3.0.1 + de Create React App. L’indicateur + - global + l’installera à l’échelle du système. L’installation à l’échelle du système garantit que, lorsque vous exécutez + create-react-app + (ou + npx create-react-app +) sans aucun chemin spécifié, vous utiliserez la version que vous venez d’installer.

Après avoir installé Create React App, utilisez-le pour créer l’application React. Ce tutoriel nommera l’application ++:

sudo create-react-app

Cette commande utilise npx, qui est un binaire livré avec NPM. Il est conçu pour faciliter l’utilisation des outils de la CLI et d’autres exécutables hébergés sur NPM. Il installera ces outils s’ils ne sont pas trouvés localement.

La commande + create-react-app générera un dossier de projet et tous les fichiers nécessaires à une application React de base. Cela inclut un fichier + index.html +, des fichiers JavaScript, CSS et de test de départ, ainsi qu’un package.json + pour définir votre projet et ses dépendances. Il inclut des dépendances et des scripts qui vous permettent de créer votre application pour la production sans avoir à installer ni configurer d’autres outils de construction.

Une fois que vous avez configuré l’application ++, la sortie du terminal ressemblera à ceci:

Output...
Success! Created  at /var/www//wp-content/plugins//
Inside that directory, you can run several commands:

 npm start
   Starts the development server.

 npm run build
   Bundles the app into static files for production.

 npm test
   Starts the test runner.

 npm run eject
   Removes this tool and copies build dependencies, configuration files
   and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd
 npm start

Happy hacking!

Ensuite, accédez au répertoire nouvellement créé:

cd

Vous pourrez maintenant créer votre application à l’aide de la commande de construction default, + npm run build + . Cette commande + build examine le fichier` + package.json` sous la clé + scripts + pour un script nommé + build +:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json

{
 "name": "widget",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "react": "^16.9.0",
   "react-dom": "^16.9.0",
   "react-scripts": "3.1.1"
 },
 "scripts": {
   "start": "react-scripts start",

   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

Cela appelle l’exécutable + react-scripts.js + fourni par le module de nœud + react-scripts +, qui est l’un des composants principaux fournis par + create-react-app +. Cela appelle à son tour le script de construction, qui utilise webpack pour compiler vos fichiers de projet en fichiers d’actif statiques que votre navigateur comprend. Cela se fait par:

  • Résoudre les dépendances.

  • Compiler les fichiers SASS en CSS et JSX ou TypeScript en JavaScript.

  • Transformation de la syntaxe ES6 en ES5 avec une meilleure compatibilité entre navigateurs.

Maintenant que vous en savez un peu sur + build +, lancez la commande dans votre terminal:

sudo npm run build

Une fois la commande terminée, vous recevrez une sortie similaire à celle-ci:

Output> @0.1.0 build /var/www//wp-content/plugins//
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

 36.83 KB (+43 B)  build/static/js/2.6efc73d3.chunk.js
 762 B (+44 B)     build/static/js/runtime~main.a8a9905a.js
 710 B (+38 B)     build/static/js/main.2d1d08c1.chunk.js
 539 B (+44 B)     build/static/css/main.30ddb8d4.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

 "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

 npm install -g serve
 serve -s build

Find out more about deployment here:

 https://bit.ly/CRA-deploy

Votre projet est maintenant construit, mais avant de passer à l’étape suivante, il est recommandé de s’assurer que votre application ne se charge que si elle est présente.

React utilise un élément HTML dans le DOM à l’intérieur duquel il restitue l’application. Ceci s’appelle l’élément + target +. Par défaut, cet élément a l’ID + root +. Pour vous assurer que ce nœud + root + est l’application que vous créez, modifiez + src / index.js + pour vérifier l’ID du + target + pour le namespaced + erw-root +. Pour ce faire, ouvrez d’abord + src / index.js:

sudo nano src/index.js

Modifier et ajouter les lignes en surbrillance:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';




serviceWorker.unregister();

Enfin, enregistrez et quittez le fichier une fois l’édition terminée.

Dans ce fichier, vous avez apporté deux modifications importantes au fichier + index.js + par défaut:

  1. Vous avez modifié l’élément cible de + <div id =" root "> </ div> + en + <div id =" erw-root "> </ div> + afin qu’il soit espacé par le nom de votre application.

  2. Vous avez inclus l’appel de + ReactDOM.render () + dans une instruction + if (…​) + afin que l’application ne soit chargée que si elle est présente.

Après avoir modifié un fichier JavaScript ou CSS dans votre répertoire + src / +, il est important de recompiler votre application pour que vos modifications soient intégrées. Pour reconstruire votre application, exécutez:

sudo npm run build

Votre répertoire + build / + contient maintenant une application React fonctionnelle sous la forme de fichiers JavaScript et CSS. La prochaine étape consiste à configurer des fichiers PHP qui mettront en file d’attente votre code JavaScript et CSS dans la page.

Étape 4 - Mise en file d’attente des fichiers JavaScript et CSS

Dans cette étape, vous utiliserez des actions et des filtres WordPress pour:

  1. Générez le code de mise en file d’attente des scripts au moment approprié dans le cycle de chargement de la page WordPress.

  2. https://developer.wordpress.org/themes/basics/including- css-javascript/[Enqueue vos fichiers JavaScript et CSS] de manière à nuire le moins possible à la vitesse de chargement de la page.

WordPress utilise actions et filters comme crochets principaux. Les actions permettent d’exécuter du code à une heure spécifiée dans le cycle de chargement de la page et les filtres modifient un comportement spécifique en modifiant la valeur de retour de fonctions que vous ne possédez pas par ailleurs.

Pour utiliser ces points d’ancrage, vous créerez un fichier PHP contenant le code qui analysera le manifeste d’actif. C’est le même fichier que vous utiliserez plus tard pour mettre en file d’attente tous les actifs afin que les scripts soient écrits dans la balise + <head> +.

Avant de créer le fichier, utilisez la commande suivante pour naviguer dans le répertoire contenant votre application React et dans le répertoire de niveau supérieur + react-wordpress +:

cd /var/www//wp-content/plugins/

Créez le fichier + enqueue.php + dans le dossier + includes / +:

nano includes/enqueue.php

Commencez par placer la balise + <? Php d’ouverture en haut du fichier. Ajoutez également la ligne qui vérifie + ABSPATH +, qui, comme indiqué précédemment, est une pratique recommandée dans chaque fichier PHP:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

Enregistrez et quittez ce fichier.

Ensuite, mettez à jour + react-wordpress.php + pour demander + enqueue.php + du projet. Tout d’abord, ouvrez le fichier pour l’éditer:

nano react-wordpress.php

Ajoutez la ligne en surbrillance suivante:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

Dans les plugins WordPress, il est courant de demander d’autres fichiers PHP à partir du répertoire + includes / + afin de scinder les tâches importantes en morceaux. La fonction + require_once () + analyse le contenu du fichier transmis en tant qu’argument comme si le code PHP de ce fichier était écrit directement à cet emplacement. Contrairement à la commande similaire + include +, + require + lèvera une exception si le fichier que vous essayez d’exiger est introuvable. Utiliser + require_once () + (contrairement à + ​​require () +) garantit que + enqueue.php + ne sera pas analysé plusieurs fois si la directive `+ require_once (ERW_INCLUDES. '/enqueue.php'); + `est donné plusieurs fois.

Enregistrez et quittez le fichier.

Maintenant rouvrez + includes / enqueue.php:

nano includes/enqueue.php

Ajoutez ensuite le code en surbrillance suivant:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

Ajouter une fonction à l’action + init + signifie que ce code sera exécuté pendant la phase + init + du processus de chargement, après le chargement de votre thème et des autres plugins.

La définition des attributs + async + et + + defer + sur les balises + <script> + à l’aide du filtre + script_loader_tag + `indique au navigateur de charger les scripts de manière asynchrone au lieu de bloquer la construction du DOM et le rendu de la page.

L’action + wp_enqueue_scripts + met ensuite les éléments frontaux en file d’attente. Voir this page pour plus de détails.

Assurez-vous d’écrire le fichier et de quitter.

Vous avez maintenant demandé à WordPress d’écrire des balises de script et de feuille de style sur la page. Dans cette prochaine étape, vous analyserez un fichier appelé le manifeste d’actif. Cela vous donnera les chemins d’accès à tous les fichiers que vous devrez mettre en file d’attente.

Étape 5 - Analyse du manifeste des actifs

Dans cette étape, vous analyserez le manifeste d’actif généré par la génération React dans une liste de fichiers JavaScript et CSS.

Lorsque vous générez l’application, le script de génération React générera votre projet en plusieurs fichiers JavaScript et CSS. La quantité et les noms de fichiers varieront d’une génération à l’autre, chacun comprenant un hachage du contenu du fichier. Le manifeste d’actif fournit le nom de chaque fichier généré lors de la dernière construction, ainsi que le chemin d’accès à ce fichier. En l’analysant par programme, vous avez la garantie que les balises de script et de feuille de style que vous écrivez sur la page pointeront toujours vers les bons fichiers, même lorsque les noms changent.

Examinons d’abord le fichier + asset-manifest.json avec la commande` + cat`:

cat /build/asset-manifest.json

Cela ressemblera à ceci:

Output{
 "files": {
   "main.css": "/static/css/main.2cce8147.chunk.css",
   "main.js": "/static/js/main.a284ff71.chunk.js",
   "main.js.map": "/static/js/main.a284ff71.chunk.js.map",
   "runtime~main.js": "/static/js/runtime~main.fa565546.js",
   "runtime~main.js.map": "/static/js/runtime~main.fa565546.js.map",
   "static/js/2.9ca06fd6.chunk.js": "/static/js/2.9ca06fd6.chunk.js",
   "static/js/2.9ca06fd6.chunk.js.map": "/static/js/2.9ca06fd6.chunk.js.map",
   "index.html": "/index.html",
   "precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js": "/precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js",
   "service-worker.js": "/service-worker.js",
   "static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",
   "static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
 }
}

Pour l’analyser, votre code recherchera les clés d’objet se terminant par + .js et` + .css`.

Ouvrez votre fichier + enqueue.php +:

nano includes/enqueue.php

Ajoutez l’extrait surligné:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_action( 'init', function() {

 add_filter( 'script_loader_tag', function( $tag, $handle ) {
   if ( ! preg_match( '/^erw-/', $handle ) ) { return $tag; }
   return str_replace( ' src', ' async defer src', $tag );
 }, 10, 2 );

 add_action( 'wp_enqueue_scripts', function() {



























 });
});

Lorsque vous avez terminé, écrivez et quittez le fichier.

Le code en surbrillance a les effets suivants:

  1. Lit le fichier manifeste de l’actif et l’analyse sous forme de fichier JSON. Il accède au contenu stocké dans la clé + 'fichiers' + et le stocke dans la variable + $ asset_manifest +.

  2. Met en file d’attente le fichier CSS principal s’il existe.

  3. Met d’abord le runtime React en file d’attente, puis le fichier JavaScript principal, en définissant le runtime comme dépendance pour s’assurer qu’il est d’abord chargé dans la page.

  4. Analyse la liste des fichiers de manifeste d’actif pour tous les fichiers JavaScript nommés + static / js / <hash> .chunk.js + et les met en file d’attente après le fichier principal.

  5. Analyse la liste des fichiers de manifeste d’actif pour tous les fichiers CSS nommés + static / css / <hash> .chunk.css + et les met en file d’attente dans la page après le fichier CSS principal.

Dans cette étape, vous avez isolé les chemins de fichiers des scripts et des styles utilisés par votre application. À l’étape suivante, vous devrez vous assurer que ces chemins de fichiers pointent vers le répertoire + build + de votre application React et qu’aucun de vos fichiers source n’est accessible à partir du navigateur.

Étape 6 - Servir et sécuriser des fichiers statiques

À ce stade, vous avez indiqué à WordPress quels fichiers JavaScript et CSS devaient être chargés et où les trouver. Cependant, si vous visitez + https: // + dans le navigateur et que vous regardez la console JavaScript, vous verrez des erreurs HTTP 404. (Consultez cet article pour plus d’informations sur l’utilisation de la console JavaScript.)

image: https: //assets.digitalocean.com/articles/cart_65391/404_Errors_in_the_JavaScript_Console.png [404 erreurs dans la console JavaScript]

En effet, la route d’URL menant au fichier (par exemple, + / static / js / main.2d1d08c1.chunk.js +) ne correspond pas au chemin réel du fichier (par exemple, `+ / wp-content / plugins // / build / static / js / main.2d1d08c1.chunk.js + `).

Dans cette étape, vous corrigerez ce problème en indiquant à React l’emplacement du répertoire de construction. Vous ajouterez également une règle de réécriture Apache au fichier + .htaccess + afin de protéger vos fichiers source contre la visualisation dans le navigateur.

Pour donner à React le bon chemin d’accès à votre application, ouvrez + package.json à l’intérieur du répertoire de votre application React:

sudo nano /package.json

Ajoutez ensuite la ligne + homepage + en surbrillance:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json

{
 "name": "widget",
 "version": "0.1.0",
 "private": true,

 "dependencies": {
   "react": "^16.9.0",
   "react-dom": "^16.9.0",
   "react-scripts": "3.1.1"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

Ecrire et quitter le fichier. Ensuite, reconstruisez votre application React. Passez au niveau supérieur de + / +:

cd

Puis lancez la commande + build:

sudo npm run build

Une fois la commande de construction terminée, inspectez le manifeste d’actif en affichant son contenu sur le terminal:

cat build/asset-manifest.json

Vous verrez que les chemins de fichiers ont tous changé:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/build/asset-manifest.json

{
 "files": {
   "main.css": "static/css/main.2cce8147.chunk.css",
   "main.js": "static/js/main.a28d856a.chunk.js",
   "main.js.map": "static/js/main.a28d856a.chunk.js.map",
   "runtime~main.js": "static/js/runtime~main.2df87c4b.js",
   "runtime~main.js.map": "static/js/runtime~main.2df87c4b.js.map",
   "static/js/2.9ca06fd6.chunk.js": "static/js/2.9ca06fd6.chunk.js",
   "static/js/2.9ca06fd6.chunk.js.map": "static/js/2.9ca06fd6.chunk.js.map",
   "index.html": "index.html",
   "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js": "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js",
   "service-worker.js": "service-worker.js",
   "static/css/main.2cce8147.chunk.css.map": "static/css/main.2cce8147.chunk.css.map",
   "static/media/logo.svg": "static/media/logo.5d5d9eef.svg"
 }
}

Cela indique à votre application où trouver les fichiers corrects, mais pose également un problème: il expose le chemin d’accès au répertoire + src + de votre application, et une personne familière avec + create-react-app + pourrait visiter `+ https: /// wp-content / plugins /// src / index.js + `et commencez à explorer les fichiers source de votre application. Essayez vous-même!

Pour protéger les chemins auxquels les utilisateurs ne doivent pas accéder, ajoutez une règle de réécriture Apache au fichier + .htaccess + de votre WordPress.

nano /var/www//.htaccess

Ajoutez les quatre lignes en surbrillance:

/var/www/wordpress/.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Ceci dit à Apache d’autoriser les requêtes de navigateur à n’importe quoi à + ​​wp-content / plugins /// build / + ou + wp-content /// public / +. Tout le reste sera redirigé vers + totally-bogus-erw.php +. Sauf si vous avez un fichier nommé "+ totalement-bogus-erw.php +" à votre niveau supérieur, cette demande sera traitée par WordPress, ce qui générera une erreur 404.

Il existe des plugins WordPress, tels que Stream, qui surveilleront l’activité de la demande et consigneront des journaux 404. Dans les journaux, la demande indiquera l’adresse IP et la page demandée lorsque l’utilisateur aura reçu le 404. Le fait de regarder + totally-bogus-erw.php + vous indiquera si une adresse IP spécifique tente d’explorer le répertoire + src + de votre application React.

Assurez-vous d’écrire et de quitter le fichier.

Maintenant que vous avez établi le routage nécessaire pour charger vos fichiers JavaScript et CSS sur la page, il est temps d’utiliser un shortcode pour ajouter des éléments HTML à la page avec laquelle le JavaScript va interagir pour restituer votre application.

Étape 7 - Création d’un shortcode

Les codes courts permettent d’insérer des blocs HTML complexes interpolés avec des données côté serveur, avec une syntaxe très simple dans la page. Dans cette étape, vous allez créer et enregistrer un shortcode WordPress et l’utiliser pour intégrer votre application à la page.

Accédez au niveau supérieur de votre plugin:

cd /var/www//wp-content/plugins//

Créez un nouveau fichier PHP qui contiendra le shortcode:

touch includes/shortcode.php

Ensuite, éditez votre fichier PHP principal de sorte que + includes / shortcode.php + soit requis lors du chargement de votre plugin. Commencez par ouvrir + react-wordpress.php:

nano react-wordpress.php

Ajoutez ensuite la ligne en surbrillance suivante:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

require_once( ERW_INCLUDES . '/enqueue.php' );

Ecrire et quitter le fichier.

Maintenant, ouvrez le fichier shortcode nouvellement créé:

nano includes/shortcode.php

Ajoutez le code suivant:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues a shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
 $default_atts = array();
 $args = shortcode_atts( $default_atts, $atts );

 return "<div id='erw-root'></div>";
});

Ce code contient principalement des caractères passe-partout. Il enregistre un shortcode nommé + erw_widget + qui, lorsqu’il est appelé, imprime + <div id =" erw-root "> </ div> +, l’élément racine de l’application React, sur la page.

Enregistrez et quittez + shortcode.php.

Pour voir l’application React en action, vous devez créer une nouvelle page WordPress et y ajouter le shortcode.

Accédez à + ​​https: /// wp-admin + dans un navigateur Web. Tout en haut de la page, vous verrez une barre noire avec le logo WordPress à gauche, suivie d’une icône de maison, du nom de votre site, d’une icône de bulle de commentaire et d’un numéro, ainsi que d’un autre lien * * Nouveau*. Survolez le bouton * + Nouveau * pour faire apparaître un menu. Cliquez sur l’élément de menu qui dit * Page *.

image: https: //assets.digitalocean.com/articles/cart_65391/Create_a_Page.png [Créer une page]

Lorsque l’écran se charge, votre curseur sera mis au point dans la zone de texte qui dit * Ajouter un titre *. Cliquez dessus et commencez à taper pour donner à la nouvelle page un titre pertinent. Ce tutoriel utilisera * Mon application React *:

image: https: //assets.digitalocean.com/articles/cart_65391/Giving_the_Page_a_Title.png [Donner un titre à la page]

En supposant que vous utilisez l’éditeur WordPress Gutenberg, une ligne de texte apparaît en haut de la page, sous le titre, sous le titre * Commencez à écrire ou tapez / pour choisir un bloquer*. Lorsque vous survolez ce texte, trois symboles apparaissent à droite. Choisissez le plus proche qui ressemble à + ​​[/] + pour ajouter un bloc de shortcode:

image: https: //assets.digitalocean.com/articles/cart_65391/Adding_a_Shortcode_Block.png [Ajout d’un bloc de code abrégé]

Tapez le shortcode + [erw_widget] + dans la nouvelle zone de texte. Cliquez ensuite sur le bouton bleu * Publier… * dans le coin supérieur droit de la fenêtre, puis appuyez sur * Publier * pour confirmer.

image: https: //assets.digitalocean.com/articles/cart_65391/Type_in_Your_Shortcode_and_Publish.png [Saisissez votre code court et publiez]

Vous verrez une barre verte confirmant que la page a été publiée. Cliquez sur le lien * Voir la page *:

image: https: //assets.digitalocean.com/articles/cart_65391/Click_Link_to_View_Page.png [Cliquez sur le lien pour afficher la page]

Sur l’écran, vous verrez votre application:

image: https: //assets.digitalocean.com/articles/cart_65391/Working_React_App.png [Application de travail React]

Maintenant que vous avez un rendu de base de l’application React dans la page, vous pouvez personnaliser cette application avec les options fournies côté serveur par un administrateur.

Étape 8 - Injection des paramètres générés par le serveur

Dans cette étape, vous allez injecter des paramètres dans l’application en utilisant à la fois les données générées par le serveur et les données fournies par l’utilisateur. Cela vous permettra d’afficher des données dynamiques dans votre application et d’utiliser le widget plusieurs fois dans une page.

Commencez par ouvrir le fichier + index.js +:

sudo nano /src/index.js

Ensuite, supprimez la ligne + import App de './App'; + et mettez à jour le contenu de + index.js avec les lignes en surbrillance suivantes:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';







const target = document.getElementById('erw-root');
if (target) { ReactDOM.render(<App />, target); }

serviceWorker.unregister();

Cela modifie votre application React afin qu’au lieu de retourner l’écran par défaut Créer une application React, elle retourne un élément qui se lit + Hello, World! +.

Enregistrez et quittez le fichier. Puis ouvrez + index.css + pour l’édition:

nano /src/index.css

Remplacez le contenu de + index.css + par le code suivant:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css

.App {
 width: 100px;
 height: 100px;
 border: 1px solid;
 display: inline-block;
 margin-right: 20px;
 position: relative;
}

.App .App__Message {
 font-size: 15px;
 line-height: 15px;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 width: 100%;
}

Les styles pour + .App afficheront un carré de 100 pixels, avec une bordure pleine, et les styles pour` + .App_ Message + `rendront le texte centré à l’intérieur du carré, à la fois verticalement et horizontalement.

Ecrivez et quittez le fichier, puis reconstruisez l’application:

cd
sudo npm run build

Une fois la construction réussie, actualisez + https: /// index.php // + dans votre navigateur. Vous allez maintenant voir la boîte que vous avez stylée avec CSS, avec le texte + Hello, World! +:

image: https: //assets.digitalocean.com/articles/cart_65391/Simplified_React_Application.png [Application de réaction simplifiée]

Ensuite, vous allez ajouter des paramètres personnalisés, consistant en une couleur et une taille de bordure fournies par l’utilisateur. Vous passerez également le nom d’affichage de l’utilisateur actuel à partir du serveur.

Mise à jour du shortcode pour accepter les arguments

Pour transmettre un argument fourni par l’utilisateur, vous devez d’abord donner à l’utilisateur un moyen de passer un argument. De retour dans le terminal, revenez au niveau supérieur de votre plugin:

cd ..

Ensuite, ouvrez votre fichier + shortcode.php pour le modifier:

nano includes/shortcode.php

Mettez à jour votre fichier de code court pour qu’il contienne les lignes en surbrillance suivantes:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues your shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {

 $args = shortcode_atts( $default_atts, $atts );


});

Ecrire et quitter le fichier. Remarquez comment le code ajoute + 'color' ⇒ 'black' + au tableau + $ default_atts +. La clé de tableau + color + indique à WordPress de s’attendre à ce que l’attribut + color + soit transmis au shortcode + [erw_widget] +. La valeur du tableau, + black +, définit la valeur par défaut. Tous les attributs de shortcode sont transmis à la fonction de shortcode sous forme de chaînes. Par conséquent, si vous ne souhaitez pas définir de valeur par défaut, vous pouvez utiliser la chaîne vide (+ '' +). La dernière ligne change pour utiliser une classe au lieu d’un ID, car il est prévu qu’il y ait plus d’un élément dans la page.

Maintenant, retournez dans votre navigateur et cliquez sur le bouton * Modifier * sous votre champ + Bonjour, Monde! +. Mettez à jour la page WordPress de votre navigateur pour ajouter une deuxième instance du shortcode, et ajoutez un attribut de couleur aux deux instances. Ce tutoriel utilisera + [erw_widget color =" # cf6f1a "] + et + [erw_widget color =" # 11757e "] +:

image: https: //assets.digitalocean.com/articles/cart_65391/Add_a_Second_Widget.png [Ajouter un deuxième widget]

Cliquez sur le bouton bleu * Mettre à jour * pour enregistrer.

Ensuite, ouvrez + index.js pour le modifier:

sudo nano /src/index.js

Mettez-le à jour avec les éléments suivants:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

const App = () => (
 <div className="App">
   <span className="App__Message">Hello,<br />World!</span>
 </div>
);




serviceWorker.unregister();

Ecrire et quitter le fichier. Les lignes mises à jour invoqueront l’application React sur chaque instance avec la classe + erw-root +. Donc, si le shortcode est utilisé deux fois, deux carrés apparaîtront dans la page.

Enfin, ouvrez + index.css + pour l’édition:

sudo nano /src/index.css

Mettez à jour le fichier pour qu’il contienne la ligne en surbrillance suivante:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css

.App {
 width: 100px;
 height: 100px;
 border: 1px solid;
 display: inline-block;
 margin-right: 20px;
 position: relative;
}

.App .App__Message {
 font-size: 15px;
 line-height: 15px;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 width: 100%;
}

Avec cette ligne ajoutée, plusieurs widgets adjacents apparaîtront côte à côte au lieu d’être superposés.

Enregistrez et quittez le fichier.

Maintenant, recompilez votre application React:

cd
sudo npm run build

Maintenant, si vous actualisez la page dans votre navigateur, vous verrez les deux widgets:

image: https: //assets.digitalocean.com/articles/cart_65391/Two_Widgets.png [Deux widgets]

Notez que les widgets n’ont toujours pas affiché la couleur de la bordure. Ceci sera abordé dans une prochaine section.

Identifier de manière unique chaque instance de widget

Pour identifier chaque widget de manière unique, il est nécessaire de passer un identifiant du serveur. Cela peut être fait via l’attribut + data-id + de l’élément racine. Ceci est important car chaque widget de la page peut avoir des paramètres différents.

Pour ce faire, revenez dans votre répertoire de plugin de niveau supérieur et ouvrez + shortcode.php pour le modifier:

cd ..
nano includes/shortcode.php

Mettez-le à jour pour avoir les lignes en surbrillance suivantes:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues your shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
 $default_atts = array( 'color' => 'black' );
 $args = shortcode_atts( $default_atts, $atts );



});

La première nouvelle ligne génère un identifiant unique avec le préfixe + id +. La ligne mise à jour associe l’ID à la racine de React à l’aide de l’attribut + data-id +. Cela rendra l’ID accessible dans React.

Enregistrez le fichier, mais ne le quittez pas encore.

Écrire les paramètres dans l’objet ` window JavaScript

Dans le fichier de code court, vous écrivez les paramètres sur la page dans un objet JavaScript global. L’utilisation de l’objet + window + permet d’être accessible à partir de React.

Avec + shortcode.php + toujours ouvert, mettez-le à jour pour qu’il contienne les éléments suivants:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues your shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
 $default_atts = array( 'color' => 'black' );
 $args = shortcode_atts( $default_atts, $atts );
 $uniqid = uniqid('id');
















});

Ces mises à jour écrivent un bloc + <script> + avant chaque élément qui initialise l’objet de paramètres globaux de fenêtre et le remplit avec les données fournies dans WP Admin.

Enregistrez et quittez le fichier.

Maintenant, inspect la page WordPress de votre navigateur Web. Cela vous montrera le code HTML de votre page. Si vous + CTRL + F + et recherchez + window.erwSettings +, vous verrez les paramètres en cours d’écriture dans le code HTML de votre page comme suit:

...
 window.erwSettings = window.erwSettings || {};
 window.erwSettings["id"] = {
   'color': '#cf6f1a',
   'name': '',
 }
...

Récupérer les paramètres de React

Dans l’application React, vous récupérez les paramètres en fonction de l’ID et transmettez la valeur de couleur de bordure au composant + App + en tant que propriété (+ prop +). Cela permet au composant + App + d’utiliser la valeur sans avoir besoin de savoir d’où elle vient.

Ouvrez + index.js pour l’édition:

sudo nano /src/index.js

Mettez-le à jour afin qu’il contienne les lignes en surbrillance suivantes:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';




 </div>
);

const targets = document.querySelectorAll('.erw-root');






serviceWorker.unregister();

Enregistrez le fichier et quittez votre éditeur de texte.

Votre application React utilisera désormais l’ID unique de l’objet window + global + window.erwSettings + pour récupérer les paramètres et les transmettre au composant + App +. Pour mettre cela en pratique, recompilez votre application:

cd
sudo npm run build

Après avoir terminé cette dernière étape, actualisez la page WordPress dans votre navigateur. La couleur de bordure fournie par l’utilisateur et le nom complet fourni par le serveur apparaissent dans les widgets:

image: https: //assets.digitalocean.com/articles/cart_65391/Widgets_with_Settings_Applied.png [Widgets avec paramètres appliqués]

Conclusion

Dans ce tutoriel, vous avez créé votre propre plug-in WordPress avec une application React à l’intérieur. Vous avez ensuite créé un code abrégé en tant que pont pour rendre votre application incorporable dans le générateur de pages WP Admin, puis vous avez personnalisé votre widget sur la page.

Désormais, vous pouvez développer votre application React en sachant que votre mécanisme de diffusion est déjà en place. Cette base de WordPress vous permet de vous concentrer sur l’expérience client. Au fur et à mesure que votre application se développe et se développe, vous pouvez facilement ajouter davantage d’outils et de techniques axés sur la production qui fonctionneront avec n’importe quelle installation WordPress.

Pour en savoir plus sur ce que vous pouvez faire avec votre solide base React, essayez d’explorer l’un de ces tutoriels:

Related