Pour récupérer l’image de catégorie dans WordPress
L’extension “Category and Taxonomy Meta Fields” permet d’ajouter un champ supplémentaire lors de la création de catégorie : un texte une image etc. Dans cet exemple, un champ image intitulé “imagedecategorie” a été créé, et une image a déjà été associée à chaque catégorie. Passons à l’affichage de l’image.
Le code pour récupérer le lien URL de l’image est :
$image = wp_get_terms_meta($categorie_id, 'imagedecategorie' ,true);
Où “$categorie_id” est l’ID de la catégorie. Il faut donc indiquer cet ID.
Si tout se passe bien la variable “$image” contiendra le lien de l’image, soit l’équivalent de “http://monsite.fr/images/alimentation.jpg” par exemple.
1. Affichage de l’image dans la page catégorie
Pour afficher l’image de la catégorie sur la page de la catégorie il suffit de récupérer l’ID de la catégorie actuelle par exemple :
$categorie = get_queried_object(); //récupère des infos sur la catégorie affichée $categorie_id = $categorie->term_id; //sélectionne l'ID uniquement $image = wp_get_terms_meta($categorie_id, 'imagedecategorie' ,true);
2. Affichage de l’image dans la page d’un article
Si on veut afficher sur la page d’un article l’image de la catégorie qui est associée à cet article on doit d’abord récupérer l’ID de la catégorie associée à l’article :
$publication_id = get_the_ID(); //récupère l'ID de l'article $categorie_id = get_the_terms( $publication_id, 'category' )[0]->term_id; //récupère l'ID de la 1ère catégorie associée à l'article $image = wp_get_terms_meta($categorie_id, 'imagedecategorie' ,true);
On peut ensuite afficher cette image dans une page :
<?php echo '<img src="'.$image.'" />'; ?>
ou (équivalent)
<img src="<?php echo $image; ?>" />
Et pour afficher l’image en tant que “background” de bloc, on indique le lien de l’image directement dans le style de la balise du bloc.
Exemple pour le bloc suivant ayant un fond bleu :
<div style="background-image:url('https://monsite.fr/images/bleu.jpg');">
Contenu du bloc
</div>
Pour remplacer l’image de fond par notre lien d’image contenu dans $image on écrira :
<?php echo '<div style="background-image:url('.$image.');">'; ?>
Contenu du bloc
</div>
ou (équivalent)
<div style="background-image:url('<?php echo $image; ?>');">
Contenu du bloc
</div>
Css :
background-size:cover; background-repeat:no-repeat; background-position:center center;