Mise à jour : juin 2015

Utiliser un template open source et un CMS pour créer un site

Vous êtes artisans, auto-entrepreneur ou dans une association et vous avez envie de réaliser un élégant site Internet sans passer par un professionnel, cette fiche est faite pour vous.

De très nombreux gabarit de page web (template) sont disponibles gratuitement sur la toile. Pour créer un site Internet élégant sans avoir de grandes connaissances en HTML et CSS et sans vouloir se compliquer la vie, l'utilisation d'un template est une bonne solution.

Nous allons créer un site web à partir d'un template open source gratuit de trois façons différentes :

  • En écriture directe, sans CMS, avec un but pédagogique ;
  • En utilisant notre CMS maison CMSUno pour créer des sites adaptés aux tablettes et smartphones ;
  • En utilisant le CMS GetSimple qui est très facile et bien adapté à un novice ;
  • En utilisant le CMS ImpressPages qui est moins facile dans son installation mais bluffant dans son utilisation finale.

Nous utiliserons le Template silver-black-business-css-website qui était en première page au moment de notre choix.

Template Black silver Business

Un template standard se compose d'un fichier HTML généralement nommé index.html, un fichier CSS et un dossier image. Il peut également contenir un dossier JS contenant des scripts jQuery mais ce n'est pas le cas pour notre exemple. Tous ces fichiers peuvent être ouverts avec un simple éditeur (wordpad...) mais il est plus confortable de travailler avec un éditeur spécialisé comme notepad++.

Le site sera composé des trois pages suivantes :

  • Une page d'accueil au format identique au template en photo ci-dessus ;
  • Une page intérieure, inspirée du template, avec deux encarts au lieu de sept ;
  • Une page avec un formulaire de contact et un encart.

L'encart "web links" de la page principale sera repris à l'identique (forme et contenu) dans les trois pages.

Il y a trois pages. Il faut donc créer trois fichiers HTML.

La première page doit toujours s'appeler index. Ouvrir le fichier index.html du template et le modifier de la façon suivante :

  • Changer le titre : Modifier à votre guise le contenu de la balise TITLE.
  • Balises META : Supprimer la ligne de la balise keywords qui n'a plus d'intérêt de nos jours. Modifier la balise description avec un beau slogan de quelques petites phrases. Enfin, remplacer text/html; charset=utf-8 par text/html; X charset=iso-8859-1 pour ne pas avoir de problème avec les accents.
  • Appel de la feuille de style CSS : Donner éventuellement un autre nom au fichier CSS.
  • Modifier le menu pour disposer des trois pages du site (CLASS current = page en cours) :
<div id="templatemo_menu">
    <ul>
        <li><a href="" class="current"><span></span>Accueil</a></li>
        <li><a href="societe.html"><span></span>La société</a></li>
        <li><a href="contact.html"><span></span>Contact</a></li>
    </ul>  
</div> <!-- end of menu -->
  • En préventif, ajouter une ligne au fichier CSS pour autoriser la classe current à se trouver dans la balise LI (pour les CMS) :
#templatemo_menu li a:hover,
#templatemo_menu li .current,
#templatemo_menu li.current a { /* li et .current collé car current dans le LI */
    background: #666;
    color: #FFF;
}
  • Il y a sept blocs répartis en deux colonnes dans la structure de ce template. Modifier à votre convenance le contenu texte du site en conservant la structure. Si suppression d'une balise DIV et de son contenu, supprimer également la balise /DIV de fermeture qui lui est associée. Si changement des photos de la galerie, utiliser des photos de 100x100 ou forcer ces dimensions en ajoutant à la balise IMG les champs width=100 height=100. Enfin, ne pas toucher aux balises placées entre les blocs (MARGIN_BOTTON_20...).
<div id="templatemo_content_wrapper"><div id="templatemo_content">
 
 
    <div class="section_w440 fl margin_right_20">
 
        <div class="post">
        <div class="header_01">First post title goes here</div>
    .../... bloc 1
        </div>
 
        <div class="post">
        <div class="header_01">Second post title goes here</div>
    .../... bloc 2
        </div>
 
        <div class="post">
        <div class="header_01">Third post  is the orginal message</div>
    .../... bloc 3
        </div>
 
    </div> <!-- end of post column (colonne de gauche) -->
 
 
 
    <div class="section_w450 fl">
 
        <div class="section_w260 fl margin_right_10">
            <div class="header_02"><span></span>Latest News</div>
            <div class="news_section">
                <div class="header_03"><a href="#">In ac diam e</a></div>
    .../... bloc 4 (news)
            </div>
            <div class="margin_bottom_20"></div>
        </div> <!-- end of news section -->
 
        <div class="section_w180 fl">
            <div class="header_02"><span></span>Web Links</div>
            <ul class="web_links_list">
                <li><a href="http://www.flashmo.com" target="_blank">Flash Te</a></li>
    .../... bloc 5 (link)
            </ul>
        </div>
 
        <div class="header_02"><span></span>Photo Gallery</div>
        <ul class="photo_list">
            <li><a href="#"><img src="images/te..._03.jpg" alt="image 1" /></a></li>
    .../... bloc 6 (gallery)
        </ul>
 
        <div class="header_02"><span></span>This Week Special</div>
        <div class="section_w450_content">
            <p>Cras cursus facilisis orci id tempor blabla</p>
    .../... bloc 7 (This week + logo W3C)
        </div>
 
    </div><!-- end of right column (colonne de droite) -->
 
 
</div></div>
  • Enfin, le texte et les liens du pied de page (footer) peuvent être modifiés.
  • Plus qu'à enregistrer le fichier sous le nom index.html (sauvegarder l'original) et le tester avec un navigateur Internet.

Pour la page suivante, faire une copie du fichier qui vient d'être créé et la nommer societe.html (pas d'accent dans un nom de fichier). Cette page disposera d'un grand bloc inspiré du bloc 1 et du bloc 5 à l'identique.

  • Supprimer toutes les lignes contenues dans le DIV templatemo_content (sept blocs). Remplacer le contenu par les deux blocs suivants :
<div id="templatemo_content">
 
    <div class="section_w710 fl margin_right_20">
        <div class="post">
            <div class="header_01">Ma belle société blabla</div>
            <p>Maecenas sem urna, aliquam vehicula, blablabla.</p>
        </div>
    </div>
 
    <div class="section_w180 fl">
        <div class="header_02"><span></span>Liens</div>
        <ul class="web_links_list">
            <li><a href="http://www.blabla.com">blabla</a></li>
            <li><a href="http://www.patata.com">et patata</a></li>
            .../... d'autres liens
        </ul>
    </div>
 
    <div class="cleaner"></div>
</div> <!-- end of content -->
  • Il faut maintenant modifier le fichier CSS pour ajouter la classe section_w710, le nouveau bloc. Une largeur de 710 pixels permet au bloc 180 d'être placé au même endroit que dans la page index.html. Ouvrir templatemo_style.css et ajouter la ligne suivante :
.section_w710 {width:710px;}

La troisième page sera la page de contact. Elle reprend la structure de la précédente en y ajoutant un formulaire.

  • Faire une copie de la page societe.html et la nommer contact.html. Modifier le menu selon la méthode précédente.
  • Pour obtenir le contenu d'une page de contact sans maîtriser le CSS, il suffit de télécharger un template qui en possède une. Par exemple, ecology_green. Le code ci-dessous doit être inséré dans la section w_710. Pour faire simple, le code est celui du template ecology_green :
<div class="section_w710 fl margin_right_20">
    <div class="post">
        <div class="header_01">Ma belle société blabla</div>
        <p>Maecenas sem urna, aliquam vehicula ultricies eleifend, blablabla.</p>
    </div>
    <div id="contact_form" class="fl margin_right_60">
        <p><strong>Formulaire de contact</strong></p>
        <form method="post" name="contact" action="mailto:moi@adresse.fr">
            <label for="author">Nom :</label>
            <input class="input_field" name="author" id="author" type="text">
            <div class="margin_bottom_10"></div>
            <label for="email">Email :</label>
            <input class="input_field" name="email" id="email" type="text">
            <div class="margin_bottom_10"></div>
            <label for="subject">Objet :</label>
            <input class="input_field" name="subject" id="subject" type="text">                           
            <div class="margin_bottom_10"></div>
            <label for="text">Message :</label>
            <textarea id="text" name="text" rows="0" cols="0"></textarea>
            <div class="margin_bottom_10"></div>               
            <input value="Envoyer" id="submit" name="submit" class="submit_btn fl" type="submit">
            <input value="Effacer" id="reset" name="reset" class="submit_btn fr" type="reset">
        </form>
        <div class="margin_bottom_20"></div>
    </div>
    <div class="section_w180 fl">
        <p>Adresse</p>
        113-404   Donec a diam nec magna, <br>
        Nunc egestas vulputate velit, 13220
        Cras commodo metus<br><br>
        Tel: 01 23 45 67 89<br>
        Fax: 09 87 65 43 21<br>
    </div>
</div>

Il faut également ajouter le code de mise en page du formulaire dans le fichier CSS. Récupérer le code utile dans le CSS du template ecology_green et le coller dans le fichier CSS du site :

#contact_form form .input_field {
    width: 310px;
    padding: 5px;
    background: #eee;
    border: 1px solid #999;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 11px;
    margin-top: 5px;
}
#contact_form form label {
    display: block;
    color: #333;
    margin-right: 10px;
    font-size: 11px;   
}
#contact_form form textarea {
    width: 438px;
    height: 140px;
    padding: 5px;
    background: #eee;
    border: 1px solid #999;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 11px;
    margin-top: 5px;
}
#contact_form form .submit_btn {
    padding: 5px 14px;
    background: #eee;
    border: 1px solid #999;
    font-size: 11px;
}

Le site est prêt à fonctionner. Il suffit d'envoyer par FTP les trois fichiers HTML, le fichier CSS et le dossier images sur le serveur. Pour modifier le contenu du site ou ajouter des pages, il faudra intervenir directement sur les fichiers HTML ce qui n'est pas très confortable.

CMSUno

CMSUno est un outil pour créer des sites sur une page. Il est complet, rapide et facile à mettre en oeuvre. C'est un super outil pour créer des sites adaptés aux tablettes et smartphones. C'est le plus simple des CMS pour l'adaptation de templates. Nous l'utiliserons ici avec les plugins BOX et CONTACT.

On part des éléments d'origine (le contenu du zip), c'est plus parlant.

  • Placer le dossier de template dans uno/template/.
  • Renommer "index.html" en "template.html".
  • Remplacer/Ajouter les shortcodes de CMSUno dans les contenus comme ci-dessous :
<title>[[title]]</title>

<link rel="stylesheet" href="[[template]]style.css" />
[[head]]
</head>

<div id="logo">
    [[title]]
    <span>[[box-slogan]]</span>
</div>

<div id="templatemo_menu">
    [[menu]]
</div> <!-- end of menu -->

Et à la fin :

[[foot]]
</body>
  • Le contenu : Pour chaque bloc, il faut remplacer le contenu texte par un shortcode de la forme [[box-nom]]. Pour le contenu en pleine largeur qui sera à la suite (site sur une page), nous ajoutons une section 710 avec le bloc de contenu principal :
<div id="templatemo_content_wrapper"><div id="templatemo_content">
    <div class="section_w440 fl margin_right_20">
        <div class="post">[[box-a]]</div>
        <div class="post">[[box-b]]</div>
        <div class="post">[[box-c]]</div>
    </div><!-- (colonne de gauche) -->
    <div class="section_w450 fl">
        <div class="section_w260 fl margin_right_10">
            [[box-latest]]
        </div>
        <div class="section_w180 fl">
            [[box-lien]]
        </div>
        <ul class="photo_list">[[box-photo]]</ul>
    </div><!-- (colonne de droite) -->
    <div class="section_w710 margin_right_20">
        <div class="post">
            [[content]]
        </div>
    </div>
</div></div>

Il y a 7 blocs à créer. C'est dans le plugin BOX que ça se passe.

  • Le bloc slogan sera en mode texte,
  • les blocs a, b, c, latest, lien et photo seront en mode HTML.

CMSUno - plugin box

 

Plus qu'à ajouter un peu de CSS au fichier templatemo_style.css :

.section_w710 {width:710px;}
#navR{display:none;}

navR doit être caché (display:none). C'est spécifique pour les thèmes "responsive" pour lesquels le menu est remplacé par      sur tablettes et smartphones ce qui n'est pas le cas pour ce thème...

Le thème est maintenant utilisable.

Pour le formulaire de contact, il suffira de créer un chapitre "Contact US" et d'y ajouter le shortcode [[contact]].

CMS GetSimple

GetSimple est un CMS léger très facile d'accès. Il est bien structuré ce qui le rend accessible à un novice. Il est également assez complet et dispose d'un nombre conséquent de modules supplémentaires. Enfin, avec sa fonction "annuler", il est possible de faire des erreurs et de revenir en arrière. GetSimple est idéal pour un débutant.

Les templates se trouvent dans le dossier theme.

  • Faire une copie du dossier Cardinal et la nommer perso_GS. Ce sera notre thème. Ne conserver que le dossier image et son screenshot.
  • Dans ce dossier perso_GS, ajouter les fichiers du template : Le fichier index.html, le fichier CSS modifié au paragraphe 2 et le contenu du dossier images (à replacer dans images).

Quelques balises doivent être ajoutées au fichier HTML pour être intégré au CMS. Quelques-unes au début et d'autres en remplacement de textes. C'est assez simple.

  • Renommer index.html en template.php. L'éditer avec un éditeur HTML.
  • Remplacer le début du fichier par la séquence suivante :
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; X charset=iso-8859-1">
<title><?php get_page_clean_title(); ?> <?php get_site_name(); ?></title>
<?php get_header(); ?>
<link rel="stylesheet" type="text/css" href="<?php get_theme_url();?>/templatemo_style.css" />
</head>
<body id="<?php get_page_slug(); ?>" >
  • Le slogan est remplacé par le tag nom du site :
<div id="logo">
    Pro Studio
    <span><?php get_site_name(); ?></span>
</div>
  • Le contenu : Pour chaque bloc, il faut remplacer le contenu texte par le tag de contenu de page. Pour simplifier, il y aura une sous-page par bloc sauf pour le bloc1 qui est pris en charge directement. Donner aux blocs un nom simple et logique. Idem pour le pied de page. Remplacer en suivant l'exemple ci-dessous :
<div class="post">
<?php get_page_content(); ?>               
</div>
<div class="post">
<?php getPageContent('home2'); ?>
</div>
.../...
<div class="header_02"><span></span>Photo Gallery</div>
<?php getPageContent('home6'); ?>
.../...
<div id="templatemo_footer">
<?php getPageContent('pied'); ?>
</div>
.../...
<!-- exemple de lignes de séparation entre blocs à ne pas supprimer : -->
<div class="margin_bottom_20"></div>
<div class="section_w450_content"></div>

Pour la page société, la procédure est similaire. Il y a un bloc lié à la page (dans section_w710) et le rappel du bloc 'home5'. Cette page sera nommée template_page.php. Pas de difficulté.

Pour la page contact, plutôt que de créer une autre page de template avec le formulaire en dur, on va passer par le plugin p01-contact de GetSimple et utiliser la page société. Télécharger le plugin, le décompresser et installer le contenu (un dossier et un fichier PHP) dans /plugins/.

Notre site comporte trois pages. La page d'accueil utilise template.php et les deux autres pages utiliseront template_page.php.

Il y a également un certain nombre de sous-pages à créer pour les blocs de la page d'accueil. Au boulot.

CMS GetSimple - Pages

Il faut ensuite paramétrer chaque page en remplissant les champs 'options de page'.

  • Pour les trois pages principales, la case menu doit être cochée.
  • Pour les sous-pages, la page parent est index et elles sont en visibilité 'privé'. Attention, l'URL personnalisée doit correspondre au tag PHP du template.
  • Pour les pages société et contact, le thème est template_page.php

CMS GetSimple - Sous Pages

Enfin, pour la page de contact, il suffit d'ajouter la séquence (% contact %) dans l'éditeur de la page. Difficile de faire plus simple.

La mise en place est terminée. Il reste à ajouter du contenu au site et éventuellement ajouter d'autres pages.

CMS ImpressPages

ImpressPages est un CMS de nouvelle génération. Il est du type "Drag & Drop" : les modifications se font directement sur la page du navigateur, en modifiant ou ajoutant du texte, des images, en glissant du contenu à la souris. Un vrai régal pour l'utilisateur. ImpressPages, qui a gagné l'Open Source Awards 2011 dans la catégorie du projet le plus prometteur, est léger et relativement simple. Il est parfaitement adapté à notre projet même s'il n'est pas encore parfait.

Ce CMS utilise une base de données MySQL. L'installation est un peu moins facile et moins intuitive, pour un novice, qu'avec GetSimple.

Les templates se placent dans le dossier IP_themes.

  • Dans IP_themes, faire une copie du dossier It_pagan. Renommer ce dossier perso_IP. Tout supprimer sauf le dossier install (et ses trois fichiers).
  • Dans install, ouvrir theme.ini et écrire perso_IP dans le champ title (le même nom que le dossier).
  • Dans install, ouvrir parameters.php et modifier les dimensions des deux premières lignes image_gallery pour avoir 100 par 100 en 'content'. Ces éléments correspondent au format de la galerie du template.
  • Copier le template dans le dossier perso_IP : le dossier image, le fichier HTML et le fichier CSS modifié au paragraphe 2.

Le fichier de travail est index.html du template open source. Le code doit être changé en début et en fin de fichier, le menu doit être automatisé et une balise PHP doit être installée à la place du contenu que l'on souhaite administrer (les sept blocs et le slogan).

  • Renommer index.html en main.php. Ouvrir ce fichier avec l'éditeur HTML.
  • Début du fichier : Supprimer tout le début jusqu'à BODY inclus et remplacer par le code suivant :
<?php if (!defined('CMS')) exit; ?>
<?php echo $this->doctypeDeclaration(); ?>
<html<?php echo $this->htmlAttributes(); ?>>
<head>
    <?php
        $site->addCss(BASE_URL.THEME_DIR.THEME.'/templatemo_style.css');
        echo $site->generateHead();
    ?>
</head>
<body<?php if ($site->managementState()) { echo ' class="manage"'; } ?>>
  • Fin du fichier : Insérer le code PHP suivant juste au-dessus de la balise de fermeture /BODY :
        <?php
        echo $site->generateJavascript();
        ?>
</body>
  • Menu : Remplacer les lignes UL et LI du menu par le DIV topmenu ci-dessous :
<div id="templatemo_menu">
    <div class="topmenu clearfix">
        <?php
        require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
        $menuTop = new Library\Php\Menu\Common();
        echo $menuTop->generateSubmenu('top', null, 2); //$zoneName, $parentElementId, $depthLimit
        ?>
    </div>
</div> <!-- end of menu -->
  • Contenu unique : Remplacer l'intérieur des blocs par une ligne PHP en suivant les exemples ci-dessous. Le nom du bloc (main1) n'a pas d'importance, mais chaque bloc d'une même page doit avoir un nom différent. (Ne pas supprimer les lignes de séparation entre blocs) :
<div class="post">
    <?php echo $site->generateBlock('main1'); ?>
</div>
.../...
<div class="section_w260 fl margin_right_10">
    <div class="header_02"><span></span>Latest News</div>
    <div class="news_section">
        <?php echo $site->generateBlock('main4'); ?>
    </div>
</div> <!-- end of news section -->
.../...
<div class="header_02"><span></span>Photo Gallery</div>
<?php echo $site->generateBlock('main6'); ?>
.../...
<!-- exemple de lignes de séparation entre blocs à ne pas supprimer : -->
<div class="margin_bottom_20"></div>
<div class="section_w450_content"></div>
  • Contenu avec répétition d'une page à l'autre : Idem, mais le code PHP à insérer est un peu plus long. Le bloc concerné est le bloc "web links". Le nom du bloc, main5, apparaît à deux endroits dans le code :
<div class="section_w180 fl">
    <div class="header_02"><span></span>Web Links</div>
    <?php
    $staticZoneName = 'static';
    if ($site->managementState()) {
        if ($site->getCurrentZone()->getName() == $staticZoneName) {
        echo $site->generateBlock('main5');
        }
    } else {
        //print block without administration tools
        $hiddenZoneElements = $site->getZone($staticZoneName)->getElements();
        $firstElement = reset($hiddenZoneElements);
        if ($firstElement) {
            $publishedRevision = \Ip\Revision::getPublishedRevision($staticZoneName, $firstElement->getId());
            echo \Modules\standard\content_management\Model::generateBlock('main5', $publishedRevision['revisionId'], $site->managementState());
        }
    }
    ?>
</div>

Le slogan et le logo peuvent aussi bénéficier d'un bloc répété plutôt que de rester écrit en dur.

Même procédure pour la page "société" qui ne dispose que de deux blocs : un bloc standard et le bloc répété ci-dessus. Cette page "société" sera appelée "page.php" (par exemple) car elle sera également utilisée pour la page de contact. Il y aura donc deux pages de template pour ce site à trois pages (minimum). Dans un soucis d'homogénéité, le bloc standard sera appelé "page1". Le bloc répété conservera son nom "main5". Il aura ainsi son contenu repris sur toutes les pages utilisant les templates "main" et "page".

Quelques paramétrages sont nécessaires car, le template comporte plusieurs pages et un bloc à répétition.

  • Si ce n'est pas fait, passer ImpressPages en Français. Il y a deux fichiers à importer par le navigateur en admin dans Developer / Localization.
  • Dans Administrator /Theme, sélectionner le nouveau thème "perso_IP"
  • Dans Développer / Zones, créer deux nouvelles : page (clé page - modèle page.php - standard - content_management) et static (static - main.php - idem) : Il faut autant de zones que de pages dans le template. La zone "static" est une astuce pour avoir des blocs répétés.
  • Dans Standard / Menu management, clic droit sur FR Top et nouvelle page. Créer les pages "Accueil", "La société" et "Contact". Clic sur les pages "La société" et "Contact" et, dans SEO, ajouter _off (ou autre chose) à l'URL.

ImpressPage nouvelle page

  • Dans FR page, créer également les pages "La société" et "Contact". C'est un peu tordu mais, ImpressPages est un CMS encore jeune.
  • Retour dans FR Top et clic sur "La société". Dans Advanced, rediriger vers une page externe : page/La société. Idem pour Contact avec page/Contact. Compris l'astuce ? Une seule page de template par zone, donc, il faut rediriger vers une autre zone pour une autre page du template.
  • Enfin, dans FR static, clic droit pour ajouter une nouvelle page (static).
  • Dans Standard / Languages, monter FR avec les flèches vertes pour le placer en haut. Le rendre visible.

ImpressPage langue par défaut

Une petite synthèse : La modification des pages s'effectue dans l'onglet Standard / Menu management en effectuant un clic droit sur la page concernée. Les pages qui se trouvent dans Top apparaissent dans le menu (si visible coché) et utilisent le format "main.php". Les pages qui se trouvent dans page utilisent le format "page.php". La page qui se trouve dans static ne sert qu'à modifier le bloc répété (les liens). Il ne reste plus qu'à actualiser le navigateur et à remplir nos pages :

  • Clic droit sur FR Top Accueil - Modifier. Choisir le bouton texte enrichi et le glisser sur le bloc 1 qui apparaît en bleu. Plus qu'à remplir. Un vrai régal non ? Et pour les réglages fins (marges, interlignes...) il y a un petit bouton CSS : CMS ImpressPages - bouton CSS

ImpressPage - Texte enrichi

  • Bloc répété : Clic droit sur FR static static - Modifier. Si les noms des blocs sont corrects, ils sont répétés sur toutes les pages, quel que soit le modèle de page de template.
  • Page de contact : Il y a un bouton pour ajouter un formulaire. Il est possible de glisser plusieurs contenus différents par bloc ; par exemple, une image, un séparateur et un formulaire.

Voilà, c'est fini. Rien n'empêche d'ajouter d'autres pages et d'utiliser le bloc répété "liens" pour lister l'ensemble de ces pages supplémentaires en transformant ce bloc en un autre menu. Place à votre imagination.

Si vous éprouvez de grosses difficultés ou si vous souhaitez que votre site web soit entièrement réalisé et référencé pour un prix canon, passez par nous.