Ce site a été développé avec du WordPress + WooCommerce sur-mesure (Custom Post Types, Custom Taxonomies). L’intégration est faite avec Html et Sass. Les maquettes avec Figma et Photoshop.
Vous pouvez trouver le code source de ce projet sur Github
1. Phase de maquettage
J’ai realisé la maquette de ce avec Figma et Photoshop. Je cherchais un design moderne et dynamique.
J’ai basé mon design autour de la sobriété, visant un chargement ultra-rapide, et avec l’objectif d’envoyer les utilisateurs le plus rapidement possible vers la page d’achat.
Réduire la quantité d’images sur mon portfolio me permettait:
- Focaliser l’attention sur de la vrai information (les informations superflue n’ont pas de valeur ajoutée)
- Améliorer l’UX (optimisation du temps de chargement de chaque page)
2. Intégration Web
Ce site est intégré ainsi :
- HTML / SASS / jQuery
- Full Responsive
- Mobile First
- Adapté à tous les navigateurs modernes
Mon organisation Sass
- Méthodologie BEM (Pour le nommage de classe)
- Sass 7-1 Pattern (Para l’organization de mes fichiers)
- Flexbox et Css Grid Layout
Je maîtrise suffisement l’Intégration Web pour ne pas avoir besoin de surchargé mon css avec des Framework Css type Bootstrap
3. Développement WordPress + WooCommerce
Je n’utilise ni de Thème existants, ni de constructeurs, il s’agit d’un thème sur-mesure.
Faire une page sur mesure me permet d’avoir beaucoup plus de contrôle sur mon code, ce qui m’apporte:
- Une facilité de gestion du balisage pour le SEO-onpage
- Plus de maniabilité pour faire évoluer le site
- Un gain de temps pour la maintenance
- Une limitation des failles de sécurité (provenant potentiellement de plugins dont je ne maîtrise pas le code)
- Une amélioration notoire de la vitesse de chargement du site et de l’accessibilité
Ce site est fait avec:
- Le gestionnaire de dépendances Composer
- L’architecture WordPress de johnpbloch
- Gestion des mes assets (css, javascript, images statiques) avec ParcelJS
- Gestion de versioning avec Git
- WooCommerce
Ce fonctionnement me permet de pouvoir versionner facilement mon code sans devoir versionner la totalité du Core de WordPress (ce qui serait, très lourd, et de ce fait, peu viable). Il me permet également de pouvoir en 5 minutes de faire une nouvelle installation de mon WordPress sur un PC.
Pour la gestion dinamique du contenu des pages, j’utilise (sans usage de plugins):
- Custom Post Type
- Custom Taxonomies
Pour la gestion statique des contenus (éditables depuis le panneau d’administration) :
- ACF (avec acf-json pour faciliter la mise en production).
Ceci me permet d’avoir un dashboard simple et intuitif
Ce site est un site multilingue (francais-espagnol), qui sont mes 2 langues natales. Pour la gestion du multilingue je travaille avec le Plugin Polylang (certaines traductions minieures sont gérées directement depuis PHP)
Plugins utilisés en production:
- Advanced Custom Fields (ACF)
- WebP Express
- YaostSEO
- iThemeSecure
- Contact Form 7
- WooCommerce
- Variation Swatches for WooCommerce
Plugins utilisés en développement:
- Query Monitor
- Advanced Custom Fields: Theme Code
4. Screenshots
