Installare tema Sage per WordPress [guida tecnica]

Per usare il tema Sage di Roots, dobbiamo installare un WordPress strutturato in maniera diversa chiamato Bedrock: https://roots.io/bedrock/

Essendo uno strumento avanzato, utilizza comandi di console Linux che si presume si conoscano (un minimo), quindi devi avere accesso alla console del server, non occorre avere i privilegi di amministratore, ma almeno dell’utente web con potere di scrittura ed esecuzione. Se non sei questo utente diventalo con questo comando:

# su - nome_utente

Se il gestore dell’hosting non da la possibilità di avere una shell interattiva (sicuramente per problemi legati alla sicurezza), possiamo abilitare la shell temporaneamente:

# chsh -s /bin/bash nome_utente
# su - nome_utente

Cosa sono Bedrock e Sage?

Bedrock è un progetto open source strutturato in una certa maniera che unisce la sua versatilità, estrema diffusione (il 60% dei siti al mondo si basa su WordPress), completezza di WordPress alla straordinaria potenza, efficienza, pulizia e sicurezza di Laravel. Tramite un plugin interno chiamato Acorn, si rende il “vecchio amicone dei siti web: WordPress” potente e agile grazie alla struttura ingegneristica e all’avanguardia di Laravel.

Sage invece è un tema che completa questa trasformazione andando ad introdurre i template Blade di Laravel in WordPress… provare per credere 🙂 Per chi non conosce Blade, si tratta di un sistema di scrittura dei template non più in PHP puro, ma con una nomenclatura che rende il codice sicuro, più leggibile e quindi meno soggetto a errori.

Inoltre è possibile separare la “logica” dalla visualizzazione, cioè le “view” si andranno ad occupare SOLO di come si visualizzeranno i dati, mentre un file separato si occuperà di recuperare i dati e passarli alla view: figata!

Installazione di WordPress – Bedrock

Portati nella root web del progetto e inizia:

# composer create-project roots/bedrock .
# mv .env.example .env

# vi .env

DB_NAME=bedrock_db
DB_USER=bedrock_user
DB_PASSWORD=password_sicura
DB_HOST=localhost

WP_HOME=https://tuodominio.it
WP_SITEURL=${WP_HOME}/wp

WP_ENV=development

Visita: https://roots.io/salts.html

Copia “ENV FORMAT” e incollale nel file .env

Opzionale, abilita i moduli Apache necessari a bedrock:

# a2enmod rewrite proxy_fcgi setenvif
# a2enconf php\*-fpm

Cambia i permessi a vari file:

# find . -type d -exec chmod 755 {} \;
# find . -type f -exec chmod 644 {} \;

Cambia la DocumentRoot per farla puntare alla cartella web che i comandi sopra hanno creato. Se il tuo provider non ti fa modificare la DocumentRoot, puoi sempre inserire nel file .htaccess queste direttive:

RewriteEngine On
RewriteRule ^(.*)$ web/$1 [L]

Installare WordPress come sempre visitando la root del sito tramite il proprio browser, considera che avendo inserito le credenziali del database nel file .env, adesso non ti vengono chieste come farebbe una tradizionale installazione di WordPress.

Passiamo al tema Sage

# cd web/app/themes
# composer create-project roots/sage nome-del-tuo-tema
# cd nome-del-tuo-tema

Assicuriamoci di stare usando la versione di npm compatibile:

# nvm use 22

Installiamo ciò di cui Sage ha bisogno e compiliamo i vari file:

# npm install
# npm run build

Cambia le opzioni del PHP.INI:

memory_limit = 256M
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 120

Adesso passiamo ad una configurazione che permette di vedere nel browser i cambiamenti appena salviamo i file del tema:

Cambia vite.config.js

import fs from 'fs';
...

export default defineConfig({
base: ...
...
  server: {
    host: '0.0.0.0',
    port: 5173,
    https: {
      key: fs.readFileSync(
        '/var/www/clients/client1/webXX/ssl/indirizzosito-le.key',
      ),
      cert: fs.readFileSync(
        '/var/www/clients/client1/webXX/ssl/indirizzosito-le.crt',
      ),
    },
    hmr: {
      host: 'indirizzosito',
      protocol: 'wss',
    },
  },
})