Partie III — Pour l'utilisateur final

CHAPITRE 16 — Référencement, sitemap et partage social

Avoir un beau contenu est nécessaire ; obtenir une visibilité de Google et des réseaux sociaux est tout aussi important. Le module intègre l'ensemble des outils de référencement de base directement dans l'éditeur, sans extension tierce.

Le panneau SEO d'une page

Pour chaque page, vous pouvez personnaliser ses métadonnées de référencement via un panneau dédié dans la barre d'outils.

Accéder au panneau
  1. Ouvrez la page dans l'éditeur.
  2. Dans la barre d'outils centrale, cliquez sur SEO.
  3. Une fenêtre de 720 pixels de largeur s'ouvre.
Les champs disponibles

Champ

Description

Cible

Titre SEO

Le titre affiché dans l'onglet du navigateur et dans les résultats Google.

50 à 60 caractères

Meta description

Le texte de présentation sous le titre dans Google.

140 à 160 caractères

Mots-clés

Mots-clés séparés par des virgules.

Facultatif — peu utilisé par Google moderne

Image Open Graph

Image affichée lorsque la page est partagée sur Facebook, LinkedIn, Twitter, WhatsApp.

1200 × 630 px recommandé

L'aperçu Google en direct

En haut de la fenêtre, un aperçu live reproduit l'affichage d'un résultat Google :

L'aperçu se met à jour à chaque saisie. Vous voyez immédiatement si votre titre est tronqué ou si votre description est trop longue.

Compteurs colorés — À côté de chaque champ, un compteur indique le nombre de caractères :
Vert : dans la plage idéale.
Orange : en dehors de la plage mais acceptable.
Rouge : trop long, sera tronqué par Google.

Choisir l'image Open Graph

  1. Dans la fenêtre SEO, cliquez sur Choisir une image.
  2. La bibliothèque média s'ouvre.
  3. Sélectionnez une image ou téléversez-en une nouvelle.
  4. L'image apparaît à droite de l'aperçu Google.

Format idéal — 1200 × 630 px (ratio 1.91:1) pour Facebook et LinkedIn. Format JPG ou PNG. Affichez votre logo et un texte court qui résume la page. Évitez les images de banque génériques.

Lorsqu'une image Open Graph est renseignée, le module ajoute automatiquement les balises Open Graph et Twitter Cards dans l'en-tête HTML de la page :

<meta property="og:image" content="..." />
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta name="twitter:card" content="summary_large_image" />

Enregistrer le SEO

  1. Modifiez les champs.
  2. Cliquez sur Enregistrer en bas de la fenêtre.
  3. Le module met à jour la base de données (llx_website_page) et le fichier tpl.php en synchronisant les balises HTML.
  4. L'aperçu se rafraîchit.

Note — Les métadonnées SEO ne suivent pas le cycle de publication des slots. Une fois enregistrées, elles sont visibles publiquement immédiatement.

Sitemap.xml

Le sitemap est le fichier que Google utilise pour découvrir toutes les pages de votre site. Le module le génère automatiquement à partir de votre liste de pages.

Contenu généré
Régénérer le sitemap

Méthode A — Bouton dans l'éditeur

  1. Rendez-vous dans la liste des pages d'un site.
  2. Cliquez sur le bouton Sitemap en haut.
  3. Le module régénère le fichier sitemap.xml à la racine du docroot.
  4. Une notification confirme l'opération.

Méthode B — En ligne de commande (administrateurs)

php htdocs/custom/infrasstudio/scripts/generate_sitemap.php <ref-du-site> <entity>

Cette méthode convient à une planification quotidienne automatisée.

Recommandé — Soumettez votre sitemap à Google Search Console une seule fois. Google reviendra ensuite le consulter automatiquement à intervalles réguliers.

Balises hreflang multilingues

Pour un site multilingue, Google a besoin de savoir quelles pages sont des traductions les unes des autres. C'est le rôle des balises <link rel="alternate" hreflang="...">.

Le module génère ces balises automatiquement, à condition que votre développeur ait inclus le helper dans l'en-tête du gabarit :

Conseil — Si vous ne voyez pas ces balises sur votre site, demandez à votre développeur d'ajouter <?php echo infrasstudio_hreflang_tags($website, $page); ?> dans l'en-tête de vos gabarits.

Liste de contrôle SEO par page

Avant de publier une nouvelle page, vérifiez les points suivants :

Outils de mesure du référencement

Le module génère le SEO mais ne le mesure pas. Pour suivre vos résultats, utilisez les outils standards :

Récapitulatif

Vous savez désormais :

Fin de la Partie III — Vous savez désormais utiliser le module au quotidien : modifier le contenu, gérer les médias, publier, traduire, gérer un blog, exploiter un catalogue produit et soigner le référencement. Vous êtes autonome.

La Partie IV s'adresse aux développeurs intégrateurs. Si ce n'est pas votre rôle, vous pouvez passer directement aux Annexes (glossaire, FAQ, historique des versions).

CHAPITRE 15 — Catalogue produit dynamique

Si votre site présente un catalogue de produits Dolibarr (services, logiciels, abonnements), le module peut générer automatiquement une page web dédiée à chaque produit. Vous ajoutez un produit dans Dolibarr, sa page web est créée sans intervention supplémentaire.

Le concept

Vous disposez probablement déjà de produits dans Dolibarr (table llx_product) avec leur fiche commerciale (libellé, description, prix). Sur votre site web, vous souhaitez :

Le module remplit exactement ce besoin. Vous écrivez un seul gabarit de fiche produit (la page solution-detail), et le module génère un wrapper solution-<ref>.php pour chaque produit publié.

Préparer un produit Dolibarr pour le catalogue

Pour qu'un produit apparaisse dans le catalogue web, deux conditions doivent être remplies :

Champ

Valeur requise

Statut commercialisable

(

tosell

)

À vendre (= 1)

Publié sur le site

(champ personnalisé

infrasstudio_published

)

Coché (= 1)

Trois états possibles pour un produit

tosell

published

Visibilité

0

—

Invisible partout (commercial et web)

1

0

Brouillon — modifiable côté Studio mais invisible publiquement

1

1

Publié — la carte apparaît sur le catalogue et la page de détail est servie

Accéder à la section Produits

  1. Ouvrez l'éditeur Studio.
  2. Dans la colonne de gauche, cliquez sur l'onglet Produits.
  3. La liste de tous vos produits commercialisables s'affiche.

Pour chaque produit, vous voyez :

Modifier un produit

  1. Cliquez sur un produit dans la liste.
  2. L'aperçu central charge la page solution-detail avec ce produit.
  3. L'inspecteur à droite affiche les champs natifs Dolibarr et les champs personnalisés.
Champs modifiables

Catégorie

Champs

Champs natifs Dolibarr (traduisibles)

libellé, description (texte riche)

Champs personnalisés traduisibles

accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires

Champs personnalisés non traduisibles

image principale, URL du bouton, étiquette

Modifier un champ
  1. Cliquez sur le champ dans l'inspecteur, ou directement sur l'élément correspondant dans l'aperçu central.
  2. L'inspecteur passe en mode édition avec un bouton ← Retour.
  3. Modifiez la valeur.
  4. Pour les champs traduisibles, dépliez la section Autres langues.
  5. Cliquez sur Enregistrer en bas du panneau. Le compteur indique le nombre de champs modifiés en attente.
  6. L'aperçu se rafraîchit.

Conseil — Pour les produits, l'enregistrement automatique n'est pas activé : vous cliquez sur « Enregistrer » manuellement. Ce choix est délibéré, les champs Dolibarr étant plus sensibles, car directement liés à votre fiche produit commerciale.

Publier ou retirer un produit

  1. Sélectionnez le produit dans la liste.
  2. Dans la barre d'outils centrale, cliquez sur Publier (ou Dépublier si déjà publié).
  3. Le module modifie le champ personnalisé infrasstudio_published à 1 (ou 0).
  4. Il déclenche ensuite la régénération automatique des wrappers solution-<ref>.php.
  5. Une notification verte confirme l'opération.

Effet de la publication — Le wrapper /var/www/<site>/solution-<ref>.php est créé. La carte du produit apparaît sur le catalogue. La page de détail est accessible via /solution-<ref>.php.

Effet de la dépublication — Le wrapper est supprimé. Tout visiteur tentant d'accéder à l'URL reçoit une erreur 404. La carte disparaît du catalogue.

Régénérer les wrappers manuellement

Si une désynchronisation est suspectée — par exemple un produit modifié récemment qui n'affiche pas la bonne version — deux options sont disponibles.

Bouton dans la barre d'outils
  1. Sur la fiche produit, cliquez sur l'icône Régénérer wrapper (icône de synchronisation).
  2. Le module reconstruit le wrapper de ce produit.
Bouton « Reconstruire maintenant » (administrateur)
  1. Rendez-vous dans Outils → InfraSStudio → Configuration.
  2. Repérez la section Wrappers solution.
  3. Cliquez sur Reconstruire maintenant.
  4. L'ensemble des wrappers est régénéré en une seule opération.

Note — Une tâche planifiée toutes les heures régénère les wrappers en arrière-plan. En cas d'oubli ou d'incident temporaire, l'état est rétabli au plus tard une heure après.

La page de catalogue

La page de catalogue (généralement /catalogue.php) liste tous les produits publiés sous forme de cartes. Chaque carte présente :

Les visiteurs peuvent filtrer le catalogue par univers (Supply Chain, Health, Legal, etc.) et par type (SaaS, Extension, Instant). Les filtres sont en JavaScript et instantanés.

Lien direct depuis Dolibarr

Sur la fiche produit du Studio, un bouton Voir public ouvre la page solution publique dans un nouvel onglet. Un autre bouton Voir la fiche Dolibarr ouvre la fiche produit native.

Aller-retour fluide — Vous pouvez naviguer entre la fiche commerciale Dolibarr et l'éditeur web Studio sans interrompre votre flux de travail.

Récapitulatif

Vous savez désormais :

Le dernier chapitre de la Partie III aborde le référencement.

CHAPITRE 14 — Gérer les articles de blog

Le blog géré par le module repose sur les pages standard du module Website. Aucune table dédiée, aucun système parallèle : un article correspond à une page web. L'ensemble de ce que vous savez déjà s'applique, avec quelques raccourcis ergonomiques supplémentaires.

Comprendre l'architecture du blog

Élément

Description

Article

Une page Dolibarr Website portant le type

blogpost

.

Page d'index

Une page standard (par exemple « Ressources » ou « Blog ») qui liste les articles publiés.

Multilingue

Un article correspond à une page, qui correspond à un fichier PHP. Les traductions vivent dans les surcharges de slots, comme pour toute page.

Créer un nouvel article

L'assistant de création est contextuel : il s'active automatiquement lorsque vous êtes sur la page d'index du blog désignée par votre administrateur.

Procédure
  1. Ouvrez la page d'index du blog (par exemple /ressources).
  2. Le bouton de la barre latérale devient + Nouvel article (au lieu de « + Nouvelle page »).
  3. Cliquez sur ce bouton.
  4. Une fenêtre s'ouvre avec trois champs :
    • Titre : il deviendra le H1 et le titre SEO. Il pré-remplit le slot post_title.
    • Slug : généré automatiquement à partir du titre, préfixé par blog-. Vous pouvez le modifier.
    • Catégorie : la rubrique de l'article (par exemple transformation digitale, juridique). Elle pré-remplit le slot post_category.
  5. Cliquez sur Créer l'article.
  6. Une nouvelle page blog-mon-titre est créée à partir du gabarit blog du site.
  7. Vous êtes automatiquement redirigé vers l'éditeur de cette nouvelle page.

Effet automatique — Le module crée la page Dolibarr, le fichier tpl.php, le wrapper Apache blog-mon-titre.php et pré-remplit les slots post_title et post_category.

Anatomie d'un article

Un article créé depuis le gabarit standard contient les slots suivants :

Slot

Type

Rôle

post_title

texte court

H1 et titre SEO de l'article

post_meta_description

texte court

Meta description SEO (150-160 caractères)

post_category

texte court

Rubrique affichée en pastille au-dessus du titre

post_lead

texte long

Chapeau ou accroche en italique sous le titre

post_hero_image

image

Image principale en pleine largeur en haut de l'article

post_body

texte riche

Le corps de l'article (éditeur visuel complet)

post_secondary_image

image

Image illustrative facultative dans le corps

post_secondary_alt

texte court

Texte alternatif de l'image secondaire

Note — La date d'un article n'est pas un slot. Elle est lue automatiquement depuis la base Dolibarr (date de modification, sinon date de création). Vous n'avez pas à la saisir.

Date et auteur d'un article

La date affichée publiquement suit cette cascade :

  1. La date de modification de la page (la plus récente).
  2. La date de création si la page n'a jamais été modifiée.

Vous n'avez rien à saisir : à chaque publication d'une modification, la date est mise à jour automatiquement. C'est le comportement standard d'un blog.

Conseil — Pour antidater un article, demandez à votre administrateur Dolibarr de modifier llx_website_page.date_creation en SQL. Aucune interface dédiée n'est prévue, par souci de simplicité.

L'auteur affiché est généralement géré par un slot dans le gabarit du site (par exemple post_author).

La page d'index avec son listing automatique

La page d'index du blog (« Ressources », « Blog », etc.) ne nécessite aucune édition manuelle pour ajouter un nouvel article : la liste se met à jour automatiquement.

Lorsque vous publiez un nouvel article :

  1. Le module détecte la nouvelle page de type blogpost au statut publié.
  2. Au prochain rendu de la page d'index, l'article apparaît dans la grille.
  3. Image principale, titre, catégorie, accroche, date : tout est lu depuis les slots de l'article.

Conséquence — Vous ne touchez jamais à la page d'index. Vous publiez vos articles. Le listing se met à jour de lui-même.

La section « À lire également »

Sous chaque article, une section affiche trois articles aléatoires (autres que celui qui est consulté). Aucune configuration n'est nécessaire : la sélection est effectuée par le module à chaque rendu.

Modifier un article existant

  1. Ouvrez l'éditeur Studio.
  2. Dans la colonne de gauche, dépliez le groupe blogpost.
  3. Cliquez sur l'article à modifier.
  4. L'aperçu se charge. Modifiez les slots normalement (clic dans l'aperçu, inspecteur, etc.).
  5. Publiez lorsque vous êtes prêt.

Dupliquer un article

Cette fonction est utile pour réutiliser une structure existante :

  1. Ouvrez l'article modèle.
  2. Cliquez sur Dupliquer dans la barre d'outils.
  3. Une fenêtre demande le nouveau slug (préfixé blog-) et le nouveau titre.
  4. Confirmez.
  5. Le module crée la copie avec tous les slots clonés (canonique et traductions).
  6. Vous êtes redirigé vers le nouvel article pour le personnaliser.

Supprimer un article

Réservé aux administrateurs — Le bouton « Supprimer » de la barre d'outils n'est visible qu'avec la permission admin. Une confirmation est demandée. La suppression est irréversible : la page Dolibarr, ses slots, son fichier tpl.php et son wrapper Apache disparaissent définitivement.

Alternative — Plutôt que de supprimer, utilisez Retirer du site. L'article sort du listing public mais reste consultable depuis l'éditeur. Vous pouvez le remettre en ligne plus tard.

Récapitulatif

Vous savez désormais :

Le chapitre suivant présente le catalogue produit dynamique.

CHAPITRE 13 — Travailler en plusieurs langues

Si votre site existe en plusieurs langues, ce chapitre vous concerne. Le module est multilingue dès la création du premier slot. Aucune duplication de page n'est nécessaire : une seule page, plusieurs traductions.

Le modèle multilingue

Le module repose sur le modèle « une page, plusieurs traductions » :

Concept

Description

Langue canonique

La langue principale du site (généralement le français). C'est la valeur de référence.

Langues secondaires

Les autres langues activées sur le site. Chaque slot peut disposer d'une surcharge spécifique pour chacune d'elles.

Valeur par défaut

Définie par le développeur dans le HTML. Sert de filet de sécurité ultime.

L'ordre de résolution au rendu

Lorsqu'un visiteur consulte votre site en allemand, le module recherche la valeur d'un slot dans cet ordre :

  1. La surcharge dans la langue du visiteur (de_DE).
  2. La valeur canonique (FR par défaut).
  3. La valeur par défaut définie dans le code par le développeur.

Conséquence rassurante — Si vous omettez de traduire un slot en allemand, le visiteur voit la version française. Aucune page cassée, aucun texte vide.

Activer une langue sur votre site

Cette opération s'effectue une fois pour toutes, par le développeur ou l'administrateur, dans le module Website Dolibarr :

  1. Rendez-vous dans Accueil → Sites web.
  2. Sélectionnez votre site.
  3. Cliquez sur l'onglet Configuration.
  4. Dans le champ Autres langues, ajoutez les codes ISO (par exemple en_US,de_DE,es_ES).
  5. Enregistrez.

Les langues disponibles correspondent à votre installation Dolibarr (environ 118 langues nativement). Les plus courantes sont : fr_FR, en_US, de_DE, es_ES, it_IT, pt_PT, nl_NL, pl_PL.

Basculer entre les langues dans l'éditeur

Au-dessus de l'aperçu central, une rangée d'onglets accompagnés de drapeaux représente les langues activées. Le drapeau actif est mis en valeur visuellement.

  1. Cliquez sur le drapeau d'une autre langue (par exemple anglais).
  2. L'aperçu se recharge dans cette langue.
  3. Si vous avez déjà saisi des traductions, elles s'affichent.
  4. Sinon, l'aperçu présente la version canonique (français).

Conseil — Ouvrez deux onglets de votre navigateur côte à côte, l'un en français et l'autre en anglais. Vous visualisez en temps réel l'effet de vos traductions sur les deux versions.

Traduire un slot — méthode rapide

La méthode la plus naturelle consiste à rester focalisé sur la langue affichée :

  1. Cliquez sur l'onglet de la langue cible (par exemple anglais).
  2. Cliquez sur le texte à traduire dans l'aperçu.
  3. L'inspecteur s'ouvre. Le champ principal est prêt à recevoir la traduction.
  4. Saisissez la traduction.
  5. L'enregistrement automatique l'enregistre comme surcharge pour cette langue.

L'aperçu se met à jour. Pour vérifier que vous n'avez pas écrasé la version française, basculez sur l'onglet français : le texte original doit toujours s'y trouver.

Traduire un slot — méthode toutes-langues

Pour saisir d'un coup les traductions dans toutes les langues, sans changer d'onglet :

  1. Sélectionnez un slot.
  2. Dans l'inspecteur, dépliez la section Autres langues.
  3. Vous voyez un champ par langue, avec un drapeau en préfixe.
  4. Saisissez chaque traduction.
  5. L'enregistrement automatique s'effectue à chaque champ.

Conseil — Cette vue est idéale pour un traducteur professionnel à qui vous donnez accès au Studio avec la seule permission editTranslations.

Indicateurs visuels de surcharge

Comment savoir d'un coup d'œil quels slots sont traduits et lesquels ne le sont pas ?

Sur les onglets de langue

L'onglet de la langue actuellement affichée comporte un point coloré si la valeur est une surcharge (différente du canonique). Sur le canonique, aucun point n'est affiché.

Dans la section « Autres langues »

Chaque champ de langue affiche un repère à droite :

Repère

Signification

surcharge

(vert)

Vous avez saisi une traduction spécifique pour cette langue.

hérite FR

(gris)

Aucune traduction. Le visiteur voit la valeur canonique.

Revenir à la valeur canonique

Vous avez traduit un slot mais souhaitez finalement que la langue concernée réutilise la valeur française :

  1. Sélectionnez le slot.
  2. Dans la section « Autres langues », repérez la langue concernée.
  3. Cliquez sur le bouton Retour au FR à droite du champ. Il n'apparaît que si une surcharge existe.
  4. La surcharge est supprimée. Le visiteur de cette langue verra à nouveau la valeur canonique.

Conseil — Si vous saisissez dans un champ surcharge la même valeur que le canonique, le module supprime automatiquement la surcharge. Cela évite un enregistrement redondant.

Traductions des fiches produit

Les fiches produit Dolibarr disposent de leur propre éditeur de traductions, distinct de l'éditeur de slots. Pour y accéder :

  1. Tableau de bord du Studio → carte Traductions produits.
  2. Vous arrivez sur une page à deux colonnes.
  3. À gauche, la liste des produits commercialisables.
  4. À droite, l'éditeur avec onglets de langue.
Champs traduisibles

Catégorie

Champs

Champs natifs Dolibarr

libellé, description

Champs personnalisés traduisibles

accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires

Champs non traduisibles

image principale, URL du bouton, étiquette (ces valeurs sont universelles)

Synchronisation native — Les modifications effectuées depuis le Studio sont visibles instantanément dans la fiche produit Dolibarr et dans son onglet Traductions natif. Et inversement.

Récapitulatif

Vous savez désormais :

Le chapitre suivant aborde la gestion du blog.

CHAPITRE 12 — Brouillon, publication et versions

Tout ce que vous saisissez n'est pas immédiatement visible publiquement. Le module utilise un système de brouillons qui vous permet de préparer plusieurs modifications, de les relire, puis de les publier en une seule opération. Ce chapitre détaille ce mécanisme.

La distinction essentielle entre brouillon et publication

État

Visibilité

Brouillon

Visible uniquement dans l'éditeur Studio (aperçu central). Les visiteurs du site continuent à voir l'ancienne version.

Publié

Visible publiquement. Les visiteurs voient la nouvelle version dès la publication.

Note — Le module stocke deux valeurs par slot : value (la valeur publique) et value_draft (le brouillon). L'aperçu Studio lit en priorité value_draft. Le rendu public lit uniquement value.

Repérer ses brouillons en attente

Plusieurs indicateurs visuels signalent la présence de brouillons non publiés.

Sur la liste des pages (colonne de gauche)

Une pastille orange à côté du titre de la page indique qu'elle contient au moins un brouillon non publié.

Sur la barre d'outils de l'éditeur

Le bouton Publier les modifications apparaît avec un compteur numérique précisant le nombre de brouillons :

Sur l'inspecteur

Un slot avec un brouillon en cours porte un repère orange « modifié » à côté de son libellé.

Sur l'aperçu central

L'aperçu présente toujours la version brouillon. Pour voir exactement ce que verrait un visiteur, cliquez sur Voir public dans la barre d'outils, ce qui ouvre la page dans un nouvel onglet.

Publier les modifications

Lorsque vous êtes satisfait de votre brouillon :

  1. Cliquez sur Publier les modifications en haut à droite de la barre d'outils.
  2. Une boîte de confirmation s'affiche : « Publier les N modifications de cette page ? »
  3. Cliquez sur Confirmer.
  4. Une notification verte « Modifications publiées » apparaît en bas à droite.
  5. L'aperçu reste identique, puisque la version brouillon est devenue la version publique.
  6. Le compteur numérique disparaît, ainsi que la pastille orange dans la barre latérale.

Effet immédiat — Les visiteurs qui ouvrent la page après votre publication voient la nouvelle version. Aucun délai, aucun cache à vider.

Conseil — Préparez plusieurs modifications avant de publier. Le bouton publie l'ensemble des brouillons en une seule fois, ce qui évite que les visiteurs voient des versions intermédiaires.

Annuler les modifications en attente

Si vous changez d'avis et souhaitez tout abandonner pour revenir à la version actuelle du site :

  1. Cliquez sur Annuler les modifications dans la barre d'outils, à côté de « Publier ».
  2. Une boîte de confirmation s'affiche : « Annuler les N modifications de cette page ? Cette action est irréversible. »
  3. Cliquez sur Confirmer.
  4. L'ensemble des brouillons est supprimé.
  5. L'aperçu se met à jour avec la version publique.

Avertissement — Une fois confirmée, l'annulation efface définitivement vos brouillons. Aucune récupération n'est possible.

Mettre en ligne ou retirer du site (statut de la page)

Cette fonction ne doit pas être confondue avec « Publier les modifications ». Le bouton agit ici sur la visibilité de la page elle-même, non sur ses contenus.

Bouton

Effet

Publier les modifications

Bascule les brouillons des slots vers les valeurs publiques. Concerne le contenu de la page.

Mettre en ligne ou Retirer du site

Bascule la visibilité de la page. Une page « Retirée du site » renvoie une erreur 404 ; le wrapper Apache est supprimé.

Cas d'usage de « Retirer du site »

Effet de « Mettre en ligne » — Le wrapper Apache <alias>.php est régénéré et la page redevient accessible. La page canonique et ses pages sœurs (autres langues) basculent simultanément.

L'historique des modifications

Toutes vos publications sont consignées dans un journal interne (llx_infrasstudio_revision). Pour les consulter :

  1. Sélectionnez un slot dans l'inspecteur.
  2. Dépliez la section Historique en bas du panneau.
  3. Vous y voyez la chronologie des modifications, avec :
    • la date et l'heure,
    • l'auteur (utilisateur Dolibarr),
    • l'action effectuée (création, mise à jour, publication, annulation).

Note — L'historique vous permet de consulter qui a fait quoi. Une fonction de restauration directe d'une version antérieure n'est pas encore disponible : si vous avez besoin de revenir en arrière, contactez votre administrateur Dolibarr, qui peut récupérer la valeur depuis la base de données.

Workflow recommandé pour une équipe

Pour les sites édités par plusieurs personnes :

  1. Le rédacteur ouvre la page et procède aux modifications. Toutes restent à l'état de brouillon.
  2. Le rédacteur partage le lien de l'éditeur avec un relecteur (chef de projet, marketing, juriste, etc.).
  3. Le relecteur ouvre la même page dans le Studio. L'aperçu lui présente la version brouillon.
  4. Le relecteur valide ou demande des ajustements via un canal externe (Slack, courriel, etc.).
  5. Le rédacteur applique les ajustements (toujours en brouillon).
  6. Une fois la version validée, le rédacteur ou un publicateur dédié, selon les permissions configurées, clique sur « Publier les modifications ».

À retenir — Le système de brouillon n'est pas un confort optionnel. Il évite les publications accidentelles en cours de rédaction et permet une véritable validation à plusieurs avant que les visiteurs voient le résultat.

Récapitulatif

Vous savez désormais :

Le chapitre suivant aborde la gestion du multilingue.

CHAPITRE 11 — Gérer les images et la bibliothèque média

Toutes les images, vidéos et documents que vous utilisez sur votre site transitent par la bibliothèque média. Il s'agit d'un emplacement central : vous téléversez un fichier une seule fois et le réutilisez partout où vous en avez besoin.

Accéder à la bibliothèque

Trois entrées sont possibles :

  1. Depuis le tableau de bord : cliquez sur la carte « Bibliothèque médias ».
  2. Depuis l'éditeur : sélectionnez l'onglet Médias en haut de la colonne gauche.
  3. Depuis un slot image : cliquez sur le bouton « Choisir une image » qui ouvre la bibliothèque dans une fenêtre.

L'organisation de la bibliothèque

La bibliothèque est gérée par site. Si vous administrez plusieurs sites, chacun dispose de sa propre médiathèque indépendante.

Au sein d'un site, les médias sont classés par type :

Type

Formats acceptés

Image

JPG, PNG, WebP, SVG, GIF

Vidéo

MP4, WebM

Document

PDF, DOC et autres formats bureautiques

Téléverser un nouveau média

Méthode A — Bouton « Envoyer un fichier »
  1. Dans la barre d'outils de la bibliothèque, cliquez sur Envoyer un fichier.
  2. Sélectionnez un ou plusieurs fichiers depuis votre poste.
  3. Le ou les fichiers sont téléversés. Une vignette apparaît dans la grille.
Méthode B — Glisser-déposer
  1. Faites glisser une image depuis votre explorateur de fichiers.
  2. Déposez-la directement sur la grille de la bibliothèque.
  3. Le téléversement démarre automatiquement.
Méthode C — Pendant l'édition d'un slot image
  1. Vous éditez un slot de type image dans l'inspecteur.
  2. Cliquez sur Choisir une image.
  3. La bibliothèque s'ouvre. Un bouton Envoyer est disponible en haut.
  4. Téléversez sans interrompre votre flux d'édition.

Conseil — Pour les photographies, le format WebP est recommandé. Il offre un fichier 30 à 50 % plus léger qu'un JPG à qualité équivalente. Le module accepte ce format nativement.

Retrouver un média existant

Au-dessus de la grille, plusieurs filtres sont disponibles :

La grille se met à jour instantanément. Un défilement infini en bas de page charge les médias suivants par lots de cinquante.

Modifier les métadonnées d'un média

Cliquez sur une vignette. Une fenêtre d'édition s'ouvre, organisée en deux colonnes.

Colonne de gauche — Aperçu et utilisation
Colonne de droite — Champs éditables

Champ

Description

Référence

Identifiant court, réutilisable dans les shortcodes (par exemple

{{media:ref=hero-1.url}}

).

Libellé

Nom affiché dans la bibliothèque.

Texte alternatif (canonique)

L'attribut

alt

par défaut. Important pour le référencement et l'accessibilité.

Tags

Mots-clés facilitant la recherche du média.

Traductions par langue

Section dépliable. Un champ par langue pour traduire le texte alternatif.

Recommandé — Renseignez systématiquement le texte alternatif. C'est ce qui est affiché si l'image ne se charge pas, ce que lit un lecteur d'écran et ce que Google utilise pour comprendre vos images.

Les variantes générées automatiquement

Lors de chaque téléversement d'image, le module crée automatiquement trois tailles supplémentaires en plus de l'original.

Variante

Dimensions

Usage type

thumb

200 × 200 px

Vignettes, galerie

card

640 × 480 px

Cartes d'articles, mosaïques

wide

1600 × 1200 px

Hero pleine largeur

original

Dimensions natives

Téléchargement, impression

Les variantes sont générées à la demande. Lors de la première utilisation d'une variante (par exemple card), elle est créée puis mise en cache.

Supprimer un média

  1. Ouvrez la fenêtre d'édition en cliquant sur la vignette.
  2. En bas à droite, cliquez sur Envoyer à la corbeille.

Note — La suppression est en réalité un marquage : le média n'est pas effacé physiquement du disque. Il est simplement signalé comme inactif et n'apparaît plus dans la grille. Vos pages qui le référencent continuent à l'afficher.

Avertissement — Si le média est encore utilisé, la suppression est par défaut refusée. Le module présente la liste des pages concernées. Soit vous remplacez l'image sur ces pages, soit vous forcez la suppression — auquel cas les pages afficheront une image cassée.

Réimporter le contenu d'un dossier

Si vous avez ajouté des fichiers sans passer par le Studio (FTP, SCP, ou via l'éditeur Dolibarr Website), ils n'apparaissent pas dans la bibliothèque.

Pour les détecter :

  1. Dans la barre d'outils de la bibliothèque, cliquez sur Réimporter.
  2. Le module parcourt le dossier physique du site.
  3. Les fichiers absents de la bibliothèque sont enregistrés.

Conseil — Le module effectue cette réimportation automatiquement toutes les cinq minutes au maximum lors de l'ouverture de la bibliothèque. Le bouton sert uniquement à forcer une réimportation immédiate.

Insérer un média dans un slot de texte riche

  1. Vous éditez un slot de type texte riche.
  2. Au-dessus de la barre d'outils, cliquez sur Insérer un média.
  3. La bibliothèque s'ouvre dans une fenêtre.
  4. Sélectionnez ou téléversez une image.
  5. Le module insère :
    • une balise <img> si vous avez choisi une image,
    • un lien <a> avec le libellé si vous avez choisi un document.

Récapitulatif

Vous savez désormais :

Le chapitre suivant aborde le mécanisme de publication, qui sépare votre travail en cours de la version visible publiquement.

CHAPITRE 10 — Modifier les textes

La modification d'un texte est l'opération la plus fréquente dans le Studio. Ce chapitre présente les trois méthodes pour y procéder, ainsi que les différents types de champs que vous rencontrerez.

Méthode 1 — Édition directe depuis l'aperçu

C'est la méthode la plus rapide et la plus naturelle.

  1. Ouvrez la page que vous souhaitez modifier en cliquant sur son nom dans la colonne de gauche.
  2. Dans l'aperçu central, survolez avec la souris : les zones éditables sont entourées d'un cadre orange en pointillés.
  3. Cliquez sur le texte à modifier.
  4. L'inspecteur s'ouvre à droite avec un champ déjà rempli.
  5. Modifiez le texte. L'enregistrement automatique intervient une demi-seconde après votre dernière saisie.
  6. L'aperçu se met à jour en direct.

Recommandé — L'indicateur « Enregistré » à côté du champ confirme la sauvegarde en brouillon. Pour rendre la modification visible publiquement, cliquez sur Publier les modifications en haut à droite.

Méthode 2 — Liste « Contenu de la page »

Cette méthode est utile lorsqu'un slot n'est pas directement cliquable, par exemple une image masquée ou une valeur stockée dans un attribut.

  1. Ouvrez la page sans cliquer sur l'aperçu.
  2. Consultez la colonne de droite.
  3. La liste « Contenu de la page » répertorie tous les emplacements éditables.
  4. Chaque ligne présente un type, un libellé, un aperçu de la valeur et un repère « modifié » en cas de brouillon en cours.
  5. Cliquez sur la ligne souhaitée pour ouvrir son formulaire.

Conseil — Les slots sont regroupés par section (« hero », « pied de page », « appel à l'action », etc.) selon le découpage défini par votre développeur. Cela facilite la navigation sur les pages longues.

Méthode 3 — Navigation par sections

Sur les pages longues, vous pouvez utiliser la barre de défilement de l'aperçu pour atteindre la section recherchée, puis cliquer dessus directement.

Les types de champs disponibles

Le développeur a choisi un type pour chaque slot. Ce type détermine l'apparence du formulaire d'édition. Voici l'ensemble des types existants.

Texte court

Champ d'une seule ligne, sans mise en forme. Convient pour les titres, les libellés et les noms. Une longueur maximale peut être imposée, auquel cas un compteur de caractères est affiché.

Texte long

Champ multi-lignes sans mise en forme. Les sauts de ligne sont autorisés et automatiquement convertis en retours visuels. Idéal pour une accroche ou un paragraphe simple.

Texte riche

Éditeur visuel complet (CKEditor) avec barre d'outils étendue.

Outil

Effet

Format

Paragraphe, Titre 2, Titre 3, Titre 4, Code

Style

Gras, italique, souligné, barré

Couleur

Couleur de texte et couleur de fond, selon la palette de la marque

Alignement

Gauche, centre, droite, justifié

Listes

Listes à puces, listes numérotées, indentation

Liens

Insérer ou supprimer un lien

Insérer un média

Ouvre la bibliothèque pour insérer une image au curseur

Note importante — L'éditeur ne propose pas de bouton « source » pour modifier le HTML brut. Ce choix est délibéré, comme expliqué au Chapitre 3.

Image

Le champ comporte une zone de saisie, un bouton de sélection dans la bibliothèque, un bouton de suppression et une vignette d'aperçu.

  1. Cliquez sur le bouton Choisir une image.
  2. La bibliothèque média s'ouvre dans une fenêtre.
  3. Sélectionnez une image existante ou téléversez-en une nouvelle.
  4. L'image est intégrée et la vignette s'affiche.

Conseil — Vous pouvez également glisser-déposer une image depuis la barre latérale Médias directement sur la zone d'image dans l'aperçu central.

URL

Champ texte adapté aux liens. Les mêmes outils que pour les images sont disponibles, par exemple le sélecteur pour insérer un média comme cible.

Icône

Champ de sélection d'une icône FontAwesome.

  1. Saisissez le nom de la classe (par exemple fa-solid fa-star) ou cliquez sur l'une des vingt icônes proposées (étoile, cœur, fusée, etc.).
  2. Choisissez la couleur dans le sélecteur.
  3. Un aperçu en direct s'affiche.
Couleur

Sélecteur de couleur HTML5 accompagné d'un champ hexadécimal.

Nombre

Champ numérique simple avec validation.

Booléen

Case à cocher pour un choix oui ou non.

Liste déroulante

Menu déroulant avec des options définies par votre développeur.

Le panneau d'édition multilingue

Pour les slots de type texte (texte court, texte long, texte riche), l'inspecteur présente trois zones distinctes.

Zone

Contenu

Champ principal

La langue actuellement affichée dans l'aperçu (drapeau actif). C'est ici que vous saisissez la majorité du temps.

Autres langues

(dépliable)

Un champ par langue prise en charge. Cliquez sur la flèche pour déplier et saisir les traductions.

Options avancées

(dépliable)

La valeur canonique partagée entre toutes les langues. À ne modifier qu'en cas de besoin spécifique.

Note — Au moment du rendu public, le module recherche la valeur dans cet ordre : surcharge dans la langue du visiteur, valeur canonique, valeur par défaut. Le visiteur voit toujours un contenu, même en l'absence de traduction.

Pour les slots non textuels (image, couleur, icône, etc.), une seule zone « Valeur (toutes langues) » est proposée. Une image se traduit rarement.

L'enregistrement automatique en pratique

Aucun bouton « Enregistrer » n'est à cliquer. Le module sauvegarde automatiquement votre travail.

  1. Vous saisissez du texte.
  2. Le module attend une demi-seconde de pause.
  3. L'indicateur passe à Enregistrement....
  4. Le serveur reçoit la valeur et l'enregistre comme brouillon.
  5. L'indicateur passe à Enregistré en vert.

Conseil — Si l'indicateur affiche « Erreur réseau », votre connexion a probablement été interrompue. Utilisez Ctrl+Z pour récupérer votre saisie, attendez le rétablissement de la connexion, puis ressaisissez.

Annuler une modification non publiée

Tant que vous n'avez pas publié, plusieurs options de retour en arrière sont possibles :

  1. Annulation locale : utilisez Ctrl+Z dans le champ pour revenir frappe par frappe.
  2. Annulation globale de la page : cliquez sur Annuler les modifications dans la barre d'outils. Tous les brouillons de la page courante sont alors supprimés.

Avertissement — Le bouton « Annuler les modifications » est définitif. Une confirmation est demandée. Une fois validée, le brouillon est perdu et la page revient à sa version publique.

Récapitulatif

Vous savez désormais :

Le chapitre suivant aborde la bibliothèque média.

CHAPITRE 09 — Tour de l'interface Studio

Ce chapitre constitue votre première visite guidée du Studio. Vous allez parcourir l'ensemble des écrans sans encore éditer quoi que ce soit. À la fin, vous saurez où chercher chaque élément et comment vous repérer.

Note — Le module InfraSStudio doit être activé sur votre instance Dolibarr et au moins un site doit être configuré. Si ce n'est pas le cas, consultez d'abord la Partie II.

Étape 1 — Accéder au Studio

  1. Connectez-vous à votre Dolibarr.
  2. Dans le menu supérieur, cliquez sur Outils.
  3. Dans le menu latéral qui apparaît, repérez la section InfraS.
  4. Cliquez sur InfraSStudio.

Vous arrivez sur le tableau de bord du Studio.

Conseil — Vous pouvez ajouter cette page à vos favoris dans votre navigateur. Vous y reviendrez fréquemment.

Étape 2 — Comprendre le tableau de bord

Le tableau de bord constitue votre point d'entrée. Il se divise en plusieurs zones, présentées de haut en bas.

L'en-tête personnalisé

Une salutation contextuelle (« Bonjour », « Bon après-midi », « Bonsoir » selon l'heure) est suivie de la date du jour. Cet élément constitue un simple repère visuel.

Vos sites

Une grille de cartes affiche un site géré par carte. Pour chacun, vous retrouvez :

Recommandé — Cliquez sur Éditer pour entrer dans l'éditeur principal. C'est par cette voie que vous passerez la majorité de votre temps.

Statistiques globales

Quatre indicateurs sont présentés en permanence : nombre de produits publiés, nombre de produits en brouillon, nombre de médias dans la bibliothèque et taille totale en mégaoctets.

Actions rapides

Cinq cartes cliquables conduisent directement aux opérations courantes :

  1. Nouvel article : créer un billet de blog en deux clics.
  2. Éditer une page : ouvrir l'éditeur unifié.
  3. Gérer les produits : accéder à la section produits dans l'éditeur.
  4. Traductions produits : ouvrir l'éditeur multilingue dédié aux fiches produit.
  5. Bibliothèque médias : accéder à la gestion centralisée des fichiers.
Activité récente

Une frise chronologique affiche les huit derniers contenus modifiés (slots et produits), avec un lien Ouvrir qui vous permet de reprendre votre travail là où vous l'aviez laissé.

Aide à la prise en main

Un panneau dépliable « Comment utiliser InfraSStudio ? » présente quatre étapes guidées. Il s'avère particulièrement utile pour vos collègues qui découvrent l'outil.

Étape 3 — Entrer dans l'éditeur

Cliquez sur le bouton Éditer de la carte d'un site. Vous accédez alors à l'écran central du Studio : l'éditeur en trois colonnes.

Colonne

Rôle

Gauche — Arborescence

Liste des pages du site, regroupées par type (pages standards, articles de blog, en-tête, pied de page). Recherche en temps réel. Compteur de slots par page. Indicateurs visuels pour les brouillons en attente.

Centre — Aperçu

Aperçu en direct de la page sélectionnée, présenté dans un cadre qui imite un navigateur. Onglets de langue avec drapeaux. Boutons de basculement entre les vues bureau, tablette et mobile.

Droite — Inspecteur

Lorsqu'aucun slot n'est sélectionné, l'inspecteur présente la liste de tous les emplacements éditables de la page. Lorsqu'un slot est sélectionné, il bascule sur le formulaire d'édition correspondant.

Conseil — Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster la mise en page à la taille de votre écran.

Étape 4 — Le déroulement d'une session d'édition

Voici le déroulement type d'une session d'édition :

  1. Vous cliquez sur une page dans la colonne de gauche.
  2. L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur.
  3. Vous cliquez sur un texte de l'aperçu, par exemple le titre principal.
  4. L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle.
  5. Vous modifiez le texte. Le système enregistre automatiquement après une demi-seconde d'inactivité.
  6. L'aperçu se met à jour. À ce stade, votre modification reste à l'état de brouillon, invisible pour les visiteurs du site.
  7. Lorsque vous êtes satisfait, vous cliquez sur le bouton « Publier les modifications » en haut à droite. Votre travail devient alors visible publiquement.

Recommandé — Préparez plusieurs modifications avant de publier. Le bouton « Publier les modifications » applique en une seule fois l'ensemble des modifications en attente sur la page, ce qui évite que les visiteurs voient des versions intermédiaires incohérentes.

Étape 5 — Les boutons de la barre d'outils centrale

Une barre d'actions est présentée au-dessus de l'aperçu. Voici la fonction de chaque bouton, dans l'ordre d'apparition.

Bouton

Effet

SEO

Ouvre une fenêtre avec un aperçu du résultat Google en direct. Voir le Chapitre 16.

Dupliquer

Crée une copie de la page courante. Cette fonction est particulièrement utile pour les articles de blog.

Mettre en ligne / Retirer du site

Modifie la visibilité publique de la page. À distinguer de « Publier les modifications » dont la fonction est différente.

Publier les modifications

Publie l'ensemble des brouillons en attente sur la page. Une pastille indique le nombre de modifications concernées.

Annuler les modifications

Supprime tous les brouillons et restaure la version actuellement publiée.

Voir public

Ouvre la page publique dans un nouvel onglet du navigateur.

Supprimer

Réservé aux administrateurs. Une confirmation est demandée. Voir l'avertissement ci-dessous.

Avertissement — Le bouton Supprimer efface définitivement la page, ses traductions, ses slots, son fichier tpl.php et son wrapper Apache. Aucun retour en arrière n'est possible. Réservez son usage aux cas véritablement nécessaires.

Étape 6 — Naviguer dans la liste des pages

La colonne de gauche est plus puissante qu'il n'y paraît. Voici comment l'exploiter.

Le sélecteur de section

En haut de la colonne, deux onglets : Pages et Médias. Selon la configuration du site, un troisième onglet Produits peut apparaître si le catalogue dynamique est activé.

La recherche en temps réel

Saisissez quelques caractères dans le champ Rechercher : la liste se filtre instantanément. La recherche porte sur le titre, le slug et la catégorie.

Les groupes de pages

Les pages sont regroupées par type :

Les indicateurs visuels
Le bouton Nouveau

Le bouton est situé tout en bas de la liste. Selon le contexte :

Étape 7 — L'inspecteur

L'inspecteur connaît deux états distincts.

État vide : la liste « Contenu de la page »

Lorsqu'aucun slot n'est sélectionné dans l'aperçu, l'inspecteur présente la liste exhaustive des slots de la page, regroupés par section. Pour chacun :

Cliquez sur n'importe quelle ligne pour ouvrir le formulaire d'édition.

État édition : le formulaire

Lorsqu'un slot est sélectionné, l'inspecteur bascule en mode édition. Vous y trouvez :

Conseil — L'enregistrement automatique se déclenche une demi-seconde après votre dernière saisie. Un indicateur affiche successivement « Enregistrement... » puis « Enregistré ». Aucun bouton de sauvegarde n'est nécessaire.

Étape 8 — Changer de langue dans l'aperçu

Au-dessus de l'aperçu, une rangée d'onglets accompagnés de drapeaux représente les langues activées sur votre site (FR, EN, DE, etc.).

  1. Cliquez sur le drapeau d'une autre langue.
  2. L'aperçu se recharge dans cette langue.
  3. Lorsque vous éditez un slot, le champ principal de l'inspecteur correspond à la langue actuellement affichée.

Note — La langue principale du site (généralement le français) constitue la langue canonique. Les autres langues sont des traductions complémentaires. Lorsqu'une traduction manque, le visiteur voit la version canonique. Le Chapitre 13 détaille ce mécanisme.

Récapitulatif

Vous savez désormais :

Le chapitre suivant aborde concrètement la modification d'un texte.