Themeforest,
Template Monster,
Elegant Themes, etc. vous avez l'embarra du choix pour acheter un thème graphique pour vos sites Internet.
Ces thèmes sont généralement disponibles pour un CMS en particulier, comme Wordpress, ou simplement au format HTML.
Kiubi permet l’utilisation de
n’importe quel thème graphique, moyennant certains aménagements rapides et simples à mettre en place.
Quelques prérequis sont cependant nécessaires avant de vous lancer. Vous devez disposer :
- d'un site qui utilise un thème graphique personnalisé (vous trouverez toutes les informations utiles à ce sujet dans l'aide en ligne),
- d'un accès FTP à votre thème graphique personnalisé (dont les informations de connexion sont disponibles dans la rubrique Préférences / Générales / Compte FTP de votre console d'administration),
- de connaissances en HMTL, CSS et javascript ; vous n'aurez cependant jamais besoin de manipuler du PHP et des bases de données,
- de votre Carte Bleue pour acheter un thème ;-)
Acheter un thème
Pour les besoins de cet article, nous utiliserons le thème Wordpress
Editor (achetable
ici et testable
là). Mais vous pouvez utiliser le thème de votre choix, la méthodologie reste la même.
Petit rappel utile concernant l'utilisation des thèmes et de leurs licences : si vous utilisez un thème pour plusieurs sites, vous devez acheter à chaque fois une licence et cela même quand vous modifiez le thème d'un site à l'autre.
1 thème utilisé pour 1 site = 1 licence achetée !
Une fois le thème acquit, vous pouvez télécharger l'ensemble des fichiers sources qui le composent, à savoir : beaucoup (beaucoup) de fichiers PHP, des images, des feuilles de styles et des fichiers javascript.
La méthodologie utilisée
La procédure la plus simple pour adapter un thème Wordpress (TWP) à un thème Kiubi (TK) est de commencer par copier tous les éléments statiques du TWP : images, feuilles de styles, fichiers javascript et structure HTML.
Ces éléments sont alors ajoutés au TK et rendus dynamiques, c’est-à-dire capables d’afficher des informations issues de la console d’administration de Kiubi.
Les différents modules qui composent le thème (le contenu, les menus, les formulaires de contacts, etc.) sont séparés de la structure HTML principale et ajoutés aux widgets de Kiubi qui leur correspondent le mieux.
La structure HTML/CSS du site, les modules fonctionnels et le contenu sont strictement séparés et gérés de manière indépendante.
Pour finir, l’ensemble (template principal, widgets et contenu) est "réassemblé" directement via la console d’administration, par simple glissé-déposé.
Copier les éléments statiques
Dans un premier temps, nous allons récupérer les fichiers sources du TWP qui nous intéressent. Tous les fichiers du thème ne sont pas nécessaires, seuls les répertoires
images,
css,
js ainsi que le fichier
style.css sont utilisés. Copiez-les dans le répertoire
/theme/fr/ du TK.
Pour la structure HTML du thème, inutile de chercher dans les fichiers PHP du TWP, allez simplement sur une page du site de démo. Par exemple sur
http://themes.pixelwars.org/editor/typography/. Affichez le code source de la page et copiez tout le contenu de la balise
<html>.
Ouvrez maintenant le fichier
index.html d'un des
templates principaux de votre TK, que vous trouverez dans le répertoire
/theme/fr/templates/, et collez le code.
Mettre à jour les URLs
Une fois le code récupéré, nous allons commencer par mettre à jour les URLs qui pointent encore vers le site de démo, c'est-à-dire passer de :
<link href="/editor/wp-content/themes/editor-wp/css/main.css" rel="stylesheet" type="text/css" media="all" />
A des URLs dynamiques propres à Kiubi :
<link href="{racine}/{theme}/{lg}/css/main.css" rel="stylesheet" type="text/css" media="all" />
Et cela pour toutes les URLs des feuilles de styles et des fichiers javascript.
Dynamiser les metas
Pour l'instant, les metas et le contenu du template sont encore parfaitement statiques et n'intègrent aucun élément dynamique nécessaire à Kiubi. Nous allons donc immédiatement y remédier.
Copiez le contenu de la balise
<head> de n'importe quel autre template du répertoire
/theme/fr/templates/ et collez-le dans votre template principal (en plus des metas déjà présentes).
Ce code doit contenir les metas standards :
<title>{title}</title>
<meta name="description" content="{metaDescription}" />
<meta name="keywords" content="{metaKeywords}" />
Les informations pour les robots et les URLs canoniques :
{metaRobots}
{metaCanonical}
Les données pour Open Graph et les microsformats :
<meta property="og:title" content="{title}"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://{domaine}{canonical}"/>
<meta property="og:image" content="http://{domaine}{illustration_pagecourante}"/>
<meta property="og:site_name" content="{site_nom}"/>
<meta property="og:description" content="{metaDescription}" />
<meta property="og:street-address" content="{SOCIETE.societe_adresse}"/>
<meta property="og:locality" content="{SOCIETE.societe_ville}"/>
<meta property="og:postal-code" content="{SOCIETE.societe_cp}"/>
<meta property="og:country-name" content="{SOCIETE.societe_pays}"/>
<meta property="og:email" content="{SOCIETE.contact_email}"/>
<meta property="og:phone_number" content="{SOCIETE.societe_tel}"/>
<link rel="profile" href="http://microformats.org/profile/hcard" />
Les metas ajoutées via la console d'administration :
{Stylesheet}
{js_head}
Et les éléments ajoutés juste avant la balise
</body> :
{js_body}
Prenez soin cependant à
ne pas mettre de meta en double et à ne pas copier les liens vers les feuilles styles et les fichiers javascript par défaut, qui sont maintenant inutiles (car remplacés par ceux du TWP).
Dynamiser le contenu
Tous les éléments dynamiques qui composent votre site, comme les menus, le contenu rédactionnel, les slideshows, les articles du blog, les commentaires, le formulaire de contact, les fiches produits, le processus de commande, etc. bref, tout ce qui affiche quelque chose ajouté dans la console d'administration de Kiubi ou contrôlé par Kiubi, est disponible sous la forme de widgets (dont la liste et les fonctions sont disponibles
ici).
Les widgets disposent tous de leurs propres paramètres et templates.
Les widgets ne sont pas inclus directement dans le template principal du site, mais ajoutés à une page, par glisser-déposer, directement dans la console d'administration de Kiubi.
Il est donc nécessaire de déclarer dans le template principal de votre site, les zones dans lesquelles des widgets peuvent être placés (avec les explications détaillées disponibles
ici et
là).
Chaque zone est déclarée grâce à une balise
{ZONE.nomdelazone}. Le contenu de la balise
<body> de votre template principal devrait donc ressembler à ça :
<div id="page">
<header role="banner">
<nav role="navigation">
{ZONE.menu}
{FILE "/fr/includes/search.html"}
{ZONE.entete}
</nav>
<!-- BEGIN:logo_site -->
<h1><a href="{racine}/"><img src="{racine}/media/{logo_site}" alt="{accroche_site}" /></a></h1>
<!-- END:logo_site -->
</header>
<div id="content" role="main">
{ZONE.contenu}
</div>
<footer role="contentinfo">
{ZONE.piedepage}
{FILE "/fr/includes/copyright.html"}
</footer>
</div>
Les balises
{FILE "/fr/includes/search.html"} et
{FILE "/fr/includes/copyright.html"} agissent comme des includes et permettent donc d'ajouter là où elles sont placées le code du fichier qu'elles déclarent.
Le bloc
<!-- BEGIN:logo_site --><!-- END:logo_site --> permet quant à lui d'afficher le logo du site ajouté via la console d'administration de Kiubi.
Nous disposons maintenant d'un template principal dynamique et prêt à recevoir des widgets, qu'il va falloir personnaliser en fonction du thème.
Nous allons illustrer cette opération avec 2 widgets :
un menu et
un exemple de contenu.
Personnaliser un widget : les billets
Le contenu rédactionnel du site, hors blog et catalogue produit, est présenté sous forme de billets. Chaque billet peut être considéré comme un paragraphe, un bloc de contenu et peut contenir du texte, des images, des liens, des vidéos, etc.
Vous pouvez disposer d'autant de types de billets différents que nécessaires, en fonction du thème et de vos besoins.
Une lecture de l'aide en ligne est utile pour parfaitement comprendre les possibilités offertes par
les types de billets.
Pour personnaliser un billet, copiez le code du TWP qui correspond au modèle de contenu qui vous intéresse et collez-le dans le fichier
/theme/fr/billets/post_simple/index.html.
Nous allons à nouveau ajouter au code du TWP les éléments propres à Kiubi afin de permettre un affichage dynamique du contenu :
<!-- BEGIN: main -->
<article id="post-{compteur}">
<!-- BEGIN: titre -->
<header class="entry-header">
<h1 class="entry-title">{titre}</h1>
</header>
<!-- END: titre -->
<div class="entry-content">
<!-- BEGIN: sstitre -->
<h2>{sstitre}</h2>
<!-- END: sstitre -->
<!-- BEGIN: texte10 -->
<figure class="wp-caption gallery" style="width: {g_miniature_l}px;">
<a href="{racine}/media/g_vignette/{texte10}" class="fluidbox">
<img src="{racine}/media/g_miniature/{texte10}" alt="{titre}"/></a>
<figcaption class="wp-caption-text">{texte11}</figcaption>
</figure>
<!-- END: texte10 -->
{texte1}
</div>
</article>
<!-- END: main -->
Les balises
{titre},
{sstitre},
{texte1},
{texte10} et
{texte11} permettent d'afficher le contenu ajouté via la console d'administration. Chacune de ces balises correspond à un champ du formulaire créé automatiquement par Kiubi pour saisir le contenu.
Les blocs de type
<!-- BEGIN: titre --><!-- END: titre --> sont utiles pour gérer un affichage conditionnel de leur contenu : si la balise
{titre} est renseignée, le contenu du bloc est affiché, sinon il est masqué.
Pour afficher le contenu dans le site, il vous suffit de placer le widget
Contenu d'une page libre dans la zone
Contenu de votre page, directement dans la console d'administration.
Personnaliser un widget : le menu
Même objectif que précédemment, nous souhaitons associer le code du TWP avec le code du widget.
Copiez la partie du code source du TWP qui correspond au menu déroulant et collez-le dans le fichier
/theme/fr/widgets/site_web/menu_v/index.html.
Ajoutez les éléments propres à Kiubi afin de passer de ça :
<div class="nav-menu">
<ul id="nav" class="menu-custom">
<li id="menu-item-859"><a href="/editor/">Home</a>
<ul>
<li id="menu-item-1063"><a href="/editor/home-alternate/">Home Alternate</a></li>
</ul>
</li>
</ul>
</div>
A ça :
<!-- BEGIN: main -->
<!-- BEGIN: menu -->
<div class="nav-menu">
<!-- BEGIN: niveau -->
<ul id="nav" class="menu-custom">
<!-- BEGIN: pagetype -->
<!-- BEGIN: page -->
<li id="menu-item-{compteur}"><a href="{lien}" class="{actif}" target="{cible}">{page}</a>
<!-- END: page -->
<!-- BEGIN:sspage -->
{sspage}
<!-- END:sspage -->
<!-- END: pagetype -->
</li>
</ul>
<!-- END: niveau -->
</div>
<!-- END: menu -->
<!-- BEGIN: nomenu -->
<!-- END: nomenu -->
<!-- END: main -->
L'ensemble des blocs et des balises utilisés par le widget
Menu vertical sont décrits
ici.
Une fois l'opération effectuée, placez le widget dans la zone
Menu de la page, via la console d'administration, avec les bons paramètres de configuration.
Pour aller plus loin
L’intégration complète d’un thème Wordpress, avec le blog, les formulaires de contact et 2 ou 3 modèles de mise en page supplémentaires, prend
d'une demi-journée à une journée complète, une fois les mécanismes de Kiubi maitrisés. Comptez
une à deux journées supplémentaires pour l’e-commerce. Bien entendu cela peut varier en fonction du thème utilisé.
Si vous souhaitez en savoir plus sur le sujet,
un tutoriel très complet est disponible à
cette adresse.
Et si vous cherchez à gagner du temps en utilisant
des thèmes déjà adaptés à Kiubi, rendez-vous sur
www.theme-and-co.fr.
