Skip to main content

CHAPITRE 22 — Créer ses propres gabarits de page

📐 Chapitre 22 — Créer ses propres gabarits de page

QuandLorsque votre client clique sur « + Nouvelle page » dans le Studio, il choisit un gabarit de départ. Ce chapitre vous montreexplique comment créer vos propres gabarits adaptés à la charte de votre site.

🎯

À quoi sert un gabarit ?

Un gabarit est un squelette de page avecqui comporte :

  • Du HTML structuré (sections, classes CSS, balises sémantiques).
  • Des slots pré-déclarés pour les zones éditables.
  • Des valeurs par défautdéfaut, pour donnerdisposer d'une page « pleine »complète dès la création.
  • Des métadonnées (titre par défaut, slug, type container)de conteneur).

Quand leLorsqu'un client crée une page depuis un gabarit, le module :

  1. Crée une entrée dans la table llx_website_page.
  2. Génère un fichier page<N>.tpl.php à partir du squelette.
  3. Crée le wrapper Apache <slug>.php.
  4. Lance un rescan dedes slots pour les détecter immédiatement.

📁

Structure d'un gabarit

Un gabarit est un dossier dans htdocs/custom/infrasstudio/templates/ :

templates/mon-gabarit/
├── meta.php             # Métadonnées du gabarit
└── skeleton.tpl.php     # Le squelette HTML avec slots

📝

Le fichier meta.php

RenvoieIl retourne un tableau de configuration :

<?php
return array(
    'code'           => 'mon-gabarit',                    // identifiant unique
    'label'          => 'Mon Gabarit',                    // affiché dans le wizardl'assistant
    'category'       => 'page',                           // page | landing | blog
    'description'    => "Description courte affichée sous le titre.",
    'icon'           => 'fa-file-lines',                  // icône FontAwesome
    'type_container' => 'page',                           // type Dolibarr Website
    'default_slug'   => 'nouvelle-page',                  // slug suggéré
);

Champ

Description

code

IDIdentifiant unique. Doit correspondre au nom du dossier.

label

Texte affiché dans la grille de sélection dude wizard.l'assistant.

category

PourPermet grouperle visuellementregroupement visuel (page, landing, blog).

icon

Classe FontAwesome de l'icône de la tuile.

type_container

Valeur écrite dans

llx_website_page.type_container

. StandardsValeurs standards :

page

,

blogpost

,

other

,

menu

.

default_slug

Slug suggéré dans le formulaire. Le client peut le changer.modifier.

🎨

Le fichier skeleton.tpl.php

C'estIl les'agit du squelette HTML, identique à un fichier tpl.php destandard, pageà Dolibarrla Website normal, saufdifférence qu'il contient des placeholdersmarqueurs qui seront remplacés àau moment de la création.

Placeholders

Marqueurs supportés
disponibles

PlaceholderMarqueur

SubstituéRemplacé par

@@PAGEID@@

L'IDidentifiant Dolibarr de la nouvelle page (ex.par exemple 42).

@@PAGEURL@@

Le slug URL final (ex.par exemple

about-keatic

).

@@ISO2@@

Le code ISO2 de la localelangue principale (

fr

,

en

).

🧩

Exemple complet — gabarit "page-libre"

libre

meta.php
<?php
return array(
    'code'           => 'page-libre',
    'label'          => 'Page libre',
    'category'       => 'page',
    'description'    => 'Une page simple avec un titre et un grand champ de texte riche.',
    'icon'           => 'fa-file-lines',
    'type_container' => 'page',
    'default_slug'   => 'nouvelle-page',
);

skeleton.tpl.php
<?php // BEGIN PHP
$websitekey = basename(__DIR__);
if (! defined('USEDOLIBARRSERVER') && ! defined('USEDOLIBARREDITOR')) {
    require_once __DIR__ . '/master.inc.php';
}
require_once DOL_DOCUMENT_ROOT . '/core/lib/website.lib.php';
require_once DOL_DOCUMENT_ROOT . '/core/website.inc.php';
ob_start();
try {
// END PHP ?>
<html lang="@@ISO2@@">
<head>
    <title>{{slot:page_title|type=text|default=Nouvelle page|label=Titre SEO|group=seo}}</title>
    <meta name="description" content="{{slot:page_meta_description|type=text|default=|label=Meta description|group=seo}}" />
    <link rel="canonical" href="<?php echo $website->virtualhost; ?>/@@PAGEURL@@.php" />
</head>
<body>
    <?php includeContainer('header'); ?>
    <main class="container">
        <h1>{{slot:page_h1|type=text|default=Titre principal|label=H1|group=hero}}</h1>
        <div class="content">
            {{slot:page_body|type=richtext|default=<p>Contenu de la page.</p>|label=Contenu}}
        </div>
    </main>
    <?php includeContainer('footer'); ?>
</body>
</html>
<?php // BEGIN PHP
} catch (Exception $e) { print $e->getMessage(); }
include dol_buildpath('/infrasstudio/core/tpl/website_output.tpl.php', 0);
// END PHP ?>

✅ Le bloc final — — N'oubliez pas la ligne include dol_buildpath('/infrasstudio/core/tpl/website_output.tpl.php', 0);. C'est luielle qui déclenche la résolution des slots et shortcodes au moment du rendu.

📂

Localiser vos gabarits hors du module

Si vous voulezsouhaitez livrer des gabarits avec votre projet client (sans modifier le module),module, définissez la constante :

// htdocs/conf/conf.php ou via dolibarr_set_const
$conf->global->INFRASSTUDIO_TEMPLATE_EXTRA_DIR = '/var/www/monsite/templates';

Le module scanne ce répertoire en pluscomplément de htdocs/custom/infrasstudio/templates/.

🎁

Gabarits livrés par défaut

Code

Description

page-free

Page libre avec titre +et un grand richtext.champ texte riche. Pour les pages ad hoc.ponctuelles.

blog-standard

Article de blog générique avec hero, intro,introduction, body,corps CTA.et appel à l'action.

example-blog

Article de blog avecau design moderne (hero CSSCSS, background,accroche leaden italique, image secondaire, related)articles liés). Adaptable à votre charte.

example-landing

LandingPage pagede destination produit complète (~environ 70 slots). Hero, problème, solution, fonctionnalités, contact, FAQ.

💡Conseil Bonne pratique— — Inspirez-vous de example-landing pour comprendre comment structurer un gabarit complexe avec ~environ 70 slots organisés en groupes.sections.

🎯

Bonnes pratiques pour vos gabarits

  • 📦 PréfixerPréfixez tous les slots du gabarit avecpar un identifiant commun (ex.par exemple landing_) pour éviter les collisions entre gabarits.
  • 📂 RegrouperRegroupez les slots avec group= par section logique (hero, features,fonctionnalités, contact, …etc.).
  • 📝 DonnerDonnez des valeurs par défaut représentativesreprésentatives. — leLe rédacteur adispose ainsi d'un exemple à modifier plutôt qu'que d'une page vide intimidante.
  • 🌐 InclureIncluez les slots SEO (page_title, page_meta_description) dans tout gabarit de type page.
  • 🖼️ InclureIncluez les balises Open Graph dans lel'en-tête headHTML pour le partage social.
  • 🔗 InclureIncluez le helper hreflang si le site est multilingue.
  • 🧪 TesterTestez le gabarit en créant une page réelle depuis lel'assistant wizard,et vérifier quevérifiez le rendu public est correct.public.

📋

Récapitulatif

✅ Vous savez maintenantdésormais :

  • Comprendre l'utilité d'un gabarit (squelettesquelette, + slots +slots, valeurs par défaut).
  • Créer un dossier templates/<code>/ avec meta.php et skeleton.tpl.php.
  • Renseigner les métadonnées (code, label, category, icon, type_container, default_slug).
  • Utiliser les placeholdersmarqueurs @@PAGEID@@, @@PAGEURL@@, et @@ISO2@@.
  • Localiser vos gabarits horsen dehors du module via INFRASSTUDIO_TEMPLATE_EXTRA_DIR.
  • Suivre les bonnes pratiques (préfixe, groupes,regroupement, valeurs par défaut, SEO, multilingue).

DernierLe dernier chapitre de la Partie IV :détaille le catalogue produit dynamique en profondeur.

Back to top