Attribuer une classe CSS automatique à une liste de Taxonomies sous WordPress


le 22 octobre 2012

WordPress

Attribuer une classe CSS automatique à une liste de Taxonomies sous WordPress

Il y a quelques temps, je cherchais une astuce pour lister les différentes custom taxonomies d’un custom post type sous Wordpress. Je souhaitais également attribuer automatiquement des classes CSS à chaque item de cette liste, et, histoire de compliquer l’affaire, que chacune corresponde exactement au titre de chaque custom taxonomie – type <li class=’edition’>Edition</li>. Autant vous dire que j’ai du fouiller intensément les archives de Google avant de trouver ma réponse sur ce site. Je vous montre donc rapidement l’astuce dans ce billet.

1 – Dans le fichier functions.php, ajoutez le code suivant :

// Ajoute des classes CSS aux custom taxonomies
function my_post_class( $classes ) {
    global $post;
    $terms = wp_get_object_terms( $post->ID, 'cat_portfolio' );// Remplacez 'cat_portfolio' par le nom de votre taxonomie
    foreach ( $terms as $person ) {
        $classes[] = '' . $person->slug;
    }
    return $classes;
}
add_filter( 'post_class', 'my_post_class' );

 

2 – Dans votre fichier template, ajouter le code suivant :

<?php
$taxonomy = 'cat_portfolio';// Remplacez 'cat_portfolio' par le nom de votre taxonomie
$tax_terms = get_terms($taxonomy);
?>
<ul>
<?php
foreach ($tax_terms as $tax_term) {
echo '<li>' . '<a href="#" ' . '>' . $tax_term->name.'</a></li>';//Ici, la classe CSS est attribuée à la balise a.
}
?>
</ul>

 

3 – Vous devriez obtenir une liste de type :

<ul>
<li class="edition"><a href="#">Édition</a></li>
<li class="formations"><a href="#">Formations</a></li>
<li class="redaction-correction"><href="#">Rédaction-correction</a></li>
<li class="webdesign"><a href="#">Webdesign</a></li>
</ul>


Ajouter un commentaire