singulars/funcionalitats/wp-react.md

@@ -177,6 +177,37 @@ CORS_ORIGIN_WHITELIST = [
 ]
 ```
 
-### Desplegament
+### WordPress
 
-Per al desplegament dels mòduls generats amb aquesta metodologia farem ús del sistema d'integració continuna de Gitlab.
+Un cop configurada l'aplicació de React per poder generar diferents paquests distribuibles, **haurem d'implementar al WordPress de Som Connexió la lògica que permeti carregar els scrits generats i instanciar l'aplicació a les seves pàgines**.
\ No newline at end of file
+
+Per tal d'acomplir això proposem generar un petit plugin amb PHP. Aquest plugin haurà de disposar dels scripts transpilats de React i definir un [shortcode](https://developer.wordpress.org/plugins/shortcodes/). A l'entorn WordPress, un _shortcode_ és una macro que s'utilitza per generar interaccions dinàmiques amb el contingut. p.e. creant galeries d'imàtges vinculades a un post o renderitzant un video. En el nostre cas, el _shortcode_ permetrà a l'usuari fer-ne ús des de l'editor de WordPress per que en el moment de renderitzat, WordPress substitueixi el codi del _shortcode_ per l'element HTML que farà d'arrel de la nostra aplicació alhora que s'informa a WordPress de la necessitat de carregar el _script_ amb el codi de React transpilat.
+
+
+#### Codi PHP del plugin
+```php
+add_action('wp_enqueue_scripts', 'wp_react_enqueue_scripts');
+function wp_react_enqueue_scripts()
+{
+    wp_register_script(
+        'wp-react',
+        plugin_dir_url(__FILE__) . '/js/wp-react/index.js',
+        [],
+        WP_REACT_VERSION,
+        true,
+    );
+}
+
+add_shortcode('wp_react_dom', 'wp_react_dom');
+function sc_wp_react_dom()
+{
+    enqueue_script('wp-react');
+    return '<div id="wp-react-root></div>';
+}
+```
+
+## Automatització i integració contínua
+
+Per a la transpilació automatitzada dels diferents paquets distribuibles farem ús del sistema d'integració continua de Gitlab.
+
+Per a l'automatizació del procés de desplegament farem ús d'un nou rol d'Ansible que configurarem ad-hoc per resoldre la nova casuística.
\ No newline at end of file