Language: French/Français

  • Transformez WordPress avec ACF : Contenu personnalisé de A à Z

    WordPress Meetup Paris 2024Speaker: Grégoire Noyelle

    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.

  • Réinvente ton design system : L’art des compositions dynamiques dans WordPress

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

  • Découvre la Règle magique de Grid Layout pour transformer ton thème WordPress FSE

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

  • Live WordPress 100% Bloc 23 janvier 2024

    Live WordPress 100% BlocSpeaker: Grégoire Noyelle

    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

  • Utiliser ChatGPT pour créer tes palettes de couleurs sur mesure dans l’éditeur de site (FSE)

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

  • Réorganiser les archives de contenus personnalisés avec le glissé-déposé dans un thème WordPress FSE

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

  • L’Art du Glissé-Déposé pour tes Boucles de Contenu sur mesure dans tes pages WordPress (FSE)

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

  • Créer des Boucles de Requête Multiples l’éditeur de site WordPress (FSE)

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

  • Le Bloc Boucle de Requête dans les modèles classiques de l’Éditeur de Site WordPress (FSE)

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.

    Presentation Slides »

  • Création d’une Classe CSS pour le Masquage Accessible

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    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.