0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
396 lines
11 KiB
Markdown
396 lines
11 KiB
Markdown
# ⚠️ CONFLICTOS CON WORDPRESS
|
|
|
|
## Conflicto 1: Bootstrap `.card` vs WordPress `.card`
|
|
|
|
### El Problema
|
|
|
|
WordPress Core tiene esta regla CSS que limita el ancho de las cards:
|
|
|
|
```css
|
|
/* WordPress Core CSS */
|
|
.card {
|
|
max-width: 520px;
|
|
}
|
|
```
|
|
|
|
Bootstrap 5 usa `.card` como componente principal:
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-body">...</div>
|
|
</div>
|
|
```
|
|
|
|
**CONFLICTO**: Cuando usas `<div class="card">` de Bootstrap dentro del admin de WordPress, WordPress aplica automáticamente `max-width: 520px`, limitando el ancho de tus cards.
|
|
|
|
---
|
|
|
|
### ❌ SOLUCIÓN INCORRECTA
|
|
|
|
**NO cambies `.card` por `.apus-card` o cualquier otra clase custom.**
|
|
|
|
**Razones:**
|
|
|
|
1. Bootstrap `.card` es un **sistema completo** con múltiples clases relacionadas:
|
|
- `.card-body`
|
|
- `.card-header`
|
|
- `.card-footer`
|
|
- `.card-title`
|
|
- `.card-text`
|
|
- `.card-img-top`
|
|
- Y muchas más...
|
|
|
|
2. Si cambias `.card` a `.apus-card`, pierdes **TODOS** los estilos de Bootstrap
|
|
|
|
3. Tendrías que recrear manualmente TODO el sistema de cards
|
|
|
|
---
|
|
|
|
### ✅ SOLUCIÓN CORRECTA
|
|
|
|
**Opción 1: Wrapper con Mayor Especificidad (RECOMENDADA)**
|
|
|
|
Agregar una clase wrapper en el `<body>` y sobreescribir el CSS de WordPress:
|
|
|
|
```html
|
|
<body class="apus-admin" style="font-family: 'Poppins', sans-serif; background-color: #f8f9fa;">
|
|
<div class="container-fluid py-4" style="max-width: 1400px;">
|
|
<!-- Todos tus cards de Bootstrap funcionan normalmente -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<!-- Contenido -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
```
|
|
|
|
**CSS:**
|
|
```css
|
|
/* Sobreescribir el max-width de WordPress */
|
|
.apus-admin .card {
|
|
max-width: none !important;
|
|
}
|
|
|
|
/* Asegurar que funcione en todos los contextos */
|
|
body.apus-admin .card,
|
|
#apusAdminPanel .card {
|
|
max-width: none !important;
|
|
}
|
|
```
|
|
|
|
**Opción 2: Inline Style (Rápido)**
|
|
|
|
Si solo tienes unos pocos cards:
|
|
|
|
```html
|
|
<div class="card shadow-sm" style="max-width: none;">
|
|
<div class="card-body">
|
|
<!-- Contenido -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**Opción 3: CSS Global**
|
|
|
|
```html
|
|
<style>
|
|
/* Sobreescribir WordPress max-width en todos los cards del admin */
|
|
body .card {
|
|
max-width: none !important;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
---
|
|
|
|
## Conflicto 2: Form Switches (CRÍTICO)
|
|
|
|
### El Problema
|
|
|
|
Los switches de Bootstrap muestran **dos círculos** en lugar de un círculo que se desliza.
|
|
|
|
### Causa Raíz
|
|
|
|
1. **Pseudo-elemento `::before` de WordPress**: Muestra un SVG de checkmark (✓)
|
|
2. **`background-image` de Bootstrap**: Muestra el círculo del switch
|
|
3. **`background-size` incorrecto**: WordPress usa `auto` en lugar de `contain`
|
|
|
|
**Resultado**: Dos elementos visuales superpuestos en el switch.
|
|
|
|
---
|
|
|
|
### ✅ Solución Definitiva
|
|
|
|
```css
|
|
/* Eliminar completamente pseudo-elementos de WordPress */
|
|
body .form-switch .form-check-input[type="checkbox"]::before,
|
|
body .form-switch .form-check-input[type="checkbox"]::after,
|
|
.apus-admin .form-switch .form-check-input[type="checkbox"]::before,
|
|
.apus-admin .form-switch .form-check-input[type="checkbox"]::after {
|
|
content: none !important;
|
|
display: none !important;
|
|
background-image: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* Configurar correctamente el background-size y repeat */
|
|
body .form-switch .form-check-input[type="checkbox"],
|
|
.apus-admin .form-switch .form-check-input[type="checkbox"] {
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: left center !important;
|
|
}
|
|
|
|
body .form-switch .form-check-input[type="checkbox"]:checked,
|
|
.apus-admin .form-switch .form-check-input[type="checkbox"]:checked {
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: right center !important;
|
|
}
|
|
```
|
|
|
|
**Qué hace cada parte:**
|
|
|
|
1. **Elimina `::before` y `::after`**: Anula completamente los pseudo-elementos de WordPress
|
|
2. **`content: none !important`**: Elimina cualquier contenido SVG de WordPress
|
|
3. **`display: none !important`**: Oculta el pseudo-elemento aunque tenga contenido
|
|
4. **`background-size: contain`**: Asegura que el círculo de Bootstrap se escale correctamente
|
|
5. **`background-repeat: no-repeat`**: Previene que el círculo se duplique
|
|
6. **`background-position`**: Controla la posición del círculo (left cuando OFF, right cuando ON)
|
|
|
|
---
|
|
|
|
## Conflicto 3: Alineación Vertical de Switches (CRÍTICO)
|
|
|
|
### El Problema
|
|
|
|
Los labels de los switches aparecen **desalineados verticalmente** con los switches, con una diferencia de aproximadamente **10.5px**.
|
|
|
|
### Causa Raíz
|
|
|
|
1. WordPress aplica `label { vertical-align: middle; }` globalmente
|
|
2. Bootstrap usa `display: block` + `float: left` en `.form-check`
|
|
3. Conflicto de layout entre elementos flotantes y `vertical-align`
|
|
|
|
---
|
|
|
|
### ✅ Solución Definitiva
|
|
|
|
```css
|
|
/* Fix alineación vertical de labels en switches */
|
|
#topBarTab .form-check.form-switch {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
#topBarTab .form-switch .form-check-input {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
#topBarTab .form-switch .form-check-label,
|
|
.form-switch .form-check-label.small {
|
|
line-height: 16px !important;
|
|
padding-top: 0 !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
```
|
|
|
|
**Qué hace cada parte:**
|
|
|
|
1. **`display: flex`**: Convierte el contenedor en flexbox
|
|
2. **`align-items: center`**: Alinea todos los hijos verticalmente por su centro
|
|
3. **`line-height: 16px`**: Coincide con la altura del switch para alineación perfecta
|
|
4. **Márgenes en 0**: Elimina espacios verticales no deseados
|
|
|
|
**Resultado**: Diferencia de **0px** entre el centro del switch y el centro del label.
|
|
|
|
---
|
|
|
|
## Conflicto 4: `.button` (Raro)
|
|
|
|
WordPress también estiliza `.button`. **Solución**: Siempre usa `.btn` de Bootstrap:
|
|
|
|
```html
|
|
<!-- ✅ Seguro -->
|
|
<button class="btn btn-primary">OK</button>
|
|
|
|
<!-- ❌ Conflicto con WP -->
|
|
<button class="button">OK</button>
|
|
```
|
|
|
|
---
|
|
|
|
## Conflicto 5: `.row` (Raro)
|
|
|
|
Algunos temas de WordPress pueden estilizar `.row`. Si tienes problemas:
|
|
|
|
```css
|
|
.apus-admin .row {
|
|
/* Reset de cualquier estilo de WordPress */
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: calc(var(--bs-gutter-x) * -0.5);
|
|
margin-left: calc(var(--bs-gutter-x) * -0.5);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Conflicto 6: Colores de Links
|
|
|
|
WordPress usa colores específicos. Asegúrate de que tu CSS tenga mayor especificidad:
|
|
|
|
```css
|
|
/* WordPress puede tener reglas globales */
|
|
a { color: #0073aa; }
|
|
|
|
/* Tu CSS debe ser más específico */
|
|
.apus-admin a { color: #FF8600; }
|
|
.apus-admin .card a { color: #FF8600; }
|
|
```
|
|
|
|
---
|
|
|
|
## Template Actualizado con Todos los Fixes
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin: [Component Name]</title>
|
|
|
|
<!-- Bootstrap 5.3.2 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/Font/bootstrap-icons.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../../Css/style.css">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* FIX 1: Sobreescribir max-width de WordPress en Bootstrap cards */
|
|
body .card,
|
|
.apus-admin .card {
|
|
max-width: none !important;
|
|
}
|
|
|
|
/* FIX 2: Eliminar pseudo-elementos de WordPress en switches */
|
|
body .form-switch .form-check-input[type="checkbox"]::before,
|
|
body .form-switch .form-check-input[type="checkbox"]::after {
|
|
content: none !important;
|
|
display: none !important;
|
|
background-image: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* FIX 3: Configurar background correctamente en switches */
|
|
body .form-switch .form-check-input[type="checkbox"] {
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: left center !important;
|
|
}
|
|
|
|
body .form-switch .form-check-input[type="checkbox"]:checked {
|
|
background-position: right center !important;
|
|
}
|
|
|
|
/* FIX 4: Alineación vertical de labels en switches */
|
|
.form-check.form-switch {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.form-switch .form-check-input {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.form-switch .form-check-label {
|
|
line-height: 16px !important;
|
|
padding-top: 0 !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 991px) {
|
|
.tab-header { padding: 0.75rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="apus-admin">
|
|
<!-- Contenido del admin panel -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## Checklist Anti-Conflictos WordPress
|
|
|
|
Antes de implementar un componente, verificar:
|
|
|
|
- [ ] Agregar clase `.apus-admin` al `<body>`
|
|
- [ ] **CRÍTICO**: Sobreescribir `.card { max-width: none !important; }`
|
|
- [ ] **CRÍTICO**: Eliminar pseudo-elementos `::before` y `::after` de switches
|
|
- [ ] **CRÍTICO**: Configurar `background-size: contain` en switches
|
|
- [ ] **CRÍTICO**: Configurar `background-repeat: no-repeat` en switches
|
|
- [ ] **CRÍTICO**: Configurar `background-position: left/right center` en switches
|
|
- [ ] **CRÍTICO**: Implementar `display: flex` + `align-items: center` en `.form-check.form-switch`
|
|
- [ ] **CRÍTICO**: Configurar `line-height: 16px` en labels de switches
|
|
- [ ] Usar `.btn` en lugar de `.button`
|
|
- [ ] Verificar que colores custom tengan `!important` si es necesario
|
|
- [ ] Usar DevTools para verificar que estilos de WordPress estén overridden
|
|
- [ ] **Probar switches**: deben mostrar UN solo círculo que se desliza
|
|
- [ ] **Probar alineación**: labels deben estar perfectamente alineados con switches (0px diferencia)
|
|
- [ ] Probar en un admin de WordPress real (si aplica)
|
|
|
|
---
|
|
|
|
## Verificación en DevTools
|
|
|
|
### Verificar Fix de Cards
|
|
|
|
```css
|
|
/* ✅ CORRECTO - Deberías ver: */
|
|
.apus-admin .card {
|
|
max-width: none !important; /* ✅ Tu CSS */
|
|
}
|
|
|
|
/* Y esto debería estar tachado/overridden: */
|
|
.card {
|
|
max-width: 520px; /* ❌ WordPress (overridden) */
|
|
}
|
|
```
|
|
|
|
### Verificar Fix de Switches
|
|
|
|
```css
|
|
/* ✅ CORRECTO - Deberías ver: */
|
|
.form-switch .form-check-input[type="checkbox"]::before {
|
|
content: none !important; /* ✅ Sin checkmark */
|
|
display: none !important; /* ✅ Oculto */
|
|
}
|
|
|
|
.form-switch .form-check-input[type="checkbox"] {
|
|
background-size: contain !important; /* ✅ Círculo escalado */
|
|
background-repeat: no-repeat !important; /* ✅ Sin duplicar */
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Volver al Índice
|
|
|
|
[← Volver al README](README.md)
|