Vous connaissez probablement le widget Catégories dans WordPress. Récemment, l'un de nos lecteurs nous a demandé s'il était possible d'afficher également les articles récents dans une liste déroulante. Dans cet article, nous vous montrerons comment afficher les articles récents sous forme de liste déroulante dans WordPress.
Pourquoi et qui a besoin des articles récents dans une liste déroulante ?
WordPress est livré avec un widget d'articles récents intégré que vous pouvez ajouter à n'importe quelle barre latérale ou zone prête pour les widgets.
Ce widget affiche simplement une liste des articles récents, et vous pouvez choisir le nombre d'articles que vous souhaitez afficher. Mais si vous souhaitez afficher plus de 5 à 10 articles, la liste prendra beaucoup de place dans votre barre latérale.
Certains utilisateurs de WordPress peuvent avoir besoin d'un moyen compact d'afficher les articles récents. Dans ce cas, l'utilisation de listes déroulantes ou de listes rétractables peut vous aider à gagner de la place.
Examinons quelques méthodes différentes pour afficher les articles récents sous forme de menu déroulant dans WordPress.
Afficher les articles récents de WordPress dans un menu déroulant simple (code manuel)
Cette méthode utilise la fonction intégrée wp_get_recent_posts. Tout ce que vous avez à faire est de copier et coller le code suivant dans le fichier functions.php de votre thème ou dans un plugin spécifique au site.
function wpb_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', 'wpb_recentposts_dropdown');
add_filter('widget_text','do_shortcode');
Vous pouvez maintenant utiliser le shortcode [rp_dropdown] dans vos articles, pages et widgets texte WordPress. Il ressemblera à ceci :
Ajout d'articles récents rétractables à l'aide d'un plugin
La méthode ci-dessus liste simplement vos publications récentes dans un menu déroulant. Une autre façon de gagner de la place est d'ajouter une liste déroulante de publications récentes qui s'étend lorsque les utilisateurs cliquent dessus.
La première chose à faire est d'installer et d'activer le plugin Collapse-O-Matic. Il fonctionne dès l'installation, et il n'y a aucun réglage à configurer.
Le plugin vous permet simplement d'afficher n'importe quoi dans un menu déroulant à l'aide d'un shortcode.
Avant d'utiliser ce plugin, nous avons besoin d'un moyen d'afficher facilement les publications récentes partout où nous le souhaitons. Ajoutez simplement ce code au fichier functions.php de votre thème ou à un plugin spécifique au site.
function wpb_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', 'wpb_recentposts');
add_filter('widget_text','do_shortcode');
Ce code vous permet simplement d'afficher une liste de publications récentes en utilisant le shortcode [recentposts].
Nous allons maintenant ajouter notre shortcode dans le shortcode Collapse-O-Matic pour créer une liste déroulante de publications récentes.
Ajoutez simplement le shortcode comme ceci :
[expand title="Publications récentes"][recentposts][/expand]
Vous pouvez ajouter ce shortcode dans un widget de texte, des publications ou des pages de votre site WordPress. Voici à quoi cela ressemblait sur notre site de test.
C'est tout, nous espérons que cet article vous a aidé à afficher les publications récentes sous forme de menu déroulant dans WordPress. Vous voudrez peut-être aussi consulter ces 6 conseils pour créer un calendrier éditorial percutant dans WordPress.
Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Mauro Vicariotto
Cher auteur,
il y a une faute de frappe à la ligne 2 de votre fonction wpb_recentposts_dropdown() :
ce devrait être " $string = … " au lieu de " $string .= … "
Support WPBeginner
.= et = ont des utilisations légèrement différentes. Dans ce cas d'utilisation, ce n'est pas une faute de frappe.
Admin
Yvonne Manders
J'ai fait une erreur et je l'ai résolue.
Support WPBeginner
Glad you were able to solve the issue
Admin
Yvonne Manders
Bonjour,
J'ai installé le collapse-o-mattic et collé le code dans le fichier functions.php.
Après cela, j'ai collé le shortcode [expand title=”Recent Posts”][recentposts][/expand] dans un textwidget, mais rien ne s'est passé.
Il me manque quelque chose ?
Cordialement, Yvonne
Support WPBeginner
Vous voudrez placer le shortcode dans l'éditeur de texte plutôt que dans l'éditeur visuel pour vous assurer que le style ne bloque pas le fonctionnement du shortcode.
Admin
Erika
La ligne 3 contient une erreur. L'option de fermeture manque son "/". Cela génère une option vide dans le menu.
Support WPBeginner
Thank you for letting us know, the code should be fixed now
Admin
Amjad
Bonjour. J'ai utilisé le code ci-dessus pour afficher tous mes articles dans une liste déroulante, mais ils ne sont pas triés. J'ai deux questions ici :
1. Comment puis-je trier les articles par titre ?
2. Comment puis-je afficher les articles d'une catégorie spécifique dans une liste déroulante au lieu d'afficher tous les articles ?
Support WPBeginner
Pour ce que vous semblez vouloir, vous devriez consulter notre autre tutoriel ici : https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Admin
Rolando
Bon article ! Comment peut-on le faire par une catégorie spécifique et pas seulement par toutes vos catégories ? De plus, peut-on le faire par ordre alphabétique ?
Farai Mugaviri
Merci beaucoup pour votre aide précieuse. Je voudrais aussi afficher les catégories dans une liste déroulante, si vous pouvez m'aider avec ça... Mais maintenant, si je mets à jour mon Wordpress, est-ce même possible ? J'ai vu quelque part qu'ils parlaient de défis lors de la mise à jour de Wordpress et du risque de perdre des données en codant en dur les fonctions PHP.
Robert
Excellent outil, merci pour cela !
Est-il possible de trier la sortie des articles dans la liste par ordre alphabétique ?
Merci d'avance pour votre réponse !
Cordialement,
Robert
Andre
Est-il possible d'afficher la liste déroulante des articles avec un bouton pour soumettre ?
‘function wpb_recentposts_dropdown() { $string .= ‘ Sélectionnez votre école’
$args = array( ‘numberposts’ => ‘5’, ‘post_status’ => ‘publish’ );
$recent_posts = wp_get_recent_posts($args); foreach( $recent_posts as $recent ){ $string .= ” . $recent[“post_title”].’ ‘; }
$string .= ‘ TROUVER UNE ÉCOLE MAINTENANT var urlmenu = document.getElementById( “submitschool” ); urlmenu.onclick = function() { window.open( this.options[ this.selectedIndex ].value, “_self” ); }; ‘;
return $string; } add_shortcode(‘rp_dropdown’, ‘wpb_recentposts_dropdown’); add_filter(‘widget_text’,’do_shortcode’);
Emily Johns
Très bon contenu !! Excellente lecture et facile à comprendre.
NG SHAIKH
C'est un excellent article. Les débutants comme moi peuvent comprendre la puissance de WordPress et de ses plugins grâce à de tels articles.
Je serais éclairé si certains articles étaient écrits pour afficher un message sur une page spécifique et non sur tous les articles et pages.
Cela aidera également les débutants si quelques articles sont écrits pour afficher un formulaire de saisie utilisateur qui peut être enregistré dans la base de données
Julie S
J'aime beaucoup le menu déroulant des articles récents. Comment puis-je contrôler la largeur de ce menu déroulant ? Il est par défaut trop long pour ma barre latérale.
Support WPBeginner
Essayez d'ajuster la largeur en utilisant CSS :
select#rp_dropdown { width:200px; }1-click Use in WordPress
Admin