Mademoiselle Mode, un blog féminin de mode, d’actu, de shopping et autres bons plans, surprises et futilités, un site pour les shoppeuses compulsives … Pour Manuela Picot.

Le blog a été réalisé avec le CMS WordPress (v3) et possède un thème personnalisé complètement construit en HTML 5.
Niveau mise en page et animations, les feuilles de style contiennent du CSS 3 et les scripts sont basés suivant le framework Javascript jQuery (v1.6).

La particularité de ce thème, à part sa construction en HTML 5, est dans la gestion des modules, les widgets. En effet, le thème est prévu pour que chaque widget ait une icône et s’adapte en fonction de son emplacement : en entête de page, dans une sidebar, ou en pied de page.

Le thème embarque 6 types de page différents :

1. Page par défaut : récupère les contenus entrés dans le RTE, et suit le même fonctionnement qu’une page simple WordPress
2. Page d’archives : récupère des données de façon automatique. Ce template est prévu pour lister les 30 derniers articles, les catégories avec le nombre d’articles pour chacune, ainsi que le nombre d’articles par mois.
3. Page de contact : affiche un formulaire de contact. A l’instar de ce qu’on voit de plus en plus dans les thèmes WordPress, celui-ci ne déroge pas à la règle. Ce template affiche un formulaire de contact et gère la validité de chaque champ en Javascript avant une vérification coté serveur. La configuration de cette page se fait dans l’administration.
4. Page pleine : récupère les contenus dans le RTE de la même manière que la page par défaut, à l’exception qu’elle ne contient pas de sidebar.
5. Page de plan de site : récupère des données de façon automatique. Ce template est prévu pour lister les pages, les catégories, et les articles par catégories.
6. Page timeline : récupère des données de façon automatique. Ce template est prévu pour lister les articles triés par date de publication, du plus récent au plus ancien.

Coté panneau d’administration, une page dédiée au thème est disponible.
Celle-ci permet de gérer l’animation du carrousel, les liens sociaux apparaissant en entête de page, ou encore les paramètres du formulaire de contact.

Coté widgets, 8 zones sont disponibles et permettent un contrôle poussé des blocs que l’administrateur souhaite faire apparaître. L’entête de page est concernée par la « Navigation sidebar » et la « Featured sidebar » qui gèrent le menu principal de navigation (ou du moins, la zone qui est prévue pour) ainsi que le contenu star du site. Le corps de page communique avec la « Zone principale de widgets » et la « Author Page Widget Area » qui gèrent la sidebar commune à toutes les pages ainsi que la sidebar propre aux pages d’auteurs. Enfin, le pied de page est découpé en 4 zones bien distinctes.

Tout est facilité pour l’administrateur afin qu’il puisse utiliser son outil sans formation ou compétences techniques très développées.

Rôle : développeur front-office, conseil SEO.

En résumé :

Site web : Mademoiselle Mode > http://www.mademoisellemode.com/
CMS utilisé : WordPress v3 > http://www.wordpress-fr.net/
Basé sur le thème : TwentyTen Five de Richard Sheperd > http://richardshepherd.com/
Icônes : Iconic > http://somerandomdude.com/work/iconic/