[[box-titreaccueil]]
Introduction
Disposer d'un forum de discussions sur son site peut répondre à de nombreux besoins, notamment pour une association. Nous allons vous montrer comment créer ce site très simplement en utilisant des outils gratuits open sources simples et performants.
Les objectifs sont les suivants :
- Créer un site à partir d'un template élégant disponible sur le web ;
- Le site doit être généraliste et disposer d'un forum de discussions sans limitation de taille ;
- Le site doit être facilement administrable par un novice ;
- Le site doit être rapide (pas d'usine à gaz).
Nous allons associer le CMS généraliste GetSimple avec le CMS spécialisé Vanilla-Forums. Ces deux outils simples et légers répondent exactement aux besoins. Les deux CMS resteront indépendants. A aucun moment ils ne tourneront en même temps ; la performance ne sera donc pas impactée par cette association.
Installation
GetSimple est installé à la racine du site. C'est fait en 5 minutes en suivant le mode d'emploi. No problem.
Vanilla est installé dans le dossier "forum" qu'il faut créer depuis la racine. Installation également rapide. Il faut juste disposer des éléments de la base MySQL (serveur, nom de la base, login, mot de passe).
Templates
Des centaines de templates sont disponibles gratuitement sur le web. Nous reprenons celui qui a été utilisé pour la fiche création d'un site avec template et CMS, c'est plus simple.
Ce site de départ sera composé des trois pages ci-dessus et de la partie forum qui sera le quatrième élément du menu. Les trois pages tourneront sous GetSimple et le forum sous Vanilla. Les deux CMS seront isolés l'un de l'autre et disposeront chacun de leur template. Le visiteur ne verra aucune différence et le site sera parfaitement homogène.
Certains éléments, visibles pour l'ensemble du site, vont nécessiter une passerelle entre les CMS. C'est le cas du menu, de l'information de connexion et de la recherche.
Template GetSimple
Le descriptif a été fait dans la fiche création d'un site avec template et CMS. La partie concernant le menu est un peu différente :
- Ajout du plugin Hierarchical Menus pour un menu sur plusieurs niveaux. Mise en place d'un menu DropDown.
- Ajout du choix "Forum" dans le menu.
- Récupération du menu de Vanilla stockée dans un cookie. Ajout de ce menu en DropDown sous "Forum".
- Récupération du nom du visiteur connecté sur le forum stocké également dans un cookie. Ajout du nom à droite sur la barre de menus.
<div id="templatemo_menu">
<?php
get_hierarchical_navigation(get_page_slug(false));
?>
<li><a href="/forum/" title="Forum">Forum</a>
<?php
$menu = base64_decode($_COOKIE['VanillaMenu']); // menu VANILLA
if ($menu && $_COOKIE['Vanilla']) echo $menu;
else echo "<ul><li><a href="/forum/discussions">Discussions</a></li><li><a href="/forum/activity">Activité</a></li></ul>";
?>
</li></ul>
<div id="connectUser">
<?php
if ($_COOKIE['VanillaUser'] && $_COOKIE['Vanilla']) echo <a href="/forum/entry/signout?Target=discussions">" . base64_decode($_COOKIE['VanillaUser']) . " | déconnexion</a>";
else echo "<a href="/forum/entry/signin?Target=discussions">connexion</a>";
?>
</div>
</div> <!-- end of menu -->Il faut modifier template.php et template_page.php.
Template Vanilla
Sous Vanilla-Forums, les templates se trouvent dans le dossier /forum/themes/nom du thème. Il faut un fichier about.php et un fichier screenshot.png. Le plus simple est de reprendre les modèles du thème "default".
Il faut également créer les dossiers "design" et "views".
- Design contiendra le fichier style.css copié de "default", notre fichier templatemo_style.css et le dossier avec les images du thème ;
- Views contiendra le template qui doit s'appeler "default.master.php". Il n'y en a qu'un seul.
Pour default.master.php, copier le fichier template_page.php de GetSimple, le renommer default.master.php. Plus qu'à modifier le contenu pour l'adapter à Vanilla :
- Modifier les deux premières lignes ;
- Modifier le HEAD qui devient très simple ;
- Identifier le BODY ;
- Changer le code d'appel du nom de site ;
- Motoriser la recherche ;
- Installer le menu : celui de GetSimple, celui de Vanilla et l'information de connexion pour le visiteur ;
- Le contenu de la page qui devient simplissime (content_wrapper) ;
- Le pied de page qui change peu.
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
.../...
<head>
<?php $this->RenderAsset('Head'); ?>
<link href="/forum/themes/perso_Va/design/templatemo_style_VA.css" rel="stylesheet" type="text/css" />
</head>
.../...
<body id="<?php echo $BodyIdentifier; ?>" class="<?php echo $this->CssClass; ?>">
.../...
<div id="logo">
Pro Studio
<span><?php echo Gdn_Theme::Logo(); ?></span>
</div>
.../...
<div id="search_section" class="Search">
<?php
$Form = Gdn::Factory('Form');
$Form->InputPrefix = '';
echo
$Form->Open(array('action' => Url('/search'), 'method' => 'get')),
$Form->TextBox('Search'),
$Form->Button('Search', array('Name' => '')),
$Form->Close();
?>
</div><!-- end search_section-->
.../...
<div id="templatemo_menu">
<?php
//***********importation du menu de GETSIMPLE*********
$menu = fopen("../menu.cache","r"); //lecture
if ($menu)
{
while (($buffer = fgets($menu, 4096)) !== false)
{ echo $buffer; }
fclose($menu);
}
//**********
?>
<li class="Highlight"><a href="/forum">Forum</a>
<?php
$Session = Gdn::Session();
if ($this->Menu) {
$this->Menu->AddLink('Dashboard', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
$this->Menu->AddLink('Activity', T('Activity'), '/activity');
$Authenticator = Gdn::Authenticator();
if ($Session->IsValid()) {
$Name = $Session->User->Name;
$CountNotifications = $Session->User->CountNotifications;
if (is_numeric($CountNotifications) && $CountNotifications > 0) $Name .= ' <span>'.$CountNotifications.'</span>';
$this->Menu->AddLink('User', $Name, '/profile/{UserID}/{Username}', array('Garden.SignIn.Allow'), array('class' => 'UserNotifications'));
$this->Menu->AddLink('SignOut', T('Sign Out'), Gdn::Authenticator()->SignOutUrl(), FALSE, array('class' => 'NonTab SignOut'));
if (!$_COOKIE['VanillaUser']) setcookie('VanillaUser', base64_encode($Session->User->Name), (time() + 3600), '/'); // creation cookie avec nom user
} else {
$Attribs = array();
if (C('Garden.SignIn.Popup') && strpos(Gdn::Request()->Url(), 'entry') === FALSE) $Attribs['class'] = 'SignInPopup';
$this->Menu->AddLink('Entry', T('Sign In'), Gdn::Authenticator()->SignInUrl(), FALSE, array('class' => 'NonTab'), $Attribs);
}
$menuForum = $this->Menu->ToString();
echo $menuForum;
if ($_COOKIE['Vanilla']) setcookie('VanillaMenu', base64_encode($menuForum),(time() + 3600), '/'); // menu pour GETSIMPLE en cookie encode
}
?>
</li>
</ul>
<div id="connectUser">
<?php
if ($Session->IsValid()) echo "<a href="/forum/entry/signout?Target=discussions">" . $Name . " | déconnexion</a>";
else echo "<a href="/forum/entry/signin?Target=discussions">connexion</a>";
?>
</div>
</div> <!-- end of menu -->
.../...
<div id="templatemo_content_wrapper">
<div id="Body">
<div id="Content"><?php $this->RenderAsset('Content'); ?></div>
<div id="Panel"><?php $this->RenderAsset('Panel'); ?></div>
</div>
</div><!-- end of content wrapper -->
.../...
<div id="templatemo_footer">
<div id="Foot">
<?php $this->RenderAsset('Foot'); ?>
</div>
</div><!-- end of footer -->Lorsque ce fichier default.master.php est actif (visiteur sur le forum) et que le visiteur est connecté, le menu complet du forum est enregistré dans un cookie (ligne 71) avec un encodage adapté aux capacités des cookies (base64). Lorsqu'il n'est pas connecté, le cookie Vanilla n'existe pas et le menu n'est pas créé. GetSimple utilise alors le menu par defaut (discussion & activité).
Si le visiteur est connecté, un cookie contenant le nom de connexion de l'utilisateur est créé (ligne 63).
Le menu supporté par GetSimple est enregistré dans un fichier nommé menu.cache à la racine du site. Il s'incruste ici lignes 41 à 47. Ce fichier cache doit maintenant être créé.
Astuce : Si votre installation n'est pas à la racine du site, il est nécessaire de modifier certains liens du template (ligne 8 par exemple). Pour disposer d'un template qui fonctionnera à plusieurs emplacements sans modification (chez vous en local, dans un dossier de votre site pour essais...), il faut créer une constante qui n'existe pas chez Vanilla et qui fixe l'adresse de la racine du forum :
- Ouvrez conf/locale.php et ajouter : define('VANILLA_URL', 'http://www.mon-adresse/mon-dossier/');
- Dans le template, par exemple ligne 8, remplacer href="/forum/themes... par href="<?php echo VANILLA_URL; ?>themes...
Menu GetSimple
Le plugin Hierarchical Menus contient un dossier "hierarchical_menus/inc/" avec un fichier functions.php. Il faut modifier ce fichier pour qu'il crée notre menu.cache à destination de Vanilla. Il faut également empêcher que le menu ne se ferme (suppression du dernier UL de fermeture) :
- Créer une nouvelle fonction menu_html2() copie quasi conforme de menu_html() sans la dernière balise UL ;
- Modifier la fonction d'appel get_hierarchical_navigation() pour qu'elle utilise la nouvelle fonction ;
- Créer le fichier menu.cache avec une tempo de 10 minutes pour éviter que le serveur ne le fasse trop souvent.
function get_hierarchical_navigation($currentpage, $display = true)
{
if ($display) echo exec_filter('menuitems', menu_html2(top_menu_data(), $currentpage));
else return exec_filter('menuitems', menu_html2(top_menu_data(), $currentpage));
}
.../...
// créer menu_html2() copie conforme de menu_html() et modifier la fin pour avoir :
$menu_html .= '</li>';
}
}
$filetime = @filemtime('menu.cache');
if (!$filetime or (time() - $filetime >= 600)) // 10 minutes
{
$fp = @fopen('menu.cache', 'w') or exit('Unable to save cache_menu');
fwrite($fp, $menu_html);
fclose($fp);
}
// suppression du </ul>
return $menu_html;
}Voila ce que donnera le menu, quelque soit la page ou se trouve le visiteur :
Feuille de style CSS
La feuille de style CSS nommée templatemo_style.css a été traitée création d'un site avec template et CMS. Il faut une version pour GetSimple et une version pour Vanilla.
Pour que le menu DropDown fonctionne et que le login du visiteur soit visible, il faut ajouter sur les deux versions le code suivant :
#templatemo_menu > ul > li, #templatemo_menu > div > ul > li, #templatemo_menu > ul#Menu > li, #templatemo_menu > div > ul#Menu > li { position:relative; }
#templatemo_menu li ul, #templatemo_menu li ul#Menu { margin-left:5px; padding:0.5em 0; list-style:none; background:#0d0d0d; position:absolute; display:none; left:0px; z-index:1; }
#templatemo_menu li:hover ul, #templatemo_menu li:hover ul#Menu { display:block; }
#templatemo_menu li ul li, #templatemo_menu li ul#Menu li { width:90%; margin:0 auto 0.3em auto; }
#templatemo_menu li ul li a, #templatemo_menu li ul#Menu li a { height:100%; display:block; padding:0.4em; color: #bbb; font-weight:bold; text-decoration:none; white-space:nowrap; }
#templatemo_menu li ul li a:hover, #templatemo_menu li ul#Menu li a:hover { background:#666; text-decoration:underline; text-decoration:none; }
#connectUser { float:right; position:relative; top:-22px; color:#ddd; }
#connectUser a { color:#ddd; text-decoration:none; }
#connectUser a:hover { color:#ddd; text-decoration:underline; }Enfin, voici quelques modifications à faire sur chacun des fichiers CSS :
/* ++++++ GetSimple +++++*/
/* current (page active sous GetSimple) */
#templatemo_menu li a:hover, #templatemo_menu li .current, #templatemo_menu li.current > a {
/* ++++++ Vanilla +++++*/
#searchfield, #Form_Search { /* Form_Search */
#searchbutton, #Form_Search1 { /* Form_Search1 */
#templatemo_menu { text-align: left; /* align left */
#templatemo_menu ul, #templatemo_menu ul#Menu { /* ul#Menu et Highlight (page active sous Vanilla) */
#templatemo_menu ul li, #templatemo_menu ul#Menu li {
#templatemo_menu ul li a, #templatemo_menu ul#Menu li a {
#templatemo_menu li a:hover, #templatemo_menu ul li.Highlight > a, #templatemo_menu ul#Menu li a:hover {