WordPress/elementor-category-grid-widget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: enhanced sorting by post number

Browse Source
This commit is contained in:
MrRaph_
2025-05-23 10:56:26 +00:00
parent fd2367ebcd
commit b19dcfc0c7
3 changed files with 145 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -57,7 +57,7 @@
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
/* background: rgba(0, 0, 0, 0.4); */ /* background: rgba(0, 0, 0, 0.4); */
border-radius: 4px; /* border-radius: 4px; */
transition: background .3s ease; transition: background .3s ease;
} }

6
elementor-category-grid-widget.php
View File

@@ -2,7 +2,7 @@
/** /**
* Plugin Name: Elementor Category Grid Widget * Plugin Name: Elementor Category Grid Widget
* Description: Custom Elementor widget to display a grid of post categories with images. * Description: Custom Elementor widget to display a grid of post categories with images.
* Version: 1.1.0 * Version: 1.2.0
* Author: MrRaph_ * Author: MrRaph_
* Text Domain: category-grid-widget * Text Domain: category-grid-widget
* Requires Plugins: elementor * Requires Plugins: elementor
@@ -36,7 +36,7 @@ function ccgw_enqueue_media_uploader( $hook_suffix ) {
'ccgw-category-image', 'ccgw-category-image',
plugin_dir_url( __FILE__ ) . 'admin/js/category-image.js', plugin_dir_url( __FILE__ ) . 'admin/js/category-image.js',
[ 'jquery' ], [ 'jquery' ],
'1.0', '1.2.0',
true true
); );
@@ -172,7 +172,7 @@ function ccgw_enqueue_front_styles() {
'ccgw-category-grid-style', 'ccgw-category-grid-style',
plugin_dir_url( __FILE__ ) . 'css/style.css', plugin_dir_url( __FILE__ ) . 'css/style.css',
[], [],
'1.0.0' '1.2.0'
); );
} }
} }

247
widgets/category-grid-widget.php
View File

@@ -1,5 +1,5 @@
<?php <?php
if ( ! defined( 'ABSPATH' ) ) { if (!defined('ABSPATH')) {
exit; // Empêche l'accès direct. exit; // Empêche l'accès direct.
} }
@@ -9,14 +9,16 @@ if ( ! defined( 'ABSPATH' ) ) {
* Widget Elementor personnalisé qui affiche une grille de catégories d'articles. * Widget Elementor personnalisé qui affiche une grille de catégories d'articles.
* Chaque catégorie est affichée sous forme de carte avec son nom, son image et un lien vers son archive. * Chaque catégorie est affichée sous forme de carte avec son nom, son image et un lien vers son archive.
*/ */
class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base { class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
{
/** /**
* Identifiant unique du widget. * Identifiant unique du widget.
* *
* @return string Slug du widget. * @return string Slug du widget.
*/ */
public function get_name(): string { public function get_name(): string
{
return 'category-grid'; return 'category-grid';
} }
@@ -25,8 +27,9 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
* *
* @return string Titre du widget. * @return string Titre du widget.
*/ */
public function get_title(): string { public function get_title(): string
return esc_html__( 'Grille de Catégories', 'category-grid-widget' ); {
return esc_html__('Grille de Catégories', 'category-grid-widget');
} }
/** /**
@@ -34,7 +37,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
* *
* @return string Classe de l'icône du widget. * @return string Classe de l'icône du widget.
*/ */
public function get_icon(): string { public function get_icon(): string
{
return 'eicon-posts-grid'; return 'eicon-posts-grid';
} }
@@ -43,8 +47,9 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
* *
* @return array Catégories du panneau Elementor. * @return array Catégories du panneau Elementor.
*/ */
public function get_categories(): array { public function get_categories(): array
return [ 'general' ]; {
return ['general'];
} }
/** /**
@@ -52,38 +57,40 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
* *
* @return array Mots-clés du widget. * @return array Mots-clés du widget.
*/ */
public function get_keywords(): array { public function get_keywords(): array
return [ 'category', 'catégorie', 'grid', 'grille' ]; {
return ['category', 'catégorie', 'grid', 'grille'];
} }
/** /**
* Enregistrer les contrôles du widget (champs configurables dans Elementor). * Enregistrer les contrôles du widget (champs configurables dans Elementor).
*/ */
protected function register_controls(): void { protected function register_controls(): void
{
/* Section "Contenu" pour le choix des catégories et options de requête */ /* Section "Contenu" pour le choix des catégories et options de requête */
$this->start_controls_section( $this->start_controls_section(
'section_content', 'section_content',
[ [
'label' => esc_html__( 'Catégories', 'category-grid-widget' ), 'label' => esc_html__('Catégories', 'category-grid-widget'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT, 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
] ]
); );
// Contrôle : Sélection des catégories à afficher (multisélection). // Contrôle : Sélection des catégories à afficher (multisélection).
$options = []; $options = [];
$categories = get_categories( [ 'hide_empty' => false ] ); $categories = get_categories(['hide_empty' => false]);
foreach ( $categories as $cat ) { foreach ($categories as $cat) {
$options[ $cat->term_id ] = $cat->name; $options[$cat->term_id] = $cat->name;
} }
$this->add_control( $this->add_control(
'categories', 'categories',
[ [
'label' => esc_html__( 'Catégories à afficher', 'category-grid-widget' ), 'label' => esc_html__('Catégories à afficher', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SELECT2, 'type' => \Elementor\Controls_Manager::SELECT2,
'multiple' => true, 'multiple' => true,
'label_block' => true, 'label_block' => true,
'options' => $options, 'options' => $options,
'description' => esc_html__( 'Sélectionnez les catégories d’articles à afficher.', 'category-grid-widget' ), 'description' => esc_html__('Sélectionnez les catégories d’articles à afficher.', 'category-grid-widget'),
] ]
); );
@@ -91,13 +98,13 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->add_control( $this->add_control(
'show_subcategories', 'show_subcategories',
[ [
'label' => esc_html__( 'Afficher les sous-catégories', 'category-grid-widget' ), 'label' => esc_html__('Afficher les sous-catégories', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SWITCHER, 'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Oui', 'category-grid-widget' ), 'label_on' => esc_html__('Oui', 'category-grid-widget'),
'label_off' => esc_html__( 'Non', 'category-grid-widget' ), 'label_off' => esc_html__('Non', 'category-grid-widget'),
'return_value' => 'yes', 'return_value' => 'yes',
'default' => 'yes', 'default' => 'yes',
'description' => esc_html__( 'Inclure aussi les sous-catégories des catégories sélectionnées.', 'category-grid-widget' ), 'description' => esc_html__('Inclure aussi les sous-catégories des catégories sélectionnées.', 'category-grid-widget'),
] ]
); );
@@ -106,13 +113,13 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->add_control( $this->add_control(
'hide_without_image', 'hide_without_image',
[ [
'label' => esc_html__( 'Afficher uniquement catégories avec image', 'category-grid-widget' ), 'label' => esc_html__('Afficher uniquement catégories avec image', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SWITCHER, 'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Oui', 'category-grid-widget' ), 'label_on' => esc_html__('Oui', 'category-grid-widget'),
'label_off' => esc_html__( 'Non', 'category-grid-widget' ), 'label_off' => esc_html__('Non', 'category-grid-widget'),
'return_value' => 'yes', 'return_value' => 'yes',
'default' => 'no', 'default' => 'no',
'description' => esc_html__( 'Si activé, les catégories sans image seront masquées.', 'category-grid-widget' ), 'description' => esc_html__('Si activé, les catégories sans image seront masquées.', 'category-grid-widget'),
] ]
); );
@@ -120,12 +127,12 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->add_control( $this->add_control(
'order_by', 'order_by',
[ [
'label' => esc_html__( 'Trier par', 'category-grid-widget' ), 'label' => esc_html__('Trier par', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SELECT, 'type' => \Elementor\Controls_Manager::SELECT,
'options' => [ 'options' => [
'name' => esc_html__( 'Nom (alphabétique)', 'category-grid-widget' ), 'name' => esc_html__('Nom (alphabétique)', 'category-grid-widget'),
'count' => esc_html__( 'Nombre d’articles', 'category-grid-widget' ), 'count' => esc_html__('Nombre d’articles', 'category-grid-widget'),
'id' => esc_html__( 'ID (date de création)', 'category-grid-widget' ), 'id' => esc_html__('ID (date de création)', 'category-grid-widget'),
], ],
'default' => 'name', 'default' => 'name',
] ]
@@ -135,11 +142,11 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->add_control( $this->add_control(
'order', 'order',
[ [
'label' => esc_html__( 'Ordre', 'category-grid-widget' ), 'label' => esc_html__('Ordre', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SELECT, 'type' => \Elementor\Controls_Manager::SELECT,
'options' => [ 'options' => [
'ASC' => esc_html__( 'Croissant (A-Z / 0-9)', 'category-grid-widget' ), 'ASC' => esc_html__('Croissant (A-Z / 0-9)', 'category-grid-widget'),
'DESC' => esc_html__( 'Décroissant (Z-A / 9-0)', 'category-grid-widget' ), 'DESC' => esc_html__('Décroissant (Z-A / 9-0)', 'category-grid-widget'),
], ],
'default' => 'ASC', 'default' => 'ASC',
] ]
@@ -151,8 +158,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->start_controls_section( $this->start_controls_section(
'section_layout', 'section_layout',
[ [
'label' => esc_html__( 'Mise en page', 'category-grid-widget' ), 'label' => esc_html__('Mise en page', 'category-grid-widget'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT, 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
] ]
); );
@@ -160,8 +167,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->add_control( $this->add_control(
'columns', 'columns',
[ [
'label' => esc_html__( 'Nombre de colonnes', 'category-grid-widget' ), 'label' => esc_html__('Nombre de colonnes', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SELECT, 'type' => \Elementor\Controls_Manager::SELECT,
'options' => [ 'options' => [
1 => '1', 1 => '1',
2 => '2', 2 => '2',
@@ -178,13 +185,13 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$this->add_control( $this->add_control(
'image_size', 'image_size',
[ [
'label' => esc_html__( 'Taille des images', 'category-grid-widget' ), 'label' => esc_html__('Taille des images', 'category-grid-widget'),
'type' => \Elementor\Controls_Manager::SELECT, 'type' => \Elementor\Controls_Manager::SELECT,
'options' => [ 'options' => [
'thumbnail' => esc_html__( 'Miniature (thumbnail)', 'category-grid-widget' ), 'thumbnail' => esc_html__('Miniature (thumbnail)', 'category-grid-widget'),
'medium' => esc_html__( 'Moyen (medium)', 'category-grid-widget' ), 'medium' => esc_html__('Moyen (medium)', 'category-grid-widget'),
'large' => esc_html__( 'Grand (large)', 'category-grid-widget' ), 'large' => esc_html__('Grand (large)', 'category-grid-widget'),
'full' => esc_html__( 'Plein (full)', 'category-grid-widget' ), 'full' => esc_html__('Plein (full)', 'category-grid-widget'),
], ],
'default' => 'medium', 'default' => 'medium',
] ]
@@ -196,97 +203,125 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
/** /**
* Générer l'affichage du widget côté front-end. * Générer l'affichage du widget côté front-end.
*/ */
protected function render(): void { protected function render(): void
{
$settings = $this->get_settings_for_display(); $settings = $this->get_settings_for_display();
// Récupérer les ID des catégories sélectionnées. // Récupérer les ID des catégories sélectionnées.
$selected_ids = []; $selected_ids = [];
if ( ! empty( $settings['categories'] ) ) { if (!empty($settings['categories'])) {
// S'assurer d'avoir un tableau d'ID (entiers). // S'assurer d'avoir un tableau d'ID (entiers).
$selected_ids = is_array( $settings['categories'] ) ? $settings['categories'] : [ $settings['categories'] ]; $selected_ids = is_array($settings['categories']) ? $settings['categories'] : [$settings['categories']];
$selected_ids = array_map( 'intval', $selected_ids ); $selected_ids = array_map('intval', $selected_ids);
} }
if ( empty( $selected_ids ) ) { if (empty($selected_ids)) {
// Aucune catégorie sélectionnée : ne rien afficher. // Aucune catégorie sélectionnée : ne rien afficher.
return; return;
} }
// Déterminer les catégories à afficher (inclure les sous-catégories si demandé). // Déterminer les catégories à afficher (inclure les sous-catégories si demandé).
$category_ids_to_show = $selected_ids; $category_ids_to_show = $selected_ids;
if ( ! empty( $settings['show_subcategories'] ) && $settings['show_subcategories'] === 'yes' ) { if (!empty($settings['show_subcategories']) && $settings['show_subcategories'] === 'yes') {
// Ajouter les sous-catégories de chaque catégorie sélectionnée. // Ajouter les sous-catégories de chaque catégorie sélectionnée.
foreach ( $selected_ids as $cat_id ) { foreach ($selected_ids as $cat_id) {
$child_ids = get_term_children( $cat_id, 'category' ); $child_ids = get_term_children($cat_id, 'category');
if ( is_array( $child_ids ) && ! empty( $child_ids ) ) { if (is_array($child_ids) && !empty($child_ids)) {
$category_ids_to_show = array_merge( $category_ids_to_show, $child_ids ); $category_ids_to_show = array_merge($category_ids_to_show, $child_ids);
} }
} }
// Éliminer les doublons d'ID au cas où. // Éliminer les doublons d'ID au cas où.
$category_ids_to_show = array_unique( $category_ids_to_show ); $category_ids_to_show = array_unique($category_ids_to_show);
} }
// Préparer les arguments de requête pour récupérer les termes. // Préparer les args pour get_terms() – on ne précise PAS le tri si c'est par count
$term_args = [ $term_args = [
'taxonomy' => 'category', 'taxonomy' => 'category',
'include' => $category_ids_to_show, 'include' => $category_ids_to_show,
'hide_empty' => false, 'hide_empty' => false,
]; ];
// Appliquer les options de tri. if ('count' !== $settings['order_by']) {
if ( ! empty( $settings['order_by'] ) ) { // tri natif pour 'name' ou 'id'
$term_args['orderby'] = $settings['order_by']; $term_args['orderby'] = $settings['order_by'];
}
if ( ! empty( $settings['order'] ) ) {
$term_args['order'] = $settings['order']; $term_args['order'] = $settings['order'];
} }
// Obtenir les termes de catégories à afficher. // Récupérer les termes
$categories = get_terms( $term_args ); $raw_terms = get_terms($term_args);
if ( is_wp_error( $categories ) || empty( $categories ) ) { if (is_wp_error($raw_terms) || empty($raw_terms)) {
return; return;
} }
// Calculer la classe CSS pour le nombre de colonnes (pour usage dans le CSS). // Filtrer les termes sans image si demandé
$columns = ! empty( $settings['columns'] ) ? (int) $settings['columns'] : 3; $terms = [];
$grid_class = 'columns-' . $columns; foreach ($raw_terms as $term) {
$thumb_id = get_term_meta($term->term_id, 'thumbnail_id', true);
$image_url = $thumb_id
? wp_get_attachment_image_url($thumb_id, $settings['image_size'])
: '';
// Début du markup HTML de la grille. if ('yes' === $settings['hide_without_image'] && empty($image_url)) {
echo '<div class="elementor-category-grid ' . esc_attr( $grid_class ) . '">';
foreach ( $categories as $term ) {
$term_name = $term->name;
$term_link = get_term_link( $term );
if ( is_wp_error( $term_link ) ) {
continue; // Ignorer si le lien d'archive pose un problème.
}
// Récupérer l'image de la catégorie via sa méta 'thumbnail_id' (image mise en avant de la catégorie).
$image_url = '';
$thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
if ( $thumbnail_id ) {
$size = ! empty( $settings['image_size'] ) ? $settings['image_size'] : 'medium';
$image_url = wp_get_attachment_image_url( $thumbnail_id, $size );
}
// *** Nouveau filtre ***
if ( 'yes' === $settings['hide_without_image'] && empty( $image_url ) ) {
continue; continue;
} }
// Stocker image_url temporaire pour éviter de recalculer
$term->_image_url = $image_url;
$terms[] = $term;
}
// Si tri par nombre d'articles, calculer et trier manuellement
if ('count' === $settings['order_by']) {
// Calcul du total d'articles (directs + descendants) pour chaque terme
$counts = [];
foreach ($terms as $term) {
$total = (int) $term->count;
$desc_ids = get_term_children($term->term_id, 'category');
if (is_array($desc_ids)) {
foreach ($desc_ids as $desc_id) {
$desc = get_term($desc_id, 'category');
if (!is_wp_error($desc)) {
$total += (int) $desc->count;
}
}
}
$counts[$term->term_id] = $total;
}
// Tri selon l’ordre choisi
usort($terms, function ($a, $b) use ($counts, $settings) {
$ca = $counts[$a->term_id];
$cb = $counts[$b->term_id];
if ($ca === $cb) {
return 0;
}
if ('ASC' === $settings['order']) {
return ($ca < $cb) ? -1 : 1;
}
return ($ca > $cb) ? -1 : 1;
});
}
// Calcul de la classe grille
$columns = (int) $settings['columns'];
$grid_class = 'columns-' . $columns;
// Rendu HTML
echo '<div class="elementor-category-grid ' . esc_attr($grid_class) . '">';
foreach ($terms as $term) {
$name = esc_html($term->name);
$link = esc_url(get_term_link($term));
$image_url = esc_url($term->_image_url);
echo '<div class="category-card">'; echo '<div class="category-card">';
// Rendre la carte cliquable vers l'archive de la catégorie. echo "<a href=\"{$link}\">";
echo '<a href="' . esc_url( $term_link ) . '">'; if ($image_url) {
// Image de la catégorie (si disponible).
if ( $image_url ) {
echo '<div class="category-card-image">'; echo '<div class="category-card-image">';
echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $term_name ) . '" />'; echo '<img src="' . $image_url . '" alt="' . $name . '">';
echo '</div>'; echo '</div>';
} }
// Nom de la catégorie. echo '<div class="category-card-name">' . $name . '</div>';
echo '<div class="category-card-name">' . esc_html( $term_name ) . '</div>';
echo '</a>'; echo '</a>';
echo '</div>'; // .category-card echo '</div>';
} }
echo '</div>'; // .elementor-category-grid echo '</div>';
// Astuce : ajouter du CSS (feuille de style ou balise <style>) pour styliser la grille.
// Par exemple, .elementor-category-grid.columns-3 .category-card { width: 33.33%; float: left; } pour disposer 3 colonnes.
} }
} }