Menu

Créer un thème

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

La création d'un thème nécessite des connaissances en HTML et CSS (voire JavaScript).

Création du thème

Pour créer un nouveau thème, rien de plus simple : connectez-vous sur votre site Comavoo et ouvrez l'éditeur de thème, via le menu d'administration à droite, dans Apparence.

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. Seul l'équipe Comavoo ou votre interlocuteur technique peuvent vous donner les droits.

  1. Donner 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. Renseigner une description. Comment est votre thème ?
  3. Renseigner une capture d'écran si vous avez déjà une trace visuelle existante de votre futur thème.
  4. Partenaire certifié ? : Choisir si votre thème sera adressé à un client en particulier ou non et s'il aura le droit de modifier celui-ci.

Fonctionnalités

Votre thème peut accepter telle ou telle fonctionnalité, que vous devez déclarer dans ce formulaire.

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é.

SupportE 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 celui-ci, à droite, dans l'explorateur du thème.

Vous pouvez alors essayer de remplacer le texte existant par cet exemple :

<h1>{{ node.title }}</h1>
{{ node.contents }}

N'oubliez pas qu'en écrivant votre propre thème, vous devez penser au référencement. Ainsi pensez par-exemple à placer le titre des pages entre des balises <h1>. Votre référencement naturel s'en trouvera plus optimisé.

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 "Thème". 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>

Votre premier composant

Nous souhaitons afficher un menu aux internautes. Ce menu ne bougera pas et restera toujours à la même position.

Lorsque vous avez des informations secondaires à placer de manière "fixe" dans la charte graphique, vous pouvez utiliser le système de composants.

Maintenant insérez le composant de menu, soit en tapant le code suivant, soit en allant dans le menu "Insertion >> Composant >> Menu"

<section id="menu-top">
{{ component_menu }}
</section>
<h1>{{ website.title }} - {{ node.title }}</h1>

Par défaut et généralement les composants fonctionnent d'emblée, sans options supplémentaires. COMAVOO créera automatiquement dans le site qui utilise le thème les bons menus. Néanmoins certains composants requierent l'activation de modules supplémentaires, disponibles à partir de certains packs COMAVOO.

Votre première région

Nous aimerions laissez le soin à l'utilisateur d'ajouter un champ de recherche à son site.

Notez que le champ de recherche est également disponible en tant que composant. C'est utile si cette fonctionnalité n'a pas matière à "bouger" dans votre charte graphique.

Dans notre exemple nous utiliserons une région que l'on nommera "sidebar" et qui contiendra des blocs de toutes natures. Tout ceci n'est qu'un exemple pur : vous auriez aussi pu l'appeler "barre_de_gauche".

Pour résumer : un bloc est une boîte contenant de l'information, statique ou dynamique. Une région est une "zone" pouvant contenir des blocs.

Créez votre région

  1. Positionnez le curseur à l'endroit dans le gabarit pour créer la région. 
  2. Cliquez dans le menu "Insérer >> Régions >> Nouvelle région" ;
  3. Modifiez le code pour qu'il ressemble à ceci :
{{ theme.regions["sidebar"] }}
Si vous avez nommé votre région autrement, la syntaxe est celle-ci :
{{ theme.regions["nom_de_la_region"] }}
Vous remarquerez que COMAVOO indiquera "Cette région est vide" à l'emplacement de la variable de thème. Ceci s'explique très bien car vous n'avez pas encore placé de bloc dans cette région, pour ce thème.

Au fur et à mesure que vous ajoutez des régions, COMAVOO crée une liste des régions disponibles pour votre thème.

Ajouter un bloc Menu dans la région

Sur votre site, choisir "Modifier >> Gérer les blocs", cliquez sur "Ajouter un bloc >> Nouveau bloc" puis en type de bloc "Champ de recherche".

Enregistrez le formulaire et votre bloc doit venir normalement s'afficher sur votre site, à l'emplacement désiré.

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

 


Articles en vedette