feat(dashboard): cards colapsables en Analytics Dashboard
- Convertir 9 cards a estructura colapsable con Bootstrap 5 Collapse - Headers fuera de cards como botones clickeables - Cards contraídos por defecto para reducir scroll - Añadir animación de rotación del chevron (180°) - Ajustar selector JS de loading overlay a .collapsible-section - CSS para estados hover, focus y bordes redondeados Cards modificados: 1. CTR 0% (collapse-ctr-zero) 2. Quick Wins (collapse-quick-wins) 3. Contenido Decadencia (collapse-decay) 4. Contenido Estrella (collapse-star) 5. Infraposicionados (collapse-infrapos) 6. Click Distribution (collapse-click-dist) 7. Top Búsquedas (collapse-top-searches) 8. Top Clicks (collapse-top-clicks) 9. Sin Resultados (collapse-zero-results) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -212,6 +212,89 @@ body .card {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
Collapsible Cards
|
||||
================================================================= */
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-header {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-header:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-header:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 134, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Chevron rotation */
|
||||
.dashboard-analytics-wrap .collapse-chevron {
|
||||
transition: transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-header:not(.collapsed) .collapse-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Header bordes */
|
||||
.dashboard-analytics-wrap .collapsible-header {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-header:not(.collapsed) {
|
||||
border-radius: 0.375rem 0.375rem 0 0;
|
||||
}
|
||||
|
||||
/* Card sin borde superior cuando está expandido */
|
||||
.dashboard-analytics-wrap .collapsible-section .card {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Loading en collapsible section */
|
||||
.dashboard-analytics-wrap .collapsible-section.is-loading-table {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-section.is-loading-table::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
z-index: 10;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.dashboard-analytics-wrap .collapsible-section.is-loading-table::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -12px 0 0 -12px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #FF8600;
|
||||
border-radius: 50%;
|
||||
z-index: 11;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
Responsive
|
||||
================================================================= */
|
||||
|
||||
@@ -99,10 +99,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the card container and add loading state (keeps size, shows overlay)
|
||||
var card = tbody.closest('.card');
|
||||
if (card) {
|
||||
card.classList.add('is-loading-table');
|
||||
// Find the collapsible section container and add loading state (keeps size, shows overlay)
|
||||
var section = tbody.closest('.collapsible-section');
|
||||
if (section) {
|
||||
section.classList.add('is-loading-table');
|
||||
}
|
||||
|
||||
// Build form data
|
||||
@@ -157,8 +157,8 @@
|
||||
tbody.innerHTML = html;
|
||||
|
||||
// Remove loading state
|
||||
if (card) {
|
||||
card.classList.remove('is-loading-table');
|
||||
if (section) {
|
||||
section.classList.remove('is-loading-table');
|
||||
}
|
||||
|
||||
// Update pagination
|
||||
@@ -167,16 +167,16 @@
|
||||
bindPaginationEvents(paginationDiv, tableId);
|
||||
}
|
||||
} else {
|
||||
if (card) {
|
||||
card.classList.remove('is-loading-table');
|
||||
if (section) {
|
||||
section.classList.remove('is-loading-table');
|
||||
}
|
||||
showErrorMessage('Error al cargar datos');
|
||||
console.error('AJAX error:', result);
|
||||
}
|
||||
})
|
||||
.catch(function(error) {
|
||||
if (card) {
|
||||
card.classList.remove('is-loading-table');
|
||||
if (section) {
|
||||
section.classList.remove('is-loading-table');
|
||||
}
|
||||
console.error('Fetch error:', error);
|
||||
showErrorMessage('Error de conexión');
|
||||
|
||||
@@ -480,43 +480,56 @@ final class ROI_APU_Analytics_Dashboard
|
||||
|
||||
<!-- 🟡 REVISAR: Títulos con CTR 0% -->
|
||||
<?php if (!empty($ctr_zero)) : ?>
|
||||
<div class="card mb-4 shadow-sm" style="border-left: 4px solid #f59e0b;">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #f59e0b; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-ctr-zero"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-ctr-zero"
|
||||
style="background-color: #f59e0b; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
<?php esc_html_e('REVISAR: Títulos con CTR 0%', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo count($ctr_zero); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Estos términos tienen resultados pero nadie hace click. Mejora títulos y descripciones.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Término buscado', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Resultados', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Búsquedas', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($ctr_zero as $term) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html(mb_strimwidth($term['q_term'], 0, 60, '...')); ?></strong></td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$term['resultados'])); ?></td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-warning text-dark"><?php echo esc_html(number_format((int)$term['busquedas'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-danger">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('REVISAR: Títulos con CTR 0%', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo count($ctr_zero); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-ctr-zero">
|
||||
<div class="card shadow-sm" style="border-left: 4px solid #f59e0b;">
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Estos términos tienen resultados pero nadie hace click. Mejora títulos y descripciones.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Término buscado', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Resultados', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Búsquedas', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($ctr_zero as $term) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html(mb_strimwidth($term['q_term'], 0, 60, '...')); ?></strong></td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$term['resultados'])); ?></td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-warning text-dark"><?php echo esc_html(number_format((int)$term['busquedas'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-danger">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -524,41 +537,54 @@ final class ROI_APU_Analytics_Dashboard
|
||||
|
||||
<!-- 🎯 QUICK WINS: Oportunidades Fáciles -->
|
||||
<?php if (!empty($quick_wins)) : ?>
|
||||
<div class="card mb-4 shadow-sm" style="border-left: 4px solid #0284c7;">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #0284c7; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-quick-wins"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-quick-wins"
|
||||
style="background-color: #0284c7; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-bullseye"></i>
|
||||
<?php esc_html_e('QUICK WINS: Oportunidades Fáciles', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo count($quick_wins); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Términos con clicks que no están en top 1. Una pequeña mejora = más visibilidad.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Término buscado', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('CTR', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($quick_wins as $term) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html(mb_strimwidth($term['q_term'], 0, 60, '...')); ?></strong></td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-secondary"><?php echo esc_html($term['pos_prom']); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-info text-dark"><?php echo esc_html($term['ctr']); ?>%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('QUICK WINS: Oportunidades Fáciles', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo count($quick_wins); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-quick-wins">
|
||||
<div class="card shadow-sm" style="border-left: 4px solid #0284c7;">
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Términos con clicks que no están en top 1. Una pequeña mejora = más visibilidad.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Término buscado', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('CTR', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($quick_wins as $term) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html(mb_strimwidth($term['q_term'], 0, 60, '...')); ?></strong></td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-secondary"><?php echo esc_html($term['pos_prom']); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-info text-dark"><?php echo esc_html($term['ctr']); ?>%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -566,54 +592,67 @@ final class ROI_APU_Analytics_Dashboard
|
||||
|
||||
<!-- 📉 ATENCIÓN: Contenido en Decadencia -->
|
||||
<?php if (!empty($decay_content)) : ?>
|
||||
<div class="card mb-4 shadow-sm" style="border-left: 4px solid #6b7280;">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #6b7280; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-decay"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-decay"
|
||||
style="background-color: #6b7280; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-graph-down"></i>
|
||||
<?php esc_html_e('ATENCIÓN: Contenido en Decadencia', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo count($decay_content); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Posts que perdieron >20% clicks vs período anterior. Revisa si están desactualizados.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Cambio', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Antes', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Ahora', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($decay_content as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-danger"><?php echo esc_html($post['cambio_pct']); ?>%</span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html($post['clicks_anterior']); ?></td>
|
||||
<td class="text-center"><?php echo esc_html($post['clicks_actual']); ?></td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-secondary" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('ATENCIÓN: Contenido en Decadencia', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo count($decay_content); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-decay">
|
||||
<div class="card shadow-sm" style="border-left: 4px solid #6b7280;">
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Posts que perdieron >20% clicks vs período anterior. Revisa si están desactualizados.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Cambio', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Antes', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Ahora', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($decay_content as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-danger"><?php echo esc_html($post['cambio_pct']); ?>%</span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html($post['clicks_anterior']); ?></td>
|
||||
<td class="text-center"><?php echo esc_html($post['clicks_actual']); ?></td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-secondary" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -621,52 +660,65 @@ final class ROI_APU_Analytics_Dashboard
|
||||
|
||||
<!-- 🟢 MANTENER: Tu Contenido Estrella -->
|
||||
<?php if (!empty($contenido_estrella)) : ?>
|
||||
<div class="card mb-4 shadow-sm" style="border-left: 4px solid #22c55e;">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #22c55e; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-star"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-star"
|
||||
style="background-color: #22c55e; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
<?php esc_html_e('MANTENER: Tu Contenido Estrella', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo count($contenido_estrella); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Posts con más clicks. Mantén este contenido actualizado y optimizado.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 55%;"><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($contenido_estrella as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-success"><?php echo esc_html(number_format((int)$post['clicks'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html($post['pos_prom']); ?></td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-success" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('MANTENER: Tu Contenido Estrella', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo count($contenido_estrella); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-star">
|
||||
<div class="card shadow-sm" style="border-left: 4px solid #22c55e;">
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Posts con más clicks. Mantén este contenido actualizado y optimizado.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 55%;"><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($contenido_estrella as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-success"><?php echo esc_html(number_format((int)$post['clicks'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html($post['pos_prom']); ?></td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-success" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -674,54 +726,67 @@ final class ROI_APU_Analytics_Dashboard
|
||||
|
||||
<!-- Posts infraposicionados -->
|
||||
<?php if (!empty($infraposicionados)) : ?>
|
||||
<div class="card mb-4 shadow-sm" style="border-left: 4px solid #f59e0b;">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #f59e0b; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-infrapos"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-infrapos"
|
||||
style="background-color: #f59e0b; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-arrow-up-circle"></i>
|
||||
<?php esc_html_e('OPORTUNIDAD: Posts Infraposicionados', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo count($infraposicionados); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Estos posts reciben clicks pero aparecen muy abajo. Considera mejorar su scoring.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($infraposicionados as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-warning text-dark"><?php echo esc_html(number_format((int)$post['clicks'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-secondary"><?php echo esc_html($post['pos_prom']); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-warning" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('OPORTUNIDAD: Posts Infraposicionados', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo count($infraposicionados); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-infrapos">
|
||||
<div class="card shadow-sm" style="border-left: 4px solid #f59e0b;">
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Estos posts reciben clicks pero aparecen muy abajo. Considera mejorar su scoring.', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50%;"><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($infraposicionados as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-warning text-dark"><?php echo esc_html(number_format((int)$post['clicks'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-secondary"><?php echo esc_html($post['pos_prom']); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-warning" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -738,224 +803,276 @@ final class ROI_APU_Analytics_Dashboard
|
||||
|
||||
<!-- 📊 Click Distribution -->
|
||||
<?php if (!empty($click_distribution)) : ?>
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #0E2337; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-click-dist"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-click-dist"
|
||||
style="background-color: #0E2337; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-bar-chart-fill"></i>
|
||||
<?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html(array_sum(array_column($click_distribution, 'clicks'))); ?> <?php esc_html_e('clicks totales', 'roi-apu-search'); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 15%;"><?php esc_html_e('Posición', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center" style="width: 20%;"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center" style="width: 15%;"><?php esc_html_e('Porcentaje', 'roi-apu-search'); ?></th>
|
||||
<th style="width: 50%;"><?php esc_html_e('Distribución', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$position_colors = [
|
||||
'Pos 1' => '#FF8600',
|
||||
'Pos 2' => '#1e3a5f',
|
||||
'Pos 3' => '#2c5282',
|
||||
'Pos 4' => '#3d6894',
|
||||
'Pos 5' => '#4a7eb0',
|
||||
'Pos 6' => '#5a8ec0',
|
||||
'Pos 7' => '#6a9ed0',
|
||||
'Pos 8' => '#7aaee0',
|
||||
'Pos 9' => '#8abef0',
|
||||
'Pos 10' => '#9aceff',
|
||||
'Pos 11+' => '#6b7280',
|
||||
];
|
||||
foreach ($click_distribution as $dist) :
|
||||
$color = $position_colors[$dist['posicion']] ?? '#6b7280';
|
||||
?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html($dist['posicion']); ?></strong></td>
|
||||
<td class="text-center">
|
||||
<span class="badge" style="background-color: <?php echo esc_attr($color); ?>;">
|
||||
<?php echo esc_html(number_format((int)$dist['clicks'])); ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html($dist['porcentaje']); ?>%</td>
|
||||
<td>
|
||||
<div class="progress" style="height: 18px;">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
style="width: <?php echo esc_attr($dist['porcentaje']); ?>%; background-color: <?php echo esc_attr($color); ?>;"
|
||||
aria-valuenow="<?php echo esc_attr($dist['porcentaje']); ?>"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html(array_sum(array_column($click_distribution, 'clicks'))); ?> <?php esc_html_e('clicks totales', 'roi-apu-search'); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-click-dist">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 15%;"><?php esc_html_e('Posición', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center" style="width: 20%;"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center" style="width: 15%;"><?php esc_html_e('Porcentaje', 'roi-apu-search'); ?></th>
|
||||
<th style="width: 50%;"><?php esc_html_e('Distribución', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$position_colors = [
|
||||
'Pos 1' => '#FF8600',
|
||||
'Pos 2' => '#1e3a5f',
|
||||
'Pos 3' => '#2c5282',
|
||||
'Pos 4' => '#3d6894',
|
||||
'Pos 5' => '#4a7eb0',
|
||||
'Pos 6' => '#5a8ec0',
|
||||
'Pos 7' => '#6a9ed0',
|
||||
'Pos 8' => '#7aaee0',
|
||||
'Pos 9' => '#8abef0',
|
||||
'Pos 10' => '#9aceff',
|
||||
'Pos 11+' => '#6b7280',
|
||||
];
|
||||
foreach ($click_distribution as $dist) :
|
||||
$color = $position_colors[$dist['posicion']] ?? '#6b7280';
|
||||
?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html($dist['posicion']); ?></strong></td>
|
||||
<td class="text-center">
|
||||
<span class="badge" style="background-color: <?php echo esc_attr($color); ?>;">
|
||||
<?php echo esc_html(number_format((int)$dist['clicks'])); ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html($dist['porcentaje']); ?>%</td>
|
||||
<td>
|
||||
<div class="progress" style="height: 18px;">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
style="width: <?php echo esc_attr($dist['porcentaje']); ?>%; background-color: <?php echo esc_attr($color); ?>;"
|
||||
aria-valuenow="<?php echo esc_attr($dist['porcentaje']); ?>"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 📊 Top Búsquedas Table -->
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #1e3a5f; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section" id="section-top-searches">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-top-searches"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-top-searches"
|
||||
style="background-color: #1e3a5f; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-search"></i>
|
||||
<?php esc_html_e('Top Búsquedas', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_searches']); ?> <?php esc_html_e('términos', 'roi-apu-search'); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><?php esc_html_e('Término', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Búsquedas', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('CTR', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Resultados', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="top-searches-body">
|
||||
<?php foreach ($top_searches as $search) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html($search['q_term']); ?></strong></td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$search['busquedas'])); ?></td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$search['clicks'])); ?></td>
|
||||
<td class="text-center">
|
||||
<span class="badge <?php echo (float)$search['ctr'] > 0 ? 'bg-success' : 'bg-secondary'; ?>">
|
||||
<?php echo esc_html($search['ctr']); ?>%
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$search['resultados'])); ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('Top Búsquedas', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_searches']); ?> <?php esc_html_e('términos', 'roi-apu-search'); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-top-searches">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><?php esc_html_e('Término', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Búsquedas', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('CTR', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Resultados', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="top-searches-body">
|
||||
<?php foreach ($top_searches as $search) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html($search['q_term']); ?></strong></td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$search['busquedas'])); ?></td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$search['clicks'])); ?></td>
|
||||
<td class="text-center">
|
||||
<span class="badge <?php echo (float)$search['ctr'] > 0 ? 'bg-success' : 'bg-secondary'; ?>">
|
||||
<?php echo esc_html($search['ctr']); ?>%
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$search['resultados'])); ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$total_search_pages = (int) ceil($total_counts['total_searches'] / self::ITEMS_PER_PAGE);
|
||||
if ($total_search_pages > 1) :
|
||||
?>
|
||||
<div class="card-footer" id="pagination-searches">
|
||||
<?php echo $this->render_pagination(1, $total_search_pages, 'top-searches'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$total_search_pages = (int) ceil($total_counts['total_searches'] / self::ITEMS_PER_PAGE);
|
||||
if ($total_search_pages > 1) :
|
||||
?>
|
||||
<div class="card-footer" id="pagination-searches">
|
||||
<?php echo $this->render_pagination(1, $total_search_pages, 'top-searches'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- 📄 Top Posts Clickeados Table -->
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #FF8600; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section" id="section-top-clicks">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-top-clicks"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-top-clicks"
|
||||
style="background-color: #FF8600; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
<?php esc_html_e('Top Posts Clickeados', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_clicks']); ?> <?php esc_html_e('posts', 'roi-apu-search'); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="top-clicks-body">
|
||||
<?php foreach ($top_clicks as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$post['clicks'])); ?></td>
|
||||
<td class="text-center">
|
||||
<span class="badge <?php echo (float)$post['pos_prom'] <= 3 ? 'bg-success' : ((float)$post['pos_prom'] <= 5 ? 'bg-warning text-dark' : 'bg-secondary'); ?>">
|
||||
<?php echo esc_html($post['pos_prom']); ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-secondary" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('Top Posts Clickeados', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_clicks']); ?> <?php esc_html_e('posts', 'roi-apu-search'); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-top-clicks">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><?php esc_html_e('Título', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Pos. Prom.', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Acciones', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="top-clicks-body">
|
||||
<?php foreach ($top_clicks as $post) : ?>
|
||||
<tr>
|
||||
<td>
|
||||
<strong><?php echo esc_html(mb_strimwidth($post['post_title'], 0, 80, '...')); ?></strong>
|
||||
</td>
|
||||
<td class="text-center"><?php echo esc_html(number_format((int)$post['clicks'])); ?></td>
|
||||
<td class="text-center">
|
||||
<span class="badge <?php echo (float)$post['pos_prom'] <= 3 ? 'bg-success' : ((float)$post['pos_prom'] <= 5 ? 'bg-warning text-dark' : 'bg-secondary'); ?>">
|
||||
<?php echo esc_html($post['pos_prom']); ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="<?php echo esc_url(admin_url('post.php?post=' . $post['post_id'] . '&action=edit')); ?>" target="_blank" class="btn btn-outline-primary" title="<?php esc_attr_e('Editar', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="<?php echo esc_url($site_url . '/' . $post['post_name'] . '/'); ?>" target="_blank" class="btn btn-outline-secondary" title="<?php esc_attr_e('Ver', 'roi-apu-search'); ?>">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$total_click_pages = (int) ceil($total_counts['total_clicks'] / self::ITEMS_PER_PAGE);
|
||||
if ($total_click_pages > 1) :
|
||||
?>
|
||||
<div class="card-footer" id="pagination-clicks">
|
||||
<?php echo $this->render_pagination(1, $total_click_pages, 'top-clicks'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$total_click_pages = (int) ceil($total_counts['total_clicks'] / self::ITEMS_PER_PAGE);
|
||||
if ($total_click_pages > 1) :
|
||||
?>
|
||||
<div class="card-footer" id="pagination-clicks">
|
||||
<?php echo $this->render_pagination(1, $total_click_pages, 'top-clicks'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- ❌ Búsquedas Sin Resultados Table -->
|
||||
<?php if (!empty($all_zero_results)) : ?>
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center" style="background-color: #ef4444; color: white;">
|
||||
<h6 class="mb-0 d-flex align-items-center gap-2">
|
||||
<div class="collapsible-section" id="section-zero-results">
|
||||
<button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-zero-results"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapse-zero-results"
|
||||
style="background-color: #ef4444; color: white;">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-x-circle"></i>
|
||||
<?php esc_html_e('Búsquedas Sin Resultados', 'roi-apu-search'); ?>
|
||||
</h6>
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_zero_results']); ?> <?php esc_html_e('términos', 'roi-apu-search'); ?></span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Los usuarios buscan esto pero NO encuentran nada. ¡Crea este contenido!', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><?php esc_html_e('Término', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Frecuencia', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Última búsqueda', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="zero-results-body">
|
||||
<?php foreach ($all_zero_results as $term) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html($term['q_term']); ?></strong></td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-danger"><?php echo esc_html(number_format((int)$term['frecuencia'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<small class="text-muted"><?php echo esc_html(date('d/m/Y H:i', strtotime($term['ultima_busqueda']))); ?></small>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong><?php esc_html_e('Búsquedas Sin Resultados', 'roi-apu-search'); ?></strong>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_zero_results']); ?> <?php esc_html_e('términos', 'roi-apu-search'); ?></span>
|
||||
<i class="bi bi-chevron-down collapse-chevron"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse" id="collapse-zero-results">
|
||||
<div class="card shadow-sm" style="border-left: 4px solid #ef4444;">
|
||||
<div class="card-body p-0">
|
||||
<p class="small text-muted px-3 pt-3 mb-2">
|
||||
<?php esc_html_e('Los usuarios buscan esto pero NO encuentran nada. ¡Crea este contenido!', 'roi-apu-search'); ?>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><?php esc_html_e('Término', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Frecuencia', 'roi-apu-search'); ?></th>
|
||||
<th class="text-center"><?php esc_html_e('Última búsqueda', 'roi-apu-search'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="zero-results-body">
|
||||
<?php foreach ($all_zero_results as $term) : ?>
|
||||
<tr>
|
||||
<td><strong><?php echo esc_html($term['q_term']); ?></strong></td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-danger"><?php echo esc_html(number_format((int)$term['frecuencia'])); ?></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<small class="text-muted"><?php echo esc_html(date('d/m/Y H:i', strtotime($term['ultima_busqueda']))); ?></small>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$total_zero_pages = (int) ceil($total_counts['total_zero_results'] / self::ITEMS_PER_PAGE);
|
||||
if ($total_zero_pages > 1) :
|
||||
?>
|
||||
<div class="card-footer" id="pagination-zero-results">
|
||||
<?php echo $this->render_pagination(1, $total_zero_pages, 'zero-results'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$total_zero_pages = (int) ceil($total_counts['total_zero_results'] / self::ITEMS_PER_PAGE);
|
||||
if ($total_zero_pages > 1) :
|
||||
?>
|
||||
<div class="card-footer" id="pagination-zero-results">
|
||||
<?php echo $this->render_pagination(1, $total_zero_pages, 'zero-results'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user