Comment créer les catégories et étiquettes pour les photos sur WordPress
Il arrive souvent que dans un projet web, l’on souhaite un classement par catégories et les étiquettes pour les photos. En effet, nous avons par exemple eu dans plusieurs cas de figure 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. Vous pouvez avoir l’option entre l’utilisation d’une extension WordPress ou la programmation personnalisée. Nous préférons généralement le développement personnalisé dans la mesure où cela nous évite à faire face aux contraintes des plugins. 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. Cliquez sur « functions.php » pour ouvrir le fichier et ajouter le code suivant pour créer une nouvelle taxonomie personnalisée pour les catégories de photos :
<?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. Ajoutez un autre code pour créer une taxonomie personnalisée pour les étiquettes de photos :
<?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 votre 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 cliquer sur ces onglets pour ajouter vos catégories et étiquettes. Alternativement, dans l’onglet bibliothèque, vous avez la possibilité d’ajouter vos données directement à droite de la photo.
3 – Ajustez vos codes PHP pour prendre en considération 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é par catégories. Ou faire afficher certaines photos sur des pages en fonction des catégories ou étiquettes. Pour ce fait, vous devez adapter votre code en conséquence. Dans l’un de nos projets, nous avons par exemple une section que nous souhaitons utiliser comme gallérie de photos organisé 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. Dans notre code PHP, nous allons ensuite utiliser le code de référence de la documentation de l’ACF pour rendre dynamique le bloc. Dans ce cas de figure, nous allons procéder tel que suit:
- Créer les catégories requises pour les types de coiffures (Haircuts, coloring, …)
- 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.
- Et enfin, dans notre code PHP, faire une requête pour afficher les catégories qui ne sont pas vides. Et 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é par catégories.
Nous vous laissons ci-dessous un exemple de code php pour la création des 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éé 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
Nous vous recommandons de rechercher dans votre bibliothèque des extensions pour comprendre son mode de fonctionnement.
En conclusion
Créer une gallérie de photos avec un filtre par catégories ou étiquettes peut être relativement 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.
