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

WordPress :: Utiliser le glisser-déposer pour afficher vos articles

Publié le : 

Modifié le : 

Par : 

Dans ce tutoriel nous verrons comment changer en glisser-déposer l’ordre d’affichage des articles dans les archives de votre site WordPress. 

Ajout de l’attribut de page aux Articles

La première étape est d’ajouter un attribut de page au type de contenu articles (post en anglais) de notre site. Nous allons placer ce code dans une extension dédiée ou plus facilement dans le fichier de votre thème: functions.php.

//* Ajouter le support de page pour les articles
add_post_type_support( 'post', 'page-attributes' );

Cette fonction marcherait avec un autre type de contenu comme nous le verrons dans un autre tutoriel. Pour l’instant, cela s’applique aux articles seulement et une nouvelle métaboxes apparaît dans la barre latérale de vos articles.

Nouvelle métaboxe dans les articles de votre site WordPress

Changer l’ordre d’affichage dans le back-office

L’extension Simple Page Ordering va nous permettre de modifier en glisser-déposer les articles. Cet outil fonctionne avec les pages ou tout autre contenu ayant l’attribut page-attributes, comme nous avons vu précédemment.

Affichage dans le back-office

Ensuite, dans le back-office, pour avoir la possibilité de changer l’ordre, vous devrez filtrer les articles avec l’onglet Sort by Order (voir la capture d’écran qui suit). Sans ce tri, vous ne pourrez pas changer l’ordre. Celui-ci est conservé dans l’Attribut d’article. Si vous faites un tri par Titre ou Date, il ne sera pas perdu.

Changer l’ordre en glisser-déposer

Une fois le bon tri sélectionné, l’extension Simple Page Ordering vous permet de changer facilement l’ordre d’affichage des articles en glisser-déposer.

Changer l'ordre de vos articles WordPress en glissé déposé

Changer l’ordre d’affichage dans les modèles par défaut

Nous allons utiliser la fonction pre_get_posts qui permet de changer à la volée la requête faite dans la base de données. Ainsi, la boucle d’origine est préservée et nous modifions juste certains paramètres.

Modification de la requête

Pour changer l’ordre d’affichage des archives d’article (catégorie et étiquette dans mon cas), j’ajoute ce code dans le fichier functions.php de mon thème.

//* Changer ordre d'affichage dans les pages d'archives des articles
add_action( 'pre_get_posts', 'gn_post_archive_order' );
function gn_post_archive_order( $query ) {
	if ( $query->is_main_query() && !is_admin() && $query->is_category() || $query->is_tag() ) {
		$query->set( 'orderby', 'menu_order' );
		$query->set('order','ASC');
	}
}

Détail du code

  • Ajout du hook add_action sur pre_get_posts dans le fichier functions.php de votre thème
  • Création de la fonction associée, ici gn_post_archive_order qui va modifier la requête principale du modèle sélectionné
  • Création d’une condition multiple avec if pour isoler dans mon cas les category (Catégorie) et les tag (Étiquette)
  • Ajout des attributs qui vont être modifiés avec $query->set ….
  • Tous les paramètres modifiables sont ceux donnés dans l’article officiel du Codex pour WP Query

Code complet

À placer dans une extension personnelle ou plus simplement dans le fichier functions.php de votre thème. Voici le code complet à utiliser:

https://gist.github.com/gregoirenoyelle/21afa7a4d466bf9f77b6

Si le code ne s’affichait pas, le voir en ligne.

Résultat en ligne

Dans la capture qui suit, j’affiche l’archive de la catégorie NEWS et l’ordre du back-office est respecté.

Affichage du nouvel order d'article dans les archives WordPress

Note: Merci à Katia Berlioz de m’avoir donnée l’idée de ce tutoriel.