Afficher les sous catégories avec une image

Voici une fonction pour afficher sur une page catégorie, d’abord les sous catégories avec  leur thumbnail, plutot que directement tous les articles liés à cette catégorie.

<?php $uploads = wp_upload_dir(); $upload_path = $uploads['url']; global $ancestor; $childcats = get_categories('child_of=' . $cat . '&hide_empty=1'); foreach ($childcats as $childcat) { $catdesc = $childcat->category_description;
    $catname = $childcat->cat_name;
    if (cat_is_ancestor_of($ancestor, $childcat->cat_ID) == false) {
        echo '
<br />
<div class="sub-block" id='. $catname.'"><a href="' . get_category_link($childcat) . '" title="' . strip_tags($catdesc) . '">
            <img class="sub-img" src="' . $upload_path . '/' . $catname . '.jpg" alt="' . $childcat->cat_name . '" class="front-img" width="250" /></a>

<br />
<div class="inner">
<br />
<h2 class="category-image-title">' . $catname . '</h2>
<p>

            
        <span class="category-image-description">' . $catdesc . '</span></div>
<p>
</div>
<p>
';

        $ancestor = $childcat->cat_ID;
    }
}
?>

Voici une page d’exemple ou j’ai appliqué ce code:

Asie virtual v2

je suis sur une page: category/asie et je vois bien mes sous catégories avec leur images respectives.

Une alternative avec le dossier image du thème

Cette façon de faire a un principal inconvénient c’est qu’il est ensuite difficile de retrouver ses images parmi tous les dossiers du folder « upload ».De manière plus pratique on peut cibler directement le dossier image du thème, au même niveau que le dossier js ou css par exemple, et aller chercher les images directement dans ce dossier.Ainsi on le regroupe toutes au même endroits et c’est plus simple de s’y retrouver .Voici un exemple de code, vraiment pas propre, mais qui montre comment on peut cibler le dossier image et ainsi  attribuer des images à nos catégories.Le principe ici est le même, on nomme nos images exactement comme nos catégories

<?php   
if (is_category(array('votre_categorie_1','votre_categorie_2','etc...'))):;?>
<?php    $uploads = get_template_directory_uri().'/img';

global $ancestor;
$childcats = get_categories('child_of=' . $cat . '');
foreach ($childcats as $childcat) {
$catdesc = $childcat->category_description;
$catname = $childcat->cat_name;
if (cat_is_ancestor_of($ancestor, $childcat->cat_ID) == false) {
echo '<div class="sub-block" id="' . $catname . '">
<a href="' . get_category_link($childcat) . '" title="' . strip_tags($catdesc) . '"><br/>
<img class="sub-img" src="' . $uploads . '/' . $catname . '.jpg" alt="' . $childcat->cat_name . '" class="front-img" width="759" height:"506" />
</a>
<div class="inner" >
<h2 class="category-image-title">' . $catname . '</h2>
<br/><span class="category-image-description">' . $catdesc . '</span></div></div>';
$ancestor = $childcat->cat_ID;
}
}
?>
<?php else: ?>
<?php 
 etc.....

Ce n’est clairement pas le meilleur système, on pourrait plutot rajouter un champ input dans la page d’édition de la catégorie pour y mettre un url par exemple , le mieux étant d’intégrer directement dans la page d’édition de la catégorie un uploader de média, comme le font les plugins dédiés.

La solution idéale est d’utiliser le plugin ACF, avec lequel on peut très facilement arriver au même résultat.Voici le tuto

 

Mis à jour le Par Copier coller | Dans wordpress