Je construis un thème WordPress en utilisant le modèle de thème Olympos et je réagis (avec create-react-app) comme outil frontal pour compléter les vues de l’application.

Le problème est que j’ai besoin d’un chemin de bundle React à fournir à WordPress car il charge mes scripts afin que je puisse mieux travailler avec l’application dans les versions Developmentet Production.

Le premier problème est qu’avec les versions de développement, il n’y a pas de moyen direct d’obtenir un chemin vers le bundle React (ou du moins je ne peux pas en trouver un, Webpack noob ).

Deuxièmement , lorsque je cours yarn buildpour créer des versions de production avec des chemins, ils continuent d’avoir une chaîne d’identification entre eux et cela m’oblige à continuer à changer cet ID généré aléatoirement à chaque fois que je crée une version.

Exemple:

path/to/wp-theme/build/static/js/main.i3i391.js

path/to/wp-theme/build/static/css/styles.91k1j2.css

Objectif

Pour avoir un chemin qui ne changera pas, puis placez-le dans ma fonction WordPress et utilisez-le dans les versions de développement (et de production si possible). Ainsi, lorsque je fais l’expérience du rechargement à chaud de Webpack, cela se produit depuis l’intérieur de mes configurations WordPress.

Un peu comme ça :

function theme_register_scripts() {
    wp_enqueue_style( 'styles', get_stylesheet_uri() . 'build/static/css/styles.css' );
    wp_enqueue_script( 'scripts', esc_url(trailingslashit( get_template_directory_uri()) . 'build/static/js/main.js' ), NULL, '1.0', true);
}

Je suis prêt à configurer mes configurations de webpack, comme je l’ai déjà fait

npm run eject

pour montrer mon webpack et d’autres configurations derrière la scène, mais c’était assez déroutant de savoir sur quel bouton appuyer et ce qu’il fallait éviter.

Solution n°1 trouvée

Après quelques lectures supplémentaires, j’ai compris mes idées fausses et j’ai pensé que je devrais poster une réponse pour aider les autres.

WordPress 4.7 et supérieur est intégré aux fonctionnalités de l’API Rest et ne nécessite donc pas l’installation d’un plug-in.

Juste après le démarrage de votre WordPress, un coup rapide sur

http://localhost/wp-json/

vous donnera le corps json sinon alors

http://localhost/binladen/?rest_route=/

Ça ira.

Si vous utilisez create-react-app (ou Webpack d’ailleurs) pour le développement de votre thème React et que vous souhaitez conserver votre HMR pendant que vous écrivez votre interface React sans créer le bundle à chaque fois, ne vous inquiétez pas pour WordPress. Il peut rester en toute sécurité sur un onglet et votre frontal sur un autre.

Vous utiliserez l’API WP Rest pour appeler des ressources WordPress sur la logique de votre React et jusqu’à ce que votre front-end soit terminé ou que vous en soyez satisfait, c’est quand vous pouvez l’inclure dans votre bundle WordPress et expédier votre site WordPress avec ce React thème.

Construire votre bundle de production front-end (avec create-react-app)

npm run build

et inclus le bundle React créé produit par le code ci-dessus dans le fichier de fonctions de thème WordPress.

function theme_register_scripts() {
    wp_enqueue_style( 'styles', get_stylesheet_uri() . 'build/static/css/styles.1k9s92.css' );
    wp_enqueue_script( 'scripts', esc_url(trailingslashit( get_template_directory_uri()) . 'build/static/js/bundle.i1929a.js' ), NULL, '1.0', true);
}

Sources .

créer-réagir-app : Source

Plusieurs sources et articles d’intégration de l’API WP Rest et de React : Source

Routes multiples vers l’API WP Rest : Source

Thème du modèle Olypos WP : source