From 97b8c1be315f2374fbef1e42cbc812431d7d712c Mon Sep 17 00:00:00 2001 From: pigui Date: Thu, 24 Sep 2026 16:20:28 +0200 Subject: [PATCH] Initial commit --- README.md | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..859d9f1 --- /dev/null +++ b/README.md @@ -0,0 +1,150 @@ +# Gure Ametsa Bi Lagun — Web WordPress + +Web de la protectora **Gure Ametsa Bi Lagun** (Jaizubia 44, Hondarribia), en castellano y euskera, lista para desplegar con Docker Compose en **Dokploy**. + +> Base de datos: MariaDB. WordPress no soporta PostgreSQL de forma oficial. + +## Qué incluye + +- **WordPress (última versión) + PHP 8.3 + MariaDB 11.4**, con WP-CLI dentro de la imagen. +- **Web bilingüe castellano / euskera** con [Polylang](https://wordpress.org/plugins/polylang/) (incluido en la imagen): + - Castellano en `/` y euskera en `/eu/`, con selector **ES | EU** en la cabecera y el pie. + - Todas las páginas, menús, especies y textos del tema existen en los dos idiomas desde el primer arranque. + - Las fichas de los animales comparten los datos (edad, sexo, estado, foto…) entre idiomas: solo hay que traducir el nombre y la descripción. +- **Instalación automática** en el primer arranque: idiomas, páginas, menús, portada y enlaces permanentes. +- **Tema propio `gure-ametsa`**: portada con textos editables en cada idioma (Apariencia → Personalizar → Portada · Castellano / Portada · Euskera), listado de adopciones con filtros, fichas de animales y diseño adaptado a móvil. +- **Plugin `gure-ametsa-core`** (mu-plugin, siempre activo): + - Tipo de contenido **Animales** con ficha: estado (en adopción / urgente / busca acogida / reservado / adoptado), sexo, edad, tamaño, raza, fecha de llegada, salud y compatibilidades. + - Listado público en `/adopta/`, filtrable por especie, sexo y tamaño. Los adoptados desaparecen del listado automáticamente. + - Formulario de contacto/adopción `[ga_contacto]`. Envía un email **y** guarda cada mensaje en *Mensajes* dentro del panel, así no se pierde aunque falle el correo. + - Shortcode `[ga_animales numero="6" especie="perro" estado="urgente"]` para usar en cualquier página. + +## Diseño + +El diseño está inspirado en [Beargrass Animal Rescue](https://louisvillewebguy.com/examples/beargrass-animal-rescue/): +- **Tipografía:** títulos en Fraunces muy gruesa y texto en Karla. Las dos van incluidas en el tema, sin Google Fonts. +- **Paleta por defecto:** ciruela y mostaza. +- **Portada:** a pantalla completa con cuatro «puertas»: Adopta, Acoge, Voluntariado y Dona. +- **Listado de animales:** panel de filtros por especie, tamaño, edad, sexo y compatibilidad. +- **Pasos de adopción:** en tarjetas. +- **Contacto:** sección oscura con el formulario en una tarjeta. +- **Pie:** columnas de enlaces. + +## Personalizar la web sin programar + +### Apariencia → Personalizar +- **Diseño (Gure Ametsa)** + - **Colores:** paletas listas (ciruela y mostaza, verde y rojo, azul mar y coral, bosque y teja) o colores a mano. El texto de los botones se ajusta solo para que se lea bien. + - **Tipografía:** tipos de letra de títulos y texto, grosor de los títulos, tamaño y redondeo de las esquinas. + - **Cabecera:** teléfono, selector ES|EU, botones y barra superior opcional. + - **Pie de página:** textos. +- **Contacto y redes:** dirección, teléfono, email, horario y redes. Se actualizan en toda la web. +- **Portada:** cada sección se puede **mostrar, ocultar y reordenar** (campo «Orden»). Sus textos se escriben en castellano y en euskera. + - Portada principal con foto o **vídeo en bucle** y las cuatro puertas + - Animales en adopción (**carrusel** o rejilla) + - Cómo adoptar + - Acogida + - Donaciones (admite un formulario de GiveWP) + - Cifras + - Historias con final feliz (muestra sola los animales adoptados) + - Perdidos y encontrados + - Preguntas frecuentes + - Contenido libre de la página Inicio + - Hotel y visita + - Contacto con formulario + - Opcionales, ocultas por defecto: tarjetas de ayuda y accesos a perros y gatos +- En los títulos se puede resaltar una parte con el color de acento escribiéndola **\*entre asteriscos\***. + +### Editor de bloques: patrones «Gure Ametsa» +En cualquier página, abre **+ → Patrones → Gure Ametsa** para insertar secciones prediseñadas. Cada una está en castellano y en euskera: +- portada con imagen +- llamada a la acción +- tres tarjetas +- pasos numerados +- animales en adopción +- **carrusel de animales** +- adopciones urgentes +- imagen y texto +- testimonio +- preguntas frecuentes +- qué necesitamos +- contacto con formulario + +También hay estilos de bloque propios en el panel **Estilos**: fondo arena u oscuro, tarjeta, aviso, antetítulo con rayita, imagen en arco, lista con ✓, pasos numerados y testimonio. + +El shortcode `[ga_animales numero="10" vista="carrusel"]` muestra un carrusel de animales en cualquier página. + +## Plugins incluidos + +Se instalan solos en el primer arranque (etapa 3 de `docker/setup.sh`). + +| Plugin | Estado | Para qué | +|---|---|---| +| WP Mail SMTP | activo | Envío fiable del correo. Se configura con las variables `SMTP_*` o desde el panel. | +| UpdraftPlus | activo | Copias de seguridad: base de datos a diario y archivos cada semana. Conectad Google Drive o Dropbox en sus ajustes. | +| Limit Login Attempts Reloaded | activo | Bloquea ataques al acceso del panel. | +| Two Factor | activo | Verificación en dos pasos (Usuarios → Perfil). | +| Converter for Media | activo | Convierte las fotos a WebP para que carguen más rápido. | +| Yoast SEO | activo | Google y vista previa al compartir en redes. | +| Smash Balloon Instagram Feed | activo | Muestra vuestro Instagram. Hay que conectar la cuenta. | +| Koko Analytics | activo | Estadísticas de visitas sin cookies. | +| Kadence Blocks | activo | Bloques visuales extra: carruseles de imágenes, pestañas, acordeones e iconos. | +| Blocks Animation | activo | Animaciones de entrada para cualquier bloque. | +| GiveWP | desactivado | Donaciones online con tarjeta o PayPal. | +| MailPoet | desactivado | Newsletter. | +| Complianz | desactivado | Aviso de cookies. Solo hace falta si añadís YouTube, Analytics, etc. | +| WP Super Cache | desactivado | Caché. Si lo activáis, excluid la página de Contacto. | + +## Despliegue en Dokploy + +1. Sube este directorio a un repositorio Git (GitHub/GitLab/Gitea). +2. En Dokploy: **Create Service → Compose**, elige el repositorio. Compose path: `./docker-compose.yml`. +3. En la pestaña **Environment**, pega el contenido de `.env.example` y cambia los valores (contraseñas largas, `WP_URL` con tu dominio real en `https://`). +4. En **Domains**, añade el dominio → servicio `wordpress`, puerto `80`, HTTPS activado (Let's Encrypt). +5. **Deploy**. En 1–2 minutos el sitio estará instalado. Entra en `https://tu-dominio/wp-admin` con `WP_ADMIN_USER` / `WP_ADMIN_PASSWORD`. + +> `WP_URL` debe coincidir exactamente con el dominio configurado en Dokploy. Si cambias de dominio, basta con cambiar la variable y redesplegar. + +### Datos persistentes y copias de seguridad + +- Volúmenes: `wp_data` (WordPress, fotos subidas, plugins) y `db_data` (base de datos). +- En Dokploy puedes programar backups de volúmenes. También a mano: + ```sh + docker compose exec wordpress wp --allow-root db export - > backup.sql + ``` + +### Actualizaciones del tema + +El tema y el plugin viven en la imagen y se copian al volumen en cada arranque: al hacer *Redeploy* se aplican los cambios. **No edites el tema desde el panel**; los cambios se perderían (por eso el editor de archivos está desactivado). + +## Desarrollo local + +```sh +cp .env.example .env # pon WP_URL=http://localhost:8080 y SEED_DEMO_ANIMALS=true +docker compose -f docker-compose.yml -f docker-compose.local.yml up -d --build +open http://localhost:8080 +``` + +Para empezar de cero: `docker compose down -v`. + +## Primeros pasos tras instalar + +1. **Animales → Añadir animal**: nombre, foto principal, descripción y ficha, en castellano. Después, en la columna de idiomas del listado (o en la caja «Idiomas» del editor), pulsa **+** junto a la bandera vasca para crear la versión en euskera: la ficha y la foto se copian solas, solo hay que traducir nombre y descripción. Si usaste `SEED_DEMO_ANIMALS=true`, borra los de ejemplo. +2. **Apariencia → Personalizar**: sube el logo (Identidad del sitio), el icono y la foto de portada. +3. **Correo**: rellenad las variables `SMTP_*` en Dokploy (o configurad *WP Mail SMTP* desde el panel). Mientras tanto, los mensajes siguen llegando al menú *Mensajes*. +4. Revisa y completa **Aviso legal** y **Política de privacidad** (razón social, CIF). +5. **Traducciones**: los textos en euskera se han redactado para la web; conviene que una persona euskaldun los revise (páginas en *Páginas*, filtrando por idioma, y textos del tema en los archivos PHP). + +## Estructura + +``` +Dockerfile Imagen: wordpress oficial + WP-CLI + código propio +docker-compose.yml Servicios wordpress + db (para Dokploy) +docker-compose.local.yml Expone el puerto 8080 en local +docker/entrypoint.sh Lanza la configuración inicial y arranca Apache +docker/setup.sh Instalación idempotente con WP-CLI +docker/setup-content.php Idiomas, páginas, menús y especies (es + eu) +docker/content/{es,eu}/ Contenido inicial de las páginas en cada idioma +wp-content/themes/gure-ametsa/ Tema (inc/: personalizador, CSS dinámico, patrones · template-parts/home/: secciones de portada) +wp-content/mu-plugins/gure-ametsa-core.php Animales + formulario +```