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

feat: add more customizations

Browse Source
This commit is contained in:
MrRaph_
2025-05-23 11:34:40 +00:00
parent b19dcfc0c7
commit 356ea8df9c
2 changed files with 220 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
css/style.css
View File

@@ -1,11 +1,20 @@
/* css/style.css */
.elementor-category-grid .category-card {
position: relative;
overflow: hidden;
}
/* pseudo-élément overlay */
.elementor-category-grid .category-card::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: transparent;
transition: opacity .3s ease;
pointer-events: none; /* laisse passer le clic */
}
/* 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;
@@ -25,7 +34,7 @@
overflow: hidden;
height: 0;
padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
border-radius: 8px;
/* border-radius: 8px; */
}
/* 3) Image pleine carte */

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

@@ -3,6 +3,10 @@ if (!defined('ABSPATH')) {
exit; // Empêche l'accès direct.
}
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
/**
* Classe Elementor_Category_Grid_Widget.
*
@@ -61,6 +65,205 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
{
return ['category', 'catégorie', 'grid', 'grille'];
}
protected function register_style_controls()
{
// 1) Styles de la grille (espacement)
$this->start_controls_section(
'section_style_grid',
[
'label' => esc_html__('Grille', 'category-grid-widget'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'grid_gap',
[
'label' => esc_html__('Espacement (gap)', 'category-grid-widget'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px', 'em', '%'],
'range' => [
'px' => ['min' => 0, 'max' => 100],
'em' => ['min' => 0, 'max' => 10],
],
'selectors' => [
'{{WRAPPER}} .elementor-category-grid' => 'gap: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// 2) Styles des cartes (fond, bordure, ombre)
$this->start_controls_section(
'section_style_card',
[
'label' => esc_html__('Carte', 'category-grid-widget'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'card_bg_color',
[
'label' => esc_html__('Fond de la carte', 'category-grid-widget'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .category-card' => 'background-color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'card_title_typography',
'label' => esc_html__('Typographie du titre', 'category-grid-widget'),
'selector' => '{{WRAPPER}} .category-card-name',
]
);
$this->add_control(
'card_border_radius',
[
'label' => esc_html__('Border radius', 'category-grid-widget'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .category-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
\Elementor\Group_Control_Box_Shadow::get_type(),
[
'name' => 'card_box_shadow',
'label' => esc_html__('Ombre de la carte', 'category-grid-widget'),
'selector' => '{{WRAPPER}} .category-card',
]
);
$this->end_controls_section();
// 3) Styles du titre (couleur, arrière-plan du badge)
$this->start_controls_section(
'section_style_title',
[
'label' => esc_html__('Titre', 'category-grid-widget'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
// 3.1) Switcher pour désactiver le fond
$this->add_control(
'disable_title_bg',
[
'label' => esc_html__('Désactiver le fond du titre', 'category-grid-widget'),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__('Oui', 'category-grid-widget'),
'label_off' => esc_html__('Non', 'category-grid-widget'),
'return_value' => 'yes',
'default' => 'no',
'selectors' => [
// Quand activé => on rend le fond totalement transparent
'{{WRAPPER}} .category-card-name' => 'background-color: transparent !important;',
],
]
);
// 3.2) Couleur du texte
$this->add_control(
'title_text_color',
[
'label' => esc_html__('Couleur du texte', 'category-grid-widget'),
'type' => Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => [
'{{WRAPPER}} .category-card-name' => 'color: {{VALUE}};',
],
]
);
// 3.3) Couleur de fond du titre, **uniquement si** le fond n'est pas désactivé
$this->add_control(
'title_bg_color',
[
'label' => esc_html__('Fond du titre', 'category-grid-widget'),
'type' => Controls_Manager::COLOR,
'default' => 'rgba(0,0,0,0.4)',
'selectors' => [
'{{WRAPPER}} .category-card-name' => 'background-color: {{VALUE}};',
],
'condition' => [
// n'affiche ce picker que si disable_title_bg != 'yes'
'disable_title_bg!' => 'yes',
],
]
);
// 3.4) Typographie du titre
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'card_title_typography',
'label' => esc_html__('Typographie du titre', 'category-grid-widget'),
'selector' => '{{WRAPPER}} .category-card-name',
]
);
$this->end_controls_section();
// 4) Section Hover
$this->start_controls_section(
'section_style_hover',
[
'label' => esc_html__('Hover', 'category-grid-widget'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
// 4.1) Couleur de l'overlay
$this->add_control(
'hover_overlay_color',
[
'label' => esc_html__('Couleur de l’overlay', 'category-grid-widget'),
'type' => Controls_Manager::COLOR,
'default' => 'rgba(0,0,0,0.3)',
'selectors' => [
// sur l’élément ::before (défini en CSS ci-dessous)
'{{WRAPPER}} .category-card::before' => 'background-color: {{VALUE}};',
],
]
);
// 4.2) Opacité de l'overlay
$this->add_control(
'hover_overlay_opacity',
[
'label' => esc_html__('Opacité de l’overlay', 'category-grid-widget'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['%'],
'range' => [
'%' => ['min' => 0, 'max' => 100],
],
'default' => ['size' => 30],
'selectors' => [
'{{WRAPPER}} .category-card::before' => 'opacity: 0;',
'{{WRAPPER}} .category-card:hover::before' => 'opacity: {{SIZE}}%;',
],
]
);
// 4.3) Couleur du titre au hover
$this->add_control(
'title_hover_color',
[
'label' => esc_html__('Couleur du titre au hover', 'category-grid-widget'),
'type' => Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => [
'{{WRAPPER}} .category-card:hover .category-card-name' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
/**
* Enregistrer les contrôles du widget (champs configurables dans Elementor).
@@ -198,6 +401,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
);
$this->end_controls_section();
$this->register_style_controls();
}
/**