Le thème est encore en beta, mais il est tout à fait fonctionnel. Il vous faudra, par contre, légèrement l’adapter selon vos besoins et avoir quelque peu de connaissance en HTML pour pouvoir l’éditer.

Le nom du thème est Inspire qui fait évidemment référence au nom de domaine de mon portfolio, soit  http://www.ins.pire.me.

Je vous invite donc à l’essayer et de me tenir informé si vous l’utilisez.

Dans un billet que je vais écrire sous peu, j’expliquerai comment construire une interface simple de blog en HTML5. Vous pourrez donc créer votre propre interface facilement.

Télécharger le thème Wordpress Inspire fait en HTML5 par Simon Guérin

Cheers.

Note pour les programmeurs/intégrateurs : Vous remarquerez peut-être plusieurs erreurs reliées aux “html entities”. En effet, il semble avoir encore un problème de ce côté avec HTML5. J’y reviendrai dans un autre billet…

Tweet This Post

Une fois l’en-tête bien déclarée, nous pouvons commencer à implémenter nos styles selon les différentes sections présentes dans notre site Web. Il est important de bien diviser notre fichier en plusieurs sections.

Chaque section se devrait d’avoir un en-tête de ce genre :

/***********************************

———->>> NOM DE LA SECTION PRINCIPALE (ex : header) <<<———–

***********************************/

En faisant cela, nous nous assurons de bien séparer chacune des sections principales. Il devient  donc plus facile de repérer ces mêmes sections.

Ensuite, nous commençons à implémenter les styles pour la section en question.

div#wrap header {
    width: 99.9%;
    height: 145px;
}

div#wrap header hgroup {
    width: 180px;
    height: 144px;
    float: left;
    margin-left: 20px;
    background: url(../images/logo-bg.png) top left no-repeat;
}

..etc

Les propriétés des classes et IDs devraient être dans un ordre logique. Le code est encore plus structuré et en utilisant cette méthode, vous verrez que vous gagnerez en rapidité à long terme. Avant, je ne faisais que mettre les propriétés en ordre alphabétique comme ceci :

div#wrap header hgroup {
    background: url(../images/logo-bg.png) top left no-repeat;
    float: left;
    height: 144px;
    margin-left: 20px;
    width: 180px;
}

Mais je me suis vite rendu compte que ça me nuisait plus qu’autre chose. Par exemple, j’ai l’habitude de toujours placer la propriété height après la propriété width.  Je perdais  donc du temps inutile à chercher mes propriétés.

La solution était donc de garder un ordre semi-alphabétique, mais logique! En effet, maintenant je place mes propriétés selon l’ordre logique suivant : sizing, positionning, background et autres. (noter que vous pouvez créer l’ordre logique qui vous conviendra le mieux..)

Ex. de mon ordre semi-alphabétique logique :

header {
    width: 100%;
    height: 150px;
    float: left;
    margin: 10px;
    background-color: #eee;
    background-position: top left;
    autre…
}

Voilà! Il ne reste plus qu’à tester quelle méthode sera la plus pertinente pour vous. Et vous, quelle méthode utilisez-vous?

Tweet This Post