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;
color: #ffffff;
/* background: rgba(0, 0, 0, 0.4); */
border-radius: 4px;
/* border-radius: 4px; */
transition: background .3s ease;
}

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

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

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

@@ -9,14 +9,16 @@ if ( ! defined( 'ABSPATH' ) ) {
* 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.
*/
class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
{
/**
* Identifiant unique du widget.
*
* @return string Slug du widget.
*/
public function get_name(): string {
public function get_name(): string
{
return 'category-grid';
}
@@ -25,7 +27,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
*
* @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');
}
@@ -34,7 +37,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
*
* @return string Classe de l'icône du widget.
*/
public function get_icon(): string {
public function get_icon(): string
{
return 'eicon-posts-grid';
}
@@ -43,7 +47,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
*
* @return array Catégories du panneau Elementor.
*/
public function get_categories(): array {
public function get_categories(): array
{
return ['general'];
}
@@ -52,14 +57,16 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
*
* @return array Mots-clés du widget.
*/
public function get_keywords(): array {
public function get_keywords(): array
{
return ['category', 'catégorie', 'grid', 'grille'];
}
/**
* 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 */
$this->start_controls_section(
'section_content',
@@ -196,7 +203,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
/**
* 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();
// Récupérer les ID des catégories sélectionnées.
@@ -225,68 +233,95 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$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 = [
'taxonomy' => 'category',
'include' => $category_ids_to_show,
'hide_empty' => false,
];
// Appliquer les options de tri.
if ( ! empty( $settings['order_by'] ) ) {
if ('count' !== $settings['order_by']) {
// tri natif pour 'name' ou 'id'
$term_args['orderby'] = $settings['order_by'];
}
if ( ! empty( $settings['order'] ) ) {
$term_args['order'] = $settings['order'];
}
// Obtenir les termes de catégories à afficher.
$categories = get_terms( $term_args );
if ( is_wp_error( $categories ) || empty( $categories ) ) {
// Récupérer les termes
$raw_terms = get_terms($term_args);
if (is_wp_error($raw_terms) || empty($raw_terms)) {
return;
}
// Calculer la classe CSS pour le nombre de colonnes (pour usage dans le CSS).
$columns = ! empty( $settings['columns'] ) ? (int) $settings['columns'] : 3;
$grid_class = 'columns-' . $columns;
// Filtrer les termes sans image si demandé
$terms = [];
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.
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;
}
// 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">';
// Rendre la carte cliquable vers l'archive de la catégorie.
echo '<a href="' . esc_url( $term_link ) . '">';
// Image de la catégorie (si disponible).
echo "<a href=\"{$link}\">";
if ($image_url) {
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>';
}
// Nom de la catégorie.
echo '<div class="category-card-name">' . esc_html( $term_name ) . '</div>';
echo '<div class="category-card-name">' . $name . '</div>';
echo '</a>';
echo '</div>'; // .category-card
echo '</div>';
}
echo '</div>';
}
echo '</div>'; // .elementor-category-grid
// 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.
}
}