---
title: "Leiho pour HTML, PHP and others : l’édition visuelle sur WordPress"
description: "HTML simple, PHP, Eleventy, Hugo : copiez le bridge dans votre dossier public et écrivez les attributs à la main."
url: https://leiho.dev/fr/frameworks/html
lang: fr
updated: 2026-11-04
---
HTML, PHP and others · HTML simple, PHP, Eleventy, Hugo…

# Édition visuelle pour tout site, sur WordPress.

HTML simple, PHP, Eleventy, Hugo : copiez le bridge dans votre dossier public et écrivez les attributs à la main.

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.
   ```text
   <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.
   ```HTML
   <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.

Autres frameworks

- [**Next.js**](https://leiho.dev/fr/frameworks/nextjs)
- [**Astro**](https://leiho.dev/fr/frameworks/astro)
- [**Nuxt**](https://leiho.dev/fr/frameworks/nuxt)
- [**SvelteKit**](https://leiho.dev/fr/frameworks/sveltekit)
- [**React**](https://leiho.dev/fr/frameworks/react)

## Modifiez le vrai site.

Gratuit et open source. Essayez-le sur un vrai WordPress, dans votre navigateur.

- [Essayer dans votre navigateur](https://leiho.dev/fr/try)
- [Voir sur GitHub](https://github.com/pixelersagency/leiho)