15
SEP

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

Publié le 15/09/11 à 10h55 par Ninir

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.

Roots est un thème Wordpress créé par Ben Word pour les développeurs

 

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 !

roots

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:

 

Roots - Configuration Wordpress

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

Baraguiné par zanskar le 15/09/11 à 11h45
zanskar via Twitter
Très intéressant ! Quelqu'un a des exemples en live pour lesquels ce thème a servi de base ?
Baraguiné par le 15/09/11 à 12h01
Baraguiné par hiper-tofu le 15/09/11 à 16h31
hiper-tofu sur La Ferme du Web
J'ai pas trouver de tuto... Ou des docs en français...
Baraguiné par le 24/10/11 à 14h27
Quelqu'un a-t-il essayé d'installer un thème enfant... Malgré la doc je n'y parviens pas.
https://github.com/retlehs/roots/wiki/Child-theme
Baraguiné par le 26/02/12 à 15h17
Génial, exactement ce que je cherchais pour mon projet, un framework solide qui te laisse libre sur le style !
Baraguiné par jmlapam le 10/05/12 à 15h14
jmlapam via Twitter
@Mylène Gandon: roots n'est pas fait pour cela normalement, c'est fait pour être utlisé directement comme le Boilerplate.
Baraguiné par le 22/10/13 à 16h05
Très bon Cadre déjà 4 sites réalisé avec.
La dernière version Jquery 1.10.x Boostrap3

http://journalducm.com/
http://www.insitu-production.fr/

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web