Avec WordPress, la personnalisation d’un site peut aller très loin. Dans cet article, nous allons parler images, articles et catégories.
Voici l’état des lieux :
- Actuellement, ni les articles ni les images n’ont d’images liés.
- Dans le futur, un article pourra avoir une image liée (image à la une) ;
- Si ce n’est pas le cas, on utilisera l’image liée à la catégorie de l’article.
Comment allons nous faire ?
Toutes les modifications se font dans le fichier functions.php de votre thème WordPress.
Activer le support des images à la une dans le thème WordPress
On active les miniatures pour les articles.
1
| add_theme_support('post-thumbnails', array('post'));
|
On définit les tailles des miniatures
1
| set_post_thumbnail_size(100, 100);
|
Désormais, nous avons, pour les articles, la possibilité d’avoir une image à la une.
Lier une image à une catégorie
On crée un hook pour s’intégrer au formulaire d’édition de la catégorie dans le BO WordPress :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| function fnAction_edit_category_form_fields($poTag){
$arrCategoryImages = get_option('category_url_images');
if(is_array($arrCategoryImages) && array_key_exists($poTag->term_id, $arrCategoryImages)){
$psURL = $arrCategoryImages[$poTag->term_id] ;
} else {
$psURL = '';
}
?>
<table class="form-table">
<tbody>
<tr class="form-field form-required">
<th valign="top" scope="row">
<label for="category_url_image"><?php _e('Image'); ?></label>
</th>
<td>
<input id="category_url_image" name="category_url_image" type="text" value="<?php echo $psURL; ?>" />
<p class="description"><?php _e('Cette URL représenté l\'image liée à notre catégorie.'); ?></p>
</td>
</tr>
</tbody>
</table>
<?php
}
add_action('edit_category_form_fields', 'fnAction_edit_category_form_fields');
|
On crée un hook qui s’activera lors de la sauvegarde d’une catégorie :
1
2
3
4
5
6
7
8
| function fnAction_edited_category($piIDTerm){
if(isset($_POST['category_url_image'])){
$arrCategoryImages = get_option('category_url_images');
$arrCategoryImages[$piIDTerm] = $_POST['category_url_image'];
update_option('category_url_images', $arrCategoryImages);
}
}
add_action('edited_category', 'fnAction_edited_category');
|
Récupérer l’image à la une ou l’image de la catégorie
Pour cela, j’ai crée une fonction qui retourne d’abord si elle est présente l’image à la une sinon l’image liée à la catégorie.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function fnWP_getOGImage(){
if((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
$imageData = wp_get_attachment_image_src(get_post_thumbnail_id (get_the_ID()), 'thumbnail');
return $imageData[0];
} else {
$oCategory = get_the_category(get_the_ID());
if($oCategory){
$arrCategoryImages = get_option('category_url_images');
if(is_array($arrCategoryImages) && array_key_exists($oCategory[0]->term_id, $arrCategoryImages)){
return $arrCategoryImages[$oCategory[0]->term_id] ;
} else {
return '';
}
}
}
return '';
}
|
Désormais, à vous de jouer ! Dans mon cas, j’ai intégré cela dans mon header pour gérer les og:image de Facebook.
