WordPress de A à Z — A comme Allons-y ! (on s'organise)

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

WordPress de A à Z — A comme Allons-y ! (on s'organise)

«A comme Allons-y !» est le premier billet d’une série d’articles sur la création d’un site internet avec WordPress que j’ai commencé avec Créer son site web avec WordPress de A à Z… avec le Codex. Il existe plusieurs approches pour mettre en place un site WordPress : modifier un thème existant ; ajouter les fonctions WP dans un gabarit HTML résultant de la découpe d’une maquette Photoshop ; ou créer les pages web directement dans le navigateur. Excepté pour le premier cas, on peut partir d’une feuille blanche, reprendre les éléments du projet précédent ou partir sur un thème minimaliste que l’on aura choisi avec soin.

Méthodes de conception : choisissez votre parfum

Il existe probablement autant de méthodes qu’il y a d’intégrateur WordPress. Voici un aperçu des principales techniques que j’ai eu l’occasion de rencontrer.

1. Modifier un thème WordPress

Partir d’un thème existant est une pratique qui semble assez répandue. La personnalisation d’un site réalisé de cette manière consiste le plus souvent à :

  • Trouver un thème qui se rapproche le plus des besoins.
  • Changer les couleurs du thème en ajoutant une feuille de style CSS après les autres, puis jouer sur la cascade pour «bypasser» les déclarations précédentes.
  • Repérer les identifiants des éléments qui serviront de réceptacle pour les images de fond que l’on aura créés ou piochées sur le web pour l’occasion.
  • Ne pas oublier de changer l’auteur du thème par son patronyme, bien entendu ^^
Si vous tenez absolument partir sur un thème WordPress existant, TwentyTen est votre ami ;-)

TwentyTen, le thème WordPress par défaut depuis la version 3

La première et dernière fois que j’ai utilisé cette méthode remonte à juin 2006 lors du lancement de ce blogzine. C’est dire tout le bien que je pense de cette méthode : les résultats sont rarement personnalisés. Ce genre de prestations est au web ce que la cuisine rapide est à la gastronomie : un mal parfois nécessaire… à éviter au maximum. Toutefois, cela permet de fournir rapidement un site web clés en main pour un client pressé ou avec un tout petit budget.

→ Si vous êtes souvent dans cette configuration, je vous invite à lire la partie du Codex intitulée Using Themes.

2. Intégrer WordPress dans un gabarit HTML

Cette méthode suppose que vous avez créé (ou que l’on vous a fourni) un ou plusieurs gabarits Photoshop. Après la découpe du fichier image, vous avez réalisé l’intégration HTML & CSS. Vous obtenez généralement une page d’accueil et une page pour afficher le billet seul. A partir de ces deux gabarits, vous déclinerez les autres contextes d’affichage.

Cette méthode transforme un simple intégrateur web en intégrateur WordPress et lui ouvre un hublot sur la partie développement PHP. J’ai coutume de dire que WordPress, c’est le pote développeur toujours prêt à donner un coup de main. Bon, j’exagère, il est souvent utile d’avoir de vrais potes développeurs quand même ;-)

Une fois finalisé, ce template Illustrator devrait faire un bon exemple d’intégration WordPress ! cf. Super Formateur HTML & CSS bientôt dans la place ?
Exemple zoning page accueil logo bleu

Ex. de mise en scène du logo de ma prochaine activité de formateur web

→ Nous avons là, une méthode de travail éprouvée qui suit le flux de production habituel ce qui présente un intérêt certain en terme de contrôle qualité.

3. Créer un site WordPress dans le navigateur

Cette méthode fait l’impasse sur la partie maquette Photoshop comme préalable à l’intégration. Ce qui ne signifie pas que je délaisse mes outils de dessins préférés. Je les utilise pendant ou après la phase de mise en place de la structure du site. Cette méthode est un peu plus brouillonne que la précédente, mais permet de tester des nouveaux concepts, ce qu’il est déconseillé de faire lorsqu’on travaille pour un client. Je l’utilise plutôt pour mes projets perso.

L’article Conception dans le navigateur avec HTML5 & CSS3 explique comment utiliser HTML5 et CSS3 pour faire du web design dans Firefox ou Google Chrome !

Une esquisse rapide et hop ! on peut faire du webdesign dans le navigateur

Commençons à travailler

Maintenant que nous avons brièvement évoqué les différents moyens dont nous disposons pour aborder la création d’un site avec WordPress, nous pouvons commencer à mettre les mains dans le cambouis

WordPress Boilerplate

Jusqu’à il y a peu, j’avais l’habitude de partir d’une ossature, issue des derniers projets. Puis, je me suis laissé tenté par HTML5 Boilerplate comme point de départ pour aboutir à un fichier index.php en HTML5 comprenant l’ensemble d’un blog de base : en-tête, contenu principal, barre latérale, pied de page, etc. avec quelques boucles de base, deux ou trois zones de menus et autant de zone de widgets.

Thème Toolbox

Je suis ensuite tombé sur le thème Toolbox. C’est probablement un des meilleurs thèmes minimalistes pour WordPress. Il m’a séduit par sa ressemblance conceptuelle avec le thème Sandbox. Le fait qu’il soit créé par Automattic y est peut-être pour quelque chose. C’est en tout cas un très bon point de départ si vous n’aimez pas être dérangé par les fioritures inutiles qui détournent votre attention : il vaut mieux se concentrer sur son travail que sur celui des autres ;)

Organiser son plan de travail

Une fois que j’ai obtenu le bon mix entre Toolbox et HTML5 boilerplate (de nombreux thèmes WordPress en HTML5 sont basés sur HTML5 Boilerplate et/ou sur Twenty Ten) et que l’arborescence des différents dossiers est opérationnelle, je crée un dossier «Grenier» dans lequel je déplace tous les fichiers du thème à l’exception de index.php, de style.css et de functions.php pour maitriser les différents contextes d’affichage.

Ainsi, je peux adapter index.php à mon projet puis le dupliquer en single.php en allant piocher dans le «Grenier» — le cas échéant — les fonctions du core de WordPress dont j’ai besoin à chaque fois. A moduler évidemment selon le nombre et la complexité des modifications : il peut être judicieux de n’ajouter que quelques balises aux fichiers d’origines du thème plutôt que dupliquer le fichier index.php !

→ Cette méthode permet de se concentrer sur l’essentiel et d’éviter de surcharger le thème avec des fichiers et des fonctions inutiles. Elle offre un bon compromis entre le fait de ne pas réinventer la roue à chaque projet tout en étant très flexible.

Note : j’ai pris l’habitude d’utiliser le minimum de fichier pour gérer les différents contextes d’affichage. Toutefois, la hiérarchie des Templates nous suggère que l’existence de tous les contextes d’affichage pourrait avoir un impact sur les performances, vu que WordPress vérifie d’abord toute la chaine des fichiers possibles avant de se rabattre sur index.php. A ce niveau, les gains ou les pertes de performances sont-elles significatives ?

Organiser les feuilles de style

Comme  je conserve l’arborescence de HTML5 Boilerplate pour faciliter les mises à jour, j’ai deux fichiers style.css : celui du thème Toolbox dans /montheme/style.css et celui de H5BP dans /montheme/css/style.css. Je déplace donc une partie du deuxième dans le premier dans lesque je place les styles « Auteur » et les déclarations qui suivent pour respecter l’ordre des éléments préconisés par le Template H5BP.

Les autres feuille de style CSS dont j’ai besoin restent dans /montheme/css/ et sont importées dans montheme/style.css. La question des performances due aux requêtes HTTP des multiples fichiers est réglé en fin du projet, généralement via le script PHP Minify ou son équivalent disponible dans W3 Total Cache. Si vous n’aimez ni l’un ni l’autre, vous avez toujours la possibilité de faire des copiés-collés de vos fichiers CSS dans le fichier style.css principal, c’est toujours marrant ;-)

En bref

Pas beaucoup de Codex dans cette première partie qui sert surtout à planter le décors. Le Codex viendra en son temps. En attendant, nous somme prêts à intégrer notre maquette dans une environnement stable et évolutif à la fois : de projets en projets, il suffira de vérifier HTML5 Boilerplate ou Toolbox ont été mis à jour pour bénéficier d’un environnement à la pointe des dernières technologies et des bonnes pratique de développement, autant en ce qui concerne le web en général que WordPress en particulier. En effet, un thème comme Toolbox est susceptible de refléter les avancés de WordPress d’une manière générale

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



18 commentaires pour “WordPress de A à Z — A comme Allons-y ! (on s'organise)”

  1. Shazen dit :

    Une bonne mise en bouche, vivement la suite

  2. Lashon dit :

    Bonjour Bruno J’ai toujours grand plaisir à venir par ici. Un petit bémol quant à la méthode dite de modification de thème existant. Tu dis :

    « Toutefois, cela permet de fournir rapidement un site web clés en main pour un client pressé ou avec un tout petit budget. »

    Le hic est qu’en cette période de crise, nombreux sont les clients qui ont ce profil. Il n’est pas rare qu’un client ne puisse dépasser 800 euro pour son site personnalisé. En ce cas il n’y a pas le choix et c’est lui-même qui va être demandeur de cette méthode. Mais je suis d’accord avec toi sur le fond. Et ça n’est efficace que si on connaît déjà parfaitement bien le thème à modifier, sans quoi la perte de temps pour le comprendre impactera le devis. Partir du Twenty Ten pour personnaliser est courant et permet d’offrir quelque chose de personnalisé. Donc je serai moins sévère que toi sur cette méthode. Mais c’est énervant. La parade plus propre que j’ai trouvée pour les clients à petits budgets est d’offrir un de mes thèmes personnels, libellé avec plusieurs feuilles de style quant aux couleurs. Je suis en terrain connu puisqu’il s’agit de ma création et je puis modifier si besoin rapidement. C’est donc une énième méthode que je te propose-là : partir d’un de ses thèmes from scratch et l’adapter au client. D’accord, ça revient un peu au même que ta méthode « grenier ». Juste une variante quoi.

    • br1o dit :

      Je suis globalement d’accord. En général, je pars d’une feuille blanche à laquelle j’ajoute les éléments dont j’ai besoin. Mais une fois qu’on a fait ça une première fois, et qu’on a déjà réalisé une page web avec un marquage HTML optimisé et sémantique en HTML5, par exemple, il devient difficile de faire plus générique.

      Du coup, entre deux thèmes WordPress HTML5 de bonne facture, il n’y a pas tant de différences que ça. Alors prendre son propre thème bien fait qui a été éprouvé ou partir d’une base comme Toolbox, ne fait pas une grande différence ;)

      Le plus d’un thème comme Toolbox, c’est de donner des idées dans l’organisation des fichiers pour prendre en compte les types de billets personnalisés, etc. qui sont apparut avec WordPress 3. Mais ça ne veut pas dire qu’il n’y a rien à ajouter / retrancher / améliorer en fonction de ses propres méthodes de travail et du projet.

  3. Mariefaubert dit :

    J’aimerais beaucoup si tu pouvais nous parler un peu plus de ton expérience de travail avec Boilerplate…

    • br1o dit :

      Je devrais aborder ça dans la prochaine partie de WordPress de A à Z

      • Mariefaubert dit :

        Super ! J’ai hâte de lire ça. Entre temps j’ai eu l’occasion de le tester en créant un thème de base WP et c’est plus simple que je pensais quoi que j’ai encore beaucoup à découvrir… J’aime bien visiter votre blogue quotidiennement. Vous avez une belle plume et des articles toujours très pertinents. Merci

  4. [...] Bichet de CCS4Design entame son tutoriel complet de WordPress avec cet article qui présente les fondamentaux d’un site web en général et de WordPress en [...]

  5. [...] Bichet de CCS4Design entame son tutoriel complet de WordPress avec cet article qui présente les fondamentaux d’un site web en général et de WordPress en [...]

  6. [...] voir si l’eau est bonne. Voyons comment organiser concrètement les éléments abordés dans WordPress de A à Z — A comme Allons-y ! : installer la dernière version de WordPress en français et HTML5 Boilerplate puis ajouter les [...]

  7. [...] WordPress de A à Z — A comme Allons-y ! (on s’organise) [...]

  8. [...] WordPress de A à Z — A comme Allons-y ! (on s’organise) [...]

  9. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! WordPress de A à Z — A comme Allons-y ! (on s’organise) [...]

  10. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? WordPress de A à Z — A comme Allons-y ! (on s’organise) [...]

  11. [...] WordPress de A à Z — A comme Allons-y ! (on s’organise) [...]

  12. [...] WordPress de A à Z — A comme Allons-y ! (on s’organise) Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]

  13. [...] WordPress de A à Z — A comme Allons-y ! (on s'organise) [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site