diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..2f7fb0e --- /dev/null +++ b/css/style.css @@ -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); +} */ diff --git a/elementor-category-grid-widget.php b/elementor-category-grid-widget.php index d27414b..3c2b0b5 100644 --- a/elementor-category-grid-widget.php +++ b/elementor-category-grid-widget.php @@ -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' ); diff --git a/widgets/category-grid-widget.php b/widgets/category-grid-widget.php index a3b1e68..df5326c 100644 --- a/widgets/category-grid-widget.php +++ b/widgets/category-grid-widget.php @@ -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 '