skip to Main Content

Comment afficher les articles récents dans un menu déroulant sur WordPress

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 554.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Vous êtes probablement familier avec le widget des catégories qui affiche ces derniers dans une liste déroulante. Récemment, un abonné souhaitait mettre sur pied une liste similaire (dans le menu déroulant), mais cette fois-ci pour les articles.

Dans ce tutoriel, je vous montrerai comment afficher une liste déroulante d’article récents.

recentpostsdisplay

Pourquoi avez-vous besoin d’afficher une liste d’articles récents ?

WordPress propose un widget par défaut des articles récents. Ce widget affiche simplement les récents articles de votre blog, et le nombre d’articles maximum peut être choisi. Mais si vous souhaitez afficher plus de 5 à 10 articles, la liste sur votre sidebar deviendra plus longue.

Certains utilisateurs de WordPress ont besoin de rendre les choses plus compactes dans l’affichage de leurs articles récents. Dans ce cas, utiliser un menu avec une liste déroulante d’articles vous permettra de gagner de l’espace dans les sidebars.

Regardons les différentes façons dont vous pouvez ajouter vos articles récents dans une liste déroulante.

Comment ajouter les articles récents dans une menu déroulant simple

Cette méthode utilise la fonction internet « wp_get_recents_posts« . Tout ce que vous avez besoin de faire, c’est de copier et de coller le code suivant dans un fichier spécifique de votre thème ou dans un de vos plugins.

Créez Facilement votre blog avec SiteGround

SiteGround vous permet de créer votre blog WordPress en quelques clics seulements. Nom de domaine gratuit, hébergement sécurisé, SSL, transfert et bien plus encore... [ Recommandé ]

function recentposts_dropdown() { 
$string .= '<select id="rpdropdown">
			<option  value="" selected>Select a Post<option>';

$args = array( 'numberposts' => '5', 'post_status' => 'publish' );

$recent_posts = wp_get_recent_posts($args);
	foreach( $recent_posts as $recent ){
		$string .= '<option value="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</option> ';
	}

$string .= '</select>
			<script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
      		window.open( this.options[ this.selectedIndex ].value, "_self" );
 			};
			</script>';

return $string;
} 
add_shortcode('rp_dropdown', 'recentposts_dropdown');
add_filter('widget_text','do_shortcode');

Désormais, vous pouvez utiliser le shortcode « [rp_dropdown] » sur vos articles ou sur le widget texte de votre.

recentpostsmenu

Comment afficher les articles récents à l’aide d’un plugin

La méthode précédente vous permet tout simplement d’afficher une liste de vos articles récents sur votre blog WordPress. Une autre façon de le faire pour gagner de l’espace, c’est d’ajouter une liste dynamique dépliable.

Ce que vous devez faire dans ce cas c’est d’installer et d’activer le plugin Collapse-O-MaticCe plugin fonctionne sans configuration et il n’existe aucun réglage.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Ce plugin vous permet de tout afficher dans une liste déroulante en utilisant un shortcode.

Mais avant d’utiliser ce plugin, nous allons aimerons avoir la possibilité d’afficher les articles récents un peu partout où nous le souhaitons. Tout ce que vous avez à faire dans ce cas, c’est d’ajouter le code suivant soit dans le fichier functions.php de votre thème, soit dans un de vos plugins.

function recentposts() { 

$string .= '<ul>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
	foreach( $recent_posts as $recent ){
		$string .= '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a></li> ';
	}
$string .= '</ul>';
return $string;
} 
add_shortcode('recentposts', 'recentposts');
add_filter('widget_text','do_shortcode');

Cette portion de code vous permet d’ajouter les articles récents sur votre blog en utilisant le shortcode « [recentposts]« .

Maintenant nous allons allons ajouter notre shortcode dans le shortcode du plugin Collapsible-O-Matic, pour créer un menu dépliable. Voici un exemple concret :

[expand title= »Recent Posts »][recentposts][/expand]

N’oubliez pas de remplacer la valeur de l’attribut « title » du shortcode « expand », pour modifier le titre du widget. Vous aurez sensiblement une liste similaire à celle-ci :

recentposts-collapsible

Comme vous pouvez le remarquer, c’est aussi simplement que ça. J’espère que tout fonctionnera correctement sur votre blog. Vous aurez peut être besoin de faire une sauvegarde de votre blog avant cette opération.

C’est tout pour cet article, n’hésitez pas à le proposer à vos amis sur vos réseaux sociaux préférés et je vous souhaite bonnée année à tous !

Cet article comporte 4 commentaires
  1. Bonjour et merci pour ce tutoriel.
    Est-il possible, au lieu de lister les articles récents dans le menu déroulant, de lister des articles par catégorie, du plus récent au plus ancien ?
    Merci d’avance si vous avez une réponse !

      1. Merci de votre réponse, ce serait pour intégrer un menu déroulant des articles de même catégorie, en haut des articles (ou en bas) ; la position n’est pas réellement un problème pour moi, ce serait plutôt le code à intégrer.
        En fait, l’idée serait d’éditer le fichier single.php (celui des articles) afin d’intégrer ce code, et que ça génère automatiquement un menu déroulant de la même catégorie que l’article publié.
        je ne sais cependant pas si c’est faisable.

        Merci beaucoup !

Laisser un commentaire

Votre adresse de messagerie 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.

Back To Top
2 Partages
Partagez
Tweetez
Enregistrer2
WhatsApp