Créer un thème

Dans ce tutoriel, nous apprendrons à créer un thème à partir de zéro.

Nous vous conseillons fortement de lire toutes les pages précédent ce chapitre avant de commencer ce tutoriel.

Création du thème

Pour créer un nouveau thème, rien de plus simple : connectez-vous sur votre site Comavoo et dirigez-vous vers l'éditeur de thème, via le menu en haut à droite de l'interface de gestion Comavoo.

Une fois dans l'éditeur de thème, cliquez sur "Fichier >> Nouveau >> Nouveau thème".

Important : vous devez avoir un accès Webdesigner pour pouvoir accéder à l'éditeur de thème.

1. Donnez un nom pour ce nouveau thème. Par-exemple Test. Il doit être unique dans la base de thème de Comavoo. Veillez à ce qu'il soit assez long et mémorisable.
2. Placez une description. Comment est votre thème ?
3. Renseignez une capture d'écran si vous avez déjà une trace visuelle existante de votre futur thème.
4. Utilisateur : Choisissez si votre thème sera adressé à un client en particulier ou non.

Fonctionnalités

Supporte l'affichage d'un logo

Indiquez si le thème permet l'affichage d'un logo. Vous prendrez le soin de spécifier une taille maximale du logo supporté.

Support l'affichage du titre du site

Indiquez si le thème permet l'affichage du titre du site Internet. Il est fortement recommandé de le prendre en charge.

Notre premier gabarit

Une fois que nous avons créé le thème Test, nous pouvons modifier notre gabarit principal. Vous remarquerez sans doute que Comavoo a créé pour vous un gabarit principal.

Pour modifier chaque élément du thème, il vous suffit de cliquer sur l'icône modifier, en face du thème TEST, dans la liste des thèmes.

Il suffit de cliquer sur l'icône "Modifier", en face du gabarit principal "Mise en page par défaut" et de remplacer le texte existant par cet exemple :

<h1>Ceci est le thème TEST</h1>
{{ node.render }}

Envie de tester ?

Placez-vous sur votre site Internet Comavoo (de préférence un site test, pas votre site en production ;)) et changez le thème du site en allant dans "Apparence", puis "Changer le thème du site". Sélectionnez votre thème précédemment créé et rendez-vous sur la page d'accueil de votre site.

Votre première ligne de code Liquid

Nous allons afficher le titre du site internet en utilisant la variable de thème "website". Placez ce code à la place de notre H1 :

<h1>{{ website.title }}</h1>

Maintenant, imaginez que vous souhaitez aussi indiquer le titre de la page actuelle en tant que titre. On peut utiliser une autre variable de thème "node" et sa propriété "title", comme ceci :

<h1>{{ website.title }} - {{ node.title }}</h1>

Et on obtiendra quelque chose comme ceci (tout dépendra de ce que vous avez mis comme titre de votre site et titre de votre page !) :

Votre première région

Nous aimerions laissez le soin à l'utilisateur d'ajouter un menu à son site, dans le thème TEST.

Pour cela, nous utiliserons une région que l'on nommera "menu_bar" et qui contiendra uniquement des blocs de types menu. Tout ceci n'est qu'un exemple pur : vous auriez aussi pu l'appeler "sidebar" et autoriser tous les types de blocs. Mais le fait de restreindre à un certain type de contenu vous permettra de mieux prévoir les "pseudo-bugs" de votre thème.

Créez votre région :

1. Allez dans l'onglet "Régions" ;
2. Cliquez sur "Créer une nouvelle région" ;
3. Donnez un libellé et un nom interne. Dans notre exemple :
1. Libellé : Barre de menu
2. Nom interne : menu_bar
4. Choisissez un gabarit où cette région sera disponible. Sélectionnez Mise en page par défaut
5. N'acceptez pas tous les types de blocs et sélectionnez "Menu" comme types de blocs autorisés.
6. Limitez le nombre de bloc à 1
7. Sauvegarder la nouvelle région

Insérer la région dans le gabarit :

{{ regions.menu_bar }}

{{ regions.le_nom_de_ma_region }}

Ajouter un bloc Menu dans la région

Sur votre site, choisir "Ajouter un bloc" et sélectionnez la région "Barre de menu" comme emplacement.

Normalement, vous devriez avoir quelque chose comme ceci :

Et voilà votre thème gère maintenant les menus !