Grégoire Noyelle

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

  • Votre Projet
  • Formations
  • Tutoriels
  • Liens
  • CV
  • Contact
Retour vers la page Tutoriels avec la liste de tous les tutos.
Pour rester informé, abonnez-vous à la newsletter

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

Mis à jour le 7 avril 2016 :: 7 commentaires

Autres tutoriels sur le sujet

  • Concevoir les sites de demain avec Grid Layout et WordPress
  • WordPress :: Ajout d’une image d’en-tête retina (HiDPI) pour votre site
  • WordPress :: Créer un widget Text Rotator avec ACF Pro et ACF Widgets
  • WordPress :: Créer un widget Slick Slider avec ACF Pro et ACF Widgets
  • WordPress :: Créer un widget avec ACF Pro et ACF Widgets
  • WordPress :: Utiliser les champs Repeater ACF
  • WordPress :: Utilisez le glissé-déposé pour afficher vos contenus personnalisés
  • WordPress :: Comment forcer l’activation d’Advanced Custom Fields (ACF)
  • WordPress :: Gestion optimisée de l’organisation des médias
  • WordPress :: Sauvegarder son site WordPress avec BackWPup

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:

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.

Partager :: les compteurs ont été enlevé 😉

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur LinkedIn(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Pocket(ouvre dans une nouvelle fenêtre)
  • Cliquer pour imprimer(ouvre dans une nouvelle fenêtre)

Catégorie(s) : Tutoriels, WordPress tutos Étiqueté : Back-office WordPress, intermédiaire, Tuto WordPress

A propos de l'auteur

Grégoire Noyelle, Créateur de Thèmes WordPress, Formateur spécialiste sur WordPress, WooCommerce, HTML et CSS (Grid Layout) dans son centre de Formation dédié au CMS WordPress. Suivez moi sur Twitter ou LinkedIn.
[En savoir plus]

Commentaires

  1. steflp a écrit

    5 mars 2016 à 11 h 10 min

    Hello
    Donc la ré-organisation des articles dans le back-office joue sur l’affichage dans le front ?

    Répondre
    • Grégoire Noyelle a écrit

      5 mars 2016 à 11 h 55 min

      Hello. Oui si tu utilises bien le hook pre_get_posts

      Répondre
  2. Aurélien Denis a écrit

    5 mars 2016 à 10 h 34 min

    Salut Grégoire,

    ta méthode suscite ma curiosité. Quelle est la différence avec l’extension Intuitive Custom Post Order ? Nous l’utilisons régulièrement et n’oblige pas à passer par du pre_get_posts. https://fr.wordpress.org/plugins/intuitive-custom-post-order/

    Répondre
    • Grégoire Noyelle a écrit

      5 mars 2016 à 12 h 07 min

      Salut Aurélien,
      Je ne connaissais pas l’extension. Merci.
      Dans ma méthode, j’ai plus de contrôle sur les types de modèle ou j’utilise le classement manuel avec pre_get_posts.
      Je vais ajouter l’extension dans l’article pour ceux qui ne voudraient pas coder 🙂

      Répondre
      • Aurélien Denis a écrit

        9 mars 2016 à 13 h 53 min

        De rien et merci de ta réponse !

        Répondre
  3. Soufiane a écrit

    5 mars 2016 à 14 h 48 min

    Bonjour et merci beaucoup pour l’astuce !

    Je trouve cela important surtout sur les sites d’actualité, afin de mettre en valeur quelques articles mais le plugin est beaucoup mieux car mettre cette fonctionnalité au niveau du thème rend le fonctionnement du site « plus stricte » ; on doit recopier le code au changement du thème par exemple =)

    Merci pour les lignes de code et pour le lien du plugin et à bientôt !
    Soufiane

    Répondre
    • Grégoire Noyelle a écrit

      5 mars 2016 à 17 h 56 min

      Bonjour. Merci pour ton retour. Je suis d’accord avec toi. Mais la fonction que je propose peut très facilement se transformer en plugin. Elle te permet des réglages sur mesure en fonction du type de page appelé.

      Répondre

Laisser un commentaire Annuler la réponse.

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

Article / Page: WordPress :: Utiliser le glisser-déposer pour afficher vos articles. Retour vers l'accueil

Tutoriels par Thèmes

  • Tous les Tutoriels
  • WordPress
  • Web Design
  • Photoshop
  • Mailchimp

Séries complètes de Tutoriels

  • Les bases de Grid Layout

Recherche dans les Tutoriels

S’abonnez à la newsletter

Pour recevoir des news, merci de remplir les 3 champs suivants:

Partenaires

Divi WordPress Theme

Genesis Framework for WordPress

WordPress Theme Editor

capture: Personnaliser son thème WordPress avec Genesis

WordPress est une matière première
Nous pouvons …

... créer

Commençons votre Projet

Toute création est la résultante d’une combinaison unique d’idées, d’outils adaptés à vos besoins. Nous pouvons réaliser un site WordPress, mettre en place une nouvelle formation, créer une interface.

[Quel est votre besoin]

... transmettre

Créons une formation

Formateur à l’école des Gobelins et à Apaxxdesigns, j’interviens également au sein des entreprises ou chez des particuliers sur plusieurs disciplines. Enfin, je mets à disposition de nombreuses ressources sur ce site.

[Voir les modules et ressources]

... échanger

Distinguons votre demande

Mon parcours multidisciplinaire me permet de m’adapter à des projets complexes. Nous pouvons prendre contact ou dans un premier temps mieux cerner votre projet.

[En savoir plus]

Derniers Tutoriels

Tester les emails WooCommerce avec Local de Flywheel

Dans ce tutoriel sur WordPress, nous verrons comment envoyer les emails WooCommerce avec … [Lire la suite...]

Ajouter un nouveau menu responsive dans Genesis

Dans ce tutoriel, nous verrons comment ajouter un nouveau menu responsive dans votre thème Genesis. … [Lire la suite...]

Placer les éléments avec Grid Layout CSS

Ce tutoriel est majeur, car nous verrons comment placer les éléments d’abord dans une grille simple … [Lire la suite...]

Unité de mesure avec Grid Layout CSS

Dans ce tutoriel, nous verrons comment utiliser les différentes unités de mesure avec Grid Layout. … [Lire la suite...]

Construction de grilles simples avec Grid Layout CSS

Nous verrons dans ce tutoriel comme construire une grille basique avec Grid Layout CSS. Pour rester … [Lire la suite...]

Déclaration et terminologie pour Grid Layout CSS

Voici le premier tutoriel d’une longue série sur Grid Layout CSS. Ce premier article a pour but de … [Lire la suite...]

Concevoir les sites de demain avec Grid Layout et WordPress

Dans cet article, je montrerai dans quelle mesure Grid Layout sera au coeur des sites Web de … [Lire la suite...]

Voir tous les tutoriels

Tutoriels populaires

WordPress :: Migrer son site du local vers le serveur en ligne

Dans ce tutoriel, nous verrons comment passer d’une version locale de site vers une version en … [Lire la suite...]

WordPress :: Créer un réseau de sites

Le réseau de site permet d'utiliser un seul site WordPress avec sa base de données pour générer … [Lire la suite...]

WordPress :: Gestion complète des Menus

Dans ce tutoriel nous verrons en détail comment créer et gérer les menus WordPress. Aussi nous les … [Lire la suite...]

WordPress :: Intégrer une galerie Photo

Dans ce tutoriel nous verrons comment fonctionne la galerie d’images WordPress. Toutes les étapes … [Lire la suite...]

WordPress :: Migrer son site avec le script d’Interconnectit

Dans ce tutoriel nous verrons comment migrer un site d'un emplacement A à un emplacement B. Pour les … [Lire la suite...]

Genesis :: introduction au framework de thème WordPress

Voici le premier volet d'une longue série sur le Framework de thème Genesis. Nous verrons des … [Lire la suite...]

WordPress :: Utilisation basique d’Advanced Custom Fields (ACF)

ACF : Advanced Custom Fields est un plug-in très puissant et très bien documenté. Il est créé par le … [Lire la suite...]

Voir tous les tutoriels

Social

  • Github
  • Linkedin
  • Flux RSS
  • Twitter

Formations actives

  • Toutes les formations
  • WordPress Niveau 1
  • WordPress Niveau 2
  • WordPress Niveau 3
  • WordPress Niveau 4
  • CSS3 Avancés
  • CSS3 Grid Layout
  • WooCommerce Niveau 1
  • WooCommerce Niveau 2

Centre de Formation WordPress

  • Votre Formateur WordPress
  • FAQ sur le centre de formation
  • Salle de formation
  • Témoignages sur le centre de formation
  • CGV du centre de formation
  • Charte de qualité du centre de formation
  • Réglement intérieur du Centre de formation

Liens Rapides

  • CV
  • Grégoire Noyelle
  • 9 perspectives
  • Partenaires
  • Membres Modules
  • Mentions légales
  • Me contacter

Copyright © 2018 :: Création: Grégoire Noyelle :: Base: WordPress , Genesis Framework :: Se connecter