Child Theme a WordPress: guia pràctica per personalitzar sense perdre l’essència

4.1. Arxius mínims

Un child només necessita:

• style.css → identifica el tema i conté el CSS personalitzat.
• functions.php → carrega estils i funcions del pare i permet afegir codi propi.

4.2. Estructura de carpetes

blocksy-child/
│── style.css
│── functions.php

4.3. Contingut del style.css

/*
 Theme Name:   Blocksy Child
 Theme URI:    https://degalalab.com
 Description:  Exemple de child theme net i optimitzat
 Author:       deGalaLab
 Author URI:   https://degalalab.com
 Template:     blocksy
 Version:      1.0.0
 Text Domain:  blocksy-child
*/

/* Afegir CSS personalitzat aquí */

Nota: el camp Template: blocksy indica el tema pare. La resta de camps són informatius i poden adaptar-se a cada projecte.

4.4. Contingut del functions.php

<?php
/**
 * Blocksy Child - functions.php
 */

// Carregar estils del pare i del fill
function blocksy_child_enqueue_styles() {
    $parent_style = 'blocksy-style'; // identificador del tema pare

    // Estil del tema pare
    wp_enqueue_style(
        $parent_style,
        get_template_directory_uri() . '/style.css'
    );

    // Estil del tema fill
    wp_enqueue_style(
        'blocksy-child-style', // nom intern del child
        get_stylesheet_directory_uri() . '/style.css', // ruta al child
        array( $parent_style ), // es carrega després del pare
        wp_get_theme()->get('Version') // controla la caché
    );
}
add_action('wp_enqueue_scripts', 'blocksy_child_enqueue_styles');

Lectura del codi: primer es carrega el tema pare; després, el child. Això garanteix que les personalitzacions es mantinguin sempre estables i sostenibles en el temps.

4.5. Instal·lació

1. Comprimir la carpeta en .zip.
2. A WordPress → Aparença > Temes > Afegir nou.
3. Pujar i activar el .zip.

4.6. Resultat

• El lloc es veu igual que amb el tema pare.
• Tota personalització es fa al child.
• Les actualitzacions del pare no afecten els canvis.