Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4dcc664bed | ||
|
|
54be7b7455 | ||
|
|
202a1469b8 |
@@ -3,7 +3,7 @@
|
||||
* Plugin Name: Category Grid Widget for Elementor
|
||||
* Plugin URI: https://git.mrraph.fr/WordPress/elementor-category-grid-widget-for-elementor
|
||||
* Description: Responsive article category grid with image for Elementor.
|
||||
* Version: 1.3.0
|
||||
* Version: 1.4.0
|
||||
* Author: MrRaph_
|
||||
* Author URI: https://mrraph.photo
|
||||
* Requires at least: 5.8
|
||||
@@ -45,7 +45,7 @@ function ccgw_enqueue_media_uploader($hook_suffix)
|
||||
'ccgw-category-image',
|
||||
plugin_dir_url(__FILE__) . 'admin/js/category-image.js',
|
||||
['jquery'],
|
||||
'1.3.0',
|
||||
'1.4.0',
|
||||
true
|
||||
);
|
||||
|
||||
@@ -223,7 +223,7 @@ function ccgw_enqueue_front_styles()
|
||||
'ccgw-category-grid-style',
|
||||
plugin_dir_url(__FILE__) . 'css/style.css',
|
||||
[],
|
||||
'1.3.0'
|
||||
'1.4.0'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
167
css/style.css
167
css/style.css
@@ -1,76 +1,141 @@
|
||||
/* css/style.css */
|
||||
/* -------------------------------------------------- */
|
||||
/* Corrige le comportement “flex” sur mobile/tablette */
|
||||
/* -------------------------------------------------- */
|
||||
.e-con-inner {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 1) Structure de la carte */
|
||||
/* —————————————————————————————————————————— */
|
||||
.elementor-category-grid .category-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* ratio fixe 5:2 pour l’image uniquement */
|
||||
}
|
||||
.elementor-category-grid .category-card.title-below {
|
||||
/* autorise la hauteur auto quand titre en dessous */
|
||||
height: auto !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.elementor-category-grid .category-card-image {
|
||||
/* reprend l’ancien padding-bottom */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 40%; /* ratio 5:2 */
|
||||
}
|
||||
.elementor-category-grid .category-card.title-below .category-card-image {
|
||||
/* si titre en dessous, on garde juste l’image */
|
||||
padding-bottom: 40%;
|
||||
}
|
||||
|
||||
/* pseudo-élément overlay */
|
||||
/* Overlay via pseudo */
|
||||
.elementor-category-grid .category-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
inset: 0;
|
||||
background-color: transparent;
|
||||
transition: opacity .3s ease;
|
||||
pointer-events: none; /* laisse passer le clic */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 1) Mise en place de la grille */
|
||||
/* Image plein cadre */
|
||||
.elementor-category-grid .category-card img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform .4s ease;
|
||||
}
|
||||
.elementor-category-grid .category-card:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 2) Titre overlay */
|
||||
/* —————————————————————————————————————————— */
|
||||
.elementor-category-grid .category-card-name.overlay {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: .5em 1em;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
transition: font-size .3s ease, padding .3s ease;
|
||||
}
|
||||
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 3) Titre below */
|
||||
/* —————————————————————————————————————————— */
|
||||
.elementor-category-grid .category-card-name-below {
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.elementor-category-grid .category-card-name-below a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: text-decoration .3s ease;
|
||||
}
|
||||
.elementor-category-grid .category-card-name-below a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 4) Grille responsive par défaut (desktop) */
|
||||
/* —————————————————————————————————————————— */
|
||||
.elementor-category-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
/* Nombre de colonnes dynamiques */
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 5) Mobile (≤ 480px) → 1 colonne */
|
||||
/* —————————————————————————————————————————— */
|
||||
@media screen and (max-width: 480px) {
|
||||
.elementor-category-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
.elementor-category-grid .category-card-name.overlay {
|
||||
font-size: 1rem;
|
||||
padding: .4em .8em;
|
||||
}
|
||||
.elementor-category-grid .category-card-name-below {
|
||||
font-size: 1rem;
|
||||
padding: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 6) Tablette (481px–768px) → 2 colonnes fixes */
|
||||
/* —————————————————————————————————————————— */
|
||||
@media screen and (min-width: 481px) and (max-width: 768px) {
|
||||
.elementor-category-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
.elementor-category-grid .category-card-name.overlay {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.elementor-category-grid .category-card-name-below {
|
||||
font-size: 1.2rem;
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* —————————————————————————————————————————— */
|
||||
/* 7) Desktop (≥ 769px) → respect des classes */
|
||||
/* —————————————————————————————————————————— */
|
||||
@media screen and (min-width: 769px) {
|
||||
.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);
|
||||
} */
|
||||
|
||||
@@ -5,7 +5,7 @@ Tags: elementor, category, grid, widget, posts
|
||||
Requires at least: 5.8
|
||||
Tested up to: 6.8
|
||||
Requires PHP: 7.0
|
||||
Stable tag: 1.3.0
|
||||
Stable tag: 1.4.0
|
||||
License: GPLv2 or later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
Responsive grid of post categories with images for Elementor.
|
||||
@@ -46,6 +46,12 @@ Yes, enable the **“Hide categories without image”** option in the widget’s
|
||||
Open the **Style » Hover** tab: choose the overlay color & opacity, and the title color on hover.
|
||||
|
||||
== Changelog ==
|
||||
= 1.4.0 =
|
||||
* Added an option to have titles displayed under cards
|
||||
|
||||
= 1.3.1 =
|
||||
* Make style responsive
|
||||
|
||||
= 1.3.0 =
|
||||
* Added more option to handle subcategories
|
||||
|
||||
|
||||
@@ -382,6 +382,20 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
|
||||
]
|
||||
);
|
||||
|
||||
$this->add_control(
|
||||
'title_position',
|
||||
[
|
||||
'label' => esc_html__('Position du titre', 'category-grid-widget-for-elementor'),
|
||||
'type' => Controls_Manager::SELECT,
|
||||
'options' => [
|
||||
'overlay' => esc_html__('Sur la carte', 'category-grid-widget-for-elementor'),
|
||||
'below' => esc_html__('Sous la carte', 'category-grid-widget-for-elementor'),
|
||||
],
|
||||
'default' => 'overlay',
|
||||
'description' => esc_html__('Choisissez si le nom de la catégorie apparaît en overlay ou sous l’image.', 'category-grid-widget-for-elementor'),
|
||||
]
|
||||
);
|
||||
|
||||
$this->end_controls_section();
|
||||
|
||||
/* Section "Mise en page" pour les options d'affichage (colonnes, taille d'image) */
|
||||
@@ -439,118 +453,91 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
|
||||
{
|
||||
$settings = $this->get_settings_for_display();
|
||||
|
||||
// Récupérer les ID des catégories sélectionnées.
|
||||
// 1) Récupérer les IDs des catégories sélectionnées
|
||||
$selected_ids = [];
|
||||
if (!empty($settings['categories'])) {
|
||||
// S'assurer d'avoir un tableau d'ID (entiers).
|
||||
$selected_ids = is_array($settings['categories']) ? $settings['categories'] : [$settings['categories']];
|
||||
$selected_ids = array_map('intval', $selected_ids);
|
||||
$selected_ids = (array) $settings['categories'];
|
||||
$selected_ids = array_map('absint', $selected_ids);
|
||||
}
|
||||
if (empty($selected_ids)) {
|
||||
// Aucune catégorie sélectionnée : ne rien afficher.
|
||||
return;
|
||||
}
|
||||
|
||||
// Déterminer les catégories à afficher (inclure les sous-catégories si demandé).
|
||||
$category_ids_to_show = $selected_ids;
|
||||
// if (!empty($settings['show_subcategories']) && $settings['show_subcategories'] === 'yes') {
|
||||
// // Ajouter les sous-catégories de chaque catégorie sélectionnée.
|
||||
// foreach ($selected_ids as $cat_id) {
|
||||
// $child_ids = get_term_children($cat_id, 'category');
|
||||
// if (is_array($child_ids) && !empty($child_ids)) {
|
||||
// $category_ids_to_show = array_merge($category_ids_to_show, $child_ids);
|
||||
// }
|
||||
// }
|
||||
// // Éliminer les doublons d'ID au cas où.
|
||||
// $category_ids_to_show = array_unique($category_ids_to_show);
|
||||
// }
|
||||
// 1) Cas : on veut les sous-catégories de la page actuelle
|
||||
// 2) Construire la liste des IDs à afficher
|
||||
if ('yes' === $settings['subcats_of_current']) {
|
||||
$queried = get_queried_object();
|
||||
if ($queried && isset($queried->term_id) && 'category' === $queried->taxonomy) {
|
||||
if ($queried instanceof WP_Term && 'category' === $queried->taxonomy) {
|
||||
$category_ids_to_show = get_term_children($queried->term_id, 'category');
|
||||
} else {
|
||||
// si pas en archive catégorie, rien à afficher
|
||||
return;
|
||||
}
|
||||
|
||||
// 2) Sinon, on part des catégories sélectionnées
|
||||
} else {
|
||||
$category_ids_to_show = $selected_ids;
|
||||
|
||||
// Si on veut uniquement leurs sous-catégories
|
||||
if ('yes' === $settings['only_subcats_of_selected']) {
|
||||
$sub_ids = [];
|
||||
$subs = [];
|
||||
foreach ($selected_ids as $cat_id) {
|
||||
$children = get_term_children($cat_id, 'category');
|
||||
if (is_array($children)) {
|
||||
$sub_ids = array_merge($sub_ids, $children);
|
||||
$subs = array_merge($subs, $children);
|
||||
}
|
||||
}
|
||||
$category_ids_to_show = array_unique($sub_ids);
|
||||
}
|
||||
// Sinon, l’ancienne logique : on ajoute ou pas les sous-catégories selon show_subcategories
|
||||
elseif ('yes' === $settings['show_subcategories']) {
|
||||
$category_ids_to_show = array_unique($subs);
|
||||
} elseif ('yes' === $settings['show_subcategories']) {
|
||||
foreach ($selected_ids as $cat_id) {
|
||||
$category_ids_to_show = array_merge($category_ids_to_show, get_term_children($cat_id, 'category') ?: []);
|
||||
$children = get_term_children($cat_id, 'category') ?: [];
|
||||
$category_ids_to_show = array_merge($category_ids_to_show, $children);
|
||||
}
|
||||
$category_ids_to_show = array_unique($category_ids_to_show);
|
||||
}
|
||||
}
|
||||
|
||||
// Préparer les args pour get_terms() – on ne précise PAS le tri si c'est par count
|
||||
// 3) Préparer args pour get_terms()
|
||||
$term_args = [
|
||||
'taxonomy' => 'category',
|
||||
'include' => $category_ids_to_show,
|
||||
'hide_empty' => false,
|
||||
];
|
||||
if ('count' !== $settings['order_by']) {
|
||||
// tri natif pour 'name' ou 'id'
|
||||
$term_args['orderby'] = $settings['order_by'];
|
||||
$term_args['order'] = $settings['order'];
|
||||
}
|
||||
|
||||
// Récupérer les termes
|
||||
// 4) Récupérer et filtrer les termes
|
||||
$raw_terms = get_terms($term_args);
|
||||
if (is_wp_error($raw_terms) || empty($raw_terms)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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'])
|
||||
: '';
|
||||
|
||||
$image_url = $thumb_id ? wp_get_attachment_image_url($thumb_id, $settings['image_size']) : '';
|
||||
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;
|
||||
}
|
||||
if (empty($terms)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Si tri par nombre d'articles, calculer et trier manuellement
|
||||
// 5) Tri manuel si order_by=count
|
||||
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;
|
||||
$total = intval($term->count);
|
||||
$children = get_term_children($term->term_id, 'category');
|
||||
if (is_array($children)) {
|
||||
foreach ($children as $child_id) {
|
||||
$child = get_term($child_id, 'category');
|
||||
if (!is_wp_error($child)) {
|
||||
$total += intval($child->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];
|
||||
@@ -558,40 +545,58 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
|
||||
return 0;
|
||||
}
|
||||
if ('ASC' === $settings['order']) {
|
||||
return ($ca < $cb) ? -1 : 1;
|
||||
return $ca < $cb ? -1 : 1;
|
||||
}
|
||||
return ($ca > $cb) ? -1 : 1;
|
||||
return $ca > $cb ? -1 : 1;
|
||||
});
|
||||
}
|
||||
|
||||
// Calcul de la classe grille
|
||||
$columns = (int) $settings['columns'];
|
||||
$grid_class = 'columns-' . $columns;
|
||||
// 6) Affichage final
|
||||
$grid_class = 'columns-' . absint($settings['columns']);
|
||||
$is_below = ('below' === $settings['title_position']);
|
||||
|
||||
// Rendu HTML
|
||||
echo '<div class="elementor-category-grid ' . esc_attr($grid_class) . '">';
|
||||
|
||||
foreach ($terms as $term) {
|
||||
$thumbnail_id = get_term_meta($term->term_id, 'thumbnail_id', true);
|
||||
echo '<div class="category-card">';
|
||||
echo '<a href="' . esc_url(get_term_link($term)) . '">';
|
||||
if (esc_url($term->_image_url)) {
|
||||
$thumb_id = get_term_meta($term->term_id, 'thumbnail_id', true);
|
||||
$link = get_term_link($term);
|
||||
if (is_wp_error($link)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Ouvre la carte et ajoute la classe si titre en dessous
|
||||
$card_class = 'category-card' . ($is_below ? ' title-below' : '');
|
||||
echo '<div class="' . esc_attr($card_class) . '">';
|
||||
|
||||
// Image cliquable
|
||||
echo '<a href="' . esc_url($link) . '">';
|
||||
if ($thumb_id) {
|
||||
echo '<div class="category-card-image">';
|
||||
echo wp_get_attachment_image(
|
||||
$thumbnail_id,
|
||||
$thumb_id,
|
||||
$settings['image_size'],
|
||||
false,
|
||||
[
|
||||
'alt' => esc_attr($term->name),
|
||||
'class' => 'category-card-img', // optionnel : ajoutez vos classes CSS
|
||||
'class' => 'category-card-img',
|
||||
]
|
||||
);
|
||||
echo '</div>';
|
||||
}
|
||||
echo '<div class="category-card-name">' . esc_html($term->name) . '</div>';
|
||||
echo '</a>';
|
||||
|
||||
// Titre (overlay ou below) **à l’intérieur** de la carte
|
||||
if ($is_below) {
|
||||
echo '<div class="category-card-name-below">';
|
||||
echo '<a href="' . esc_url($link) . '">' . esc_html($term->name) . '</a>';
|
||||
echo '</div>';
|
||||
}
|
||||
echo '</div>';
|
||||
} else {
|
||||
echo '<div class="category-card-name overlay">' . esc_html($term->name) . '</div>';
|
||||
}
|
||||
|
||||
echo '</div>'; // .category-card
|
||||
}
|
||||
|
||||
echo '</div>'; // .elementor-category-grid
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user