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

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.

Quelques liens

• Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
• La première formation intégrale sur le FSE (Editeur de site).
• Nos meetups mensuel WP Paris.
• Notre association parisienne WP Paris (la refonte du site en FSE est en cours) qui représente WordPress à Paris.