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. Voici le sommaire complet des 26 articles de WordPress de A à Z.

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