Thèmes & Design

Bonnes pratiques pour créer un thème QuietCMS

Après avoir parcouru les articles techniques de cette catégorie, voici les principes directeurs qui font la différence entre un thème qui fonctionne et un thème robuste, maintenable et performant.

Toujours utiliser Security::clean() pour les données dynamiques

La classe Security fournit une méthode clean(string $input): string qui applique htmlspecialchars() avec les flags appropriés. Utilisez-la systématiquement pour tout contenu issu de $page, $settings ou $menu affiché en dehors d'un contexte HTML de confiance. Le contenu HTML riche (champ content des pages et articles) est affiché avec sans échappement — il vient du back-office et est considéré comme de confiance.

Construire les URLs avec BASE_URL

Ne codez jamais d'URLs en dur dans un thème. Utilisez systématiquement la constante BASE_URL pour préfixer tous les liens internes : installation/. Cela garantit que le thème fonctionne quelle que soit la configuration du serveur (sous-domaine, sous-répertoire, localhost).

Respecter les options de présentation $tplOpts

Les options de présentation (show_image, show_breadcrumb, show_author, show_date, show_nav…) sont configurables depuis le back-office par les administrateurs. Un thème bien conçu respecte ces options plutôt que de les ignorer — cela donne aux utilisateurs non-développeurs la possibilité de personnaliser la présentation sans toucher au code.

Tester avec et sans sidebar

Le layout change entre une configuration avec et sans sidebar. Testez votre thème dans les deux configurations pour vous assurer que le contenu reste lisible et bien proportionné dans les deux cas. Le layout avec sidebar utilise display: flex avec un ratio 2:1 par défaut — ajustez ce ratio dans votre CSS si nécessaire.

Performance CSS — une seule feuille de style

QuietCMS charge une seule feuille de style par thème (style.css). Pour les thèmes complexes, regroupez tous vos styles dans ce fichier en les organisant par sections. Évitez les imports CSS dynamiques depuis PHP — ils ajoutent des requêtes HTTP supplémentaires sans bénéfice réel. Pour les polices, utilisez le gestionnaire de polices intégré plutôt que des @import vers des CDN externes.

Les zones d'injection, charnière entre thème et contenu

Au-delà des sept templates qui structurent un thème, QuietCMS expose des zones d'injection qui permettent d'insérer du contenu à des emplacements précis sans modifier les fichiers du thème. Un en-tête global, des ajouts spécifiques à une page dans la section head, un pied de page commun ou des scripts de fin de document : ces points d'ancrage séparent proprement la structure pérenne du thème des ajouts ponctuels propres à un site ou à une page. Un développeur peut ainsi enrichir une page particulière avec un style ou un script dédié sans toucher au gabarit partagé.

Cette séparation est précieuse pour la maintenance. Le thème reste un socle stable et réutilisable, tandis que les personnalisations vivent dans des zones clairement identifiées. Lorsqu'on met à jour ou que l'on remplace un thème, ces injections ne sont pas perdues car elles ne font pas partie du thème lui-même. La frontière entre présentation et contenu spécifique reste nette, ce qui évite l'enchevêtrement progressif que connaissent les sites où tout finit par être mélangé dans les gabarits.

Responsive et approche mobile-first

Un thème QuietCMS de qualité est pensé pour s'adapter à toutes les tailles d'écran, du téléphone au grand moniteur. L'approche recommandée consiste à concevoir d'abord pour le mobile, puis à enrichir progressivement la mise en page pour les écrans plus larges. Cette discipline garantit que l'expérience reste excellente sur les appareils les plus contraints, qui représentent souvent la majorité du trafic réel, plutôt que de traiter le mobile comme une adaptation tardive d'un design conçu pour le bureau.

La responsivité ne concerne pas que la mise en page : elle englobe les images, qui sont servies dans des tailles adaptées, les menus, qui se transforment en navigation tactile sur petit écran, et les composants comme les barres latérales, qui doivent se réorganiser intelligemment. Tester un thème avec et sans barre latérale, sur plusieurs largeurs, fait partie des vérifications essentielles avant la mise en production.

Cohérence visuelle et personnalisation maîtrisée

L'éditeur CSS intégré et le gestionnaire de polices permettent d'ajuster l'identité visuelle d'un site sans quitter le back-office. On peut modifier les couleurs, la typographie et les espacements, et prévisualiser le résultat, ce qui ouvre la personnalisation à des administrateurs non développeurs tout en conservant la finesse de contrôle dont les développeurs ont besoin. Le recours à des variables CSS pour les couleurs et les dimensions clés facilite cette personnalisation : changer une poignée de valeurs suffit à décliner une charte graphique sur l'ensemble du site.

Cette personnalisation maîtrisée évite l'écueil des modifications éparpillées et difficiles à maintenir. En concentrant les choix de design dans un nombre réduit de points de contrôle — variables, feuille de style unique, réglages de thème — QuietCMS rend les évolutions visuelles prévisibles et réversibles. Une refonte se pilote alors par ajustements ciblés plutôt que par une chasse aux valeurs codées en dur dispersées dans les gabarits.

Sémantique, accessibilité et sécurité des gabarits

Un bon thème ne se juge pas seulement à son apparence mais à la qualité du HTML qu'il produit. Recourir aux éléments sémantiques appropriés — repères de structure, hiérarchie correcte des titres, libellés explicites — rend le site navigable par les technologies d'assistance et mieux compris par les moteurs de recherche. Les contrôles interactifs doivent être accessibles au clavier, et l'ordre visuel des éléments doit suivre l'ordre du document pour que la navigation reste logique.

La sécurité s'invite également dans la conception des templates. Toute donnée dynamique affichée par un thème doit être échappée pour éviter l'injection de scripts, et les URLs doivent être construites à partir de l'URL de base du site pour rester correctes quel que soit le contexte de déploiement. Ces réflexes, intégrés dès la conception du thème, garantissent qu'un gabarit ne devienne jamais le maillon faible de la sécurité du site, même lorsqu'il affiche du contenu rédigé par différents auteurs.

Changer de thème sans perdre le contenu

Parce que QuietCMS sépare strictement le contenu de sa présentation, basculer d'un thème à un autre n'affecte pas les données du site. Les pages, les articles, les catégories et les médias résident dans le dossier de contenu, indépendamment du thème actif. Changer l'apparence d'un site revient à activer un autre thème, sans migration ni réécriture du contenu. Cette indépendance autorise les expérimentations : on peut tester une nouvelle identité visuelle, la prévisualiser, puis revenir en arrière sans conséquence sur la matière éditoriale.

Cette réversibilité est un atout stratégique pour la vie longue d'un site. Une refonte graphique, souvent vécue comme un chantier risqué sur les plateformes où contenu et présentation sont entremêlés, devient une opération sereine. Le contenu accumulé au fil des années conserve toute sa valeur et se redéploie tel quel dans un nouvel habillage, ce qui protège l'investissement éditorial contre l'obsolescence des choix de design.

Performance du rendu et feuille de style unique

La performance d'un thème repose en grande partie sur la sobriété de ses ressources. QuietCMS encourage l'usage d'une feuille de style unique, minifiée, plutôt que d'une multitude de fichiers chargés séparément. Cette concentration réduit le nombre de requêtes et accélère le premier rendu. Associée aux polices hébergées localement et aux images optimisées, elle contribue à des pages légères qui se chargent rapidement, y compris sur des connexions modestes.

En traitant la performance comme une exigence de conception du thème, et non comme une optimisation de dernière minute, QuietCMS aligne l'esthétique et la rapidité. Un thème bien conçu est beau, accessible, sûr et rapide à la fois, parce que ces qualités découlent des mêmes bonnes pratiques : un balisage propre, des ressources sobres et une séparation claire des responsabilités. C'est cette convergence qui distingue un thème durable d'un simple habillage.