December 4, 2024 — Dans cette vidéo, je te montre comment intégrer facilement des polices variables dans un thème FSE (Full Site Editing) sous WordPress.

1️⃣ Introduction – Découvre le sujet et les avantages des polices variables. ✨
2️⃣ Présentation – Petit tour rapide des outils qu’on va utiliser. 🛠️
3️⃣ Menu éditeur – On navigue dans l’éditeur FSE. 📋
4️⃣ Nouveau menu pour gérer les polices – Je passe en revue le nouveau menu depuis 6.5. 🖋️
5️⃣ Réglages du menu et polices Google – Paramètre les polices directement dans le menu. ⚙️
6️⃣ Télécharger la police sur Google Fonts – Trouve la police parfaite ! 📥
7️⃣ Sélection des fichiers à garder – Fais le tri pour garder l’essentiel. 📂
8️⃣ Convertir en WOFF2 – Optimise tes fichiers de police. 🔄
9️⃣ Charger dans mon site les polices variables – Intégrons-les directement. 🌐
🔟 Polices déjà en place dans mon thème – Faisons le point sur ce qui est déjà là. 🖌️
1️⃣1️⃣ Intégration de la nouvelle police dans mon thème – Implémentation dans le thème. ✍️
1️⃣2️⃣ Démonstration dans mon thème – Voyons le résultat final ensemble ! 🎬
1️⃣3️⃣ Réglages et fichiers ajoutés dans le code – Quelques ajustements dans le code. 💻
1️⃣4️⃣ Conclusion – Recap et astuces finales. 🎯

August 19, 2024 — Dans cette vidéo, on va parler des variations de styles de bloc, une fonctionnalité très intéressante introduite avec WordPress 6.6. 🚀
Voici ce qu’on va voir ensemble :
1️⃣ Introduction
2️⃣ Présentation des variations de styles de bloc
3️⃣ Présentation du projet qu’on va réaliser
4️⃣ Application de la cascade CSS pour les styles
5️⃣ Génération des classes CSS en front
6️⃣ Construction du style global pour notre thème
7️⃣ Création de la variable de bloc
8️⃣ Utilisation des variations avec des compositions synchronisées
9️⃣ Conclusion et récapitulatif des points clés

July 1, 2024 — 🎥 Vidéo qui montrer comment construire la fonction originale:
https://wordpress.tv/2024/06/21/injecter-une-fonction-php-complexe-dans-un-bloc-paragraphe-wordpress-en-utilisant-le-block-binding/

🌀 Pour accéder à la page des ressources de cette vidéo, une simple inscription suffit. Clique vite sur le lien pour t’inscrire et recevoir la page de ressources: https://www.gregoirenoyelle.com/ressources-fse-wordpress/

Dans cette vidéo, nous allons explorer l’utilisation des transients dans une navigation sur mesure avec l’éditeur de site (FSE) de WordPress. Voici les grandes parties que nous allons couvrir :
1️⃣ Présentation du projet : Nous commencerons par une introduction au projet avec un contenu et une taxonomie sur mesure. Tu découvriras comment structurer ton site pour une navigation optimale.

2️⃣ Fonction pour afficher la navigation : Nous verrons comment créer une fonction pour naviguer entre les articles de ce contenu. Cela te permettra de rendre la navigation plus intuitive pour les utilisateurs.

3️⃣ Paramètres avancés de la boucle : Nous optimiserons les performances en ajustant les paramètres de la boucle. Une navigation fluide et rapide est essentielle pour une bonne expérience utilisateur.

4️⃣ Création de la clé du transient : Nous apprendrons à créer une clé de transient unique. Cette étape est cruciale pour gérer efficacement les données temporaires.

5️⃣ Présentation du transient : Une explication détaillée de ce qu’est un transient et comment il fonctionne. Tu comprendras pourquoi et comment les utiliser pour améliorer les performances de ton site.

6️⃣ Création du transient : Nous mettrons en place notre premier transient. Tu verras comment stocker temporairement des données pour accélérer le chargement des pages.

7️⃣ Visualisation des transients : Nous verrons comment visualiser les transients dans la base de données. Cela te permettra de vérifier que tout fonctionne correctement.

8️⃣ Supprimer tous les transients : Nous apprendrons à supprimer tous les transients. Une étape importante pour maintenir ton site propre et performant.

9️⃣ Création de la page d’option : Nous créerons une page d’option pour gérer la suppression des transients. Tu pourras ainsi offrir une interface utilisateur pour cette tâche.

🔟 Affichage des transients dans la base de données : Nous examinerons comment les transients sont stockés dans la base de données. Une bonne compréhension de cette partie est essentielle pour le débogage et l’optimisation.

1️⃣ 1️⃣ Résultats de la fonction de suppression : Nous vérifierons les résultats de notre fonction de suppression des transients. Tu verras comment s’assurer que les transients sont bien supprimés.

1️⃣ 2️⃣ Conclusion : Nous conclurons sur l’utilisation des fonctions PHP complexes avec l’éditeur de site (FSE). Tu auras une vue d’ensemble sur l’intégration de ces techniques avancées dans ton projet WordPress.

June 21, 2024 — 🌀 Pour accéder à la page des ressources de cette vidéo, une simple inscription suffit. Clique vite sur le lien pour t’inscrire et recevoir la page de ressources: https://www.gregoirenoyelle.com/ressources-fse-wordpress/

Dans cette vidéo, je vais te montrer comment injecter une fonction PHP complexe dans un bloc paragraphe WordPress en utilisant le block binding. 🚀

Voici les grandes parties que nous allons couvrir :
1️⃣ Présentation du projet avec un contenu sur mesure Portfolio : Le contenu Portfolio est déjà créé. Nous allons voir comment il est structuré et comment il peut être utilisé pour mettre en valeur tes projets de manière professionnelle.
2️⃣ Comment classer ses portfolios : Découvre les différentes méthodes pour organiser tes portfolios. Nous aborderons les catégories, les tags et d’autres taxonomies pour une gestion optimale de tes projets.
3️⃣ Navigation entre les projets en restant dans la taxonomie : Apprends à configurer la navigation pour que les utilisateurs puissent facilement passer d’un projet à un autre tout en restant dans la même catégorie ou tag.
4️⃣ Imposer un seul terme d’une taxonomie : Je vais t’expliquer comment restreindre l’affichage des projets à un seul terme d’une taxonomie spécifique, ce qui peut être utile pour des filtres ou des vues spécifiques.
5️⃣ Imposer le menu order dans les archives : Découvre comment forcer l’ordre d’affichage des projets dans les archives en utilisant le menu order, pour que tes projets apparaissent dans l’ordre que tu souhaites.
6️⃣ Navigation dans le modèle Single Portfolio : Apprends à configurer la navigation dans le modèle de page unique de ton portfolio pour une expérience utilisateur fluide et intuitive.
7️⃣ Explication de la fonction principale : Je vais détailler la fonction PHP complexe que nous allons injecter. Nous verrons comment elle est construite et comment elle interagit avec WordPress.
8️⃣ Ajout du block binding en appelant la fonction : Je te montrerai comment ajouter le block binding pour appeler notre fonction PHP dans un bloc paragraphe, en utilisant les bonnes pratiques de WordPress.
9️⃣ Visualisation du binding dans le modèle : Enfin, nous verrons ensemble le résultat de notre binding dans le modèle. Nous vérifierons que tout fonctionne correctement et que la fonction PHP est bien intégrée.

🎥 Plan de la vidéo

00:00 – Introduction
01:13 – Présentation du projet
01:35 – Classer ses portfolios
02:19 – Navigation entre les projets
02:41 – Imposer un seul terme d’une taxonomie
03:06 – Imposer le menu order dans les archives
04:33 – Navigation dans le modèle Single Portfolio
05:13 – Explication de la fonction principale
09:07 – Ajout du block binding
11:13 – Visualisation du binding dans le modèle
11:38 – Conclusion

June 9, 2024 — Dans cette vidéo, je vais te montrer comment j’utilise les classes contextuelles pour changer l’affichage de mon site WordPress FSE en fonction du terme choisi. Voici les grandes parties que nous allons aborder :
1️⃣ Utilisation des classes contextuelles : Je vais t’expliquer comment j’utilise les classes contextuelles pour modifier l’affichage du site en fonction du terme sélectionné.
2️⃣ Variables de couleurs : Découvre comment j’utilise les variables de couleurs générées par ma palette de couleur ajoutée au fichier theme.json.
3️⃣ Réglage de la taxonomie sur mesure : Un réglage important pour éviter que plusieurs termes soient choisis dans ta taxonomie sur mesure.
4️⃣ Création de la classe liée au terme : Je vais te montrer comment créer une classe liée au terme dans les modèles single avec un hook dédié, afin de mutualiser les CSS avec la classe automatique ajoutée aux modèles d’archive.
5️⃣ Application des CSS : Enfin, je t’expliquerai comment appliquer les CSS en utilisant les variables automatiques, toujours dans l’idée de mutualiser au maximum.
N’oublie pas de liker 👍, commenter 💬 et t’abonner 🔔 pour ne rien manquer !

April 6, 2024 — Aujourd’hui, on explore ensemble le concept du Full Site Editing (FSE) dans WordPress pour te montrer comment créer du contenu personnalisé. Si tu cherches à offrir une expérience unique et sur mesure à tes clients, cette vidéo est pour toi.

1️⃣ **Qu’est-ce qu’un contenu personnalisé dans WordPress?** On va commencer par comprendre ce que cela signifie vraiment et pourquoi c’est un atout majeur pour ton site.

2️⃣ **L’importance des contenus personnalisés.** Ensuite, on discute de comment ces contenus peuvent transformer un site standard en une solution parfaitement adaptée aux besoins spécifiques de chaque client.

3️⃣ **Créer un contenu personnalisé avec l’extension ACF.** Je te guide à travers le processus d’utilisation d’Advanced Custom Fields pour créer des contenus qui se démarquent.

4️⃣ **Ajouter un modèle d’archive pour ce contenu.** Pour finir, je te montre comment mettre en place un modèle d’archive qui valorise tes contenus personnalisés.

March 20, 2024 — 1️⃣ Pré-requis avant de commencer:

Assure-toi d’avoir WordPress 6.5 installé pour profiter pleinement de cette expérience.
Active l’extension Gutenberg pour débloquer toutes les fonctionnalités avancées.

2️⃣ Créer une composition synchronisée:

Commence par ajouter du contenu par défaut; c’est ton canevas de départ.
Édite la composition originale pour lui donner vie et la personnaliser à ta guise.
Active la surcharge sur les blocs qui le supportent (titre, texte, images) pour une personnalisation poussée.

3️⃣ Ajouter et éditer une composition dynamique:

Édite le contenu dynamique pour qu’il reflète ton message unique.
N’hésite pas à réinitialiser le contenu d’origine si nécessaire.
Modifie le design de la composition; sois créatif, le contenu dynamique reste intact !
4️⃣ Opportunités apportées par ce type de composition:

Profite d’un renforcement de ton design system, essentiel pour une identité visuelle cohérente.
La maintenance est grandement facilitée, optimisant ainsi les designs sur mesure.

March 14, 2024 — 1️⃣ Synchronisation des CSS : ici, le CSS est déjà synchronisé entre le back et le front.

2️⃣ Construction de la structure : On crée notre structure en utilisant des blocs “Groupes”. Le principal a une classe spécifique. Cela va structurer notre contenu de manière organisée et modulable.

3️⃣ Déclaration dans theme.json : On se penche sur le fichier theme.json pour y déclarer nos bibliothèques. C’est le coeur de notre personnalisation.

4️⃣ Application des valeurs dynamiques : On adapte les valeurs de nos bibliothèques pour définir les propriétés CSS, permettant une personnalisation précise et un contrôle optimal de notre design. Autre exemple: Créer des Espacements Dynamiques dans un Thème FSE Basé sur des Blocs – YouTube : https://www.youtube.com/watch?v=KzsjWorTLHI&t=11s

5️⃣ Intégration de Grid Layout : Enfin, on intègre la règle de Grid Layout, apportant structure et flexibilité à notre mise en page, pour un rendu professionnel et adaptatif.

March 12, 2024 — Dans ce replay du live, qui est le dernier de cette longue série, je te montre comment manier les archives des Custom Post Types. Voici le plan détaillé.

00:00 – Introduction
01:12 – Ajouter l’archive des CPT dans le menu
02:05 – Le modèle d’archive pour le CPT dans la hiérarchie
03:16 – Le fichier archive dans le thème
04:14 – Création du modèle pour l’archive du CPT
06:56 – Mélange du structurel et du dynamique
07:51 – Les réglages de la boucle
14:43 – Enregistrer l’archive des CPT dans le thème
16:54 – Créer le modèle pour les Taxonomies sur mesure
19:25 – Mutualiser les modèles d’archive
26:42 – Questions / Réponses
27:54 – Déclaration des taxonomie
29:05 – Présentation d’Advanced Query Loop
30:19 – Le nouvel ecosystème des blocs

February 26, 2024 — Aujourd’hui, nous allons nous concentrer sur la personnalisation de ton thème WordPress avec FSE (Full Site Editing) en exploitant judicieusement les couleurs.

1️⃣ Extraire les couleurs de ton logo avec Adobe Color
Nous verrons comment identifier les couleurs principales de ton logo pour créer une harmonie visuelle sur ton site. Pour cela, Adobe Color sera notre outil de choix.

2️⃣ Préparation du prompt pour une palette personnalisée
Ensemble, nous préparerons un prompt, en incluant les couleurs extraites, pour générer une palette qui s’harmonise avec les blocs FSE de ton thème WordPress.

3️⃣ Interagir avec ChatGPT pour obtenir le code
Je t’expliquerai comment dialoguer avec ChatGPT pour recevoir le code adapté à intégrer directement dans ton site.

4️⃣ Intégration du code dans theme.json
Je te guiderai pour ajouter le code dans le fichier theme.json, une étape cruciale pour appliquer ta nouvelle palette de couleurs à ton thème.

5️⃣ Demande à ChatGPT pour une palette de couleurs pour le bloc paragraphe
Pour conclure, nous demanderons à ChatGPT de nous fournir une palette spécifique pour le bloc paragraphe, pour une cohérence visuelle complète.