 Bonjour, je suis très content d'être devant vous aujourd'hui, c'est mon sixième hors de camp, mon premier entente orateur, j'ai faim, tout comme vous, on peut stresser certainement, comme beaucoup merci. Je trouve intéressant de faire un retour d'expérience sur un client qu'on a eu l'année passée pour qui on continue à travailler, donc c'est un grand compte et l'idée est de montrer comment une petite structure comme la nôtre a pu, sur base de WordPress, mettre en place des outils qui répondent à la demande d'un groupe qui représente plus de 1500 personnes à travers le monde. Voilà, petite présentation avant de commencer, je m'appelle Benjamin Pierson, je suis web designer de formation, j'ai exercé ce métier là pendant quatre ans en agence, je me suis installé en tant que freelance, on est huit ans et demi après, on est une agence de cinq personnes à faire des sites web sur mesure, sur base de WordPress, on s'appelle Noumia et on est basé à Liège en Belgique, j'espère que ça ne sentons pas trop à l'accent. Justement, la Belgique c'est mon préambule, je vais vous donner faim là par contre, c'est un peu différent de la France, voilà, c'est un petit pays, je vous apprend rien, on est six fois plus petit que vous ici en France en termes de population et en plus on est divisé en trois communautés linguistiques, ça n'est pas les Wallons, les Flamands, les Germanophones, on a peu d'agence spécialisée WordPress, peu d'experts, évidemment on est moins de travailleurs du web mais même proportionnellement il y a un retard à ce niveau là et par extension c'est la popularité de l'outil qui est en retard, on voit ça notamment dans l'organisation des WorldCamps, on en a un seul qui est envers dans sa deuxième édition la semaine passée, quelques meet-up envers Bruxelles, on a lancé Liège l'année passée mais ça s'arrête presque là. Alors c'est très négatif, ça ne vous donne pas vraiment envie de venir travailler chez nous, moi j'ai plus des frites et boire des pierres mais pas du tout, je vais en venir, c'est justement qu'il y a encore un positionnement en tout cas chez nous mais j'ai cru comprendre aussi en France, qui est possible pour des petites structures, des gens qui veulent se lancer dans WordPress maintenant et faire de la qualité sur cet outil là, il y a une place à prendre, ce sont sur les moteurs de recherche mais dans le marché en général. Merci, merci à vous parce que c'est justement à la communauté WorldCamp Paris, en 2015, j'ai envie de 2015 quand j'ai quitté Paris, j'ai décidé pour l'agence de me positionner sur WordPress. Jusqu'à 2015 on utilisait WordPress comme outil, après 2015 c'est notre principale argumentaire de vente et on s'est réellement positionné, c'est notre H1 sur notre site, d'ailleurs il a été repris dans une conférence, on me s'a dit que c'était pas très bien, voilà on est une agence web WordPress. Donc ça nous joue des tours, c'est sûr, on n'est pas spécialement convié à certains appels d'offre parce qu'il y a encore les détracteurs de WordPress mais comme des clients, pour des clients comme NMC, c'est intéressant, on a été appelé aussi pour ça. Un petit mot sur l'appel d'offre justement, à gauche ce qu'on savait, en tout cas on a vite appris à droite sur quoi on a misé, on était huit agences dans l'appel d'offre, une répartition assez intéressante 50-50 donc on savait que si on pouvait faire mouches sur l'open source on pouvait déjà effacer la moitié de nos concurrents et c'est ce qu'on a fait, on a directement tapé le clou WordPress. Les références clients, on avait eu l'occasion de faire des sites pour RTL, pour FunRadio, pour l'université de Liège avant donc c'est des choses qui rassurent le client évidemment, le positionnement, comme je disais, on est une des rares agences WordPress en Belgique, l'implication, alors il y a des gens beaucoup plus impliqués dans la communauté ici dans la salle mais à notre niveau le fait d'avoir fait l'émiteur palierge, d'être bénévole au WorldCamp en verse, ça rassure quelque part le client. Justement ce client, ça demande était très précise, ça nous a mis directement confiance, on a joué frangeux dès le début, il cherchait une agence pour faire des sites basés sur un outil le plus facile possible. Le client s'y connaissait donc le digital marketing manager en interne faisait des sites après-journée donc la demande c'était pas, il n'y avait pas de développement mobile, il n'y avait pas d'études SEO, c'était une agence externe qui l'avais, il y avait déjà toute une étude de personnes qui étaient faites donc il cherchait réellement une agence web et on a joué frangeux. Pour ce type de demande là on était pour nous le meilleur rapport qualité prix et c'était avec nous qui devaient travailler. Alors ça a fonctionné, ils nous ont choisi tant mieux. Alors j'aurais pu faire des slides pour expliquer qui était NMC, j'ai une vidéo de 40 secondes qui explique ça, j'espère qu'elle va passer. L'activité principale des NMC c'est la transformation des matières synthétiques, nous sommes spécialisés dans la maussation des polymères, ils nous développent plein de produits pour les applications diverses, notamment pour le bâtiment, pour l'emballage, le sport et le loisir et pour les solutions industrielles. Nous sommes actifs au niveau commercial, vraiment dans le monde entier, principalement avec tous nos produits de décoration que nous exportons au départ d'Anatène dans 100 pays au monde et pour le reste nous avons donc des unités de production en Russie, en Finlande, en Suède, en Angleterre, en Allemagne, bien sûr en Végique où nous sommes proches des clients avec nos produits pour l'isolation technique et l'emballage. Voilà la maussation des polymères, donc c'est eux qui font les grosses frites avec lesquelles vous batiez quand vous étiez gamin dans les piscines en mousse. Un petit récap de la demande, il y avait trois sites, cinq au final parce qu'on voit ici qu'il y a du multi-site. En premier site, le site de la décoration, cette langue minimum, multi-pays, alors c'est multi-site mais il y a une variante multi-pays donc on va en parler plus tard qui est un peu différente. Un catalogue produit qui devait aller vers de l'e-commerce à moyen terme, du développement sur mesure, un shop locator on va le voir et d'autres. Un deuxième site plus statique mais là aussi plusieurs langues multi-site dans sa définition propre parce qu'il y aura trois sites différents dans un réseau WordPress, aussi catalogue produit et quelques développements sur mesure. Un troisième site que j'espère que vous voyez avec le desk qui est un espace professionnel, donc un espace sécurisé où les gens en interne et externe peuvent aller consulter de l'information, donc gestion utilisateur, gestion des droits en conséquence, etc. Une première étape, j'en parle en un slide, c'est on fait du sur mesure donc on a et c'est notre métier de base, on a des designers à la base donc on a une étape wireframe design, on utilise une vision et craft mais je vois que c'est pas ma dernière version de slide. Ce qu'il est important de dire c'est qu'on a pu m'occuper l'entièreté des écrans avant de passer au développement. C'était une première, 38 écrans, 38 wireframes, 38 designs, c'est beaucoup mais pour les développeurs c'était assez gage de qualité d'avoir ce matériel là à disposition. J'ai une capture d'écran de une vision, c'est encore un designer qui n'utilise pas des outils comme ceux-là pour gérer les retours clients, qui va y voir ce que c'est. Alors je suis web designer, je ne suis pas le plus technicien, je ne vais pas vous montrer des lignes de code, j'ai mes gars qui sont là, ils peuvent vous en parler mais je vais essayer de vous expliquer un peu les outils qu'on met en place, enfin qu'on utilise les modules, les extensions, et peut-être voir quelques cas pratiques de développement sur mesure fait pour NMC. Commence par le thème, on ne part pas de thèmes premium, jamais, ni même de bonds ou underscore, des thèmes blancs. On a notre propre starter thème qui comprend quelques outils, j'en ai listé quelques-uns les plus logiques, compositeur pour les librairies PHP, gueule pour l'étage automatisé, on fait du SASS avec la grille Suzy, donc le pré-processeur SASS, et certaines librairies JASAP, c'est Green Sock, ceux qui ne connaissent pas, on a généralisé nos animations avec cet outil là et d'autres librairies, mais on part toujours de notre thème à nous. Les plugins, j'avais mis extension dans ma dernière version, on essaye de trouver toujours le meilleur compromis en termes de développement en passé et donc budget par rapport à la possibilité de dépendre d'un plugin tiers. Pour les fonctionnalités front, on va l'éviter toujours, mais évidemment il y a certaines fonctionnalités, on ne va pas réécrire un moteur d'e-commerce, au plus ils fonctionnent pas mal, et donc il y a toute une série de plugins qui correspondent à notre tronc commun qu'on utilise pratiquement partout. J'aime bien ce genre de slide là, ça permet de s'il y a peut-être un plugin que vous ne connaissez pas, vous irez peut-être l'utiliser l'année prochaine et il sera peut-être acté dans votre agence, ACF, tout le monde connaît pour les champs personnalisés, Polylang Pro pour le multilangue, Ninja Forms pour les formulaires, WooCommerce pour LeeCommerce, donc le catalogue produit dans notre cas, 3EP broadcast, on va en parler plus tard, c'est le seul plugin, il avait une bullette d'une autre couleur dans ma dernière version, mais c'est le seul qui vient d'une demande client, donc propre à ce projet là, le client souhaitait pouvoir encoder une seule fois son contenu et le propager sur différents sites du réseau WordPress, le plugin sert à ça. Yoast SEO pour le SEO, redirection parce qu'on n'utilise pas la version pro donc tout ce qui est redirection 300, monitoring de 404 effets par redirection, WP Migrate DB Pro pour la migration des bases de données entre versions staging, développement et production, WP Olympus Pro pour l'apportation des données dans notre WordPress, dans notre custom post type, WP RO 4 pour que notre site aille plus vite, SQPress Pro pour pas se faire hacker, WP Smush pour l'optimisation des images à l'auplôde et Manage WP pour notre maintenance, voilà. Donc je dis on va passer en vue peut-être quelques développements sur mesure qu'on a fait, j'irai bien là, premier développement sur mesure c'est le shop locator, ça consiste en quoi la marque est vendue à travers le monde, on affiche une carte pour afficher les revendeurs, ça permet de les trouver en fonction de sa geolocalisation. Côté backend on a un custom post type, c'est pas dans le même ordre, c'est pas grave. Donc pour importer ces importateurs, ces revendeurs de marque, on utilise un outil qu'est WP Olympus, j'en ai parlé avant donc il est là en bas à gauche, là on a le nœud du fichier Excel qu'on va voir par la suite qui reprend les informations de revendeurs, on voit qu'on a 712 qui étaient présents dans le fichier Excel et par drag and drop on va les glisser dans les cases pour faire le lien avec nos infos, nos champs du custom post type store qui doit être là, un fichier Excel donc une ligne par revendeur, on a notre custom post type store qui remplit avec les 2730 revendeurs ici, une taxonomie qui va nous permettre après de filtrer donc type et range ici ou d'afficher des informations complémentaires dans l'affiche du revendeur. On revient à côté front, on a la carte, c'est un fichier JSON qui est généré à l'enregistrement du custom post type, il contient toutes les informations des revendeurs et on traite ça en JavaScript pour afficher les plots, par géolocalisation, on est là présent à Liège quand j'ai fait la capture d'écran, on utilise Google Map Distance Matrix API pour définir la distance par rapport à notre localisation. Un deuxième module sur mesure c'est la page inspiration donc l'idée est de pouvoir, je ne sais pas si on a un zoom, de pouvoir montrer le produit en situation, on a une navigation AFA-7 sur la gauche avec différents filtres, on voit PIX vidéo donc photo vidéo, ça va venir des API Pinterest et YouTube, différents filtres, on va voir comment ils sont construits par la suite. J'ai disait les API, c'est une tâche crone cette fois-ci donc ce n'est pas un fichier XLS qui va chercher une fois par jour les informations dans les API et qui va permettre de les catégoriser. Pour faire ça on utilise les ID des bords Pinterest, on récupère du coup les noms de ces bords-là, ça en fait le filtre type de produit que vous avez vu en colonne de gauche. Pour l'autre filtre c'est un système de tag, du coup le client entre différents tags qui correspondent aux pièces dans lesquelles on peut trouver les produits. Quand ce mola est présent dans la description du pin, il est du pin Pinterest, il est automatiquement catégorisé dans cette catégorie. On revient en front, ce n'est pas si c'est la vidéo, non c'est la photo, c'est une classe JavaScript qui va en ajax du coup agir sur les filtres et normalement le loadmore en dessous, en ajax il va récupérer d'autres informations. Un troisième développement, c'est certainement le plus petit, c'est aussi pour montrer qu'on pourrait utiliser un plugin pour étendre la recherche de WordPress, on ne le fait pas avec un peu de code, on peut aller facilement étendre WordPress recherche sur le titre et le contenu. Pour les produits on a étendu ça à tous ces champs, des taxonomies du custom post-type produit et donc normalement vous avez un GIF, je vais le remettre, ça c'est un GIF qui vous montre l'utilisation. À la CESI en Ajax il interroge le serveur et celui-ci retourne trois propositions de chaque contenu qui va correspondre, là on a un tap art ce qui est le début d'une des marques et ils nous retournent les propositions catégorisées. Quatrième petit développement pour eux, le module contact, Google map assez classique, on a juste ici deux niveaux donc on veut pointer les pays dans lesquels NMC est présent, on peut choisir par la carte ou par la liste déroulante, en cliquant on arrive dans le pays en lui-même, gestion de multiburaux, là on voit qu'il y a trois villes qui correspondent aux trois plots donc deux niveaux pour pouvoir afficher les bureaux, les informations générales, une gestion des contacts ici par bureau ou par pays en fonction s'il y a des sous bureaux, un formulier de contact à qui on va passer en champ caché à Ninja Form, l'email du bureau en question pour changer le dessinateur en fonction côté back-end à quoi ça correspond, on a le custom post type office, on va avoir le people ici qui va permettre de gérer, on va le voir plus bas, les contacts, les informations classiques, ici country correspond à là on a cliqué suede, c'est un bureau, c'est la taxonomie country qui est ici pour la suede, les informations générales et en bas ici on fait le lien avec les différents contacts via le champ ACF, voilà le cinquième et dernier développement c'est l'espace pro c'était le troisième site dans le récap, le récap de la demande tout à l'heure, c'est large donc espace sécurisé log in mode pass, une interface type application, j'espère que les comptes sont pas terrible, ici je suis dans une vue administrateur donc j'ai accès à toutes les tous les menus de chaque filial en fonction du type de compte évidemment on aura plus ou moins de menus justement comment s'est géré pour chaque utilisateur donc pour chaque compte utilisateur dans WordPress on a un rôle défini les deux premiers viendres de Yoast, ici on a défini différents rôles qui en fonction dans les pages on va pouvoir dire bien tiens cette page là c'est que les admins, les architectes, les painters, les peintres, voilà et en fonction le menu se construit vous l'aurez compris quand on se connecte à l'application alors c'est un espace professionnel type à extra net donc c'est beaucoup de consultations documents de formuleurs et autres il ya juste cet écran là au niveau des médias qui est peut-être un peu plus particulier on retrouve notre navigation à facette comme on l'avait en côté front mais là l'utilisateur peut venir choisir plusieurs médias ici on en a coché deux avec un lien qui s'affiche au dessus pour télécharger les médias quand on clique on a une pop-up on peut choisir la qualité la qualité des médias basse moyenne ou haute et affiché zip alors est généré sur le site l'ordinateur de l'utilisateur en Ajax voilà ça c'était les quelques développements mais je dois vous avouer une chose c'est que je vous ai menti le titre de ma présentation c'était comment wordpress peut répondre parfaitement à un grand groupe comme comme nmc et non ça n'a pas répondu parfaitement à leur demande on a eu un souci le souci c'est le multi pays c'était une chose qu'on avait jamais fait multi situi mais le fait de pouvoir afficher un pays en fonction différent pour un marché différent en fonction du pays dans lequel nous on se trouve c'était assez nouveau il ya un principe de base donc un seul encodage le client voulait encoder une fois son contenu son produit son document quel qui se sa news et pouvoir dire ben moi je veux qu'il soit en français en anglais dans le marché africain allemand ou peut-être le béné luxe mais alors là que dans certaines langues on a dû jouer avec cette contrainte là donc ainsi d'enfants par marché pays évidemment une synchronisation de certains champs le nom d'une marque art style ne change pas qu'on soit en français ou en anglais qu'on soit en afrique en allemagne ou en belgique donc ça ressemble à quoi ça ressemble à ça ainsi de principale où on va encoder donc le domaine là ne sert qu'au bac au bac donc à l'encodage on en toute nos informations donc là il y en a un produit revendeur document news bureau c'est l'encodage des informations et on a un envoi une diffusion sur des soucis du réseau qui sont créés marché par marché donc là c'est les quatre premiers marchés qui ont été activés ils ont chacun une url bien propre ils ont chacun des langues donc l'allemagne n'est qu'en allemand ou en anglais maintenant donc allemagne c'est deux langues bénéleux c'est quatre langues l'afrique n'est qu'en une langue pour le moment et la france n'est pas encore en ligne mais dès lundi ne sera qu'en français voilà on a utilisé 3 ep broadcast qui ne s'appelle plus je pense que c'est plus que broadcast maintenant pour gérer ça et on se retrouve avec une série de problèmes de compatibilité il y a une faute énorme la compatibilité voilà faut enlever le c'est pas bien écrit avec notamment a cf polylangue en termes d'acf il y avait des champs qui n'étaient pas pris en compte polylangue c'est dès qu'on partageait qu'on diffusait un produit d'un marché à un autre on perdait la langue tout simplement encore ce lundi on a eu des produits qui étaient triplés dans certains marchés avant de mettre en production donc on se retrouve dans cette dépendance à un plugin j'expliquais tout à l'heure qu'on essaie de l'éviter ici on a fait un choix un mauvais choix le développeur n'avait pas la version pro de polylangue donc quand on s'est rendu compte de ça ben ça a réglé quelques soucis on le donnait notre licence pour qu'il puisse débugner son plugin voilà ça fonctionne mais on est dépendants d'eux pour le moment donc attention attention à ces plugins qui se disent compatibles en pourcent avec tout un tas d'autres plugins on voit bien qu'avec des a cf et des polylangue voilà ça a posé quelques soucis et ben je disais cette dépendance qu'est ce qui va se passer au prochain mis à jour de l'outil donc de ce plugin là de wordpress d'acf de polylangue ça va être voilà peut-être falloir serrer les fesses quelques fois ou en tout cas faire attention la mise en ligne elle a été cette dommage elle a été en plusieurs étapes on a fait deux fois la formation il y avait deux sites donc qui viennent de deux filiales différentes il va y avoir une troisième formation parce que l'espace pro doit sortir bientôt et elle a été faite assez tôt parce que les langues la première langue était intégrée par nous après pour les autres langues le client voulait avoir la main et intégrer lui-même ses contenus notamment les contenus statiques déploiement production compte goutte j'ai dit qu'il y avait à la base cette marché qui était prévue il y a trois sites au final donc il y a un développement qui qui est assez long on se retrouve du coup dans une dans un je sais pas si j'ai la vue on se retrouve dans dans une situation où on fait du suivi tiqué constant avec le client à partir de la première mise en ligne où on peut pas facturer complètement la fin parce qu'il y a cette marché à mettre en ligne et voilà donc ça c'est un peu une situation où on doit être tous les jours sur base camp pour régler les petits quoi qu'au fur et à mesure et mais on peut pas encore facturer on peut pas dire que ça passe en régie donc justement la maintenance ben manette wp dès que le premier site est sorti et la régie consiste ben c'est tout ce qui est petite demande qui sont venus après ou hors scope de base où là on a une interface j'avais une capture d'écran elle pas là on a une interface où le client peut suivre le temps qu'on passe pour lui jour par jour mais je les ai manette wp et l'interface en question qui est faite en wordpress aussi pour gérer les demandes du client alors que retenir de cette expérience bel l'apprentissage évidemment on est que ça soit en production ou même moi même en gestion au travail pour un aussi gros groupe évidemment on apprend énormément la satisfaction client et nous ont recommandé un site le site nmc.u donc le site corporate donc j'espère qu'ils sont contents s'ils continuent à travailler avec nous l'équipe d'avoir sorti d'avoir sorti un client aussi aussi important aussi grosse référence évidemment l'importance du choix des extensions même si on pensait être un bon exemple on utilise que les extensions qu'il faut pour les grosses fonctionnalités on a vu qu'un mauvais choix peut nous faire perdre des jours voir des semaines de des bugs et de développement en plus et la ce bout de note de liste cette proposition professionnelle qu'on peut continuer à enfin cette proposition qu'on peut arriver à donner à des aussi grands comptes en étant une petite structure de cinq personnes et en se basant sur des solutions qui viennent également de petites structures j'en ai pas parlé mais pour ce cas là on est on est hébergé sur un dédié sur deux switch voilà les plugins sont pas tout le temps fait non plus par des grosses grosses sociétés et moi j'avoue que je trouve ça assez jouissif de pouvoir répondre à une demande comme celle là voilà merci j'espère que vous n'avez pas trop faim c'était pas trop long ça c'est les quatre url des sites en question et voilà bon appétit merci s'il y a une ou deux questions avant d'aller manger non vous l'attrapez pendant le repas si est ce que vous avez mis d'une solution de cache wordpress et de cache serveur nécessaire pour fonctionner avec ce site en fonction de la présentation on utilise roquette dans les modules j'ai pas vu wep roquette oui maintenant au niveau du serveur quoi côté de switch il y a c'est aussi prévu mais oui c'est wep roquette dans ce cas si qui qui gère ça ouais bonjour merci pour votre présentation une question très simple pour répondre à un projet comme celui là vous dis vous êtes cinq dans votre équipe qui compose ses équipes quel rôle quelle compétence au global ça bah il y a moi je suis le gérant je ne fais plus que ça là et donc je ne fais plus de la production et l'équipe est en gros ces deux designers de développeur avec un des designers qui est qui est un peu hybride et qui fait un peu les deux donc voilà c'est un peu moitié moitié en termes de développement et de design pour les cinq merci beaucoup Benjamin je monte