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.
February 16, 2024 — 👉 Étapes Clés :
1️⃣ Préparation : Activez ‘Attribut de page’ pour votre contenu ‘Recettes’. Permet le tri natif dans WordPress.
2️⃣ Extension : Installez ‘Simple Page Ordering’ pour un tri facile dans le back-office.
3️⃣ Création du Modèle : Créez un modèle ‘archive-recette.html’ pour vos recettes dans l’Éditeur de thème FSE.
4️⃣ Boucle de Requête : Ajoutez le bloc Boucle de requête avec ‘Hériter la requête à partir du modèle’ activé.
5️⃣ Personnalisation : Intégrez une fonction dans ‘functions.php’ pour personnaliser l’ordre d’affichage.
✅ Avantages :
🔄 Modifiez l’ordre des recettes depuis le back-office.
📚 Créez des archives personnalisées attrayantes.
🚀 Améliorez l’expérience utilisateur avec des archives organisées.
🎉 Exploitez pleinement votre site WordPress FSE ! Suivez ces étapes pour des archives de contenu personnalisé flexibles et ordonnées.
February 12, 2024 — Aujourd’hui on explore une fonctionnalité super pratique sur WordPress : le changement de l’ordre des éléments dans une boucle avec le glissé-déposé. C’est parfait pour ceux qui veulent plus de contrôle sur la présentation de leur contenu sans se compliquer la vie.
1️⃣ Introduction et démonstration : On démarre par te montrer ce qu’on va faire et pourquoi c’est cool pour la gestion de ton site WordPress.
2️⃣ Installation d’une extension : Je te guide pour installer une extension qui te permet de changer l’ordre des contenus facilement depuis le back-office.
3️⃣ Utilisation d’Advanced Query Loop : On passe à l’ajout d’options supplémentaires au bloc Boucle de requête grâce à Advanced Query Loop, ce qui te donne plus de souplesse dans la manière d’afficher tes contenus.
4️⃣ Création d’une boucle personnalisée : Je t’explique comment configurer une boucle qui utilise l’ordre du menu comme critère de tri, pour un site qui te ressemble encore plus.
5️⃣ Nouvelle approche des extensions pour WordPress : On conclut en parlant de cette extension comme exemple d’une nouvelle approche dans le développement WordPress. Au lieu d’ajouter des tonnes de nouveaux blocs, on mise sur l’enrichissement des blocs natifs, rendant l’expérience à la fois plus simple et plus puissante.
January 30, 2024 — 1️⃣ Les Parties Principales de la Boucle:
On commence par découvrir le bloc Boucle de requête, un outil essentiel de WordPress FSE. Je t’explique les données structurelles et dynamiques pour que tu comprennes mieux leur rôle.
2️⃣ Utiliser Plusieurs Boucles sur la Page d’Accueil:
Ensuite, je te montre comment choisir le type de contenu et utiliser les filtres de taxonomie. Cela va te permettre de personnaliser ta page à ta guise.
3️⃣ Le Non Héritage de la Boucle:
Pour finir, on parle de l’option à sélectionner pour éviter l’héritage de la boucle, et je te présente les options supplémentaires pour le bloc Boucle de requête. Je te fais aussi un comparatif avec l’option de lecture dans le menu Général.
January 26, 2024 — Aujourd’hui, on plonge dans le monde fascinant du Full Site Editing (FSE) de WordPress 🔥, et plus précisément, on va explorer le Bloc Boucle de Requête dans les modèles classiques. Tu es prêt ? Alors, c’est parti ! 🚀
1️⃣ Éléments Dynamiques:
D’abord, parlons des éléments dynamiques 💡. Ils sont le cœur battant de tes modèles. Je vais te montrer comment les utiliser pour afficher des contenus personnalisés qui changent dynamiquement.
2️⃣ Structure Statique:
Ensuite, on va examiner la structure statique 🏗️. C’est le squelette de ton modèle. Je te guiderai pour créer une structure robuste qui supporte tes éléments dynamiques.
3️⃣ Bien Distinguer les Deux:
Il est crucial de bien distinguer les éléments dynamiques de la structure statique 👀. Je vais te donner des astuces pour ne jamais les confondre.
4️⃣ Bloc de Thème:
Le Bloc de Thème 🎨, un outil puissant mais souvent sous-estimé. Je vais t’expliquer comment l’exploiter pour personnaliser tes modèles à l’extrême.
5️⃣ Construire:
Passons à la pratique ! Je vais construire un modèle avec toi, étape par étape, pour que tu puisses voir comment tout s’assemble 🛠️.
6️⃣ Template Hierarchy:
Enfin, nous allons parler de la hiérarchie des templates 📚. Comprendre ce concept est essentiel pour maîtriser le FSE.
January 22, 2024 — 1️⃣ Pourquoi cette Classe est Cruciale
Masquer un élément en CSS, ça semble simple, n’est-ce pas ? Mais, les techniques habituelles posent des défis en termes d’accessibilité, surtout pour les lecteurs d’écran. Je vais t’expliquer pourquoi c’est important et comment faire mieux.
2️⃣ Ajout de la Classe dans Ton Thème
On passe à la pratique. Je vais te montrer une classe CSS spéciale qui permet de masquer des éléments tout en les gardant accessibles. On va l’intégrer ensemble dans ton thème WordPress.
3️⃣ Application de la Classe dans l’Éditeur
Maintenant, voyons comment utiliser cette classe dans l’éditeur WordPress. On va sélectionner un bloc et appliquer notre classe CSS, étape par étape.
4️⃣ Démonstration en Direct
Pour finir, une petite démo en direct. Tu verras le résultat du masquage en back-end et en front-end. Tu vas voir, c’est simple et super efficace.