Comment créer les catégories et étiquettes pour les photos sur WordPress
Il arrive souvent que dans un projet web, on souhaite un classement par catégories et les étiquettes pour les photos. En effet, dans de nombreux cas de figures, nous avons dû créer des galléries de photos que l’on groupait par catégories. Dans cet article, nous allons vous expliquer comment ajouter l’option pour créer les catégories et les étiquettes pour vos photos sur WordPress. Vous pouvez ensuite utiliser vos connaissances en PHP pour faire la sélection pour l’afficher à vos utilisateurs.
Comment procéder?
Pour créer des catégories et des étiquettes pour les photos sur WordPress, vous pouvez utiliser des taxonomies personnalisées ou la catégorie par défaut. Pour cela, vous avez le choix entre l’utilisation d’une extension WordPress ou la programmation personnalisée. Par exemple, nous penchons plus pour le développement personnalisé dans la mesure où cela nous évite de faire face aux contraintes des plugins. Néanmoins, nous vous présentons ci-dessous les deux options.
Création des catégories et les étiquettes pour les photos sur WordPress sans plugin
Voici un guide étape par étape pour créer des catégories et des étiquettes pour vos photos :
1- Créez les taxonomies personnalisées pour les catégories et étiquettes
a. Dans le tableau de bord WordPress, allez dans « Apparence » > « Éditeur de thèmes ».
b. Pour créer une nouvelle taxonomie personnalisée pour les catégories de photos, cliquez sur « functions.php » pour ouvrir le fichier et ajouter le code suivant:
<?php
function create_photo_categories_taxonomy() {
$labels = array(
'name' => _x('Catégories de photos', 'taxonomy general name'),
'singular_name' => _x('Catégorie de photo', 'taxonomy singular name'),
'search_items' => __('Chercher des catégories de photos'),
'all_items' => __('Toutes les catégories de photos'),
'parent_item' => __('Catégorie parente'),
'parent_item_colon' => __('Catégorie parente:'),
'edit_item' => __('Modifier la catégorie de photo'),
'update_item' => __('Mettre à jour la catégorie de photo'),
'add_new_item' => __('Ajouter une nouvelle catégorie de photo'),
'new_item_name' => __('Nouveau nom de catégorie de photo'),
'menu_name' => __('Catégories de photos'),
);
$args = array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'photo-category'),
);
register_taxonomy('photo_category', array('attachment'), $args);
}
add_action('init', 'create_photo_categories_taxonomy', 0);
c. Ensuite, pour créer une taxonomie personnalisée pour les étiquettes de photos, ajoutez le code qui suit:
<?php
function create_photo_tags_taxonomy() {
$labels = array(
'name' => _x('Étiquettes de photos', 'taxonomy general name'),
'singular_name' => _x('Étiquette de photo', 'taxonomy singular name'),
'search_items' => __('Chercher des étiquettes de photos'),
'popular_items' => __('Étiquettes de photos populaires'),
'all_items' => __('Toutes les étiquettes de photos'),
'edit_item' => __('Modifier l\'étiquette de photo'),
'update_item' => __('Mettre à jour l\'étiquette de photo'),
'add_new_item' => __('Ajouter une nouvelle étiquette de photo'),
'new_item_name' => __('Nouveau nom d\'étiquette de photo'),
'separate_items_with_commas' => __('Séparer les étiquettes avec des virgules'),
'add_or_remove_items' => __('Ajouter ou supprimer des étiquettes'),
'choose_from_most_used' => __('Choisir parmi les étiquettes les plus utilisées'),
'not_found' => __('Aucune étiquette de photo trouvée'),
'menu_name' => __('Étiquettes de photos'),
);
$args = array(
'hierarchical' => false,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'photo-tag'),
);
register_taxonomy('photo_tag', array('attachment'), $args);
}
add_action('init', 'create_photo_tags_taxonomy', 0);
2 – Ajouter vos catégories et étiquettes
Une fois que vous aurez ajouté ces codes dans le fichier « functions.php » de votre thème actif, vous verrez deux nouveaux onglets en dessous de Média:
- Catégories de photos
- Étiquettes de photos
Vous pouvez dorénavant cliquer sur ces onglets pour ajouter vos catégories et étiquettes. Alternativement, dans l’onglet bibliothèque, vous pouvez d’ajouter vos données directement à droite de la photo.
3 – Ajustez vos codes PHP pour considérer les catégories et étiquettes
Le mode d’utilisation va habituellement dépendre du besoin. En effet, vous pouvez souhaiter créer une gallérie de photos groupées par catégories. Ou encore, vous pouvez avoir l’intention d’afficher certaines photos sur des pages en fonction des catégories ou étiquettes. Pour cela, vous devez adapter votre code en conséquence. À titre d’exemple, un de nos projets comporte une section que nous désirons utiliser comme gallérie de photos organisées par catégorie (voir la photo ci-dessous).
Pour ce projet, nous utilisons l’ACF Pro avec l’option de galléries pour ajouter les photos. Ainsi, nous allons ensuite utiliser le code de référence de la documentation de l’ACF dans notre code PHP pour rendre dynamique le bloc. Notre procédé est donc le suivant:
- Créer les catégories requises pour les types de coiffures (Haircuts, coloring,etc)
- Ajouter les photos dans l’onglet Média
- Assigner les catégories à chaque photo
- Aller dans l’onglet du bloc et ajouter les photos à notre gallérie.
- Faire une requête dans notre code PHP pour afficher les catégories qui ne sont pas vides. Enfin une seconde requête pour afficher les photos de la gallérie, en ajouter les catégories correspondantes.
Exemple de code de galléries filtrées par catégories.
Nous vous laissons ci-dessous un exemple de code PHP pour créer les catégories et étiquettes pour les photos.
<?php
$file = basename(__FILE__, '.php');
/**
* contact Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Create id attribute allowing for custom "anchor" value.
if( isset( $block['data']['preview_main_slider'] ) && is_admin()) {
echo '<img src="'. $block['data']['preview_main_slider'] .'" style="width:100%; height:auto;">';
} else { /* rendering in editor body */
$id = 'contact-' . $block['name'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'contact';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
// Load values and handle defaults.
$title = get_field('title')?:'contact';
$galleries = psw_field('gallery', $file);
?>
<div class="section-full content-inner-2 our-portfolio">
<div class="container">
<div class="section-head text-black text-center m-b20">
<h2 class="text-primary m-b10"><?php echo psw_field("title", $file); ?></h2>
<div class="dlab-separator-outer m-b0">
<div class="dlab-separator text-primary style-icon"><i class="flaticon-spa text-primary"></i></div>
</div>
<p class="m-b0"><?php echo psw_field('sub_description', $file); ?></p>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<?php
// Catgéries de photos non vide.
$terms = get_terms( array(
'taxonomy' => 'photo_category',
'hide_empty' => false,
) );
?>
<div class="site-filters style1 clearfix center">
<ul class="filters" data-toggle="buttons">
<li data-filter="" class="btn active"><input type="radio"><a href="#"><span>All</span></a></li>
<?php
if(!empty($terms) && !is_wp_error($terms)) {
foreach($terms as $term) {
?>
<li data-filter="<?php echo esc_attr($term->slug ); ?>" class="btn"><input type="radio"><a href="#"><span> <?php echo esc_html( $term->name ); ?></span></a></li>
<?php
}
} ?>
</ul>
</div>
</div>
</div>
<div class="clearfix">
<ul id="masonry" class="portfolio-box dlab-gallery-listing gallery-grid-4 gallery row lightgallery">
<?php
$gallery = get_field("whyus_gallery", 'option');
if(!empty($gallery)) {
foreach($gallery as $val) {
$image_attributes = wp_get_attachment_image_src($val, 'medium_large');
$photo_categories = get_the_terms($val, 'photo_category' );
$key = "";
if(!empty($photo_categories) && !is_wp_error($photo_categories)) {
foreach($photo_categories as $t) {
$key .=" ".$t->slug;
}
}
?>
<li class="<?php echo $key; ?> card-container col-lg-3 col-md-3 col-sm-3">
<div class="dlab-box">
<div class="dlab-media dlab-img-overlay9 dlab-img-effect zoom">
<?php
if ( $image_attributes ) {
$img = $image_attributes[0];
$width = $image_attributes[1];
$height = $image_attributes[2];
?>
<img width="<?php echo $width; ?>" height="<?php echo $height; ?>" src="<?php echo $img; ?>" alt="<?php echo get_field("whyus_title", "option"); ?>">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo $img; ?>" data-src="<?php echo $img; ?>" class="icon-bx-xs check-km" title="<?php echo get_field("whyus_title", "option"); ?>">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
<?php
} else {
?>
<img width="385" height="385" src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/image-1.jpg" alt="">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/thumb/pic1.jpg" data-src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-1.jpg" class="icon-bx-xs check-km" title="Image Title Come Here 1">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
<?php
} ?>
</div>
</div>
<br/>
</li>
<?php
}
} else {
?>
<li class="image-1 image-4 card-container col-lg-3 col-md-3 col-sm-3">
<div class="dlab-box">
<div class="dlab-media dlab-img-overlay9 dlab-img-effect zoom">
<img width="385" height="385" src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/image-1.jpg" alt="">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/thumb/pic1.jpg" data-src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-1.jpg" class="icon-bx-xs check-km" title="Image Title Come Here 1">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
</div>
</div>
<div class="dlab-box p-tb30 image-2">
<div class="dlab-media dlab-img-overlay9 dlab-img-effect zoom">
<img width="385" height="385" src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/image-2.jpg" alt="">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/thumb/pic2.jpg" data-src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-2.jpg" class="icon-bx-xs check-km" title="Image Title Come Here 1">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
</div>
</div>
</li>
<li class="image-2 card-container col-lg-6 col-md-6 col-sm-6">
<div class="dlab-box m-b30">
<div class="dlab-media dlab-img-overlay9 dlab-img-effect zoom">
<img src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-3.jpg" alt="">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/thumb/pic3.jpg" data-src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-3.jpg" class="icon-bx-xs check-km" title="Image Title Come Here 1">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
</div>
</div>
</li>
<li class="image-3 image-4 card-container col-lg-3 col-md-3 col-sm-3">
<div class="dlab-box m-b30">
<div class="dlab-media dlab-img-overlay9 dlab-img-effect zoom">
<img width="385" height="385" src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/image-4.jpg" alt="">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/thumb/pic4.jpg" data-src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-4.jpg" class="icon-bx-xs check-km" title="Image Title Come Here 1">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
</div>
</div>
<div class="dlab-box">
<div class="dlab-media dlab-img-overlay9 dlab-img-effect zoom">
<img width="385" height="385" src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/image-5.jpg" alt="">
<div class="overlay-bx">
<div class="overlay-icon">
<span data-exthumbimage="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/middle/thumb/pic5.jpg" data-src="<?php echo get_stylesheet_directory_uri().'/images/'; ?>gallery/image-5.jpg" class="icon-bx-xs check-km" title="Image Title Come Here 1">
<i class="ti-fullscreen"></i>
</span>
</div>
</div>
</div>
</div>
</li>
<?php
}
?>
</ul>
</div>
</div>
</div>
<?php } ?>
Le code ci-dessus nous a permis d’avoir le rendu ci-dessous.
Il est important de noter que nous avons utilisé l’ACF Pro et des fonctions que nous avons créées dans le cadre du projet. Vous devez par conséquent vous focaliser sur le processus afin de mieux comprendre comment ça marche.
Quelques extensions WordPress pour filtrer les photos par catégories.
Voici quelques extensions WordPress populaires pour filtrer les photos par catégories :
- Envira Gallery
- NextGEN Gallery
- Photo Gallery
- FooGallery
- Justified Image Grid
Par ailleurs, nous vous recommandons de rechercher dans votre bibliothèque des extensions pour comprendre leur mode de fonctionnement.
En conclusion
Créer une gallérie de photos avec un filtre par catégories ou étiquettes peut relativement être facile. Si vous avez des compétences en développement web, vous pouvez opter pour le développement personnalisé. Dans le cas contraire, un plugin peut aider dans ce sens. Si vous souhaitez travailler avec des experts pour vous aider dans le développement, contactez-nous. Vous pouvez également visiter notre dépôt des codes pour télécharger quelques exemples intéressants.
