---
title: "Leiho pour Astro : l’édition visuelle sur WordPress"
description: "Sortie statique ou serveur, Leiho s’adapte aux deux : une requête à l’API de contenu par build, et un script qui ne se charge que dans l’éditeur."
url: https://leiho.dev/fr/frameworks/astro
lang: fr
updated: 2026-11-04
---
Astro · Sortie statique ou serveur

# Édition visuelle pour Astro, sur WordPress.

Sortie statique ou serveur, Leiho s’adapte aux deux : une requête à l’API de contenu par build, et un script qui ne se charge que dans l’éditeur.

1. 01
   ## Autorisez l’éditeur à afficher votre site
   Définissez l’en-tête là où le site est hébergé.
   ```
   /*
     Content-Security-Policy: frame-ancestors 'self' https://cms.example.com
   ```
   ```
   {
     "headers": [
       {
         "source": "/(.*)",
         "headers": [
           { "key": "Content-Security-Policy", "value": "frame-ancestors 'self' https://cms.example.com" }
         ]
       }
     ]
   }
   ```
   ```
   import { defineMiddleware } from 'astro:middleware';
   
   export const onRequest = defineMiddleware(async (_context, next) => {
     const response = await next();
     response.headers.set('Content-Security-Policy', "frame-ancestors 'self' https://cms.example.com");
     return response;
   });
   ```
   S’applique aux pages rendues à la demande. Les pages prérendues reçoivent leurs en-têtes de l’hébergeur.
2. 02
   ## Ajoutez le bridge
   Installez le package, puis ajoutez ce script à votre layout de base. Astro l’intègre au bundle, et le bridge ne se télécharge que dans l’éditeur.
   ```Terminal
   npm install leiho
   ```
   ```astro
   <head>
     <!-- … -->
     <script>
       if (window.self !== window.top) {
         import('leiho').then(({ initLeihoBridge }) => {
           initLeihoBridge({ wpOrigin: 'https://cms.example.com' });
         });
       }
     </script>
   </head>
   ```
3. 03
   ## Lisez le contenu
   Chargez le contenu dans getStaticPaths : une requête par build.
   ```astro
   ---
   import { loadLeihoContent, indexLeihoContent } from 'leiho/content';
   import Base from '../layouts/Base.astro';
   
   export async function getStaticPaths() {
     const { data } = await loadLeihoContent({ url: 'https://cms.example.com/wp-json/leiho/v1/export' });
     return indexLeihoContent(data).items.map((page) => ({
       params: { path: page.path.replace(/^\/|\/$/g, '') || undefined },
       props: { page },
     }));
   }
   
   const { page } = Astro.props;
   ---
   <Base title={page.title}>
     <main data-wp-post={page.id}>
       <h1 data-wp-field="_title">{page.title}</h1>
     </main>
   </Base>
   ```
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.
   ```astro
   ---
   import { field, entry } from 'leiho';
   // field() writes data-wp-post + data-wp-field, entry() names a section.
   // Flexible content rows: block(page, 'sections', i, 'Label').
   ---
   <section {...entry(page, 'Hero')}>
     <h1 {...field(page, 'hero_title')}>{page.fields.hero_title}</h1>
     <img {...field(page, 'hero_image')} src={page.fields.hero_image?.url} alt={page.fields.hero_image?.alt} />
     {page.fields.cards?.map((card, i) => (
       <article {...field(page, `cards.${i}.title`)}>{card.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)
- [**Nuxt**](https://leiho.dev/fr/frameworks/nuxt)
- [**SvelteKit**](https://leiho.dev/fr/frameworks/sveltekit)
- [**React**](https://leiho.dev/fr/frameworks/react)
- [**HTML, PHP and others**](https://leiho.dev/fr/frameworks/html)

## 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)