Creare un Tema Child Moderno con Vite + Twig per WordPress

Lo sviluppo WordPress sta cambiando. Sebbene la sua architettura tradizionale basata su PHP rimanga solida, il mondo frontend si è evoluto rapidamente. Strumenti come Vite e linguaggi di templating come Twig offrono velocità, modularità e un’esperienza di sviluppo decisamente più moderna. Ma come integrare queste tecnologie nel familiare ecosistema WordPress, specialmente quando si lavora con i temi child?

In questa guida pratica, esploreremo come creare un tema child Vite Twig performante e manutenibile. Ci rivolgeremo a sviluppatori frontend che già conoscono WordPress ma desiderano adottare workflow più efficienti e potenti, simili a quelli usati nello sviluppo di applicazioni web moderne. Vedremo come sfruttare la velocità di Vite per la gestione degli asset (JavaScript, CSS) e l’eleganza di Twig per la creazione dei template, il tutto all’interno di una struttura child theme che garantisce aggiornabilità e pulizia del codice.

Perché un Tema Child? I Fondamentali

Prima di tuffarci nelle novità, rinfreschiamoci la memoria sui vantaggi classici di un tema child in WordPress:

1. Aggiornabilità Sicura: Il motivo principale. Puoi aggiornare il tema parent senza perdere le personalizzazioni apportate nel child. Modifiche dirette al tema parent verrebbero sovrascritte ad ogni update.
2. Organizzazione e Pulizia: Isola le tue modifiche. Invece di disseminare personalizzazioni nel tema parent (una pratica sconsigliata), le centralizzi nel tema child, rendendo il codice più facile da leggere, manutenere e debuggare.
3. Override Selettivo: Puoi sovrascrivere solo i file template o le funzioni che ti interessano, ereditando tutto il resto dal parent. Questo evita di duplicare codice inutilmente.
4. Punto di Partenza Veloce: Se il tema parent è ben strutturato (come quelli basati su Timber, che vedremo tra poco), creare un child theme è un ottimo modo per iniziare rapidamente un nuovo progetto con una base solida.

Perché Modernizzare con Vite e Twig?

Se i temi child sono una pratica consolidata, perché introdurre Vite e Twig? La risposta sta nell’efficienza e nella qualità del processo di sviluppo e del risultato finale.

Vite: Il Futuro del Frontend Tooling

Vite.js è un build tool di nuova generazione che migliora drasticamente l’esperienza di sviluppo frontend. I suoi punti di forza principali sono:

• Server di Sviluppo Fulmineo: Utilizza i moduli ES nativi del browser per servire il codice sorgente, eliminando la necessità di bundling durante lo sviluppo. Il risultato? Avvio istantaneo e Hot Module Replacement (HMR) incredibilmente veloce. Le modifiche a JS e CSS si riflettono nel browser quasi istantaneamente, senza ricaricare la pagina.
• Build Ottimizzata: Per la produzione, Vite utilizza Rollup sotto il cofano per generare bundle altamente ottimizzati, con code splitting, lazy loading e preloading automatici.
• Configurazione Semplificata: Offre configurazioni sensate di default per i casi d’uso più comuni (React, Vue, TypeScript, CSS preprocessors), ma rimane altamente personalizzabile.
• Gestione Moderna degli Asset: Supporta nativamente CSS Modules, PostCSS, import di asset statici e molto altro.

Integrare Vite in un tema WordPress (parent o child) significa portare questa velocità e potenza nel nostro ambiente di sviluppo tradizionale.

Twig: Template Eleganti e Sicuri

Twig è un motore di template PHP moderno, flessibile e sicuro, reso popolare da framework come Symfony. Usarlo in WordPress, spesso tramite la libreria Timber, offre numerosi vantaggi:

• Separazione Logica/Presentazione: Mantiene il codice PHP fuori dai file di template (.twig). I file Twig contengono principalmente HTML e sintassi Twig minimale per variabili, loop e condizioni, rendendoli più leggibili e manutenibili, soprattutto per i frontendisti.
• Sintassi Chiara e Concisa: Molto più leggibile rispetto al mescolare PHP e HTML. Supporta ereditarietà dei template (extends), inclusione di blocchi (include, embed), filtri e funzioni potenti.
• Sicurezza: Abilita l’auto-escaping dell’output per prevenire attacchi XSS per impostazione predefinita.
• Riusabilità: Facilita la creazione di componenti UI riutilizzabili attraverso macro e include.

Combinare un tema child Vite Twig significa unire la robustezza dell’architettura WordPress child con la velocità di sviluppo di Vite e la pulizia dei template Twig.

Preparazione dell’Ambiente e Prerequisiti

Prima di iniziare, assicurati di avere:

1. Installazione WordPress Locale: Usa strumenti come LocalWP, Docker, MAMP/XAMPP.
2. Node.js e npm/yarn: Necessari per installare e gestire Vite e le sue dipendenze. Scaricali da nodejs.org.
3. Composer: Se il tuo tema parent usa Timber (consigliato), avrai bisogno di Composer per gestire le dipendenze PHP. Scaricalo da getcomposer.org.
4. Tema Parent Basato su Twig: Fondamentale. Questa guida presume che tu stia creando un child di un tema che già utilizza Twig/Timber. Potrebbe essere un tema custom basato su Timber o uno dei temi disponibili che lo supportano. Se parti da zero, Timber Starter Theme è un ottimo punto di partenza per il tuo parent theme.
5. Conoscenze di Base: Familiarità con PHP (per functions.php), HTML, CSS, JavaScript (ES6+), la linea di comando e i concetti base dei build tool frontend. Una conoscenza preliminare di Twig è utile.

Creazione della Struttura del Tema Child

Iniziamo creando la struttura base del nostro tema child nella cartella /wp-content/themes/:

Crea la Cartella: Chiamala in modo descrittivo, ad esempio mio-tema-child.

Crea style.css: Questo file è obbligatorio e deve contenere l’header informativo che definisce il tema come child:

/*
 Theme Name:   Mio Tema Child
 Theme URI:    https://miosito.it/mio-tema-child
 Description:  Tema Child per Mio Tema Parent con Vite e Twig
 Author:       Il Tuo Nome / La Tua Agenzia
 Author URI:   https://miosito.it
 Template:     miotemaparent  <-- IMPORTANT: Usa lo slug (nome cartella) del tema parent
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         vite, twig, timber, performance
 Text Domain:  miotemachild
*/

/* Qui puoi aggiungere CSS custom o importare il CSS del parent se necessario,
   ma la gestione principale del CSS avverrà tramite Vite. */

Importante: Assicurati che il valore Template: corrisponda esattamente al nome della cartella del tuo tema parent.

Crea functions.php: Questo file sarà il cuore dell’integrazione tra WordPress, Vite e il tema parent. Inizialmente sarà vuoto, lo popoleremo più avanti.

<?php
/**
 * Funzioni e definizioni per Mio Tema Child
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Mio_Tema_Child
 */

// Codice per l'integrazione di Vite e altre personalizzazioni verranno aggiunte qui.

?>

Attiva il Tema Child: Vai nella Bacheca WordPress > Aspetto > Temi e attiva “Mio Tema Child”. Ora il tuo sito dovrebbe avere l’aspetto del tema parent, poiché non abbiamo ancora sovrascritto nulla.

Ereditare e Modificare Template Twig

La bellezza di usare un tema parent basato su Timber/Twig è che l’override dei template è semplice e intuitivo.

• Come Funziona: Per sovrascrivere un file .twig del tema parent (es. miotemaparent/views/components/card.twig), crea la stessa struttura di cartelle e lo stesso file nel tuo tema child (mio-tema-child/views/components/card.twig). Timber cercherà prima nel tema child e, se non lo trova, userà quello del parent.
• Esempio – Modificare l’Header: Supponiamo che il tema parent abbia miotemaparent/views/header.twig. Per modificarlo:
  1. Crea la cartella views nel tuo tema child: mio-tema-child/views/.
  2. Copia miotemaparent/views/header.twig in mio-tema-child/views/header.twig.
  3. Modifica il file mio-tema-child/views/header.twig come desideri.

Puoi usare i potenti costrutti di Twig come {% extends %}, {% block %}, {% include %} e {% embed %} per rendere le tue modifiche ancora più modulari, sovrascrivendo solo specifiche sezioni (block) di un template parent invece dell’intero file. Consulta la documentazione di Twig e Timber per maggiori dettagli.

Configurazione di Vite per il Tema Child

Questa è la parte cruciale per modernizzare il workflow. Installeremo Vite all’interno della cartella del nostro tema child.

Apri il Terminale: Naviga nella cartella del tuo tema child (cd path/to/wp-content/themes/mio-tema-child).

Inizializza il Progetto Node: Se non hai già un package.json, crealo:

npm init -y

Installa Vite e Plugin Necessari:

npm install --save-dev vite @vitejs/plugin-legacy

vite: Il core di Vite.

@vitejs/plugin-legacy: Utile per generare versioni compatibili con browser meno recenti che non supportano i moduli ES nativi (opzionale ma consigliato per ampia compatibilità).

Crea la Struttura per gli Asset Sorgenti: Crea una cartella src (o come preferisci chiamarla) per i tuoi file JavaScript e CSS sorgenti:

mio-tema-child/
├── src/
│   ├── js/
│   │   └── main.js       # Il tuo entry point JS principale
│   ├── css/
│   │   └── style.css     # Il tuo entry point CSS principale
│   └── img/              # Immagini gestite da Vite (opzionale)
├── views/
│   └── ... (template Twig sovrascritti)
├── functions.php
├── package.json
├── style.css
└── ... (altri file come node_modules, package-lock.json)

Crea il File di Configurazione vite.config.js: Nella root del tema child, crea vite.config.js:

// mio-tema-child/vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import path from 'path';

// Ottieni il nome della cartella del tema dinamicamente
const themeName = path.basename(__dirname); // -> 'mio-tema-child'

export default defineConfig(({ command }) => ({
  base: command === 'serve' ? '' : `/wp-content/themes/${themeName}/dist/`, // Base path per produzione
  publicDir: 'public', // Cartella per asset statici che non necessitano processing
  build: {
    // Output directory relativa alla root del progetto (mio-tema-child)
    outDir: 'dist',
    assetsDir: '', // Asset relativi a outDir
    manifest: true, // Genera manifest.json
    rollupOptions: {
      input: {
        // Definisci i tuoi entry points
        main: path.resolve(__dirname, 'src/js/main.js'),
        // Potresti avere altri entry points, es. per l'admin
        // admin: path.resolve(__dirname, 'src/js/admin.js'),
      },
      output: {
        // Opzionale: personalizza nomi file output
        entryFileNames: `[name].js`,
        chunkFileNames: `chunks/[name].[hash].js`,
        assetFileNames: (assetInfo) => {
          // Metti i CSS nella root di dist, altri asset in sottocartelle
          if (assetInfo.name.endsWith('.css')) {
            return '[name][extname]';
          }
          // Gestisci altri tipi di file (immagini, font)
          const extType = assetInfo.name.split('.').pop();
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            return `img/[name][extname]`;
          }
          if (/woff2?|eot|ttf|otf/i.test(extType)) {
            return `fonts/[name][extname]`;
          }
          return `assets/[name][extname]`;
        },
      }
    },
    // Opzionale: Svuota la cartella dist ad ogni build
    emptyOutDir: true,
  },
  server: {
    // Configurazione per il dev server
    origin: 'http://localhost:5173', // URL base del dev server Vite
    host: '0.0.0.0', // Rendi accessibile nella rete locale
    port: 5173, // Porta standard di Vite (puoi cambiarla)
    strictPort: true, // Fallisce se la porta è occupata
    hmr: {
      host: 'localhost', // O l'IP della tua macchina di sviluppo se accedi da un altro device/VM
    },
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'], // Specifica i browser da supportare
    }),
  ],
  resolve: {
    // Alias utili (opzionale)
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@js': path.resolve(__dirname, './src/js'),
      '@css': path.resolve(__dirname, './src/css'),
      '@img': path.resolve(__dirname, './src/img'),
    },
  },
}));

Spiegazione Chiave:

base: Fondamentale. In sviluppo (command === 'serve'), è vuoto perché useremo l’URL completo del dev server. In produzione, deve puntare al percorso web della cartella dist all’interno del tema child (es. /wp-content/themes/mio-tema-child/dist/).

build.outDir: Specifica la cartella dove Vite salverà i file compilati (dist).

build.manifest: Genera un manifest.json che mappa i nomi dei file sorgente ai loro output con hash, essenziale per l’integrazione con WordPress in produzione.

build.rollupOptions.input: Definisce i tuoi file JS di partenza (entry points). Vite analizzerà questi file e includerà tutte le dipendenze (altri JS, CSS importati, immagini, etc.).

server: Configura il server di sviluppo di Vite, inclusa la porta e l’host per l’Hot Module Replacement (HMR).

plugins: Include il plugin legacy per la compatibilità cross-browser.

Aggiungi Script a package.json: J

// mio-tema-child/package.json
{
  // ... altre chiavi ...
  "scripts": {
    "dev": "vite",                      // Avvia il server di sviluppo Vite
    "build": "vite build",              // Esegue la build per produzione
    "preview": "vite preview"           // Anteprima locale della build di produzione
  }
  // ... altre chiavi ...
}

Ora hai Vite configurato! Puoi popolare src/js/main.js e src/css/style.css (o usare SASS/LESS, Vite li supporta) con il tuo codice. Ricorda di importare il tuo CSS principale all’interno del tuo main.js se vuoi che Vite lo gestisca come parte del grafo delle dipendenze:

// src/js/main.js
import '../css/style.css'; // Importa il CSS principale

console.log('Tema Child Moderno con Vite + Twig caricato!');

// Il tuo codice JavaScript qui...
// Esempio: importare un modulo
import { sayHello } from './modules/hello';
sayHello('Sviluppatore');

// Esempio: importare un'immagine
import logoUrl from '@img/logo.svg';
console.log('URL Logo:', logoUrl); // Vite gestirà il percorso corretto

Integrazione con WordPress tramite functions.php

Il passo finale è dire a WordPress come caricare gli script e gli stili gestiti da Vite, sia in modalità sviluppo (usando il dev server) che in produzione (usando i file compilati e il manifest).

Aggiungi il seguente codice al tuo mio-tema-child/functions.php:

<?php
/**
 * Funzioni e definizioni per Mio Tema Child
 *
 * @package Mio_Tema_Child
 */

// Definisci costanti utili
define('MIO_TEMA_CHILD_VERSION', wp_get_theme()->get('Version'));
define('MIO_TEMA_CHILD_PATH', get_stylesheet_directory());      // Path su disco
define('MIO_TEMA_CHILD_URL', get_stylesheet_directory_uri()); // URL base

// --- Integrazione Vite ---

// URL del server di sviluppo Vite (deve corrispondere a vite.config.js)
define('VITE_DEV_SERVER_URL', 'http://localhost:5173');
// Path relativo alla cartella 'dist' nel tema
define('VITE_DIST_PATH', 'dist');

/**
 * Verifica se il server di sviluppo Vite è in esecuzione.
 * Prova a connettersi alla porta definita.
 *
 * @return bool True se il server è attivo, false altrimenti.
 */
function is_vite_dev_server_running(): bool {
    // Cache statica per evitare controlli multipli sulla stessa richiesta
    static $is_running = null;
    if ($is_running !== null) {
        return $is_running;
    }

    // Se WP_DEBUG è false, assumiamo che non sia in sviluppo locale con Vite
    if (!defined('WP_DEBUG') || !WP_DEBUG) {
         $is_running = false;
         return false;
    }

    $vite_dev_url_parts = wp_parse_url(VITE_DEV_SERVER_URL);
    $host = $vite_dev_url_parts['host'] ?? 'localhost';
    $port = $vite_dev_url_parts['port'] ?? 5173;

    // Silenzia errori e usa timeout basso
    $socket = @fsockopen($host, $port, $errno, $errstr, 0.1);

    if ($socket) {
        fclose($socket);
        $is_running = true;
    } else {
        $is_running = false;
    }
    return $is_running;
}

/**
 * Carica gli script e gli stili gestiti da Vite.
 */
function mio_tema_child_enqueue_vite_assets() {

    $is_dev = is_vite_dev_server_running();
    $theme_url = MIO_TEMA_CHILD_URL;
    $dist_path = VITE_DIST_PATH;
    $dist_url = "{$theme_url}/{$dist_path}";
    $dist_dir_path = MIO_TEMA_CHILD_PATH . '/' . $dist_path;
    $manifest_path = $dist_dir_path . '/.vite/manifest.json'; // Vite 5+ usa .vite/manifest.json

    // Entry points definiti in vite.config.js (relativi alla root del progetto Vite)
    $entry_points = [
        'src/js/main.js', // Assicurati che corrisponda all'input in vite.config.js
        // 'src/js/admin.js', // Se hai un entry point per l'admin
    ];

    if ($is_dev) {
        // --- Modalità Sviluppo (Vite Dev Server) ---

        // 1. Includi il client Vite per HMR e connessione al dev server
        wp_enqueue_script(
            'vite-client',
            VITE_DEV_SERVER_URL . '/@vite/client',
            [],
            null,
            ['strategy' => 'defer', 'type' => 'module'] // Usa type="module"
        );

        // 2. Includi gli entry points puntando al dev server
        foreach ($entry_points as $entry) {
            $handle = 'vite-' . sanitize_key(basename($entry, '.js')); // Crea un handle univoco
            wp_enqueue_script(
                $handle,
                VITE_DEV_SERVER_URL . '/' . $entry,
                [], // Nessuna dipendenza WP diretta qui, Vite gestisce gli import
                null,
                ['strategy' => 'defer', 'type' => 'module'] // Usa type="module"
            );
        }

    } else {
        // --- Modalità Produzione (Build) ---

        // Verifica che il manifest esista
        if (!file_exists($manifest_path)) {
            error_log('Manifest Vite non trovato in: ' . $manifest_path);
            if (current_user_can('administrator')) {
                echo '<div class="notice notice-error"><p>Errore: manifest.json di Vite non trovato. Esegui <code>npm run build</code> nel tema child.</p></div>';
            }
            return;
        }

        // Leggi il manifest
        $manifest_content = file_get_contents($manifest_path);
        $manifest = json_decode($manifest_content, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
             error_log('Errore nel parsing del manifest Vite: ' . json_last_error_msg());
             return;
        }

        foreach ($entry_points as $entry) {
            if (!isset($manifest[$entry])) {
                error_log("Entry point '{$entry}' non trovato nel manifest Vite.");
                continue;
            }

            $manifest_entry = $manifest[$entry];
            $handle = 'vite-' . sanitize_key(basename($entry, '.js'));

            // 1. Includi il file JS principale dell'entry point
            if (isset($manifest_entry['file'])) {
                wp_enqueue_script(
                    $handle,
                    "{$dist_url}/{$manifest_entry['file']}",
                    [], // Gestisci dipendenze WP se necessario (es. jQuery)
                    MIO_TEMA_CHILD_VERSION, // Versioning basato sulla versione tema
                    ['strategy' => 'defer', 'type' => 'module'] // type="module" se usi ES modules
                );
            }

            // 2. Includi i file CSS associati all'entry point
            if (!empty($manifest_entry['css'])) {
                foreach ($manifest_entry['css'] as $index => $css_file) {
                    $css_handle = $handle . '-css-' . $index;
                    wp_enqueue_style(
                        $css_handle,
                        "{$dist_url}/{$css_file}",
                        [], // Gestisci dipendenze CSS se necessario
                        MIO_TEMA_CHILD_VERSION
                    );
                    // Opzionale: Aggiungi dipendenza CSS allo script principale
                    // wp_add_inline_script($handle, " ", 'before'); // Non sempre necessario
                }
            }

            // 3. (Opzionale) Preload dei chunk JS importati dinamicamente
            if (!empty($manifest_entry['dynamicImports'])) {
                foreach ($manifest_entry['dynamicImports'] as $dynamic_import_key) {
                    if (isset($manifest[$dynamic_import_key]['file'])) {
                         // Potresti aggiungere link rel=modulepreload qui
                         // add_action('wp_head', function() use ($dist_url, $manifest, $dynamic_import_key) {
                         //     $file = $manifest[$dynamic_import_key]['file'];
                         //     echo '<link rel="modulepreload" href="' . esc_url("{$dist_url}/{$file}") . '">';
                         // }, 1);
                    }
                }
            }
        }
    }
}
// Aggancia la funzione all'hook corretto (es. wp_enqueue_scripts per il frontend)
add_action('wp_enqueue_scripts', 'mio_tema_child_enqueue_assets');

/**
 * Aggiunge l'attributo type="module" ai tag script enqueued da Vite.
 * Necessario perché wp_enqueue_script non supporta nativamente type="module" in tutte le versioni.
 * NOTA: Dalla versione WP 6.3+, ['strategy' => 'defer', 'type' => 'module'] in wp_enqueue_script dovrebbe funzionare.
 * Questa funzione serve come fallback o per versioni precedenti.
 */
// function add_type_attribute_to_vite_scripts($tag, $handle, $src) {
//     // Identifica gli script di Vite (quelli che iniziano con 'vite-')
//     if (strpos($handle, 'vite-') === 0) {
//         // Aggiunge type="module" se non già presente
//         if (strpos($tag, 'type=') === false) {
//              $tag = str_replace('<script ', '<script type="module" ', $tag);
//         }
//     }
//     return $tag;
// }
// add_filter('script_loader_tag', 'add_type_attribute_to_vite_scripts', 10, 3);

// --- Altre Funzionalità del Tema Child ---

/**
 * Esempio: Caricare il CSS del tema parent (se necessario e non gestito da Vite)
 * Di solito non serve se il CSS parent è importato via JS/CSS in Vite.
 */
// function mio_tema_child_enqueue_parent_styles() {
//     wp_enqueue_style(
//          'parent-style',
//          get_template_directory_uri() . '/style.css' // O il percorso corretto del CSS compilato del parent
//     );
// }
// add_action( 'wp_enqueue_scripts', 'mio_tema_child_enqueue_parent_styles' );

/**
 * Esempio: Aggiungere funzionalità custom o sovrascrivere funzioni pluggable del parent
 */
// function mia_funzione_custom() {
//     // ...
// }

// Timber / Twig Setup (Se necessario sovrascrivere o estendere la configurazione di Timber del parent)
// Potrebbe essere necessario inizializzare Timber qui se il parent non lo fa o se vuoi aggiungere percorsi Twig custom
/*
add_filter('timber/locations', function ($paths) {
    // Aggiungi la cartella 'views' del child theme come priorità più alta
    $paths[] = [
        'namespace' => 'theme', // O il namespace usato dal parent
        'path' => MIO_TEMA_CHILD_PATH . '/views'
    ];
    // Assicurati che i percorsi del parent siano mantenuti (potrebbe essere gestito da Timber automaticamente)
    return $paths;
});

// Aggiungere funzioni/filtri custom a Twig
add_filter('timber/twig', function (\Twig\Environment $twig) {
    $twig->addFunction(new \Timber\Twig_Function('mia_funzione_twig', 'mia_funzione_php_corrispondente'));
    $twig->addFilter(new \Timber\Twig_Filter('mio_filtro_twig', 'mio_filtro_php_corrispondente'));
    return $twig;
});
*/

?>

Workflow di Sviluppo:

1. Avvia Vite: Apri il terminale nella cartella del tema child ed esegui npm run dev. Vite si avvierà e mostrerà l’URL del dev server (es. http://localhost:5173).
2. Carica il Sito: Apri il tuo sito WordPress locale nel browser. La funzione is_vite_dev_server_running() rileverà Vite attivo e mio_tema_child_enqueue_vite_assets() caricherà gli script dal dev server.
3. Sviluppa: Modifica i tuoi file in src/js o src/css. Grazie all’HMR, vedrai le modifiche applicate quasi istantaneamente nel browser senza ricaricare la pagina. Le modifiche ai file .twig richiederanno invece un refresh manuale della pagina WordPress.

Workflow di Produzione:

1. Ferma Vite: Se il dev server è attivo, fermalo (Ctrl+C nel terminale).
2. Esegui la Build: Esegui npm run build nel terminale (sempre nella cartella del tema child). Vite ottimizzerà e compilerà i tuoi asset nella cartella dist e genererà il manifest.json.
3. Carica il Sito: Ricarica il tuo sito WordPress. Ora is_vite_dev_server_running() restituirà false. La funzione mio_tema_child_enqueue_vite_assets() leggerà il manifest.json e caricherà i file JS/CSS compilati dalla cartella dist con nomi file contenenti hash per il cache busting.
4. Deployment: Carica tutti i file del tema child sul server di produzione, inclusa la cartella dist generata dalla build.

Best Practice per Sviluppo e Manutenzione

• Struttura Twig: Mantieni una struttura coerente. Se sovrascrivi views/partials/header.twig, mettilo in mio-tema-child/views/partials/header.twig. Usa i blocchi Twig ({% block %}) per modifiche mirate quando possibile, estendendo ({% extends %}) i template del parent. Per approfondire la gerarchia dei template in WordPress, consulta il WordPress Codex e vedi come Timber la mappa ai file Twig nella sua documentazione.
• Gestione Asset: Lascia che Vite gestisca JS, CSS e idealmente anche le immagini statiche del tema (loghi, icone) importandole nel tuo JS/CSS. Per le immagini caricate dagli utenti, continua a usare la gestione media di WordPress e le sue funzioni di ottimizzazione immagini. Il versioning è automatico grazie agli hash nei nomi file generati da npm run build.
• Deployment: Il processo standard è: sviluppa in locale (npm run dev), builda per produzione (npm run build), testa la build (npm run preview o ricaricando il sito locale), e poi carica tutto (inclusa la cartella dist) sul server live tramite FTP, Git o altri sistemi di deploy.
• Cache Busting: Vite lo gestisce automaticamente per JS e CSS grazie agli hash nei nomi file. Assicurati che anche il server non applichi caching troppo aggressivo che impedisca il caricamento delle nuove versioni. Potrebbe essere utile integrare strategie di caching avanzate a livello server.
• Performance: Oltre alle ottimizzazioni di Vite, considera tecniche come Critical CSS e ottimizzazioni Core Web Vitals.

Conclusione: I Vantaggi di un Tema Child Moderno

Creare un tema child Vite Twig rappresenta un salto di qualità nello sviluppo WordPress frontend. Riassumiamo i benefici:

• Developer Experience (DX) Migliorata: HMR fulmineo e un ambiente di sviluppo moderno grazie a Vite.
• Codice Pulito e Modulare: Separazione netta tra logica PHP e presentazione HTML/Twig. Template più leggibili e manutenibili.
• Performance Ottimizzate: Build di produzione altamente ottimizzate da Vite/Rollup (code splitting, tree shaking, minificazione, asset hashing).
• Aggiornabilità Garantita: Tutti i vantaggi classici di un tema child rimangono validi.
• Workflow Allineato: Avvicina lo sviluppo WordPress ai workflow utilizzati in altri ambiti del web development moderno (React, Vue, etc.).

Sebbene richieda una configurazione iniziale leggermente più complessa rispetto al metodo tradizionale, l’investimento in un setup tema child Vite Twig ripaga ampiamente in termini di velocità di sviluppo, qualità del codice e performance del sito finale. È un passo deciso verso un modo più moderno e sostenibile di costruire temi WordPress personalizzati.

Sei pronto a portare il tuo theming WordPress al livello successivo? Sperimenta questo approccio e scopri come Vite e Twig possono rivoluzionare il tuo flusso di lavoro!