---
title: "Leiho pour SvelteKit : l’édition visuelle sur WordPress"
description: "Chargez les pages dans +page.server.ts, démarrez le bridge depuis le layout racine, appliquez field() sur vos éléments."
url: https://leiho.dev/fr/frameworks/sveltekit
lang: fr
updated: 2026-11-04
---
SvelteKit · Svelte 5

# Édition visuelle pour SvelteKit, sur WordPress.

Chargez les pages dans +page.server.ts, démarrez le bridge depuis le layout racine, appliquez field() sur vos éléments.

1. 01
   ## Autorisez l’éditeur à afficher votre site
   Copiez ceci dans src/hooks.server.ts.
   ```ts
   import type { Handle } from '@sveltejs/kit';
   
   export const handle: Handle = async ({ event, resolve }) => {
     const response = await resolve(event);
     response.headers.set('Content-Security-Policy', "frame-ancestors 'self' https://cms.example.com");
     return response;
   };
   ```
   Les pages prérendues sont servies comme fichiers statiques : définissez le même en-tête chez votre hébergeur.
2. 02
   ## Ajoutez le bridge
   Installez le package, puis chargez le bridge depuis le layout racine.
   ```Terminal
   npm install leiho
   ```
   ```svelte
   <script>
     import { onMount } from 'svelte';
   
     let { children } = $props();
   
     onMount(() => {
       if (window.self === window.top) return;
       import('leiho').then(({ initLeihoBridge }) => {
         // Already on screen: don't hide the page.
         initLeihoBridge({ wpOrigin: 'https://cms.example.com', cloakTimeout: 0 });
       });
     });
   </script>
   
   {@render children()}
   ```
3. 03
   ## Lisez le contenu
   Chargez chaque page dans +page.server.ts.
   ```ts
   import { error } from '@sveltejs/kit';
   import { loadLeihoContent, indexLeihoContent } from 'leiho/content';
   
   export async function load({ url }) {
     const { data } = await loadLeihoContent({ url: 'https://cms.example.com/wp-json/leiho/v1/export' });
     const page = indexLeihoContent(data).byPath(url.pathname);
     if (!page) error(404, 'Not found');
     return { page };
   }
   ```
   Hébergement serverless avec un disque en lecture seule ? Passez snapshot: false à loadLeihoContent.
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.
   ```Svelte
   <script>
     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').
     let { page } = $props();
   </script>
   
   <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} />
     {#each page.fields.cards ?? [] as card, i}
       <article {...field(page, `cards.${i}.title`)}>{card.title}</article>
     {/each}
   </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)
- [**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)