Blog / Child Themes en WordPress i com crear-los

Child Themes en WordPress i com crear-los

per SW Team

Child Themes en WordPress i com crear-los

Si alguna vegada has volgut personalitzar el teu lloc de WordPress sense perdre els teus canvis després d'una actualització del tema, un child theme (tema fill) és la solució perfecta. Un child theme et permet modificar el disseny i les funcionalitats del teu lloc web sense tocar el codi del tema original. En aquesta guia, us mostrarem pas a pas com crear i configurar un child theme en WordPress.

Quins avantatges té un Child Theme?

Un child theme és un tema que hereta totes les característiques i funcionalitats d'un altre tema, conegut com el tema pare. Quan el tema pare s'actualitza, les teves personalitzacions en el child theme romanen intactes.

Passos per a Crear i Configurar un Child Theme

1. Crear la Carpeta del Child Theme

  1. Accedeix al teu directori d'instal·lació de WordPress mitjançant FTP o l'Administrador d'Arxius del teu servei de hosting.
  2. Navega a wp-content/themes/.
  3. Crea una nova carpeta per al teu child theme. Dóna-li un nom representatiu, per exemple, twentytwentyfour-child. Recorda que ha d'heretar el nom del parent theme, en aquest cas twentytwentyfour.

cta:hosting_wordpress

2. Crear l’Arxiu style.css

Dins de la carpeta del teu child theme, crea un arxiu anomenat style.css i afegeix la següent capçalera:

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    http://tudominio.com/twentytwentyfour-child
 Description:  Tema fill de Twenty Twenty-Four
 Author:       El teu Nom
 Author URI:   http://tudominio.com
 Template:     twentytwentyfour
 Version:      1.0.0
*/

/* Aquí pots afegir els teus estils personalitzats (CSS) */
  • Theme Name: El nom del teu child theme.
  • Template: El nom de la carpeta del tema pare o parent theme (ha de coincidir exactament).

3. Crear l’ Arxiu functions.php

En la mateixa carpeta del teu child theme, crea un arxiu anomenat functions.php. Aquest arxiu s'utilitzarà per a encolar (enqueue) la fulla d'estils del tema pare i qualsevol altra funcionalitat que desitgis afegir.

4. Activar el Child Theme

  1. Ves al teu panell d'administració de WordPress.
  2. Navega a Apariencia > Temas.
  3. Hauries de veure el teu child theme en el teu llistat de temes. Fes clic a "Activar".

5. Personalitzar el Child Theme

Ara que el teu child theme està actiu, pots començar a personalitzar-lo. A continuació et proporcionem algunes idees:

Afegir Estils Personalitzats

Pots afegir els teus estils personalitzats directament en l'arxiu style.css del teu child theme que has creat anteriorment on has definit les dades de la plantilla.

/* Aquí pots afegir els teus estils personalitzats (CSS) */
/* Canviar el color de fons del cos */
body {
    background-color: #f0f0f0;
}

Sobreescriure Plantilles del Tema Pare

Si necessites modificar una plantilla del tema pare, còpia l'arxiu del tema pare a la carpeta del teu child theme i edita’l allà. Per exemple, per a modificar header.php:

  1. Còpia header.php del tema pare a la carpeta del teu child theme.
  2. Realitza les teves modificacions en la còpia de header.php en el teu child theme.

6. Provar i Depurar

És important provar el teu child theme a fons per a assegurar-te que tot funcioni correctament. Aquí hi ha algunes coses que pots verificar:

  • Assegura't que tots els estils i scripts es carreguin correctament.
  • Verifica que les plantilles personalitzades funcionin com s'espera.
  • Revisa el teu lloc en diferents navegadors i dispositius per a assegurar la compatibilitat.

Conclusió

Crear i configurar un child theme en WordPress és una excel·lent manera de personalitzar el teu lloc web sense risc de perdre els teus canvis amb actualitzacions del tema. Seguint aquests passos, pots crear un child theme i començar a fer les teves pròpies modificacions de manera segura i efectiva. Anima't a experimentar i dóna-li un toc únic al teu lloc de WordPress!

Tens alguna pregunta o necessites més ajuda amb el teu child theme? Deixa'ns un comentari i estarem encantats de llegir-te!

cta:domains

i