Créateur de thèmes WordPress :: Formateur :: Web Designer

Changer l’ordre en glissé-déposé pour les archives de contenus personnalisés en FSE

Publié le : 

Modifié le : 

Par : 

Dans ce tutoriel, nous allons explorer une technique pour optimiser l’affichage des archives de contenus personnalisés dans un environnement Full Site Editing (FSE) WordPress. Nous utiliserons dans l’exemple un type de contenu nommé Recettes, mais cette méthode est applicable à tout type de contenu.

Réglages préliminaires

Déclaration du contenu sur mesure

Lors de la création du contenu personnalisé Recettes (Custom Post Type), il est indispensable d’intégrer le support Attribut de page. Cela active la capacité de tri native de WordPress.

Pour notre démonstration, nous utiliserons l’extension Advanced Custom Fields pour déclarer notre contenu. Cette tâche peut également être réalisée via d’autres extensions ou par un développement « maison ».

Utilisation de Simple Page Ordering pour changer l’ordre facilement

Pour faciliter le processus de tri dans l’interface d’administration, nous utiliserons l’extension Simple Page Ordering. Une fois activée, cette extension ajoute un onglet Trier par ordre dans l’interface de gestion de votre contenu Recettes. Attention, cet onglet n’apparaît que si le support Attribut de page est activé.

Création du modèle d’archive

Sélection du modèle approprié pour les recettes

Dans la hiérarchie des modèles (template hierarchy), je pourrais choisir le modèle archive.html qui correspond à toutes les archives.

Ici, je préfère créer un modèle spécifique pour mon contenu Recette. Je vais le créer depuis le menu Éditeur de mon thème FSE basé sur des blocs. Au final, un fichier archive-recette.html sera ajouté à mon thème.

Éléments clés dans la construction du modèle

Je ne reviendrai pas sur la construction de tous les éléments du modèle. J’ai plusieurs tutoriels FSE sur le sujet.

Pour une archive, il est nécessaire d’ajouter le bloc Boucle de requête et pour que la fonction de tri fonctionne, il est important de garder le réglage Hériter la requête à partir du modèle actif.

Cependant, pour l’ordre, nous aurions besoin de l’option menu_order disponible dans l’objet WP Query et elle n’existe pas nativement dans le bloc natif. Je vous montre la fonction dans la partie qui suit.

Intégration de la fonctionnalité de tri

Création du fichier functions.php

La personnalisation de notre thème nécessite l’ajout d’une fonction spécifique dans le fichier functions.php, situé à la racine de notre thème.

Implémentation du hook pour modifier l’ordre

Le code suivant est à insérer dans votre fichier functions.php pour ajuster l’ordre d’affichage dans les archives de Recettes et pour certaines taxonomies associées :

// Changer l'ordre d'affichage dans la page recette et taxonomies
add_action( 'pre_get_posts', 'gn_recette_archive_filter' );
function gn_recette_archive_filter( $query ) {
    if ( $query->is_main_query() && !is_admin() && ($query->is_post_type_archive( 'recette' ) || $query->is_tax('difficulte')) ) {
        $query->set( 'orderby', 'menu_order' );
        $query->set('order', 'ASC');
    }
}

Ce fragment de code utilise le hook pre_get_posts pour ajuster dynamiquement la requête principale, en ciblant les archives de type Recette et la taxonomie Difficulté.

Conclusion et démonstration vidéo

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

Ordre sur mesure dans les archive de CPT d'un thème FSE

Rejoins Mes Ateliers Live

Pour aller plus loin et apprendre en temps réel, participe à mes ateliers live WordPress 100% Bloc. C’est une opportunité unique de parfaire tes compétences en WordPress et de poser directement tes questions.

Quelques liens

10% de réduction avec le code
GREGOIRE10
Votre site WordPress mérite un hébergement rapide et sécurisé. Comme moi, hébergez votre site sur faaaster.io !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.