Comment créer un skin pour votre application Web avec React et WordPress

Vous avez donc suivi une formation d'ingénieur Web et souhaitez maintenant créer une boutique en ligne ultra-rapide pour vos clients. La liste des produits devrait apparaître en un instant et la recherche ne devrait pas non plus perdre plus d'une fraction de seconde. C'est ça la rêverie ?

Plus maintenant. Eh bien, au moins, il n'y a rien qui ne puisse être réalisé avec la combinaison de l'API REST de WordPress et de React, une bibliothèque JavaScript moderne.

Attends quoi? API REST WordPress ?

Oui, l'API WordPress REST vous aidera à créer la base back-end de votre application Web. C'est un bon choix pour la technologie back-end de votre application Web si vous créez une solution basée sur le contenu. WordPress interagira également sans problème avec d'autres technologies ; vous pouvez utiliser Node.js comme point central de votre application pour vous connecter à d'autres services RESTful.

L'API WordPress REST change la donne pour WordPress, qui peut désormais être appelé en toute sécurité un framework d'application Web - pas seulement un CMS. Maintenant que le front-end et le back-end sont complètement découplés, WordPress peut être utilisé comme back-end d'application mobile ou comme back-end pour tout système axé sur le contenu.

Mais pourquoi WordPress ? La raison : vous serez étonné des fonctionnalités qui sortent de la boîte avec WordPress. Vous bénéficierez d'une gestion étendue des utilisateurs, d'une gestion des médias et d'un ensemble d'API incroyablement convivial pour les développeurs pour étendre votre travail.

Dans cet article, je vais vous guider dans la création d'un thème WordPress SPA (Single Page Application) à l'aide de la bibliothèque JavaScript appelée React, se connectant à l'API WP REST.

Passons à la construction du thème

Cet article suppose que vous êtes déjà familiarisé avec les différentes API WordPress existantes, en particulier celles qui pilotent le développement de thèmes pour l'esthétique de votre site et les fonctionnalités pour les plugins de votre site. Je suppose également que vous avez configuré votre plate-forme de développement pour WordPress, telle que la pile LAMP dans un environnement Linux ou MacOS.

Pour plus de simplicité, cependant, je me référerai uniquement aux chemins absolus tels qu'ils sont visibles avec la plate-forme XAMPP utilisée avec Windows.

Maintenant, créons une instance de WordPress dans notre localhost, en la nommant « Celestial ». C'est le nom du thème WordPress que nous allons utiliser pour nous aider à définir la direction de la création de futurs thèmes prêts à l'emploi avec des applications Web alimentées par l'API WordPress REST. Vous connaissez peut-être déjà la hiérarchie de modèles très appréciée de WordPress, mais avec l'API REST, vous avez la possibilité de découvrir quelque chose de différent !

Nous devons ensuite créer un dossier pour le thème dans le dossier wp-content\themes . Accédez à C:\xampp\htdocs\celestial\wp-content\themes\ (ou équivalent) et créez un dossier celestial . Ajoutez ces fichiers dans le dossier du thème celestial :

1. index.php
   Le fichier fourre-tout pour le thème.
2. style.css
   Celui-ci contient des informations sur le thème (et non sur le CSS proprement dit).
3. functions.php
   Rédiger les fonctionnalités et l'import de fichiers CSS et JS.

Ajoutez un fichier image nommé screenshot.jpg si vous souhaitez qu'une image de votre thème s'affiche dans le tableau de bord.

Remarque : Le code de chaque fichier comporte quelques lignes et peut être trouvé sur GitHub .

Ensuite, connectez-vous à votre tableau de bord WordPress, rendez-vous sur Apparence → Thèmes et sélectionnez "Céleste" comme thème. Maintenant que la fondation est en place, passons à la création du thème.

Premiers pas avec React et Webpack pour le thème

React est une bibliothèque d'interface utilisateur très populaire prise en charge et maintenue par Facebook. Selon les résultats de Stack Overflow Developer Survey 2017, "React est le plus apprécié des développeurs".

Pour démarrer le projet, vous devez initialiser le projet en tant que projet NPM (Node Package Manager). Cela se fait avec la commande npm init dans le terminal (après avoir installé Node.js et NPM sur votre ordinateur). L'initialisation du projet vous demandera certaines informations de configuration. Après une initialisation réussie, NPM créera un fichier package.json dans le répertoire racine du thème. Ce fichier comprendra les détails du projet et toutes les dépendances du projet.

React est maintenant sous licence MIT, nous utiliserons donc la version 16 de React comme bibliothèque JavaScript pour ce projet. React a quelques fonctionnalités intéressantes sous le capot, telles que le DOM virtuel (une représentation du document dans la mémoire) et dispose d'une multitude d'outils qui l'entourent, tels que le routeur React. React est également utilisé dans le projet Calypso de WordPress — le tableau de bord de WordPress.com.

Nous allons maintenant installer les packages NPM requis dans le projet :

1. Tapez npm install --save react react-dom dans le terminal et appuyez sur Entrée pour installer les packages.

   

   Étant donné que nous construisons le thème en tant qu'application à page unique (SPA), nous avons besoin de l'aide d'un outil tel que Webpack. Nous allons écrire du code sous forme de composants différents, et Webpack nous aidera à les regrouper tous ensemble et à les produire sous la forme d'un seul fichier .js ou .css. En bref, c'est un groupeur de modules.
   
   Webpack doit d'abord être installé globalement sur votre ordinateur. Pour ce faire, nous pouvons à nouveau utiliser NPM.
2. Tapez la commande npm install -g webpack pour obtenir la dernière version stable de Webpack installée globalement sur votre système.
   
   Ensuite, nous installerons les packages NPM prenant en charge Webpack dans notre application.
3. Accédez au fichier package.json dans mon référentiel git et copiez le reste des dépendances à partir de là dans la section dépendances de votre package.json . Ensuite, exécutez à nouveau npm install pour installer tous les packages dans package.json .

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   Ce qui précède est une liste de tous les packages requis dans le fichier package.json pour ce projet.
4. Copiez les configurations de GitHub et collez-les dans le fichier webpack.config.js de votre dossier de thème.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   Important : Veuillez noter que module.exports → module → rules[3] → use → publicPath peut changer en fonction de l'emplacement des images dist de votre projet dans localhost. Si ce n'est pas le cas, les images peuvent ne pas s'afficher correctement dans l'application Web.
5. Ensuite, ces commandes peuvent être utilisées pour compiler le projet :
   • webpack ou npm run build pour compiler le projet, ou
   • webpack --watch ou npm run watch pour compiler le projet et surveiller les modifications.

Note : Pour mieux comprendre Webpack, lisez cet article de Joseph Zimmerman sur Smashing Magazine .

Extension de l'API REST de WordPress

L'API WordPress REST est livrée avec de nombreux points de terminaison différents pour récupérer des publications, des pages, des médias, etc. Cependant, ils peuvent ne pas toujours avoir tous les détails dans leur réponse. Par exemple, la méthode posts ne donne pas l'URL de l'image sélectionnée ou le nom de l'auteur. Par conséquent, nous devons faire des appels séparés à chacun de ces éléments.

Mais que se passe-t-il si vous souhaitez que vos propres données apparaissent dans la réponse aux messages ? C'est là qu'intervient la magie de l'extension de l'API REST. Le code suivant ajoutera deux variables supplémentaires dans la réponse à la demande de publication , à savoir author_name et featured_image_src . Le code se trouve dans le fichier functions.php :

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

Une variable JavaScript globale

Il existe certaines constantes WordPress (ou appelées "variables") que nous utiliserons dans l'application React. Il s'agira d'informations sur les différents itinéraires de l'application (et plus tard, spécifiques à WooCommerce).

Cette variable est définie dans le fichier functions.php . Il s'appellera 'CelestialSettings' et sera ajouté à celestial-scripts , le descripteur du fichier app.js en file d'attente :

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

Le code ci-dessus montre un exemple d'obtention de variables WordPress (PHP) sur le front-end, une technique importante et très utile lors de la création d'un thème découplé. Cette variable objet contient le titre du site, le chemin, l'URL de l'API et de la racine et trois variables relatives à WooCommerce (expliquées plus loin).

Réagir et JSX

React est différent du reste des principales bibliothèques JavaScript. Ce que je veux dire par là, c'est que nous écrivons généralement du JavaScript dans notre code HTML. Cependant, en ce qui concerne React, nous écrivons du HTML dans notre code JavaScript. Pour être plus précis, nous écrivons JSX à l'intérieur de JS. JSX est très similaire à HTML mais présente quelques différences. L'attribut class est écrit comme className par exemple. Celui-ci est ensuite converti en JavaScript simple via Webpack et Babel et enregistré dans app.js .

Il existe cependant quelques restrictions concernant l'écriture de JSX. Par exemple, nous ne pouvons avoir qu'un seul enfant dans notre méthode render() , qui servira d'élément racine pour un Component. Cependant, l'avantage est qu'il est plus facile à déboguer. Nous pouvons savoir exactement où nous avons commis une erreur, alors qu'en HTML normal, notre erreur ne sera généralement pas affichée explicitement. Nous allons écrire JSX pour ce projet, et par conséquent, les fichiers JavaScript auront une extension .jsx . Cependant, il peut également s'agir de .js si vous préférez.

Créez les fichiers suivants dans le dossier src :

1. index.jsx (le fichier principal et celui qui contient les configurations du React Router)
2. header.jsx (le composant d'en-tête)
3. footer.jsx (le composant de pied de page)
4. posts.jsx (pour l'archive des messages)
5. post-list.jsx (composant pour une publication individuelle dans posts.jsx )
6. post.jsx (pour un seul article)
7. products.jsx (contient tous les produits de WooCommerce)
8. product.jsx (affiche un seul produit de WooCommerce)
9. style.scss (pour contenir tout le code CSS au format SASS)

ReactDOM.render()

Le fichier index.jsx est la racine du projet. Ce que je veux dire par là, c'est que index.jsx contient le composant App qui est rendu au DOM.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

Les autres composants sont spécifiés dans React Router et seront chargés lors de la visite des différentes routes.

C'est ainsi que nous écrivons des composants modulaires où tous les différents composants se terminent finalement par index.jsx .

Composants avec état ou sans état

Vous auriez remarqué que les composants étaient écrits de l'une des deux manières suivantes :

1. const App = () => (
2. class Post extends React.Component {

La première façon est la façon dont nous écrivons des composants sans état et la seconde est un exemple de composants avec état. Sans état signifie que le composant n'a pas d'état. 'state' est essentiellement une variable qui contient des informations dans le composant, et chaque fois que la variable change, le composant est restitué. Les composants avec état sont également appelés "composants intelligents". Les variables d'état sont donc utilisées pour la communication interne au sein de ce composant.

Le deuxième type, les composants sans état, ne contiennent pas de variable d'état et sont parfois appelés "composants stupides". Cependant, comme les composants avec état, ils ont des "accessoires", qui sont des propriétés qui leur sont transmises par leurs composants parents.

Les composants avec état ont les méthodes de cycle de vie React alors que celui sans état n'a que la méthode render() qui est la méthode par défaut pour cela.

Réagir aux méthodes de cycle de vie

Ce sont des méthodes appelées à différentes étapes du cycle de vie du composant, que nous pouvons remplacer pour exécuter notre propre code à ces instances. Nous utilisons les méthodes suivantes dans notre application :

• constructor()
  Appelé avant le montage d'un composant.
• componentDidMount()
  Appelé immédiatement après le montage d'un composant.
• render()
  La méthode qui est appelée pour restituer le contenu JSX (HTML).
• componentDidUpdate()
  Appelé lorsque le composant est mis à jour.
• componentWillUnmount()
  Appelé lorsqu'un composant doit être supprimé.

Remarque : Pour en savoir plus sur les composants et leur cycle de vie, lisez la documentation ici .

Promesses JavaScript

Nous allons utiliser JavaScript Promises pour obtenir des données de notre API WordPress REST. Tout d'abord, nous avons l'URL de l'API REST dans notre functions.php , où nous l'avons ajoutée en tant que variable JavaScript à laquelle nous pouvons accéder depuis le front-end.

Nous utiliserons la méthode de l'API de récupération de JavaScript pour obtenir les données des différents points de terminaison. Nous ajoutons un chargeur pour montrer à l'utilisateur pendant que le contenu est récupéré :

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

Utilisation du routeur React

React Router est la bibliothèque qui gérera le routage côté client pour notre application. Le routage côté serveur est possible avec WordPress, mais pour obtenir une véritable expérience SPA, nous avons besoin de l'aide de React Router.

Depuis la version 4, React Router a été divisé en trois packages : react-router , react-router-dom et react-router-native . Nous utiliserons react-router-dom pour ce projet car c'est celui utilisé dans les applications Web.

Étant donné que react-router-dom est déjà installé, nous pouvons écrire la configuration du routeur dans le fichier index.jsx . Le code sera le suivant :

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

Le code ci-dessus s'occupera de tout le routage, géré du côté client. Le * dans la dernière ligne indique que tout autre itinéraire non mentionné ci-dessus amènera l'utilisateur à la page '404 Not Found'.

La <Link to=""> est utilisée à la place de la balise <a href=””> pour créer des liens entre différentes pages à l'aide de React Router :

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

Obtenir des données de test

Maintenant que vous avez créé le thème, il est temps d'ajouter quelques données. Une façon d'ajouter des données est de créer notre propre contenu. Cependant, il existe un moyen plus simple (et meilleur) d'ajouter des données à notre site WordPress. Cette méthode importe des données d'espace réservé à partir d'une source externe :

• Rendez-vous sur https://codex.wordpress.org/Theme_Unit_Test et téléchargez les données de test unitaire du thème
• Rendez-vous sur Outils > Importer > WordPress pour installer l'importateur WordPress.
• Une fois l'importateur WordPress installé, cliquez sur Exécuter l'importateur.
• Cliquez sur "Choisir un fichier" dans l'importateur
• Sélectionnez le fichier téléchargé et importez les données de test unitaire du thème WordPress

Vous devez maintenant sélectionner le fichier theme-unit-test-data.xml et tout le contenu de l'espace réservé est maintenant sur votre site.

Intégration WooCommerce

Maintenant, nous sommes prêts à alimenter notre magasin en utilisant React. Nous utiliserons à cet effet les fichiers products.jsx et product.jsx , dont le code est similaire à posts.jsx et p ost.jsx respectivement.

Nous ajouterons trois autres variables à CelestialSettings sous 'woo' (voir Une variable JavaScript globale) :

1. URL
2. consumer_key
3. consumer_secret

La clé consommateur et le secret consommateur doivent être générés depuis Dashboard → WooCommerce → Settings → API → Keys/Apps .

Pour l'URL woo, vous devez l'ajouter manuellement (puisque WooCommerce permet le transfert uniquement via SSL, ajoutez l'URL avec https, c'est-à-dire https://localhost/celestial/wp-json/wc/v2/ ).

Copiez la clé du consommateur et le secret du consommateur et collez-les aux endroits appropriés dans functions.php . Cela servira d'authentification pour accéder à WooCommerce via un appel API.

Consultez la documentation de l'API REST de WooCommerce pour plus d'informations sur son API. Le fichier products.jsx contient le code permettant de remplir le magasin avec des produits. Les produits peuvent être ajoutés par un administrateur depuis le tableau de bord. Accédez simplement à Tableau de bord → Produits → Ajouter nouveau et entrez les détails du produit.

Lorsque vous cliquez sur un certain produit, vous serez redirigé vers la page product.jsx :

Le code de la page ci-dessus est similaire à post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

Permaliens

Pour que le thème fonctionne correctement, nous devons définir les permaliens suivants dans Tableau de bord → Paramètres → Permaliens :

1. Sous Paramètres communs → Structure personnalisée : https://localhost/celestial/posts/%postname%/

2. Sous Permaliens produits → Base personnalisée : /products/

Si vous ne définissez pas les permaliens comme ci-dessus, le thème peut ne pas fonctionner comme vous le souhaitez.

Un correctif WooCommerce

Lorsque vous naviguez vers localhost/celestial/products , il y a de fortes chances que vous obteniez un espace vide où les produits sont censés être chargés. Cela se produit parce que WooCommerce a besoin de requêtes authentifiées alors que notre localhost n'est pas https. Pour résoudre le problème :

1. Visitez https://localhost/celestial/wp-json/wc/v2/products. Cela nous donnera un avertissement :

1. Cliquez sur AVANCÉ > Procéder à l'hôte local (non sécurisé) .
2. Maintenant, si vous revenez à la page des produits, les articles s'afficheront correctement.

Note : Si vous êtes sur Valet sur un Mac, vous devez exécuter Valet Secure sur votre site pour sécuriser le site local avec un certificat TLS. C'est une autre façon de régler le problème.

Qu'est-ce que ScrollMagic ?

ScrollMagic est une bibliothèque qui nous permet d'effectuer certaines actions lors du défilement de la page. Pour utiliser ScrollMagic, nous mettrons en file d'attente la bibliothèque JavaScript ScrollMagic dans functions.php . Nous utilisons ScrollMagic pour deux instances dans ce projet :

1. Pour charger paresseusement les publications dans le composant posts.jsx :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   Chargement paresseux des publications dans le composant posts.jsx
2. Pour afficher une animation en fondu pour les publications apparaissant en faisant défiler les publications et les produits dans les composants posts.jsx et products.jsx respectivement :

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   Application d'une animation en fondu pour les publications qui apparaissent lors du défilement

Nous sommes maintenant prêts à voir notre thème depuis le front-end. Accédez à localhost/celestial sur votre navigateur Web et voyez votre thème en action.

Et félicitez-vous, car vous avez maintenant créé le thème avec succès !

Autres thèmes WordPress avec des bibliothèques JavaScript

Si vous avez trouvé cela utile, vous pouvez jeter un œil à d'autres thèmes WordPress découplés impressionnants construits à l'aide de bibliothèques/frameworks JavaScript modernes :

• Foxhound : Le premier thème découplé à être intégré au référentiel de thèmes WordPress. Écrit par Kelly Dwan, ce thème utilise React, Redux et React Router.
• Anadama React : Un autre thème du même auteur, mais utilisant Flux au lieu de Redux, et Page au lieu de React Router.
• Wallace : Écrit par Kirby, ce thème utilise Angular avec l'API WordPress REST.
• Picard : Écrit par Automattic lui-même pour montrer la capacité de l'API WordPress REST.
• React Verse : Un thème React et Redux que j'ai écrit basé sur Foxhound.

Prochaines étapes

Les sections principales que je voulais vous montrer sont maintenant terminées. Vous pouvez continuer à construire le projet pour approfondir vos connaissances. Voici quelques recommandations que vous pourriez suivre :

1. Une boutique à part entière avec le plugin WooCommerce, y compris la caisse et le panier d'achat ;
2. Une page pour l'archive, la balise, la taxonomie, etc. ;
3. Gestion d'état avec Redux ou Flux.
   

Bonne chance et bon codage !