---
title: "Démarrage rapide · Documentation Leiho"
description: "Installez le plugin, connectez votre site, annotez votre balisage."
url: https://leiho.dev/fr/docs/quick-start
lang: fr
updated: 2026-11-04
---
Premiers pas

# Démarrage rapide

Installez le plugin, connectez votre site, annotez votre balisage.

## 1. Installer le plugin

[Téléchargez `leiho.zip`](https://leiho.dev/get/leiho.zip) (dernière version, également listée sur la [page des releases](https://github.com/pixelersagency/leiho/releases)) et envoyez-le dans **Extensions → Ajouter une extension → Téléverser une extension**. Les versions suivantes apparaissent dans **Extensions** comme n’importe quelle mise à jour. Nécessite WordPress 6.0+ et PHP 7.4+. Modélisez votre contenu avec Leiho Collections, ou conservez vos champs [ACF](https://www.advancedcustomfields.com/) (version gratuite ou Pro).

## 2. Indiquer l’adresse de votre site

**Leiho → Réglages** : l’URL de votre front, les types de publication que les rédacteurs peuvent ouvrir et le modèle d’URL de chacun (`/{slug}` par défaut ; la page d’accueil correspond à `/`).

## 3. Autoriser wp-admin à afficher votre site

Envoyez cet en-tête depuis votre front (**Leiho → Démarrer** l’affiche avec votre domaine déjà renseigné, et le vérifie pour vous) :

```
Content-Security-Policy: frame-ancestors 'self' https://your-wordpress.example
```

## 4. Ajouter le bridge et annoter votre balisage

**React (Next.js, Remix, Vite…)**

```bash
npm install leiho
```

```jsx
// Root layout: app/layout.tsx, root.tsx, App.tsx…
import { LeihoBridge } from 'leiho/react';

<LeihoBridge wpOrigin="https://your-wordpress.example" />
```

**Tout autre site (Astro, Nuxt, SvelteKit, HTML)** : copiez `leiho-bridge.js` (téléchargeable depuis **Leiho → Démarrer**) dans votre dossier public et ajoutez dans le `<head>` :

```html
<script>
  // Loads the bridge only inside the editor: visitors get ~150 bytes, not 10 KB.
  if (window.self !== window.top) {
    var s = document.createElement('script');
    s.src = '/leiho-bridge.js';
    s.setAttribute('data-wp-origin', 'https://your-wordpress.example');
    document.head.appendChild(s);
  }
</script>
```

Annotez ensuite ce qui doit être modifiable :

```html
<main data-wp-post="12">
  <h1 data-wp-field="_title">About us</h1>
  <p data-wp-field="intro">We build things.</p>
  <img data-wp-field="hero_image" src="/hero.jpg" alt="" />
</main>
```

De retour dans wp-admin, **Leiho → Démarrer → Tester la connexion** confirme que le bridge répond. C’est terminé. Les guides pas à pas pour chaque framework se trouvent dans [`examples/`](https://leiho.dev/fr/frameworks).

> **Vous utilisez un agent de code ?** **Leiho → Démarrer** vous fournit des prompts prêts à coller et le contrat d’intégration complet ([`plugin/docs/agent-instructions.md`](https://github.com/pixelersagency/leiho/blob/main/plugin/docs/agent-instructions.md)) pour Claude Code, Cursor, Codex et consorts.

Mis à jour le 4 novembre 2026[Un point pas clair sur cette page ? Dites-le-nous →](https://github.com/pixelersagency/leiho/issues/new?title=Docs%3A%20D%C3%A9marrage%20rapide)