Roots - Un thème framework pour wordpress en HTML5 et CSS3

Roots est un thème Wordpress créé par Ben Word pour les développeurs, basé sur HTML5 BoilerPlate, BluePrint CSS, 960 Grid CSS, et Starkers, qui vont vous aider à réaliser des sites de brochures, journaux, mais encore des blogs très facilement.

En fait, dès le départ vous avez un site optimisé pour la navigation: Starkers vous propose un thème Wordpress vide (donc seulement le technique), le grid CSS 960 vous donne la structure (tout comme BluePrint), et le boilerplate vous permet d'utiliser les dernières innovations et bonnes pratiques du web (Par exemple l'inter-compatibilité entre les navigateurs, gestion de la transparence, ...) et de mettre en style le tout.

Comment installer le thème?

Téléchargez l'archive à cette adresse, puis faites une extraction de l'archive dans le repertoire "wp-content/themes/roots/" de votre projet Wordpress.

Mais je fais quoi maintenant?

Les fichiers

Jetons un oeil aux fichiers dont nous disposons:

styles.css: Je crois qu'il n'est pas nécessaire d'en parler d'avantage ! simplement le fichier de style CSS afin de définir le comportement de votre design.

css/style.css: La feuille de style utilisée par le thème. Si vous voulez modifier le design pré-défini de celui-ci, c'est par là que ça se passe !

editor-style.css: La feuille de style vous permettant de gérer le design de l'éditeur TinyMCE

header.php: Le bien connu "header" de Wordpress, rien à dire de plus, si ce n'est que vous pourrez y voir la composition du header HTML5 créé par Roots, avec plusieurs tests de gestion de l'inter-compatibilité entre navigateurs.

sidebar.php: Le code pour inclure les widgets, gérés dans l'interface d'administration de Wordpress.

footer.php: Ici encore, tout ce qu'un thème wordpress aurait de plus banal, excepté la structure HTML5 et la gestion de l'inter-compatibilité (encore et toujours les même problèmes mes amis fermiers !)

functions.php: Définit les fonctions utilisées par le thème, voir la description de chacune ici.

Pour la suite des fichiers, ils reprennent leur fonction de base; reportez-vous sur la doc' Wordpress pour plus d'informations !

Configuration du thème

Pour la configuration du wordpress, ouvre votre navigateur, puis accédez à la partie d'administration de votre wordpress. Rendez-vous ensuite dans les options du thème:

Vous pourrez y voir plusieurs informations, telles que la structure HTML/CSS que vous désirez utiliser, votre ID Google Analytics. Faites votre choix, et créez votre contenu !

Tips et autres informations:

Il existe tout un set de fonctions, plugins Wordpress, et classes CSS vous permettant de ne pas perdre de temps à les écrire par vous même, comme par exemple, la classe ".png_bg" qui vous permet d'utiliser les images à fonds transparents même sous Internet Explorer 6, ou encore ".no_js"  qui attribue un style à un ou plusieurs éléments si le javascript du client est desactivé.

Concernant l'URL rewriting, voici ce qu'il se passe en fond:

"/wp-content/themes/roots/css/" est redéfini en "/css/"

"/wp-content/themes/roots/img/" est redéfini en "/img/"

"/wp-content/themes/roots/js/" est redéfini en "/js/"

"/wp-content/plugins/" est redéfini en "/plugins/"

"/?s=query" est redéfini en "/search/query"

Bon la liste est longue, je pense que ces exemples devraient vous permettre d'entrevoir l'éventail de fonctionnalités du projet Roots !

Et la suite?

Et bien ... je crois que c'est à votre tour de vous lancer et de l'essayer !

Au final, Roots est un thème très intéressant pour ceux qui désirent bénéficier des dernières technologies web et W3C, mais également d'un rendu qui sera adapté à tous les utilisateurs, qu'ils soient sur leur téléphone, leur tablette tactile, leur ordinateur personnel.

Site officiel