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

feat: style and filter cat with image

Browse Source
This commit is contained in:
MrRaph_
2025-05-23 10:19:06 +00:00
parent 20f9c31008
commit 7bdf28048c
3 changed files with 104 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
css/style.css Normal file
View File

@@ -0,0 +1,67 @@
/* css/style.css */
/* 1) Mise en place de la grille */
/* .elementor-category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
} */
.elementor-category-grid {
display: grid;
gap: 1rem;
}
/* Nombre de colonnes dynamiques */
.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
/* 2) Chaque carte = conteneur relatif */
.elementor-category-grid .category-card {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
border-radius: 8px;
}
/* 3) Image pleine carte */
.elementor-category-grid .category-card img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
/* 4) Effet hover : léger zoom */
.elementor-category-grid .category-card:hover img {
transform: scale(1.05);
}
/* 5) Titre centré en overlay */
.elementor-category-grid .category-card-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: .5em 1em;
font-size: 1.5rem;
line-height: 1.2;
text-align: center;
color: #ffffff;
/* background: rgba(0, 0, 0, 0.4); */
border-radius: 4px;
transition: background .3s ease;
}
/* 6) Hover sur titre : fond un peu plus opaque */
/* .elementor-category-grid .category-card:hover .category-card-name {
background: rgba(0, 0, 0, 0.6);
} */

53
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.0.0
* Version: 1.1.0
* Author: MrRaph_
* Text Domain: category-grid-widget
* Requires Plugins: elementor
@@ -14,41 +14,6 @@ if ( ! defined( 'ABSPATH' ) ) {
exit; // Sécurité : empêche l'accès direct.
}
/**
* Charger les scripts WordPress Media Uploader pour nos écrans de taxonomie.
*/
// function ccgw_enqueue_media_uploader( $hook_suffix ) {
// // On ne charge que sur l'écran de gestion des catégories
// if ( 'edit-tags.php' !== $hook_suffix
// || ! isset( $_GET['taxonomy'] )
// || 'category' !== $_GET['taxonomy']
// ) {
// return;
// }
// // 1. Charger la librairie media
// wp_enqueue_media();
// // 2. Enqueue de ton script JS pour l'image de catégorie
// wp_enqueue_script(
// 'ccgw-category-image', // handle
// plugin_dir_url( __FILE__ ) . 'admin/js/category-image.js', // chemin
// [ 'jquery' ], // dépendances
// '1.0', // version
// true // in_footer
// );
// // 3. Localiser la variable ccgw_data pour ton JS
// wp_localize_script(
// 'ccgw-category-image', // même handle que ci-dessus
// 'ccgw_data', // nom de l’objet JS
// [
// 'title' => esc_js( __( 'Sélectionner une image de catégorie', 'category-grid-widget' ) ),
// 'button' => esc_js( __( 'Sélectionner', 'category-grid-widget' ) ),
// ]
// );
// }
// add_action( 'admin_enqueue_scripts', 'ccgw_enqueue_media_uploader' );
/**
* Charger les scripts Media Uploader et localiser les données JS
* sur les écrans d'ajout ET d'édition de catégorie.
@@ -162,3 +127,19 @@ function register_category_grid_widget( $widgets_manager ) {
$widgets_manager->register( new \Elementor_Category_Grid_Widget() );
}
add_action( 'elementor/widgets/register', 'register_category_grid_widget' );
/**
* Enqueue styles front-end pour le widget.
*/
function ccgw_enqueue_front_styles() {
// Ne charger que si Elementor est actif
if ( defined( 'ELEMENTOR_VERSION' ) ) {
wp_enqueue_style(
'ccgw-category-grid-style',
plugin_dir_url( __FILE__ ) . 'css/style.css',
[],
'1.0.0'
);
}
}
add_action( 'wp_enqueue_scripts', 'ccgw_enqueue_front_styles' );

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

@@ -101,6 +101,21 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
]
);
// ----------------------------------------------------------------------
// Contrôle : Ne montrer que les catégories avec image
$this->add_control(
'hide_without_image',
[
'label' => esc_html__( 'Afficher uniquement catégories avec image', 'category-grid-widget' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Oui', 'category-grid-widget' ),
'label_off' => esc_html__( 'Non', 'category-grid-widget' ),
'return_value' => 'yes',
'default' => 'no',
'description' => esc_html__( 'Si activé, les catégories sans image seront masquées.', 'category-grid-widget' ),
]
);
// Contrôle : Trier par (critère de tri des catégories).
$this->add_control(
'order_by',
@@ -250,6 +265,11 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
$image_url = wp_get_attachment_image_url( $thumbnail_id, $size );
}
// *** Nouveau filtre ***
if ( 'yes' === $settings['hide_without_image'] && empty( $image_url ) ) {
continue;
}
echo '<div class="category-card">';
// Rendre la carte cliquable vers l'archive de la catégorie.
echo '<a href="' . esc_url( $term_link ) . '">';