Build complete WordPress sites, section by section, with the LLM of your choice.

Créez des sites WordPress complets, section par section, avec le LLM de votre choix.

Naano WP is an AI-powered visual builder that lives entirely inside your WordPress admin. You bring your own API key. No external backend, no subscription, no data leaves your server other than the prompt itself.

Naano WP est un constructeur visuel propulsé par l'IA qui vit entièrement dans votre administration WordPress. Vous apportez votre propre clé API. Pas de backend externe, pas d'abonnement, aucune donnée ne quitte votre serveur hormis le prompt lui-même.

Most AI builders send the whole page to the model on every change. Naano WP flips that: only the section you're editing travels as full HTML. Every other section is compressed to an 8-character hash placeholder. That single decision shapes the rest of the product — faster iteration, cheaper tokens, calmer reasoning, more focused output.

La plupart des constructeurs IA envoient la page entière au modèle à chaque modification. Naano WP inverse cette logique : seule la section en cours d'édition transite en HTML complet. Toutes les autres sections sont compressées en un simple hash de 8 caractères. Ce choix architectural façonne tout le reste du produit — itérations plus rapides, tokens moins coûteux, raisonnement plus ciblé, résultats plus précis.

This guide walks through every feature: installing the plugin, configuring a provider, generating a page, editing sections individually, swapping elements via the new ♻ recycle button, publishing, translating, and extending. Each topic stands alone — jump straight to what you need from the left.

Ce guide couvre chaque fonctionnalité : installation du plugin, configuration d'un fournisseur, génération d'une page, édition section par section, remplacement d'éléments via le nouveau bouton ♻, publication, traduction et extension. Chaque sujet est autonome — naviguez directement vers ce dont vous avez besoin depuis la barre gauche.

Requirements #

Prérequis #

Naano WP targets a clean, modern PHP stack. If your host runs current WordPress, it runs Naano WP.

Naano WP cible une stack PHP moderne et propre. Si votre hébergeur fait tourner WordPress à jour, il peut faire tourner Naano WP.

The plugin makes every LLM call from PHP through cURL. There is no Node.js, no webpack, no build step. If you can install a WordPress plugin, you can install Naano WP.

Le plugin effectue chaque appel LLM depuis PHP via cURL. Pas de Node.js, pas de webpack, pas d'étape de build. Si vous savez installer une extension WordPress, vous savez installer Naano WP.

Installation #

Installation #

Two paths: upload the zip through the WordPress admin, or drop the folder into /wp-content/plugins/ via FTP.

Deux options : téléverser le zip depuis l'administration WordPress, ou déposer le dossier dans /wp-content/plugins/ via FTP.

1. Download the latest release

   Grab the naano-ai-website-builder.zip from the project's GitHub releases. Click the Download 2.3.9 button in the top-right of this page.

2. Upload to WordPress

   In the admin sidebar, go to Plugins → Add New Plugin → Upload Plugin. Pick the zip you just downloaded and click Install Now, then Activate.

3. Configure your provider

   A new menu appears in the sidebar: Naano AI Builder. Open Settings, pick a provider (Claude, Gemini, OpenAI, Kimi, or DeepSeek), paste your API key, and click Test connection to confirm the credentials.

4. You're ready

   That's it — no additional server configuration required. Naano WP works out of the box on any standard WordPress host, including shared hosting. Go to Naano AI Builder → AI Pages and create your first page.

1. Télécharger la dernière version

   Récupérez le fichier naano-ai-website-builder.zip depuis les releases GitHub du projet. Cliquez sur le Download 2.3.9 en haut à droite de cette page.

2. Téléverser sur WordPress

   Dans la barre latérale de l'administration, allez dans Extensions → Ajouter une extension → Téléverser une extension. Sélectionnez le zip que vous venez de télécharger, cliquez sur Installer maintenant, puis sur Activer.

3. Configurer votre fournisseur

   Un nouveau menu apparaît dans la barre latérale : Naano AI Builder. Ouvrez Réglages, choisissez un fournisseur (Claude, Gemini, OpenAI, Kimi ou DeepSeek), collez votre clé API et cliquez sur Tester la connexion pour valider les identifiants.

4. C'est tout

   Aucune configuration serveur supplémentaire n'est nécessaire. Naano WP fonctionne immédiatement sur tout hébergement WordPress standard, y compris les hébergements mutualisés. Rendez-vous dans Naano AI Builder → AI Pages et créez votre première page.

Your first page #

Votre première page #

From settings to a published page in under ten minutes.

Des réglages à une page publiée en moins de dix minutes.

1. Add design variables

   In Settings → Custom design variables, define brand-wide values: primary_color, brand_name, font_family, tone, industry, target_audience. These are injected into every prompt for consistent output across all sections.

2. Create a new page with AI

   Go to Naano AI Builder → AI Pages and click Create New Page with AI. Enter a page name and a short description of what the site is.

3. Pick sections

   Check the sections you want: Header, Hero, About, Services, Testimonials, FAQ, Contact, Footer — or your own custom set. You can also import header and footer from an existing Naano WP page.

4. Generate

   Click Generate full website. The plugin generates one section per tick, entirely automatically. The live preview iframe updates section by section as they land.

5. Refine

   Click any element in the live preview to open the floating Element Editor. Type directly to change text. Tweak Style, Spacing, Classes, Link, Custom CSS. Or pick a whole section in the left drawer and refine it with a natural-language instruction.

6. Publish

   Click Save changes to persist your manual edits as a draft. When you're ready, click Publish to assemble the final HTML and write it to a real WordPress page — served as raw HTML, with no theme wrapping.

1. Ajouter des variables de design

   Dans Réglages → Variables de design personnalisées, définissez des valeurs globales à la marque : primary_color, brand_name, font_family, tone, industry, target_audience. Ces valeurs sont injectées dans chaque prompt pour garantir une cohérence sur toutes les sections.

2. Créer une nouvelle page avec l'IA

   Allez dans Naano AI Builder → AI Pages et cliquez sur Créer une nouvelle page avec l'IA. Saisissez un nom de page et une courte description du site.

3. Choisir les sections

   Cochez les sections souhaitées : Header, Hero, About, Services, Testimonials, FAQ, Contact, Footer — ou votre propre sélection personnalisée. Vous pouvez aussi importer le header et le footer d'une page Naano WP existante.

4. Générer

   Cliquez sur Générer le site complet. Le plugin génère une section à chaque tick, de manière entièrement automatique. L'aperçu en direct se met à jour section par section au fur et à mesure.

5. Affiner

   Cliquez sur n'importe quel élément dans l'aperçu pour ouvrir l'éditeur d'élément flottant. Tapez directement pour modifier le texte. Ajustez le Style, l'Espacement, les Classes, le Lien, le CSS personnalisé. Ou sélectionnez une section entière dans le panneau gauche et affinez-la avec une instruction en langage naturel.

6. Publier

   Cliquez sur Enregistrer les modifications pour sauvegarder vos éditions manuelles en brouillon. Quand vous êtes prêt, cliquez sur Publier pour assembler le HTML final et l'écrire dans une vraie page WordPress — servie en HTML brut, sans encapsulation par le thème.

The section-by-section model #

Le modèle section par section #

A single architectural decision shapes the entire product. Here's what changes when you stop sending whole pages to the model.

Une seule décision architecturale façonne tout le produit. Voici ce qui change quand on arrête d'envoyer des pages entières au modèle.

Conventional AI website builders treat the page as one atomic unit. Each change retypes the entire page in the prompt, the entire page in the response. Naano WP works the other way around. The page is a list of sections. Only one section is in-context at any time.

Les constructeurs de sites IA classiques traitent la page comme une unité atomique. Chaque modification retranscrit la page entière dans le prompt, et la page entière dans la réponse. Naano WP fait l'inverse : la page est une liste de sections, et une seule section est en contexte à la fois.

What the model actually sees

Ce que le modèle voit réellement

When you ask Naano WP to refine the Hero, the prompt contains:

Quand vous demandez à Naano WP d'affiner le Hero, le prompt contient :

• The full HTML of the Hero (what you're editing)
• An ordered list of hash placeholders for every other section — eight-character fingerprints that preserve position without spending tokens on content
• Your instruction
• The last three user/assistant exchanges (for continuity)
• Design variables, references, and asset citations

• Le HTML complet du Hero (ce que vous éditez)
• Une liste ordonnée de hash placeholders pour toutes les autres sections — des empreintes de 8 caractères qui préservent la position sans dépenser de tokens sur le contenu
• Votre instruction
• Les trois derniers échanges utilisateur/assistant (pour la continuité)
• Les variables de design, références et citations d'assets

The model returns just the new Hero. Everything else is untouched on the server side.

Le modèle retourne uniquement le nouveau Hero. Tout le reste est inchangé côté serveur.

The numbers

Les chiffres

The section is not a performance optimisation. It's a unit of attention — yours, and the model's.

La section n'est pas une optimisation de performance. C'est une unité d'attention — la vôtre, et celle du modèle.

The WP-Cron runner #

Le runner WP-Cron #

A small state machine that turns a long generation into a chain of short, recoverable ticks.

Une petite machine à états qui découpe une génération longue en une chaîne de ticks courts et récupérables.

Shared hosts kill long-running PHP processes. LSAPI_MAX_PROCESS_TIME caps execution. max_execution_time caps execution. Memory limits cap execution. A naive site generator that issues twelve sequential LLM calls in one request will run for one or two minutes and die before it finishes.

Les hébergements mutualisés interrompent les processus PHP trop longs. LSAPI_MAX_PROCESS_TIME limite l'exécution. max_execution_time aussi. Les limites mémoire aussi. Un générateur naïf qui émet douze appels LLM séquentiels dans une seule requête tournera une à deux minutes avant de mourir avant la fin.

Naano WP sidesteps the problem entirely. When you click Generate full website, the AJAX handler:

Naano WP contourne entièrement ce problème. Quand vous cliquez sur Générer le site complet, le handler AJAX :

1. Creates a job in a transient (a small object: cursor, sections, log, status).
2. Schedules the first WP-Cron tick.
3. Returns a job_id immediately.

1. Crée un job dans un transient (un petit objet : curseur, sections, journal, statut).
2. Programme le premier tick WP-Cron.
3. Retourne immédiatement un job_id.

Each tick does one thing: call the LLM for one section, sanitise the response, store it, advance the cursor, schedule the next tick. The browser polls naano_poll_job every couple of seconds for progress. No server-side configuration is required — WP-Cron fires automatically on incoming page requests, which is standard WordPress behaviour.

Chaque tick fait une seule chose : appeler le LLM pour une section, assainir la réponse, la stocker, avancer le curseur, programmer le tick suivant. Le navigateur interroge naano_poll_job toutes les deux secondes pour suivre la progression. Aucune configuration serveur n'est requise — WP-Cron se déclenche automatiquement sur les requêtes entrantes, ce qui est le comportement standard de WordPress.

If the worker is killed mid-tick — host timeout, memory exceeded, anything — the next tick reads the persisted state and continues from where the cursor stopped. The section that failed gets recorded in _naano_failed_sections with a reason. You see it as an entry in the Failed sections drawer with a one-click Retry. A site with twelve sections will never die on one bad section.

Si le worker est interrompu en plein tick — timeout de l'hébergeur, mémoire dépassée, autre — le tick suivant relit l'état persisté et reprend là où le curseur s'était arrêté. La section échouée est enregistrée dans _naano_failed_sections avec une raison. Elle apparaît dans le panneau Sections échouées avec un bouton Réessayer en un clic. Un site de douze sections ne peut jamais échouer à cause d'une seule mauvaise section.

Token optimisation #

Optimisation des tokens #

A list of small techniques compounded into substantial savings.

Une série de petites techniques qui s'accumulent pour des économies substantielles.

These add up. A refinement of a Hero section on a 12-section page typically costs 1,000–3,000 tokens on the request side instead of 15,000–30,000. With Gemini Flash on the free tier, you can build and refine an entire site without paying a cent. With Claude Sonnet, expect a few cents per page.

Ces techniques s'accumulent. L'affinage d'une section Hero sur une page de 12 sections coûte généralement 1 000–3 000 tokens en entrée au lieu de 15 000–30 000. Avec Gemini Flash en offre gratuite, vous pouvez construire et affiner un site entier sans débourser un centime. Avec Claude Sonnet, comptez quelques centimes par page.

Generating a page #

Générer une page #

What the model needs from you, and what shows up in its prompt without you noticing.

Ce que le modèle attend de vous, et ce qui apparaît dans son prompt sans que vous le voyiez.

Description

Description

Two or three sentences. What is the site? Who is it for? What's the tone? The description is reused on every subsequent section generation, so it acts as the page's "north star".

Deux ou trois phrases. Quel est le site ? À qui est-il destiné ? Quel est le ton ? La description est réutilisée à chaque génération de section — elle sert d'« étoile polaire » à la page.

Sections

Sections

A checklist of section types. You can pick the standard set (Header, Hero, About, Services, Testimonials, FAQ, Contact, Footer) or add custom ones. The runner generates them in the order you've listed.

Une liste de types de sections à cocher. Vous pouvez choisir l'ensemble standard (Header, Hero, About, Services, Testimonials, FAQ, Contact, Footer) ou en ajouter des personnalisées. Le runner les génère dans l'ordre que vous avez défini.

Imported sections

Sections importées

If you already have a Naano WP page with a header you like, you can import it directly. The HTML is copied server-side from the source page's _naano_sections meta. It never travels through the browser — no payload bloat, no risk of HTML mangling in transit.

Si vous avez déjà une page Naano WP avec un header qui vous convient, vous pouvez l'importer directement. Le HTML est copié côté serveur depuis la meta _naano_sections de la page source. Il ne transite jamais par le navigateur — aucun gonflement de payload, aucun risque de corruption HTML en transit.

Design variables (injected automatically)

Variables de design (injectées automatiquement)

Whatever you set in Settings is injected into every prompt as a structured "Design system" block.

Tout ce que vous définissez dans les Réglages est injecté dans chaque prompt sous forme d'un bloc structuré « Système de design ».

You can add any custom key as well. The model receives the full list every time.

Vous pouvez aussi ajouter n'importe quelle clé personnalisée. Le modèle reçoit la liste complète à chaque fois.

The element editor #

L'éditeur d'élément #

Clicking is the only mode. No toggle. No state to remember.

Cliquer est le seul mode. Pas de bascule. Rien à mémoriser.

Inspect mode is permanently on. Click any element in the live preview — heading, paragraph, button, image, the section root itself — and a floating panel slides in from the top-right of the canvas. The clicked element gets a solid orange outline and becomes contenteditable: you can type directly to change the text.

Le mode inspection est toujours actif. Cliquez sur n'importe quel élément dans l'aperçu en direct — titre, paragraphe, bouton, image, la racine de section elle-même — et un panneau flottant apparaît en haut à droite du canevas. L'élément cliqué reçoit un contour orange et devient contenteditable : vous pouvez taper directement pour modifier le texte.

Six tabs, six intents

Six onglets, six intentions

The Link, Image, and JS tabs are contextual — they only appear when the selected element matches (an <a>, an <img>, or a button respectively), so the panel never shows an irrelevant tab.

Les onglets Lien, Image et JS sont contextuels — ils n'apparaissent que lorsque l'élément sélectionné correspond (un <a>, un <img> ou un bouton respectivement), pour que le panneau n'affiche jamais d'onglet hors sujet.

Footer actions

Actions du pied de panneau

Below the tabs sit four actions: Delete the element (cannot delete a section root), Edit section with AI (closes the panel, opens the AI editor for the parent section), Done (deselect without applying), Apply (push everything to the iframe).

Sous les onglets se trouvent quatre actions : Supprimer l'élément (impossible sur la racine d'une section), Modifier la section avec l'IA (ferme le panneau, ouvre l'éditeur IA de la section parente), Terminer (désélectionner sans appliquer), Appliquer (pousser tout vers l'iframe).

Button JS New 2.3.2#

JS des boutons Nouveau 2.3.2#

Attach a click handler to a button straight from the element editor — no theme files, no enqueue, no build step.

Attachez un gestionnaire de clic à un bouton directement depuis l'éditeur d'élément — sans fichier de thème, sans enqueue, sans étape de build.

Select a button in the live preview and a JS tab appears in the floating panel. The tab is shown only for button-like elements: a <button>, an <input type="button|submit|reset">, anything with role="button", or an <a> whose class contains btn, button, or cta. Type raw JavaScript into the textarea and click Apply.

Sélectionnez un bouton dans l'aperçu en direct et un onglet JS apparaît dans le panneau flottant. L'onglet n'est affiché que pour les éléments de type bouton : un <button>, un <input type="button|submit|reset">, tout élément avec role="button", ou un <a> dont la classe contient btn, button ou cta. Tapez du JavaScript brut dans la zone de texte et cliquez sur Appliquer.

Execution model

Modèle d'exécution

Your code runs on the published page only, as the button's click handler. Inside it, this is the button element and event is the click event. It never runs inside the editor preview — clicks there are reserved for selecting elements, so a builder flag short-circuits the handler.

Votre code s'exécute uniquement sur la page publiée, comme gestionnaire click du bouton. À l'intérieur, this est l'élément bouton et event est l'événement de clic. Il ne s'exécute jamais dans l'aperçu de l'éditeur — les clics y servent à sélectionner les éléments, donc un drapeau du builder court-circuite le gestionnaire.

jsCopy// 'this' is the clicked button, 'event' is the click event
event.preventDefault();      // needed when the button submits a form
this.textContent = 'Merci !';
this.disabled = true;

How it persists

Comment c'est persisté

The model mirrors Custom CSS exactly. Your code is stored verbatim on the button as a data-naano-cust-js attribute — the single source of truth, atomic with the element and automatically HTML-escaped on serialization. A generic <script data-naano-cust-scripts> block is regenerated at the end of the section; it reads each button's code at click time, so nothing is inlined into the script body (a stray </script> can never break out). Both the attribute and the script survive the server-side sanitizer, which keeps inline scripts and data-* attributes.

Le modèle reproduit exactement celui du CSS personnalisé. Votre code est stocké tel quel sur le bouton dans un attribut data-naano-cust-js — la source de vérité unique, atomique avec l'élément et automatiquement échappée en HTML à la sérialisation. Un bloc générique <script data-naano-cust-scripts> est régénéré en fin de section ; il lit le code de chaque bouton au moment du clic, donc rien n'est inliné dans le corps du script (un </script> égaré ne peut jamais s'en échapper). L'attribut comme le script survivent au sanitizer côté serveur, qui conserve les scripts inline et les attributs data-*.

The recycle button New 2.3.1#

Le bouton ♻ Nouveau 2.3.1#

A second hover affordance — alongside the section "+", smaller, scoped to a single element. One click and you swap the element for a fresh widget.

Une deuxième affordance au survol — à côté du "+" de section, plus petite, limitée à un seul élément. Un clic et vous remplacez l'élément par un widget tout neuf.

What happens on click

Ce qui se passe au clic

A modal opens with two cards: Text and Image. Pick one and the element is replaced in place — same position, same parent, AI-generated classes preserved so the new widget sits visually inside the section's existing layout.

Une modale s'ouvre avec deux cartes : Texte et Image. Choisissez-en une et l'élément est remplacé sur place — même position, même parent, classes générées par l'IA préservées pour que le nouveau widget s'intègre visuellement dans la mise en page existante de la section.

The text widget

Le widget Texte

Replaces the element with a <p> containing the placeholder string "Texte à éditer…". The paragraph inherits the original element's classes (minus inspect-mode helpers) and is immediately editable — click it to start typing right away.

Remplace l'élément par un <p> contenant la chaîne placeholder "Texte à éditer…". Le paragraphe hérite des classes de l'élément original (sans les helpers du mode inspection) et est immédiatement éditable — cliquez dessus pour commencer à taper.

The image widget

Le widget Image

Closes the modal and opens the WordPress media library directly. Pick an image; on select the element is replaced with an <img> whose src and alt are pulled from the attachment. max-width: 100% and height: auto are applied inline so the image scales correctly inside any layout.

Ferme la modale et ouvre directement la médiathèque WordPress. Choisissez une image ; à la sélection, l'élément est remplacé par un <img> dont le src et l'alt sont tirés de la pièce jointe. max-width: 100% et height: auto sont appliqués en inline pour que l'image s'adapte correctement à n'importe quelle mise en page.

What's preserved, what's not

Ce qui est conservé, ce qui ne l'est pas

• Kept: AI-generated class names — the widget keeps the layout context (grid placement, alignment, etc.).
• Dropped: Inline style attribute, data-naano-el id, custom CSS attribute. The widget starts visually clean and gets a new id on the next click-to-select.
• Section dirty: The replacement is broadcast to the parent via the same naano-element-html-updated message used by every other DOM mutation — the section is marked unsaved, the toolbar's Save changes button appears.

• Conservé : les noms de classes générés par l'IA — le widget garde le contexte de mise en page (placement grille, alignement, etc.).
• Supprimé : l'attribut style inline, l'id data-naano-el, l'attribut CSS personnalisé. Le widget repart propre et reçoit un nouvel id au prochain clic.
• Section modifiée : le remplacement est diffusé au parent via le même message naano-element-html-updated utilisé par toute autre mutation DOM — la section est marquée non sauvegardée, le bouton Enregistrer les modifications apparaît.

References & assets #

Références & assets #

Show the model what you can't easily describe.

Montrez au modèle ce que vous ne pouvez pas facilement décrire.

Screenshot references

Références screenshot

Click the 🖼️ icon on any section card. The WordPress media library opens. Select or upload an image. When the section is next generated, the plugin:

Cliquez sur l'icône 🖼️ sur n'importe quelle carte de section. La médiathèque WordPress s'ouvre. Sélectionnez ou téléversez une image. Lors de la prochaine génération de la section, le plugin :

1. Fetches the attachment from disk.
2. Resizes it to a maximum of 1024 × 1024 pixels using PHP GD's imagecopyresampled.
3. Re-encodes it as JPEG at 75% quality.
4. Base64-encodes the result.
5. Injects it into the LLM message as an inline image content block (Claude, Gemini, OpenAI), or as a text note (Kimi, DeepSeek).

1. Récupère la pièce jointe depuis le disque.
2. La redimensionne à 1024 × 1024 pixels maximum via imagecopyresampled de PHP GD.
3. La ré-encode en JPEG à 75 % de qualité.
4. Encode le résultat en Base64.
5. L'injecte dans le message LLM comme bloc de contenu image inline (Claude, Gemini, OpenAI), ou comme note textuelle (Kimi, DeepSeek).

URL references

Références URL

Click the 🔗 icon. Enter a URL and an optional note. URL references are injected into the system prompt as a structured "Reference websites" block — useful for aligning the model on a competitor's aesthetic, an industry standard, or a specific source of inspiration.

Cliquez sur l'icône 🔗. Saisissez une URL et une note optionnelle. Les références URL sont injectées dans le system prompt sous forme d'un bloc structuré « Sites de référence » — utile pour aligner le modèle sur l'esthétique d'un concurrent, un standard du secteur, ou une source d'inspiration spécifique.

Page assets

Assets de page

Number-referenced assets you can cite in instructions. Upload an image as asset #1; ask the model to "use asset #1 as the hero image". The plugin resolves the citation server-side when assembling the prompt.

Des assets référencés par numéro que vous pouvez citer dans vos instructions. Téléversez une image comme asset #1 ; demandez au modèle d'« utiliser l'asset #1 comme image hero ». Le plugin résout la citation côté serveur lors de l'assemblage du prompt.

URL redirections

Redirections URL

Named links — "Contact → /contact", "Pricing → /pricing". The model uses these real URLs in generated <a href> attributes instead of placeholder hashes.

Liens nommés — « Contact → /contact », « Tarifs → /pricing ». Le modèle utilise ces vraies URLs dans les attributs <a href> générés au lieu de hashes placeholder.

Importing sections #

Importer des sections #

Reuse a header or footer from an existing Naano WP page instead of regenerating it.

Réutilisez un header ou un footer d'une page Naano WP existante plutôt que de le régénérer.

On the Create new page panel, expand Import from existing pages. Click Header or Footer next to any listed page to mark it for import (a check appears). Then click Generate full website. Imported sections are copied server-side from the source page's stored HTML, then AI-generated sections are added alongside them.

Dans le panneau Créer une nouvelle page, dépliez Importer depuis des pages existantes. Cliquez sur Header ou Footer à côté d'une page listée pour la marquer à importer (une coche apparaît). Puis cliquez sur Générer le site complet. Les sections importées sont copiées côté serveur depuis le HTML stocké de la page source, puis les sections générées par IA sont ajoutées à côté.

This matters because real sites tend to share their header and footer across every page. Regenerating either with the AI introduces drift — slightly different copy, slightly different links, slightly different markup. Importing keeps both pinned.

C'est important car les vrais sites partagent généralement leur header et leur footer sur toutes les pages. Régénérer l'un ou l'autre avec l'IA introduit de la dérive — texte légèrement différent, liens légèrement différents, balisage légèrement différent. L'import maintient les deux verrouillés.

Translations #

Traductions #

A page per language, addressed by WordPress page hierarchy.

Une page par langue, organisée par hiérarchie de pages WordPress.

Each translated page is a child of the original. The language code becomes the slug. URLs are automatic.

Chaque page traduite est un enfant de l'original. Le code de langue devient le slug. Les URLs sont automatiques.

Setup

Configuration

In Settings → Translation languages, click Add language and enter a code (es) and a label (Spanish). Save.

Dans Réglages → Langues de traduction, cliquez sur Ajouter une langue et saisissez un code (fr) et un libellé (Français). Enregistrez.

Creating a translation

Créer une traduction

In the pages list, click Translate on any original. Pick the target language; click Duplicate & translate. A child page is created with all sections pre-copied, and you're redirected straight to its builder. Use the AI to translate section by section — give it an instruction like "Translate every string to Spanish, keep the HTML structure identical".

Dans la liste des pages, cliquez sur Traduire sur n'importe quelle page originale. Choisissez la langue cible ; cliquez sur Dupliquer & traduire. Une page enfant est créée avec toutes les sections pré-copiées et vous êtes redirigé directement vers son builder. Utilisez l'IA pour traduire section par section — donnez-lui une instruction comme « Traduis tous les textes en français, garde la structure HTML identique ».

Language switcher

Sélecteur de langue

Once a page has at least one translation, a language <select> appears in the builder toolbar. Switching navigates immediately to that variant's builder.

Dès qu'une page a au moins une traduction, un <select> de langue apparaît dans la barre d'outils du builder. La sélection navigue immédiatement vers le builder de cette variante.

Saving & publishing #

Enregistrer & publier #

Three buttons, three intents. Nothing is ambiguous.

Trois boutons, trois intentions. Rien n'est ambigu.

Global CSS #

CSS global #

Page-level CSS that survives section regenerations.

CSS au niveau de la page qui survit aux régénérations de sections.

A textarea in the left drawer, just under URL references. Accepts raw CSS. Injected into the assembled HTML after the platform's reset (html, body { margin: 0; padding: 0 } and box-sizing: border-box), so you can override anything the AI emits. Persisted alongside section edits when you click Save changes.

Une zone de texte dans le panneau gauche, juste sous les références URL. Accepte du CSS brut. Injecté dans le HTML assemblé après le reset de la plateforme (html, body { margin: 0; padding: 0 } et box-sizing: border-box), vous pouvez donc surcharger tout ce que l'IA émet. Persisté avec les éditions de sections quand vous cliquez sur Enregistrer les modifications.

Useful for setting global typography rules, body background, font-face imports, anything that needs to apply consistently across every section without being baked into individual section HTML.

Utile pour définir des règles typographiques globales, l'arrière-plan du body, des imports de font-face — tout ce qui doit s'appliquer de façon cohérente sur toutes les sections sans être intégré dans le HTML de chaque section.

Failed sections & retry #

Sections échouées & réessai #

A dedicated drawer for the sections that didn't survive their first generation.

Un panneau dédié aux sections qui n'ont pas survécu à leur première génération.

When a worker is killed mid-tick, the runner persists what it had, records the failure in _naano_failed_sections post meta (with a reason), and advances. Failed sections appear in a dedicated Failed sections drawer field with a one-click Retry button per entry. Each retry triggers a fresh single-section generation; recovered sections clear from the list automatically.

Quand un worker est interrompu en plein tick, le runner persiste ce qu'il avait, enregistre l'échec dans la post meta _naano_failed_sections (avec une raison) et avance. Les sections échouées apparaissent dans un champ dédié Sections échouées avec un bouton Réessayer en un clic par entrée. Chaque réessai déclenche une nouvelle génération de section unique ; les sections récupérées disparaissent automatiquement de la liste.

This means: a host kill during generation is not catastrophic. You finish the rest of the page, then come back to the failed sections one at a time when the host is calmer.

Cela signifie qu'une interruption par l'hébergeur pendant la génération n'est pas catastrophique. Vous terminez le reste de la page, puis revenez aux sections échouées une par une quand l'hébergeur est plus calme.

Providers & API keys #

Fournisseurs & clés API #

Bring your own key. Your credentials stay on your server.

Apportez votre propre clé. Vos identifiants restent sur votre serveur.

Keys are stored in wp_options and never leave your server except as the outbound HTTPS call to the provider. There is no telemetry, no third-party intermediary, no Naano WP server in the loop.

Les clés sont stockées dans wp_options et ne quittent jamais votre serveur sauf pour l'appel HTTPS sortant vers le fournisseur. Pas de télémétrie, pas d'intermédiaire tiers, aucun serveur Naano WP dans la boucle.

Test connection

Tester la connexion

Every settings panel has a Test connection button. It does a live ping to the provider with your key and model, returning the latency in milliseconds. If it fails, the error message comes straight from the provider.

Chaque panneau de réglages dispose d'un bouton Tester la connexion. Il effectue un ping en direct vers le fournisseur avec votre clé et votre modèle, retournant la latence en millisecondes. En cas d'échec, le message d'erreur vient directement du fournisseur.

Adding your own provider

Ajouter votre propre fournisseur

All adapters implement Naano_LLM_Provider_Interface. Create a class implementing the interface, register it in class-llm-router.php, and it shows up in the settings dropdown. No core code changes needed.

Tous les adaptateurs implémentent Naano_LLM_Provider_Interface. Créez une classe implémentant l'interface, enregistrez-la dans class-llm-router.php, et elle apparaît dans le menu déroulant des réglages. Aucune modification du code principal n'est nécessaire.

Design variables #

Variables de design #

Brand-wide values injected into every prompt for consistent output.

Valeurs globales à la marque injectées dans chaque prompt pour un résultat cohérent.

See the Generating a page section for the standard list. Custom keys are supported — the model receives any key/value pair you define. Use them for anything you want the model to remember across sections: a slogan, a callout box phrasing, a specific CTA text, a forbidden word.

Consultez la section Générer une page pour la liste standard. Les clés personnalisées sont supportées — le modèle reçoit toute paire clé/valeur que vous définissez. Utilisez-les pour tout ce que vous souhaitez que le modèle retienne entre les sections : un slogan, une formulation de callout, un texte CTA spécifique, un mot interdit.

exampleCopyprimary_color    #2776ea
font_family      Inter, sans-serif
tone             modern, technical
cta_text         Get started
forbidden_words  AI, artificial

Architecture #

Architecture #

Pure PHP. Every LLM call is a cURL. Every UI action is a jQuery AJAX. Every storage write is a postmeta.

PHP pur. Chaque appel LLM est un cURL. Chaque action UI est un AJAX jQuery. Chaque écriture est une postmeta.

Stored postmeta

Postmeta stockées

HTML sanitisation

Assainissement HTML

Every LLM response passes through a sanitisation pipeline before storage: <script> tags removed, on* event attributes stripped, javascript: URIs rewritten. What lands in the database is provably clean.

Chaque réponse LLM passe par un pipeline d'assainissement avant stockage : balises <script> supprimées, attributs d'événements on* retirés, URIs javascript: réécrits. Ce qui atterrit en base de données est propre de façon prouvable.

Nonce protection

Protection par nonce

Every AJAX endpoint verifies a naano_builder_nonce nonce. Same standard WordPress idiom used by every well-behaved plugin.

Chaque endpoint AJAX vérifie un nonce naano_builder_nonce. Le même idiome WordPress standard utilisé par tout plugin bien conçu.

AJAX API #

API AJAX #

Every endpoint requires a valid naano_builder_nonce in the nonce POST field.

Chaque endpoint requiert un naano_builder_nonce valide dans le champ POST nonce.

Hooks & filters #

Hooks & filtres #

Standard WordPress action and filter hooks for plugin authors and theme developers.

Hooks d'action et de filtre WordPress standard pour les auteurs de plugins et les développeurs de thèmes.

Stored meta keys #

Clés meta stockées #

For migration scripts, custom queries, or programmatic page introspection.

Pour les scripts de migration, les requêtes personnalisées ou l'introspection programmatique de pages.

All Naano WP pages store their state in standard wp_postmeta rows. The keys are stable and documented — you can write tools against them.

Toutes les pages Naano WP stockent leur état dans des lignes wp_postmeta standard. Les clés sont stables et documentées — vous pouvez écrire des outils qui s'y appuient.

phpCopy// List every section on a Naano WP page
$sections = get_post_meta( $page_id, '_naano_sections', true );
foreach ( $sections as $section ) {
    echo $section['type'] . ': ' . strlen( $section['html'] ) . " bytes\n";
}

Troubleshooting #

Résolution de problèmes #

The small set of problems that come up regularly, and how to fix them.

Les problèmes qui reviennent régulièrement, et comment les résoudre.

The recycle button doesn't appear after updating

Le bouton ♻ n'apparaît pas après la mise à jour

The browser is serving the old builder.js from cache. WordPress version-strings every asset URL (builder.js?ver=…) — if the version is the same as before, browsers reuse the cached file. Bump NAANO_VERSION in the main plugin file, or hard-reload the builder page (Cmd/Ctrl + Shift + R).

Le navigateur sert l'ancien builder.js depuis le cache. WordPress ajoute la version du plugin dans chaque URL d'asset (builder.js?ver=…) — si le numéro de version est identique, le navigateur réutilise le fichier en cache. Incrémentez NAANO_VERSION dans le fichier principal du plugin, ou rechargez la page du builder en force (Cmd/Ctrl + Shift + R).

Generation is stuck on "queued"

La génération reste bloquée sur « en attente »

The WP-Cron tick hasn't fired yet. Visiting any front-end URL on your site will trigger WordPress's request-based cron and unblock the queue. If the issue persists, check that outbound HTTPS to your LLM provider is allowed by your host's firewall.

Le tick WP-Cron n'a pas encore été déclenché. Visiter n'importe quelle URL publique de votre site déclenchera le cron basé sur les requêtes WordPress et débloquera la file. Si le problème persiste, vérifiez que les connexions HTTPS sortantes vers votre fournisseur LLM ne sont pas bloquées par le pare-feu de l'hébergeur.

A section failed during generation

Une section a échoué pendant la génération

Look for the Failed sections drawer field at the bottom of the left drawer. Each entry has a Retry button. Most failures are transient (host kill, LLM rate limit) and succeed on retry.

Cherchez le champ Sections échouées en bas du panneau gauche. Chaque entrée possède un bouton Réessayer. La plupart des échecs sont transitoires (interruption par l'hébergeur, limite de débit LLM) et réussissent au second essai.

The API key test fails

Le test de clé API échoue

Click Test connection in Settings — the response contains the provider's actual error message. The most common causes are (1) wrong region for Gemini, (2) expired or rotated keys, (3) outbound firewall blocking HTTPS to the provider.

Cliquez sur Tester la connexion dans les Réglages — la réponse contient le message d'erreur exact du fournisseur. Les causes les plus fréquentes sont : (1) mauvaise région pour Gemini, (2) clé expirée ou révoquée, (3) pare-feu bloquant les connexions HTTPS sortantes vers le fournisseur.

Published page looks different from the preview

La page publiée est différente de l'aperçu

The preview iframe and the published page use the same assembled HTML, including the body-margin reset and your global CSS. If they diverge, the most likely cause is an active WordPress theme injecting styles. Naano WP publishes pages as raw HTML with no theme wrapping — if your theme is intercepting page rendering through filters, you may need to whitelist Naano WP-published pages.

L'iframe d'aperçu et la page publiée utilisent le même HTML assemblé, incluant la réinitialisation des marges et votre CSS global. Si une divergence apparaît, la cause la plus probable est un thème WordPress actif qui injecte des styles. Naano WP publie les pages en HTML brut sans encapsulation par le thème — si votre thème intercepte le rendu via des filtres, vous devrez peut-être mettre les pages Naano WP en liste blanche.