DERNIERE INFO : Mise à jour 3.0.5 disponible !
Inscription Connexion client

Création basique de thème

Introduction

Ce tutoriel présente pas à pas comment procéder à la création d’un thème e-cms à partir d’une version HTML du visuel d’un site.
Ici seront détaillées les bases de l’intégration vers e-cms en prenant pour exemple le thème inclus par défaut offrant une navigation de type « blog » qui peut bien sûr être adapté à d’autres utilisations.

De plus, des conseils et informations sur la théorie de l’intégration de thèmes sont aussi donnés tout en restant accessible et fait pour être facilement adaptés et réitérés.

Notez par ailleurs que la grande majorité des opérations présentés ici demandent de modifier des fichiers, vous pouvez ainsi passer par un éditeur de texte et votre client FTP traditionnel ou opter pour l’éditeur de thème intégré dans l’administration d’e-cms.

1 - Découpageshema decoupage 1

Avant toute chose, il est important de comprendre la structure de base des fichiers de thèmes qui sont tous stockés dans le dossier template/ et possèdent tous une fonction bien précise.
On va ici s’intéresser qu’aux quatre fichiers principaux qui sont les seuls nécessaires dans notre exemple et dans la plupart des cas.

Tout d’abord, le fichier main.php contient tout l’html de votre site à l’exception du contenu qui est lui remplacé par la balise de thème [content].
Ensuite, le fichier news.php correspond aux articles individuels dans les listes (page d’accueil et catégories) alors que le fichier fullstory.php correspond aux articles dans leur affichage complet (lorsque l’on accède à celui-ci).
 Pour finir, le fichier de thème comment.php correspond quant-à-lui aux commentaires de façon individuelle.

Ci-contre, vous pouvez trouver deux schémas résumant comment doit être découpé votre fichier HTML original dans les divers fichiers de thème présentés plus haut.

S’il ne devrait pas avoir de difficultés à extraire le code HTML des articles et commentaires, le fichier main.php possède lui quelques spécificités.

shema decoupage 2 

  

En effet, e-cms remplis automatiquement et dynamiquement le contenu de la balise <head> et de ce fait pour éviter tout conflit, prenez soin de supprimer toutes les balises méta courantes (description, keyword, charset,…) ainsi que la balise <title>.

De plus, pour toute présence de chemins relatifs (fichiers images, feuillies de styles css, scripts,…) e-cms part de la racine de l’installation. Vous n’avez donc pas à modifier ces chemins et vous devez simplement placer vos fichiers externes sans se soucier de leur structure de dossiers.

2 - Ajout des balises de thème

Une fois le fichier HTML original découpé et placé dans les différents fichiers de thème, la dernière étape consiste à utiliser les balises de thèmes pour rendre dynamique tous les éléments.

Tout d’abord, vous devez commencer par placer la balise [content] dans le fichier main.php là où doit être affiché le contenu de votre site (articles, pages statiques, …).

Après ça, prenez chaqu’un des quatre fichiers de thèmes décrits plus haut et placez les balises de thèmes que vous avez besoin là où vous en avez besoin.

Balise thème 

Par exemple, le titre des articles du fichier news.php correspond à [title], le menu principal du site dans main.php correspond à [menu] ect. 

A titre d’exemple, l’image ci-contre montre à quoi ressemble un thème e-cms sans que les balises de thèmes soient traitées par le système, donnant un bon aperçu du placement de ces dites balises.

Vous pouvez trouver la liste complète des balises de thèmes dans notre liste exhaustive de la documentation ou en utilisant l’éditeur de thème.

Une fois toutes les balises de thèmes placés, votre site devrait être pleinement fonctionnel avec le nouveau thème fraichement crée !

Si vous souhaitez obtenir des informations supplémentaires, n’hésitez pas à consulter la documentation sur l’éditeur de thème ainsi que celui sur les variables de thèmes et instances d’articles.
Pour finir, n’hésitez également pas à regarder les fichiers de thèmes du thème inclus par défaut avec e-cms qui devrait vous donner une bonne et solide base.

Accueil > Documentation > Tutoriels > Création basique de thème