Créer un thème Mozaiq

themes/mon-theme/
├── theme.json          # manifeste + réglages de personnalisation
├── functions.php       # hooks du thème (facultatif)
├── screenshot.svg|png  # aperçu 16:10
├── assets/style.css, assets/theme.js
├── templates/          # layout.php, page.php, post.php, blog.php, shop.php, product.php,
│   │                   # cart.php, checkout.php, thanks.php, account.php, search.php, 404.php
│   └── partials/       # header.php, footer.php, post-card.php, product-card.php…
└── blocks/             # surcharge du rendu d’un bloc : blocks/hero.php…

Thème enfant (recommandé)

php bin/mozaiq theme:new mon-theme --parent=aurora : le thème hérite de tous les templates du parent ; copiez uniquement ceux que vous voulez modifier. Les CSS du parent puis de l’enfant sont chargées.

theme.json

{
  "slug": "mon-theme", "name": "Mon thème", "version": "1.0.0", "parent": "aurora",
  "supports": ["blog", "shop", "page-builder", "menus"],
  "styles": ["assets/style.css"], "scripts": ["assets/theme.js"],
  "settings": [
    {"key": "primary_color", "label": "Couleur principale", "type": "color", "default": "#5b4cf0", "group": "Couleurs"}
  ]
}

Les réglages apparaissent dans Apparence › Personnaliser ; lecture : theme_setting('primary_color').

Variantes proposées par Aurora (réutilisables par tous les thèmes enfants)

Réglage	Valeurs
`header_layout`	classic · centered · split · minimal
`footer_layout`	columns · centered · minimal
`product_card`	card · minimal · overlay
`blog_layout`	grid · list · magazine
`button_style`	rounded · pill · square
`bg_color`, `heading_color`, `footer_bg`	couleurs

Un thème enfant se contente souvent de changer ces valeurs par défaut dans theme.json et d’ajouter une feuille de style : c’est ainsi que sont construits les 10 thèmes fournis (Plume, Journal, Nomade, Encre, Pixel, Élégance, Fraîcheur, Néon, Atelier, Nordik).

L’utilisateur peut aussi remplacer l’en-tête et le pied de page du thème par des zones construites au page builder (Apparence › En-tête & pied de page) ; le thème doit alors utiliser mq_part('header') ?: … dans layout.php.

Fonctions de template

mq_head() (SEO, CSS, variables) · mq_footer() · mq_body_class() · mq_menu('primary') · mq_breadcrumbs() · site_logo() · mq_img($chemin, $alt, 'medium') (WebP + srcset) · render_blocks($contenu) · get_posts([...]) · mq_pagination() · mq_flash() · cart_count() · social_links() · theme_asset('assets/x.png').

Variables CSS injectées : --mq-primary, --mq-accent, --mq-radius, --mq-container, --mq-font-heading, --mq-font-body.

Le contenu du builder doit être placé dans <div id="mq-content">…</div> pour l’aperçu en direct.

Gabarits supplémentaires (1.3)

Gabarit	Utilisé pour	Variables
`single.php` / `single-{type}.php`	fiche d’un type de contenu personnalisé	`$post`, `$fields`, `$terms`, `$type`, `$blocks_html`
`archive.php` / `archive-{type}.php`	liste d’un type personnalisé	`$res` (items, pages), `$terms`, `$term`, `$title`, `$base`
`pay.php`	règlement d’une commande par lien	`$order`, `$items`, `$payments`
`partials/comment.php`	un commentaire (récursif)	`$c` (avec `children`, `depth`), `$open`

Les gabarits peuvent aussi être remplacés sans code depuis Apparence › Gabarits (constructeur de thème) : le bloc « Gabarit du thème » réinsère votre gabarit PHP au milieu de sections construites au builder.

Multilingue

__('Texte') : chaîne traduisible ; mq_language_switcher() : sélecteur de langue ; \Mozaiq\I18n::locale() pour l’attribut lang.
url() ajoute automatiquement le préfixe de langue (/en/…) ; les fichiers statiques ne sont jamais préfixés.

Images

mq_img($chemin, $alt, 'medium') produit un <picture> avec sources AVIF, WebP en srcset, dimensions, loading="lazy" et le point focal choisi dans la médiathèque (object-position). Ajoutez picture { display: contents; } si vos règles CSS ciblent l’img directement.