April 27, 2018 — 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…)

Presentation Slides »

April 26, 2018 — 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

Presentation Slides »

April 26, 2018 — 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 !

Presentation Slides »

April 25, 2018 — 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

Presentation Slides »

April 25, 2018 — Vous vous doutez bien qu’un thème n’est pas accepté comme ça sur le répertoire officiel WordPress.org, pas vrai ? Oui, c’est pas si simple 🙂

Expert en analyse de sites web, Jean-Philippe Audit vous propose de vous faire entrer dans le monde de la revue de thème. C’est pour la bonne cause (WordPress.org) mais c’est aussi très utile pour prendre du recul par rapport à ses propres pratiques de développement ou pour étudier un thème avant de l’utiliser.

Que vous soyez un ou une futur·e auteur·e de thème WordPress ou un développeur·se confirmé·e de thèmes sur-mesure, Jean-Philippe vous présentera la méthodologie de mise en place d’une installation WordPress de « reviewer », le jeu de données destiné aux tests unitaires et toutes les extensions utiles à cette prestation : Theme Check, Debug Bar, Log Deprecated Notices, Theme Sniffer, Monster Widget, Pig Latin… et Tide qui va maintenant être implémenté de façon générale sur WordPress.org.

Monsieur Audit vous présentera des bonnes pratiques utiles pour contribuer à WordPress.org mais aussi idéales pour tester un thème – officiel ou premium – et être rapidement fixé sur sa qualité et son respect des règles de l’art. On parlera aussi des bonnes pratiques de qualité web au sens plus général, mais toujours dans une certaine austérité liée à l’exercice de l’audit, parce que bon « c’est que ça rigole pas ici hé ho » !

Presentation Slides »

April 25, 2018 — 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.

Presentation Slides »

April 24, 2018 — 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!

Presentation Slides »

March 29, 2018 — 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 !

Presentation Slides »

March 29, 2018 — Voici les différents points que je vous propose de passer en revue pour donner un maximum de chances à votre site WordPress de faire plaisir à Google.

1. La structure de WordPress
2. Un site mobile / AMP
3. Un certificat HTTPS
4. L’expérience utilisateur (« UX »)
5. Les 4 questions auxquelles il faut répondre en quelques secondes
6. Les méta-données
7. Les contenus
8. Le partage sur les réseaux sociaux
9. Le maillage interne
10. Les maillages externes

Presentation Slides »

March 29, 2018 — L’accessibilité numérique est une composante essentielle à prendre en compte dans tout projet web.
Mais comment s’y prendre ?
Comment intégrer les recommandations, sachant qu’elles doivent être prises en compte dès le début du projet ?
Comment l’introduire dans votre gestion de projet ?

Cette conférence sera l’occasion de vous proposer un processus permettant de réussir la prise en compte de l’accessibilité numérique dans un projet WordPress.

Presentation Slides »