Docker pentru WordPress: Workflow Pro pentru ANR Cluj

Dezvoltarea de teme WordPress a evoluat mult dincolo de simplul FTP. Pentru proiectul ANR Cluj, am simțit nevoia unei abordări mai riguroase, care să elimine „it works on my machine” și să ofere un mediu de producție stabil. Iată cum am containerizat totul folosind Docker.

Setup-ul local cu docker-compose

Secretul pentru un workflow rapid este montarea directorului cu tema ca volum. În docker-compose.yml, mapăm tema locală direct în containerul WordPress, permițând modificări live fără a reconstrui imaginea.

services:
  wordpress:
    image: wordpress:latest
    volumes:
      - ./theme/anr-cluj-v2:/var/www/html/wp-content/themes/anr-cluj-v2
    environment:
      WORDPRESS_DEBUG: 1

  db:
    image: mysql:8.0
    volumes:
      - wp_data:/var/lib/mysql

volumes:
  wp_data:

Bootstrap automatizat cu setup-local.sh

Nu mai importăm manual dump-uri. Folosim un script care pornește containerele, așteaptă baza de date și execută un sed sau un UPDATE SQL pentru a schimba URL-ul de producție cu cel local.

# setup-local.sh
docker compose up -d
sleep 15 # Așteptăm MySQL
docker exec -T db mysql -u root -p$PASS wp_db < dump.sql
docker exec -T db mysql -u root -p$PASS -e "UPDATE wp_options SET option_value = 'http://localhost:8770' WHERE option_name IN ('siteurl', 'home');"

Reverse Proxy și Configurări Extra

Problema clasică a WordPress în spatele unui proxy este redirecționarea infinită. Soluția? docker-compose.override.yml injectează configurări direct în wp-config.php.

# docker-compose.override.yml
environment:
  WORDPRESS_CONFIG_EXTRA: |
    if(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
        $_SERVER['HTTPS'] = 'on';
    }

Pentru Apache, configurăm Virtual Host-ul să trimită header-ul necesar:

<VirtualHost *:80>
    ProxyPass / http://127.0.0.1:8770/
    ProxyPassReverse / http://127.0.0.1:8770/
    RequestHeader set X-Forwarded-Proto https
</VirtualHost>

Arhitectură multi-paletă cu oklch()

Pentru a oferi flexibilitate, am creat un sistem de palete bazat pe CSS custom properties. În Customizer, injectăm culorile dinamic prin wp_add_inline_style:

function anr_palette_css() {
    $palettes = anr_get_palettes();
    $selected = get_theme_mod('active_palette', 'prune');
    $css = ":root { ";
    foreach($palettes[$selected] as $var => $value) {
        $css .= "--{$var}: {$value};";
    }
    $css .= " }";
    wp_add_inline_style('anr-style', $css);
}

Folosim oklch() pentru a ne asigura că accesibilitatea culorilor este constantă pe toate ecranele, indiferent de nuanță.

Deploy: De la local la VPS

Scriptul deploy-campus.sh automatizează totul: face dump la baza de date locală, înlocuiește URL-urile, urcă fișierele prin SCP și resetează containerele pe server. Pentru iterații rapide, rclone sincronizează doar fișierele modificate din temă, ignorând .git și node_modules.

Această structură ne-a permis să păstrăm compatibilitatea cu vechea temă Flatsome prin înregistrarea de stub-uri pentru shortcode-uri, asigurând o tranziție lină pentru conținutul existent pe anrcluj.ro.