190 lines
11 KiB
Markdown
190 lines
11 KiB
Markdown
# 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.
|
||
|
||
## Logo y colores
|
||
|
||
- El logo original se ha vectorizado en `wp-content/themes/gure-ametsa/assets/img/`:
|
||
- `logo.svg`: logo completo, sin fondo.
|
||
- `logo-mark.svg`: el arco con el perro y el gato, sin texto.
|
||
- `favicon.svg`: el mismo símbolo, para la pestaña del navegador.
|
||
- Las capas del SVG (arco, animales, texto) llevan clases propias. Así, en el pie oscuro el texto del logo se muestra en beige.
|
||
- La paleta por defecto, «Colores del logo», sale del propio logo:
|
||
|
||
| Color | Valor | Dónde se usa |
|
||
|---|---|---|
|
||
| Principal | `#401f0c` (marrón del logo) | Cabecera, botones, secciones oscuras |
|
||
| Acento | `#bd8537` (caramelo, el beige del logo más intenso) | Botones principales y palabras resaltadas |
|
||
| Secciones | `#f3ecdc` (beige aclarado) | Fondos alternos |
|
||
| Fondo | `#fcfaf5` | Fondo general |
|
||
| Texto | `#2b1508` | Texto |
|
||
|
||
- En *Diseño → Cabecera* se elige cómo sale el logo arriba: símbolo + nombre, logo completo o solo el nombre.
|
||
|
||
## APIs
|
||
|
||
| API | Dirección | Qué incluye |
|
||
|---|---|---|
|
||
| REST | `/wp-json/wp/v2/animales`, `/wp-json/wp/v2/especies` | Animales con el campo `ficha` (valores y textos legibles en su idioma). Se puede filtrar por idioma con `?lang=es` o `?lang=eu`. |
|
||
| GraphQL (WPGraphQL) | `/graphql` | Tipos `Animal` / `Especie` con el campo `ficha`. Explorador GraphiQL en el panel (menú GraphQL). |
|
||
| Swagger / OpenAPI 3 | `/rest-api/docs/` (interfaz) y `/rest-api/schema` (esquema) | Documentación interactiva de la API REST. Por defecto solo para usuarios conectados; `API_DOCS_PUBLIC=true` la hace pública. |
|
||
|
||
Ejemplo de consulta GraphQL:
|
||
|
||
```graphql
|
||
{
|
||
animales(first: 10) {
|
||
nodes { title uri especies { nodes { name } } ficha { estado edad edadUnidad compatible textos { estado edad } } }
|
||
}
|
||
}
|
||
```
|
||
|
||
Para escribir en la API REST (crear o editar animales) se usan las *contraseñas de aplicación* de WordPress (Usuarios → Perfil) con autenticación Basic sobre HTTPS; Swagger lo admite desde el botón «Authorize». Los mensajes del formulario no se exponen en ninguna API.
|
||
|
||
## 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.
|
||
- **Paletas:** por defecto, los colores del logo. También están ciruela y mostaza (la de Beargrass), verde y rojo, azul mar y bosque.
|
||
- **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
|
||
```
|