BE Pipeline Plugin
Le projet
Un outil né d’un besoin récurrent
En travaillant régulièrement sur des sites biotech, je devais souvent recréer le même type de pipeline pour présenter les différentes phases de développement d’un traitement ou d’un programme.
Comme ces projets revenaient régulièrement, j’ai voulu transformer cette tâche répétitive en un outil plus simple et plus rapide à utiliser. J’ai donc commencé à développer ce plugin WordPress pendant des périodes plus calmes, avec l’objectif de rendre les pipelines entièrement dynamiques.
Le plugin a ensuite été utilisé concrètement sur plusieurs projets, notamment Hoba Therapeutics et Tinos. Ces sites ne sont plus visibles aujourd’hui, mais ils m’ont permis de tester l’outil dans de vraies conditions et de continuer à l’améliorer.
Exemple concret d’un pipeline réalisé via le plugin pour un ancien client biotech : Hoba
sites l’ont utilisé
Plugin Wordpress
Type de projet
Conception & Dév
Mon rôle
PHP · JS · ClaudeAI
Stack principale
Le plugin en action
Créer un pipeline complet sans toucher au code
BE Pipeline permet de construire des tableaux de progression directement depuis WordPress. Les contenus, les étapes et le design sont configurables depuis le dashboard, puis le pipeline peut être intégré n’importe où grâce à un simple shortcode.
|
Program
|
Learning
|
In progress
|
Used in real projects
|
Next step
|
|---|---|---|---|---|
|
Web Development |
Wordpress
Bricks Builder
E-commerce
|
|||
|
UI/UX Design |
Web Design
Responsive Design
|
|||
|
Marketing |
SEO
Social Media
|
|||
Processus de réalisation
Les différentes étapes de la conception
Analyse du besoin
L’objectif était de créer un outil simple permettant de générer un pipeline visuel directement depuis WordPress. Le besoin principal était de pouvoir construire une structure claire, flexible et responsive sans devoir modifier le code à chaque changement de contenu, d’étape ou de design.
J’ai donc commencé par réfléchir à la logique générale du plugin et aux différents cas de figure possibles. Il fallait prévoir des pipelines simples, mais aussi des structures plus complexes avec plusieurs lignes, plusieurs flèches et différents niveaux de progression. J’ai réalisé un organigramme afin de mieux visualiser les interactions entre les données et les réglages.
Cette première phase a permis de poser une base suffisamment souple pour faire évoluer le plugin sans devoir repenser toute sa structure à chaque nouvelle fonctionnalité.
Conception du dashboard
J’ai conçu une interface d’administration pensée pour être utilisée facilement depuis le dashboard WordPress. L’utilisateur peut créer plusieurs pipelines, définir ses étapes, organiser les groupes de flèches et ajouter les différentes lignes de contenu depuis une même interface.
Le drag and drop permet de réorganiser rapidement les éléments sans devoir les supprimer ou les recréer. Les informations peuvent ensuite être modifiées directement dans chaque bloc afin de garder une gestion simple, même lorsque le pipeline devient plus complexe.
L’un des principaux objectifs était de rendre l’outil accessible à quelqu’un qui ne développe pas. L’utilisateur doit pouvoir faire évoluer son pipeline lui-même sans devoir intervenir dans le shortcode ou dans le code du plugin.
Personnalisation du design
Une grande partie du développement a été consacrée aux options visuelles. Le plugin permet de modifier les couleurs, les gradients, les bordures, les fonds, les séparateurs et les espacements afin d’adapter le pipeline à différentes identités graphiques.
Les flèches peuvent être simples ou composées de plusieurs segments. Chaque partie peut recevoir son propre style, avec une couleur unie ou un gradient linéaire. Des réglages globaux permettent de garder une cohérence générale tout en laissant la possibilité de personnaliser certains éléments individuellement.
J’ai également séparé les réglages liés au contenu de ceux liés au design. L’objectif était de proposer beaucoup de possibilités sans transformer l’interface en une succession de paramètres difficiles à comprendre.
Intégration et rendu responsive
Le pipeline final peut être intégré sur n’importe quelle page grâce à un shortcode. Il fonctionne aussi bien dans Gutenberg que dans des builders comme Bricks, ce qui permet de l’utiliser facilement dans différents types de projets WordPress.
La partie responsive a demandé une attention particulière. Un pipeline horizontal complexe ne peut pas simplement être réduit sur mobile sans perdre en lisibilité. J’ai donc ajouté des réglages spécifiques pour les versions desktop, tablette et mobile.
Certaines informations peuvent ainsi être adaptées indépendamment selon la taille de l’écran. Les largeurs, les flèches et la disposition des contenus peuvent évoluer afin de conserver une lecture claire sur chaque support.
