Avez-vous déjà entendu parlé des outils tels que Gulp, Grunt, Webpack… ? Ils vous permettent d’accomplir des tâches en direct lors du développement de votre site, comme recharger le navigateur à chaque modification, synchroniser le site sur votre mobile, tablette et ordinateur afin de tester le responsive, compiler vos fichiers CSS et JS et les optimiser.
Un outil comme Gulp est facile à installer sur votre projet WordPress, même pour les allergiques de la ligne de commande, et vous apportera de nombreux avantages lors de votre développement :
- Compilation de vos styles (Sass, Less, Stylus)
- Compression de vos CSS et JS
- Live Reload
- Browser Sync
- AutoPrefixer
La présentation
La vidéo en HD
Webpack est le « bundler » de modules qui a remplacé Browserify dans le core de WordPress en 2017.
Mais comment l’utiliser dans son propre thème WordPress? Quels sont ses avantages par rapport aux outils de compilation comme Grunt et Gulp ?
Comment bénéficier du HMR (hot module replacement) et quel est la différence avec le live-reload ?
Qu’est ce que ça veut dire tree-shaking et chunking* ?
Comment est ce que ça peut aider à faire un thème avec un minimum de code et un maximum de couverture ? Comment utiliser Webpack pour aller plus loin en créant une base pour un thème React ou Vue ? Cet atelier répondra à ses questions pour débuter avec Webpack dans WordPress.
*secouage des arbres et découpage
La présentation
La vidéo en HD
Codebase vieillissant, extensions non maintenues, failles de sécurité en série, thème multi-usage et/ou usine à gaz, popularité attirant les robots en tout genre, lutte d’influence, etc.
Une session pour mieux comprendre les défauts de notre outil préféré, pour mieux argumenter sur son utilisation dans les projets des clients.
Mise en perspective avec les autres solutions open-source communautaires ou autres (d’éditeur par exemple) du marché.
La présentation
La vidéo en HD
Apprenez comment développer un thème WordPress simple en partant d’un template HTML/CSS.
L’objectif est de comprendre les fondamentaux et les bonnes pratiques de développement de thèmes WordPress :
- Faire apparaître son thème dans l’administration de WordPress
- Organiser les fichiers du thème de façon claire et lisible.
- Comment WordPress choisit les templates (modèles de pages) à utiliser
- Charger les ressources CSS/JS correctement
- Mettre en place la boucle de WordPress (responsable de l’affichage du contenu), les menus, les zones de widgets.
- Utiliser les templates tags de WordPress pour afficher les informations nécessaires, et créer ses propres templates tags.
- S’assurer que le thème est sécurisé, traduisible et accessible.
Si le temps le permet, on pourra plonger dans des sujets plus avancés, comme :
- Mettre en place les fonctionnalités comme l’image d’entête personnalisée, le logo personnalisé, etc…
- Comment intégrer le thème à l’outil de personnalisation de WordPress.
Le but est que les utilisateurs/développeurs voulant développer un thème repartent avec une méthode simple, pas à pas et une bonne appréhension des spécificités de développement de thème pour WordPress.
Le thème développé ne sera donc pas d’une complexité élevée, au contraire, mais permettra d’avoir la vue d’ensemble la plus complète possible du process et des bonnes pratiques de développement.
Le code source du prototype HTML/CSS ainsi que le thème à différentes étapes de son développement seront disponibles sur GitHub.
Prérequis pour tirer le maximum de l’atelier :
- Des connaissances de base en HTML/CSS/PHP. JavaScript pas forcément nécessaire.
- Un environnement de développement WordPress local (MAMP / Local by Flywheel / Bitnami, etc…)
- Un éditeur de code (VS Code, Atom, etc…)
La présentation
La vidéo en HD
Depuis deux ans, un nouvel acteur du monde mobile est arrivé : les progressive web apps (PWA). Ces applications mettent à profit les dernières évolutions des navigateurs internet (local storage, service workers, notifications web, JavaScript avancé…) pour proposer une expérience utilisateur qui se rapproche des applications mobiles (rapidité, mode hors ligne, animations, notifications…). Durant cet atelier, nous vous proposons d’explorer comment créer une PWA qui a WordPress comme back office. L’atelier s’appuiera sur une PWA réelle et des démonstrations de code. Ça sera l’occasion de peser le pour et le contre des PWA et d’échanger sur des cas d’utilisation. L’atelier est plutôt destiné aux développeurs ayant une bonne connaissance de WordPress et de JavaScript.
La présentation
La vidéo en HD
Le succès de WordPress est en grande partie liée à sa flexibilité grâce notamment à ses nombreuses extensions. Gutenberg, le nouvel éditeur de contenu de WordPress ne déroge pas à la règle, venez découvrir les différentes API permettant de modifier Gutenberg de long, en large et en travers.
- Créer des blocks,
- Supprimer des blocks,
- Modifier des blocks,
- Créer des gabarits (templates)
- Adapter votre thème
- Modifier les styles de l’éditeur et des blocks
- Ajouter des boutons, des panels à l’interface
- Manipuler les contenus de l’éditeur
Les possibilités de modification sont infinies, laissez libre cours à votre imagination !
La présentation
La vidéo en HD
Chaque choix que l’on fait sur WordPress aura un impact à court, moyen et long terme. C’est ce que l’on appelle la dette technique. Que l’on parle d’une extension, d’un thème, d’un hébergeur, d’un réglage ou encore de son propre code, tout peut impacter votre site dans le futur.
Temps de chargement, sécurité, maintenabilité, évolutions, référencement, ergonomie, tous ces sujets sont impactés par votre dette technique. Découvrez donc de quoi il s’agit et comment faire les bons choix !
La présentation
La vidéo en HD
Atelier en Anglais :
CSS Grid was released in 2017 and it changes everything; for the web and for the WordPress Community. It means that for the first time we get to think of our layout as two dimensional and fully responsive. CSS Grid is not another plugin hack or another bootstrap patch, it was the solution designers have been asking for. It’s here to stay and it’s the perfect time to learn it!
La présentation
La vidéo en HD
