Démarrage rapide

#1. Installer le plugin

Téléchargez leiho.zip (dernière version, également listée sur la page des 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 (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…)

npm install leiho

// 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> :

<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 :

<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/.

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) pour Claude Code, Cursor, Codex et consorts.