Création d'un Thème WB

Les deux sections précédentes décrivent les opérations à effectuer pour préparer une mise en page CSS statique en 3 colonnes constituée d'un fichier index.html et d'un fichier screen.css. Le contenu statique du fichier index.html a été remplacé par les fonctions de Thème spécifiques à WB. L' étape suivante va nous permettre de créer un Thème WB opérationnel à partir des fichiers index.html et screen.css modifiés.

• Etape 1: Renommer index.html
  
• Etape 2: Créer le fichier info.php
  
• Etape 3: Créer le pack d'installation
  
• Etape 4: Installer le Thème
  
• Etape 5: Adapter les paramètres de WB
  

Etape 1: Renommer index.html

Un Thème Website Baker valide nécessite les deux fichiers index.php et info.php. Le fichier index.php contient la structure de base (éléments HTML) et les fonctions WB nécessaires à l'affichage du contenu de la base de donnée.

Renommer en index.php le fichier index.html qui contient les fonctions du Thème WB. L'extension .php est nécessaire pour éxécuter le code PHP contenu dans ce fichier. Il est recommandé de sauvegarder le fichier index.php à l'aide d'un éditeur de texte au format ANSI pour éviter le problème d'un bogue de PHP appelé utf-8 BOM bug.

Etape 2: Créer le fichier info.php

Le fichier info.php contient les informations de Thème requises par Website Baker telles que le nom du Thème, le répertoire du Thème, l'auteur, la licence and et une courte description. Comme notre Thème possède plusieurs menus et blocs, quelques informations supplémentaires doivent être ajoutées. Le fichier info.php peut être crée avec un simple éditeur de texte. Les 8 premières lignes sont requises pour tous les Thèmes.

<?php
$template_directory     = 'mytemplate';
$template_name          = '3-column CSS';
$template_version       = '2.6';
$template_platform      = '2.6.x';
$template_author        = 'Christian Sommer';
$template_license       = 'GNU GPL';
$template_description   = 'WB template based on a float tutorial by Maxdesign.';

// definitions for multiple menues (required if more than one menu is used)
$menu[1]    = 'Main navigation';
$menu[2]    = 'Top navigation';

// definitions for multiple blocks (required if more than one block is used)
$block[1]   = 'Main content';
$block[2]   = 'News';
?>

Veuillez noter les balises PHP ouvrantes (<?php) et fermantes (?>).

Etape 3: Créer le pack d'installation

Notre premier Thème WB se compose de trois fichiers:

• index.php: pour la mise en page HTML de base et les fonctions Thème de WB
• screen.css: contient les styles pour le positionnement et la mise en page
• info.php: pour les infos : nom du Thème, auteur, licence, menus et blocs

Pour créer un pack d'installation fonctionnel pour Website Baker, les fichiers doivent être inclus dans une archive Zip (*.zip). Pour Windows on peut utiliser l'outil Open Source Tool 7-zip pour zipper les fichiers.

Les utilisateurs Unix/Linux peuvent utiliser la ligne de commande zip:

zip mytemplate_en.zip index.php screen.css info.php

L'archive ne doit pas contenir le répertoire dans lequel les trois fichiers sont enregistrés.

Figure 1: Format d'archive correct sans le répertoire racine!

Figure 2: Format d'archive incorrect contenant le répertoire dans lequel sont enregistrés les fichiers!

Etape 4: Installer le Thème

Quand le pack d'installation (archive zip) est crée tel qu'indiqué à la figure 1 ci-dessus, il peut être installé via le backend WB: Extensions -> Thèmes -> Installer un thème.

Vous pouvez télécharger le pack d'installation (archive zip) depuis le Tutoriel des thèmes WB.

Etape 5: Adapter les paramètres de WB

Dans le paramètrage par défaut de Website Baker, l'utilisation de plusieurs menus ou blocs est désactivé. Comme notre thème contient deux menus différents et deux blocs de contenu différents, il faut autoriser ces paramètres via le backend WB.
Autoriser plusieurs menus:
Règlages -> Afficher les options avancées -> Menus Multiples -> Activé

Enable multiple blocks:
Règlages -> Afficher les options avancées -> Bloc de rubrique -> Activé

Utiliser le nouveau Thème comme Thème par défaut:
Pour utiliser le nouveau thème comme thème par défaut pour toutes les pages nouvelles ou déjà crées il faut modifier le paramètre suivant dans le backend WB:
Règlages -> Règlages par défaut-> Thème -> 3-column CSS

Le résultat (avec un contenu en allemand) peut être vu sur la figure ci-dessous.

 
Figure 3: Le nouveau thème en action (contenu en allemand)

Copyright (c) 2007 Website Baker Help team
Text and images of this page are licensed under a Creative Commons Attribution-NonCommercial-No Derivative 3.0 Licence. You are free to copy and distribute this work for noncommercial purposes as long as no changes are applied and this copyright notice and a backlink to http://help.websitebaker.org are provided.