Ô toi mon thème, je t’aime

Adepte du site sur-mesure, pour moi un thème WP a longtemps été indissociable du site qui l’utilise. Donc on y met quasiment tout ce qui permet de faire fonctionner le site. En changeant de boîte je me suis rendu compte qu’on n’était pas nombreux à penser les choses comme ça. Quand et comment fait-on du développement spécifique à destination du site dans le thème WP ? Qu’est-ce que l’on y met et qu’est-ce que l’on n’y met pas ? Pourquoi ? Comment ? Avec qui ? Dans quel contexte ?
Entre clientèle, choix d’extensions, de thèmes, mu-plugins, utilitaire de personnalisation natif WP ou options de thèmes, que fait-on pour faire les choses bien ? Est-ce qu’au moins il y a une façon de faire les choses bien ?
La stratégie à adopter dépend du projet, du client, de l’équipe mais aussi de la vision que l’on a de WordPress et d’un projet web basé sur ce CMS.

Transcript

1. Ô toi mon thème, je t’aime ♥ (◕‿◕Ⓦ )
2. Jb, CdP technique WordPress chez Whodunit Développeur full-stuff depuis ±10 ans sur WP Développeur d’extensions, traducteur, responsable de la maintenance de tout plein de sites web, co-organisateur du meetup #wpvalence @audrasjb | jeanbaptisteaudras.com | whodunit.fr
3. • Formation de dév back avec beaucoup de pratique du front • Ancien gérant d’une agence spécialisée dans les sites publics institutionnels → A force de recréer encore et toujours la même chose, création d’un framework en surcouche de WP avec tout dans le thème : types de contenus, custom fields, fonctions de templating, etc. • J’ai démissionné de la gérance de ma boîte à cause d’un associé caca-pourri • J’ai atterri dans une belle agence WP <3 • J’ai découvert que mon fonctionnement n’était pas vraiment universel ⚆ _ ⚆
4. 2k5/2k8 : L’apprentissage ʕ•ᴥ•ʔ • Customisation de ce bon vieux Kubrick • Le temps des découvertes : ◦ The Loop : compréhension de la boucle WP (vs Spip) ◦ Le templating et la Template hierarchy de base de WordPress ◦ Modèle de données général de WP ◦ Gestion des menus ◦ Marqueurs de modèles et marqueurs conditionnels ◦ Le CODEX : une doc à peu près à jour et avec des exemples \o/ • Je peux mettre en place un premier site rapidement en suivant les premiers tutos et en lisant la doc • Je commence à utiliser WP en prod pour des clients en bidouillant joyeusement des thèmes pour les faire matcher aux designs intégrés
5. 2k9 : ça devient sérieux ಠ_ಠ • Basculement sur WP par défaut pour tous les nouveaux projets • WP est un vrai cms : ◦ Custom Post Types & Taxonomies ◦ Custom Fields ◦ WP_Query ◦ Et tout le reste :) • YAY : un CMS permettant de (presque) tout faire et un backoffice vraiment utilisable par tout le monde • Début de la production d’une surcouche WP pour les clients de ma boîte : des collectivités ayant toutes plus ou moins les mêmes besoins • La surcouche sera créée et lancée depuis le thème
6. 2k10 : Création d’un starter theme efficace (ง°͜ل°)ง • Création d’un thème de base avec un répertoire /inc comprenant ◦ Custom post types & taxonomies : agenda, publications, annuaire, projets, whatever ◦ Custom fields pour chaque CPT ◦ Réorganisation de l’éditeur visuel pour ajouter les éléments non prévus ◦ Nettoyage du B-O WP pour virer tout ce qui n’est pas utile ◦ Création d’un tableau de bord vraiment personnalisé • Création des templates-types permettant d’afficher le contenu en front ◦ Gestion des menus ◦ Gestion des pages de liste pour les CPT ◦ Gestion des pages d’affichage des contenus des CPT ◦ Gestion des dépendances JS permettant d’afficher les contenus : jQueryUI, GoogleMaps, etc. ◦ Gestion des pages d’options permettant de paramétrer le site • Je n’ai plus qu’à recevoir des gabarits intégrés et c’est parti \o/
7. 2k11-2k15 : ça roule ! ♪~ ( ) • Le process est basique mais fonctionnel : ◦ Intégration HTML/CSS/JS des maquettes validées par le client ◦ Création des CPT et des champs personnalisés (dorénavant simplifiée via ACF) ◦ Templating : simple opération d’insertion du gabarit HTML dans les boucles WP déjà prêtes pour chaque CPT ◦ On se concentre davantage sur les besoins éditoriaux et moins sur la technique ◦ On fait évoluer le “framework” au fur et à mesure des besoins clients ◦ No wp_head / wp_footer :D • Ça marche commercialement $$$ • C’est plutôt secure : les hackers en herbe ne s’intéressent pas aux sites où ils ne retrouvent pas ce qu’on leur a appris sur les tutos • Maintenance cool : le framework évolue avec WP, on maintient notre propre code, pas celui des autres
8. 2k16 : Chamboul’tout (╯°□°）╯︵ ┻━┻ • Conf WCParis : “mais en fait tout le monde ne fait pas comme ça ?” • L’absence de wp_head et wp_footer nous coupe de certains plugins majeurs • Tout roule pour notre solution WP… mais la boîte se désagrège • Changement de cap et direction Whodunit ♥ ◦ Un fonctionnement complètement différent ◦ Des child themes, des thèmes premiums, des thèmes modifiés, du sur-mesure… ◦ Apprentissage du travail en équipe web complète ◦ Récupération de 7 ans de projets en maintenance : on passe de la maintenance préventive / corrective à de la vraie TMA ^^ ◦ Au niveau du sur-mesure, on reconstruit tout progressivement, yeah !
9. Thème premium ou sur-mesure Quelles sont nos options ?
10. L’option thème wp.org ou premium ♥‿♥ • Economies : design, intégration, développement • Un site rapidement réalisé pour des projets aux besoins limités • Une offre particulièrement abondante • L’auteur gère la maintenance • Des extensions intégrées au thème • Possibilité de customiser en backoffice • Aller plus loin : thème enfant • Une fonctionnalité supplémentaire ? Un CPT à créer ? Suffit d’installer un plugin ! ಥ_ಥ • Limitations design & technique + côté “whaou” qui cache de nombreuses insuffisances techniques et éditoriales • Thème bcp modifié: on y gagne vraiment? • Trop de choix tue le choix ? • Question de la maintenance à long terme • Arghh • Theme Options : pas le top • Child Theme : les joies de la surcharge ! • Entre le thème et les plugins, la stabilité du système décroît dangereusement
11. Monts et merveilles… (ಥ﹏ಥ) • Des super démos… mais au final… Bof. La faute aux contenus fournis ? • Des custom post types inutiles et d’autres à créer • ACF a faire rentrer aux forceps • Des page builders pour faire tout… wtf le client fait du design dans le BO maintenant ? :O • Formation : on forme le client à l’utilisation du thème et plus seulement au webmastering WP • i18n : traductions pas toujours au top… • !important !important !important • Un thème générique convient rarement à 100%. Est-ce vraiment rentable ? “super ce thème par contre faudra changer le header, mettre un CTA ici, des widgets là, ajouter une landing page et grossir le logo” • Des perfs médiocres nécessitant obligatoirement un cache (misère ^^) • Une maintenance complexe et la problématique de la sécurité
12. Ok ça reste une option envisageable ;) • Si peu de $$$ ou peu de temps alloués au projet • Pour la mise en place d’un MVP • Modifications : en prévoir un minimum et les spécifier précisément • Bien connaître les contenus du site avant de choisir le thème • Tester les perfs du thème • Vérifier les journaux de MAJ • Lire les forums de support et les avis • Vérifier les dépendances • Regarder à quoi ressemble le BO • Faire un thème enfant et suivre les MAJ de près
13. L’option starter theme / thème framework (Genesis, Underscores…) • Ok pourquoi pas. • Mais si tu sais développer à partir d’un starter theme autant faire le tien adapté à tes besoins et à ta clientèle non ? :P
14. L’option sur-mesure • Design, intégration, développement… Je maîtrise à 100% mon projet :) • C’est plus long à faire donc plus cher :) et encore… pas toujours !
15. Mon thème : de l’affichage mais pas que… • Template files et blocs réutilisables inclus en get_template_part() • Images du design, typos et autres assets • Dossiers js et scss avant compilation (voire même l’intégration complète) • Types de contenus personnalisés • Modifications et nettoyage du B-O WP • functions.php redirige vers des fichiers de config dans un dossier /inc et par exemple des sous-dossiers /public et /admin • Éventuellement les exports PHP d’ACF … Mais ça veut dire que si je change de thème mon site il est tout pété ? O_o
16. Ouaip ! ¯\_(ツ)_/¯ osef non ? 90%* des refontes de sites WP occasionnent une réinstallation complète de WP. *estimation Pifomètre Institute © 2017
17. Proposition d’architecture de base /mon-theme /assets /images /fonts /js /css (et scss éventuellement) /inc /admin /config /posttypes /metaboxes /optionpages /customfields /public /functions /blocks functions.php (inclusions de /inc) style.css front-page.php page.php 404.php search.php template-publications.php template-agenda.php template-annuaire.php template-contact.php single-actualites.php single-agenda.php single-annuaire.php taxonomy-thematiques-publications.php …
18. Pour conclure (ง'̀-'́)ง 1. Pour moi, le thème c’est le site 2. Changer de thème c’est faire une refonte graphique mais aussi technique 3. Un max de technique dans le thème = (un peu) moins de bordel de plugins 4. Réduire les dépendances, c’est assurer la pérennité de son site 5. Le sur-mesure c’est le top, avec un thème bien organisé 6. wp.org ou premium : ok mais pour des projets bien bornés, des thèmes propres et avec un childtheme et pas d’extension intégrée
19. Merci ! (づ￣ ³￣)づ @audrasjb | jeanbaptisteaudras.com