Créer des index, afficher des catégories
des bouts de code pour créer des index dédiés, présenter un arbre des catégories, pour les articles similaires ou un article au hasard
Mode d’emploi et précautions à prendre
ous êtes libre d’utiliser ces « bouts de code » sur votre site WordPress, de les adapter, de les transformer, de les partager. Certains éléments peuvent avoir été inspirés par des ressources découvertes sur des forums ou par l’intelligence artificielle ou des conseils. Leur insertion peut s’effectuer en utilisant une extension comme WP Code ou selon vos compétences et selon le type de code via l’éditeur de styles du site ou votre base.php.
Le site ne peut être tenu pour responsable de l’utilisation de ces « bouts de code » qui selon votre configuration ou les interactions avec d’autres éléments de code présents sur votre site pourraient engendrer des dysfonctionnements. Cette importation par copier-coller s’effectue sous votre responsabilité. Pour information le thème de ce site est basé sur Twenty Twenty-Five. Le CMS WordPress est à jour avec la dernière version disponible.
Ces bouts de code ont été créés pour enrichir une fonctionnalité du site sans devoir faire appel à une extension dédiée.
Pourquoi ces « bouts de code » ?
Le site est organisé en de nombreuses catégories et comporte de nombreux articles. En fonction des besoins il a été nécessaire de créer des index spécifiques. J’ai crée un arbre des catégories pour les présenter de façon organisée. J’ai également modifié le fil d’Ariane qui s’affiche au dessus de chaque article pour le simplifier. Je donne également le code qui permet d’afficher les articles similaires (vous les voyez en haut à droite – c’est par catégorie et mot clé) et enfin le code qui permet d’afficher un article au hasard pour inviter à découvrir les nombreuses ressources.
Je mets en lien les pages concernées pour que vous puissiez voir concrètement ce que cela donne.
J’utilise « vb » puisque c’est mon site, à vous de modifier selon votre volonté. De même dans chaque code par exemple les valeurs liées aux couleurs peuvent facilement être modifiées selon vos propres choix. Ces bouts de code proposent un principe à adapter selon votre site et votre thème.
Si vous voyez add_shortcode, il faudra placer le code court concerné à l’endroit souhaité dans la page ou l’article. Bien entendu choisissez votre propre code court à insérer !
Les bouts de code
à savoir
↬ Pour l’arbre des catégories, les deux codes vont ensemble : l’un en CSS définit le rendu, l’autre définit l’arbre des catégories.
Ce que ça donne dans les pages concernées :
En bas de la page Poésie vous avez les sous catégories et à droite les articles par sous-catégorie.
Même principe avec l’index des sous catégories et des articles pour le numérique.
1. Filtrer le fil d’Ariane
Type de Code : PHP
Copier-coller le code, le modifier si besoin
add_filter( 'slim_seo_breadcrumbs_links', function( $links ) {
// Seulement sur les articles
if ( ! is_singular( 'post' ) ) {
return $links;
}
// $links[0] = Accueil
// $links[1] = Page des articles (Les articles / Blog) ← on la supprime
// ensuite viennent les catégories + sous-catégories + titre
unset( $links[1] );
// On réindexe le tableau pour éviter les trous
$links = array_values( $links );
return $links;
} );
2 Rendu arbre des catégories
Type de Code : CSS
Copier-coller le code, le modifier si besoin
.vb-category-tree {
list-style: none;
margin: 0;
padding-left: 0;
}
.vb-category-tree .vb-category-tree {
margin-left: 1.5rem;
padding-left: 1.2rem;
border-left: 1px solid var(—vb-color, #ccc);
margin-top: 0.4rem;
}
.vb-category-item {
position: relative;
margin-bottom: 0.8rem;
}
.vb-category-tree .vb-category-tree .vb-category-item::before {
content: "";
position: absolute;
top: 0.7rem;
left: -1.2rem;
width: 1rem;
height: 1px;
background: var(—vb-color, #ccc);
}
.vb-category-row {
display: flex;
align-items: baseline;
gap: 1.2rem;
}
.vb-category-row a {
font-weight: 600;
text-decoration: none;
color: var(—vb-color, #333);
}
.vb-category-row a:hover {
text-decoration: underline;
}
.vb-category-count {
font-size: 0.85rem;
color: var(—vb-color, #777);
background: color-mix(in srgb, var(—vb-color, #ccc) 12%, white);
border: 1px solid var(—vb-color, #ccc);
border-radius: 999px;
padding: 0.05rem 0.55rem;
white-space: nowrap;
}
.vb-category-description {
margin: 0.2rem 0 0;
font-size: 0.9rem;
color: #555;
font-style: italic;
}
3. Définition de l’arbre des catégories
Type de code : PHP
Copier-coller le code, le modifier si besoin
function vb_category_tree_shortcode($atts) {
$atts = shortcode_atts([
'parent' => 0,
'color' => '',
], $atts);
// Palette de couleurs lisibles sur fond blanc (contraste suffisant)
$palette = [
'#8a3ffc', '#0f62fe', '#007d79', '#b28600',
'#c9401e', '#a6104f', '#005d5d', '#4b0082',
];
$categories = get_categories([
'hide_empty' => false,
'parent' => $atts['parent'],
'orderby' => 'name',
]);
if (empty($categories)) {
return '';
}
$output = '<ul class="vb-category-tree">';
$i = 0;
foreach ($categories as $cat) {
// Une couleur par grande catégorie (niveau 0), héritée par ses enfants
if ($atts['parent'] == 0) {
$color = $palette[$i % count($palette)];
} else {
$color = $atts['color'];
}
$style = $color ? ' style="—vb-color: ' . esc_attr($color) . ';"' : '';
$output .= '<li class="vb-category-item"' . $style . '>';
$output .= '<div class="vb-category-row">';
$output .= '<a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a>';
$output .= '<span class="vb-category-count">' . intval($cat->count) . '</span>';
$output .= '</div>';
if (!empty($cat->description)) {
$output .= '<p class="vb-category-description">' . esc_html($cat->description) . '</p>';
}
$output .= vb_category_tree_shortcode(['parent' => $cat->term_id, 'color' => $color]);
$output .= '</li>';
$i++;
}
$output .= '</ul>';
return $output;
}
add_shortcode('vb_category_tree', 'vb_category_tree_shortcode');
4 Un index pour les articles de la catégorie poésie
Type de Code : PHP
Copier-coller le code, le modifier si besoin
function vb_sous_categories_poesie_full() {
$parent = get_category_by_slug('poesie');
if (!$parent) return '<p>Catégorie "poesie" introuvable.</p>';
$cats = get_categories([
'parent' => $parent->term_id,
'hide_empty' => false,
]);
if (empty($cats)) return '<p>Aucune sous-catégorie trouvée.</p>';
$col1 = '<ul>';
foreach ($cats as $cat) {
$col1 .= '<li><a href="' . esc_url(get_category_link($cat->term_id)) . '">'
. esc_html($cat->name) . ' (' . $cat->count . ')</a></li>';
}
$col1 .= '</ul>';
$col2 = '<ul>';
foreach ($cats as $cat) {
$col2 .= '<li><a href="' . esc_url(get_category_link($cat->term_id)) . '">'
. esc_html($cat->name) . '</a>';
$posts = get_posts([
'category' => $cat->term_id,
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
]);
if ($posts) {
$col2 .= '<ul>';
foreach ($posts as $p) {
$col2 .= '<li><a href="' . esc_url(get_permalink($p)) . '">'
. esc_html(get_the_title($p)) . '</a></li>';
}
$col2 .= '</ul>';
}
$col2 .= '</li>';
}
$col2 .= '</ul>';
$html = '<div style="display:flex; gap:2rem; flex-wrap:wrap;">';
$html .= '<div style="flex:1; min-width:220px;"><h3>Sous-catégories</h3>' . $col1 . '</div>';
$html .= '<div style="flex:2; min-width:280px;"><h3>Sous-catégories et articles</h3>' . $col2 . '</div>';
$html .= '</div>';
return $html;
}
add_shortcode('categories_poesie_full', 'vb_sous_categories_poesie_full');
5 Un index pour les sous catégories de numérique
Type de code : PHP
Copier-coller le code, le modifier si besoin
function vb_sous_categories_numerique() {
$parent = get_category_by_slug('numerique');
if (!$parent) return '';
$cats = get_categories([
'parent' => $parent->term_id,
'hide_empty' => false,
]);
$html = '<ul>';
// La catégorie parente elle-même
$html .= '<li><a href="' . get_category_link($parent->term_id) . '">'
. $parent->name . ' (' . $parent->count . ')</a><ul>';
foreach ($cats as $cat) {
$html .= '<li><a href="' . get_category_link($cat->term_id) . '">'
. $cat->name . ' (' . $cat->count . ')</a></li>';
}
$html .= '</ul></li></ul>';
return $html;
}
add_shortcode('categories_numerique', 'vb_sous_categories_numerique');
et pour les articles par sous catégorie du numérique
function vb_index_numerique() {
$parent = get_category_by_slug('numerique');
if (!$parent) return '';
$html = '';
// Articles directement dans "numérique" sans sous-catégorie
$posts_parent = get_posts([
'category__in' => [$parent->term_id],
'category__not_in' => array_column(get_categories(['parent' => $parent->term_id]), 'term_id'),
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
]);
if ($posts_parent) {
$html .= '<h3><a href="' . get_category_link($parent->term_id) . '">'
. $parent->name . ' (' . count($posts_parent) . ')</a></h3><ul>';
foreach ($posts_parent as $post) {
$html .= '<li><a href="' . get_permalink($post->ID) . '">'
. get_the_title($post->ID) . '</a>'
. ' <small>' . get_the_date('d/m/Y', $post->ID) . '</small></li>';
}
$html .= '</ul>';
}
// Sous-catégories
$cats = get_categories([
'parent' => $parent->term_id,
'hide_empty' => false,
]);
foreach ($cats as $cat) {
$posts = get_posts([
'category' => $cat->term_id,
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
]);
if (!$posts) continue;
$html .= '<h3><a href="' . get_category_link($cat->term_id) . '">'
. $cat->name . ' (' . $cat->count . ')</a></h3><ul>';
foreach ($posts as $post) {
$html .= '<li><a href="' . get_permalink($post->ID) . '">'
. get_the_title($post->ID) . '</a>'
. ' <small>' . get_the_date('d/m/Y', $post->ID) . '</small></li>';
}
$html .= '</ul>';
}
return $html;
}
add_shortcode('index_numerique', 'vb_index_numerique');
6. Les articles similaires
Type de code : PHP
Copier-coller le code, le modifier si besoin
add_shortcode('vb_related', function () {
if (!is_singular()) return '';
$post_id = get_the_ID();
$tags = wp_get_post_tags($post_id, ['fields' => 'ids']);
if (empty($tags)) {
$cats = wp_get_post_categories($post_id);
$args = [
'category__in' => $cats,
'post__not_in' => [$post_id],
'posts_per_page' => 4,
'orderby' => 'rand',
];
} else {
$args = [
'tag__in' => $tags,
'post__not_in' => [$post_id],
'posts_per_page' => 4,
'orderby' => 'rand',
];
}
$query = new WP_Query($args);
if (!$query->have_posts()) return '';
$out = '<nav class="vb-related"><ul>';
while ($query->have_posts()) {
$query->the_post();
$out .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
wp_reset_postdata();
$out .= '</ul></nav>';
return $out;
});
7 Un article au hasard
Type de code : PHP
/**
* Shortcode pour afficher un lien vers un article aléatoire
* Usage : [article_aleatoire] ou [article_aleatoire texte="Découvrir un article"]
*/
function article_aleatoire_shortcode($atts) {
$atts = shortcode_atts(array(
'texte' => 'Article au hasard',
'classe' => 'btn-article-aleatoire'
), $atts);
$args = array(
'post_type' => 'post',
'posts_per_page' => 1,
'orderby' => 'rand',
'post_status' => 'publish'
);
$random_post = new WP_Query($args);
if ($random_post->have_posts()) {
$random_post->the_post();
$permalink = get_permalink();
$output = sprintf(
'<a href="%s" class="%s">%s</a>',
esc_url($permalink),
esc_attr($atts['classe']),
esc_html($atts['texte'])
);
wp_reset_postdata();
return $output;
}
return '';
}
add_shortcode('article_aleatoire', 'article_aleatoire_shortcode');
/**
* Shortcode pour afficher directement un article aléatoire complet
* Usage : [article_aleatoire_complet]
*/
function article_aleatoire_complet_shortcode($atts) {
$atts = shortcode_atts(array(
'bouton_recharger' => 'Charger un autre article',
'afficher_image' => 'oui',
'afficher_meta' => 'oui'
), $atts);
$args = array(
'post_type' => 'post',
'posts_per_page' => 1,
'orderby' => 'rand',
'post_status' => 'publish'
);
$random_post = new WP_Query($args);
if ($random_post->have_posts()) {
ob_start();
while ($random_post->have_posts()) {
$random_post->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('article-aleatoire-complet'); ?>>
<?php if ($atts['afficher_image'] === 'oui' && has_post_thumbnail()) : ?>
<div class="article-aleatoire-image">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<header class="article-aleatoire-header">
<h2 class="article-aleatoire-titre">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php if ($atts['afficher_meta'] === 'oui') : ?>
<div class="article-aleatoire-meta">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date(); ?>
</time>
<?php
$categories = get_the_category();
if ($categories) {
echo ' • ';
$cat_links = array();
foreach ($categories as $cat) {
$cat_links[] = '<a href="' . get_category_link($cat->term_id) . '">' . $cat->name . '</a>';
}
echo implode(', ', $cat_links);
}
?>
</div>
<?php endif; ?>
</header>
<div class="article-aleatoire-contenu">
<?php
global $wp_embed;
$content = get_the_content();
$content = apply_filters('the_content', $content);
$content = $wp_embed->autoembed($content);
echo $content;
?>
</div>
<footer class="article-aleatoire-footer">
<a href="<?php echo esc_url(get_permalink()); ?>" class="btn-voir-article">
Voir l'article complet
</a>
<a href="<?php echo esc_url(add_query_arg('refresh', time())); ?>" class="btn-recharger-article">
<?php echo esc_html($atts['bouton_recharger']); ?>
</a>
</footer>
</article>
<?php
}
wp_reset_postdata();
return ob_get_clean();
}
return '<p>Aucun article trouvé.</p>';
}
add_shortcode('article_aleatoire_complet', 'article_aleatoire_complet_shortcode');
/**
* Styles pour les articles aléatoires
*/
function article_aleatoire_styles() {
?>
<style>
/* Bouton lien simple */
.btn-article-aleatoire {
display: inline-block;
padding: 0.75em 1.5em;
background-color: #4a608c;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: opacity 0.2s;
}
.btn-article-aleatoire:hover {
opacity: 0.8;
}
/* Article aléatoire complet */
.article-aleatoire-complet {
max-width: 800px;
margin: 0 auto;
padding: 2em 0;
}
.article-aleatoire-image {
margin-bottom: 2em;
}
.article-aleatoire-image img {
width: 100%;
height: auto;
border-radius: 8px;
}
.article-aleatoire-header {
margin-bottom: 2em;
}
.article-aleatoire-titre {
font-size: 2em;
margin-bottom: 0.5em;
line-height: 1.2;
}
.article-aleatoire-titre a {
color: var(--wp--preset--color--contrast, #000);
text-decoration: none;
}
.article-aleatoire-titre a:hover {
opacity: 0.7;
}
.article-aleatoire-meta {
font-size: 0.9em;
color: var(--wp--preset--color--contrast-2, #666);
}
.article-aleatoire-meta a {
color: inherit;
text-decoration: none;
}
.article-aleatoire-meta a:hover {
text-decoration: underline;
}
.article-aleatoire-contenu {
margin-bottom: 2em;
line-height: 1.6;
}
.article-aleatoire-footer {
display: flex;
gap: 1em;
flex-wrap: wrap;
padding-top: 2em;
border-top: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}
.btn-voir-article,
.btn-recharger-article {
display: inline-block;
padding: 0.75em 1.5em;
background-color: #4a608c;
color: #fff;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: opacity 0.2s;
font-family: inherit;
}
.btn-voir-article:hover,
.btn-recharger-article:hover {
opacity: 0.8;
}
.btn-recharger-article {
background-color: #5a7099;
}
@media (max-width: 768px) {
.article-aleatoire-complet {
padding: 1em;
}
.article-aleatoire-titre {
font-size: 1.5em;
}
.article-aleatoire-footer {
flex-direction: column;
}
.btn-voir-article,
.btn-recharger-article {
width: 100%;
text-align: center;
}
}
</style>
<?php
}
add_action('wp_head', 'article_aleatoire_styles');Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.