Édition visuelle pour tout site, sur WordPress.

1. 01

   Autorisez l’éditeur à afficher votre site

   Définissez l’en-tête dans la configuration de votre serveur.

   add_header Content-Security-Policy "frame-ancestors 'self' https://cms.example.com" always;

   <IfModule mod_headers.c>
     Header always set Content-Security-Policy "frame-ancestors 'self' https://cms.example.com"
   </IfModule>

   Content-Security-Policy: frame-ancestors 'self' https://cms.example.com

2. 02

   Ajoutez le bridge

   Placez leiho-bridge.js dans le dossier public du site, puis ajoutez ce code dans le head du layout.

   <script>
     if (window.self !== window.top) {
       var s = document.createElement('script');
       s.src = '/leiho-bridge.js';
       s.setAttribute('data-wp-origin', 'https://cms.example.com');
       document.head.appendChild(s);
     }
   </script>

3. 03

   Lisez le contenu

   Lisez le contenu depuis ces URL, au moment du build ou à chaque requête.

   # All published content, in one request
   GET https://cms.example.com/wp-json/leiho/v1/export
   
   # One page, by its path
   GET https://cms.example.com/wp-json/leiho/v1/content?path=/about

   Vous buildez avec Node ? npm install leiho vous donne loadLeihoContent depuis leiho/content.

4. 04

   Marquez ce que les éditeurs peuvent modifier

   Appliquez field() sur chaque élément que les éditeurs doivent pouvoir modifier. Affichez toujours l’élément, même quand sa valeur est vide.

   <section data-wp-post="12" data-leiho-section="Hero">
     <h1 data-wp-field="hero_title">…</h1>
     <img data-wp-field="hero_image" src="…" alt="…">
     <article data-wp-field="cards.0.title">…</article>
   </section>

Remplacez https://cms.example.com par l’adresse de votre WordPress. Dans wp-admin, Leiho → Démarrer affiche ces étapes avec votre adresse, vérifie chacune et peut confier toute l’installation à votre agent de code en une seule consigne.