«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 😉
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 ?
→ 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 !
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
Une bonne mise en bouche, vivement la suite
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.
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.
J’aimerais beaucoup si tu pouvais nous parler un peu plus de ton expérience de travail avec Boilerplate…
Je devrais aborder ça dans la prochaine partie de WordPress de A à Z
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