Speakers: Grégoire Noyelle

  • 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.

  • Synchronisation CSS en Full Site Editing (FSE)

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    January 18, 2024 — Dans cette vidéo, je t’emmène dans les coulisses du Full Site Editing (FSE) de WordPress pour te montrer comment synchroniser le CSS entre le backend et le frontend. C’est un sujet crucial pour tout développeur WordPress souhaitant maîtriser le FSE.

    1. Fonctionnement des thèmes FSE pour le CSS
    On va commencer par comprendre pourquoi, dans FSE, le CSS ne fonctionne plus automatiquement comme dans les thèmes classiques. C’est un changement majeur, mais je vais t’expliquer pourquoi c’est en fait une bonne nouvelle.

    2. La bonne nouvelle du FSE
    Une fois bien configuré, le FSE rend le CSS transparent entre le backend et le frontend. Je te montre comment cette transparence peut te faire gagner un temps précieux et éviter bien des maux de tête.

    3. Ajout de fonctions dans le thème
    On va plonger dans le fichier functions.php pour ajouter deux hooks essentiels à la synchronisation du CSS. Je te guide étape par étape pour que tu puisses le faire toi-même.

    4. Résultat en direct
    Pour finir, je vais ajouter une classe simple dans le fichier style.css et te montrer le résultat en temps réel dans le backend et le frontend. Tu verras à quel point c’est efficace !

  • Choisir son modèle d’accueil dans un thème FSE

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    January 3, 2024 — Découvre les Modèles de Page d’Accueil dans WordPress FSE

    Aujourd’hui, on plonge dans le monde fascinant des modèles de page d’accueil avec WordPress Full Site Editing (FSE).

    ➡️ Le Modèle Automatique front-page.html

    Je te montre comment utiliser le modèle automatique front-page.html. Simple et efficace, ce modèle est un incontournable pour débuter.

    ➡️ Modèle pour l’Affichage de Tous les Articles

    On explore ensemble le modèle pour afficher tous tes articles. Idéal pour les blogs ou sites d’actualités, découvre comment il peut transformer l’apparence de ton site.

    ➡️ Pour et Contre: Modèle Sur Mesure vs Pages de Catégories

    Enfin, on pèse le pour et le contre entre utiliser un modèle sur mesure et la page des catégories. Quels sont les avantages et les inconvénients de chaque option ?

  • Live WordPress 100% Bloc 12 décembre 2023

    Live WordPress 100% BlocSpeaker: Grégoire Noyelle

    January 2, 2024 — 🚀 Replay du Live du 12 décembre: Les singles pour des contenus personnalisés dans un thème FSE

    Je partage avec toi 🎥 le replay de mon live sur la création de thèmes WordPress avec le Full Site Editing (FSE). Cette vidéo est pour toi, que tu sois freelance, en agence, ou simplement intéressé par la création WordPress.

    Au programme 📋 :

    Introduction à la création de contenu pour les recettes 🍲 – pour te démarquer.
    Comment ajouter des champs personnalisés 🔧 pour améliorer ton contenu.
    Navigation entre les recettes 🗂️ – pour une meilleure expérience utilisateur.
    Construction du modèle single pour les recettes 🏗️. Simple et efficace.
    Exploration des archives de Recettes 📚 – pour gérer ton contenu de manière optimale.

    Voici le sommaire de la vidéo:

    00:00 – Début du live
    01:24 – Présentation du contenu Recettes
    03:20 – Création du contenu Recettes
    04:17 – Champs personnalisés pour le contenu Recettes
    15:38 – Naviguer entre les recettes
    19:33 – Construction du modèle single Recettes
    24:23 – Présentation des archives de Recettes
    25:31 – Questions Réponses
    29:28 – Fin du live

  • Créer des Espacements Dynamiques dans un Thème FSE Basé sur des Blocs

    WordPress 100% Bloc ExpressSpeaker: Grégoire Noyelle

    December 19, 2023 — Aujourd’hui, je te propose un tuto incontournable pour maîtriser les espacements dynamiques dans les thèmes Full Site Editing (FSE) basés sur des blocs. Plus besoin de media queries ! On va tout décortiquer ensemble :

    Démonstration des Alignements Dynamiques : Je te montre comment créer des espacements réactifs sans media queries. Un game changer pour ton design !

    Bibliothèque d’Espacement dans theme.json : Apprends à construire ta propre bibliothèque d’espacements directement dans le fichier theme.json.

    Clamp() et Outils en Ligne : Utilise la fonction CSS clamp() pour des espacements fluides. Je te guide vers les meilleurs outils en ligne pour te faciliter la tâche.

    Espacements Dynamiques = Sites Plus Dynamiques : Comme les typographies fluides, les espacements dynamiques sont cruciaux pour l’adaptabilité de ton site sur différents appareils.