Enllaç permanent

5

Temes fill de WordPress

Temes fill

Els temes fill, o child themes, són l’única manera professional de modificar un tema de WordPress existent. Aprofito per agrair Jordi Rosell per introduir-m’hi ara farà un any. Els temes són biblioteques d’arxius que controlen l’aparença del nostre web. Un tema fill és un tema que hereta totes les propietats d’un tema pare. WordPress en parla detalladament al seu lloc per a desenvolupadors, però són una mica massa tècnics i només en parlen en anglès, motiu pel qual escric aquest article.

Temes fill

Els avantatges principals dels temes fill són:

  • La possibilitat d’actualitzar el tema pare sense que se sobreescriguin les nostres modificacions.
  • Un control eficient de les modificacions, que s’agrupen a banda del tema original.

Es pot crear un tema fill automàticament amb el plugin Child Themify, però us recomano fer-ho manualment seguint els passos a continuació per tal d’entendre’n el funcionament.

Crea una carpeta de tema

A la carpeta de temes hi trobaràs tots els temes disponibles. En principi hi haurà els que ofereix WordPress per defecte (Twenty Ten, Twenty Eleven i Twenty Twelve) més els que t’hagis instal·lat tu.

Crea una carpeta pel teu tema amb el nom que vulguis.

wp-content/themes/nom-del-meu-tema-fill/

Els nous arxius els ubicarem a aquesta nova carpeta i no tocarem res de la carpeta pare.

Crea una fulla d’estils

La fulla d’estils s’haurà de dir style.css i tenir una estructura concreta. A la part superior definirem els paràmetres del nostre tema fill. Aquesta part no és codi CSS, sino un comentari que CSS no interpretarà, però WordPress sí.

/*
Theme Name:     El meu primer tema fill
Theme URI:      http://jordigran.com/temes-fill-de-wordpress
Description:    Tema fill del Twenty Twelve de WordPress
Author:         Jordi Gran
Author URI:     http://jordigran.com
Template:       twentytwelve                             
Version:        1.0
*/

Arribats a aquest punt ja podríem triar el nostre tema fill al panell de control de WordPress anant a la pestanya d’Aparença. El tema fill funcionarà només si també hi ha el tema pare. Qualsevol arxiu de tema que WordPress necessiti el buscarà a la carpeta fill primer, i si no el troba a la carpeta del pare després. Els arxius fill sobreescriuen els arxius pare.

Captura de tema fill

Donat que ara tenim un arxiu style.css fill sobreescrivint el seu homònim pare, haurem d’importar el contingut d’aquest (i si calgués, de qualsevol altre fulla d’estil que necessitem).

/* Importa la fulla d'estil del pare */
@import url("../twentytwelve/style.css");

A partir d’aquí ja podem afegir els nostres estils, que donat que funcionen en cascada, sobreescriuran qualsevol estil que hi hagi a la fulla principal.

/* Treu el subratllat dels enllaços i els fa grissos */
a { text-decoration: none;
    color: #666666;
}

Afegeix més arxius

Qualsevol arxiu del tema pare que volgueu modificar, l’heu de copiar a la carpeta del tema fill i modificar-ne la còpia. Si voleu afegir arxius nous, per exemple una plantilla per una categoria específica, també ho podeu fer.

* Podeu crear una imatge per al vostre tema (que només veureu com a administradors). S’ha de dir screenshot.png i medir 300 × 225 píxels.

L’arxiu functions.php

Si voleu modificar l’arxiu functions.php heu de tenir en compte que funciona de forma diferent a la resta d’arxius. WordPress no sobreescriurà aquest arxiu. Primer carrega l’arxiu fill i després l’arxiu pare. Aquest és un tema important a l’hora de triar un tema pare o un altre. No tots els temes estan preparats per que el nostre tema fill pugui modificar el functions.php. Bàsicament el problema radica en que per molt que definim una funció al tema fill, si aquesta es redefineix al tema pare, ho fa abans d’executar-se i la definició al tema fill és en va. Els únics temes pare vàlids són aquells que comproven si la funció existeix abans de definir-la.

if (!function_exists('una_funcio_qualsevol')) {
    function una_funcio_qualsevol() {
        //  Definició del que farà la funció
    }
}

Traducció del tema

Només en cas que us funcioni el functions.php fill, podeu editar les cadenes de text com ho farieu en un tema pare.

A functions.php heu de cridar l’ubicació dels arxius d’idiomes:

add_action( 'after_setup_theme', 'configuracio_del_meu_tema_fill' );
function configuracio_del_meu_tema_fill (){ 
    load_child_theme_textdomain( 'nom-del-meu-tema-fill', get_stylesheet_directory() . '/languages' );
}

A la carpeta languages hi haureu de tenir els arxius .po i .mo corresponents. Per exemple en el cas del català hi haureu de tenir els arxius ca.po i ca.mo que podreu editar amb un programa del tipus poedit.

Potser t'interessen aquests altres articles:

5 Comentaris

  1. Els temes fill NO són la manera professional de fer un tema de wordpress. Em sembla més professional no utilitzar un tema ja creat sinó fer-ne un totalment custom. A la que vols canviar més que un .css o la estructura de la pàgina és massa diferent els temes fills ja perden el sentit. I si el pare s’actualitza i canvien classes o divs? Es pot trencar el teu tema.
    Així doncs, també esperant que una feina professional exigeixi més que crear un css, la manera ideal és crear un tema que no depèn de cap altre.
    Salutacions.

  2. Gerard,

    Hi estic totalment d’acord, però fixa’t que jo no parlava de fer (de zero) sino d’editar. En tot cas he modificat l’article i hi he canviat “l’única manera professional d’editar un tema de WordPress” per “l’única manera professional de modificar un tema de WordPress existent” per que quedi més clar. Pel que fa a la segona idea que exposes, la potencia dels temes fills no es redueix a l’edició dels CSS, i si bé tens raó en que certes [petites] modificacions poden deixar de funcionar al actualitzar el tema pare, em sembla que és un mal menor molt fàcil de solucionar al moment si es fa una actualització conscient testejant el lloc web. Si l’actualització la fa l’administrador amb cura i no el client a la babalà, vaja.

    Gràcies per l’apunt,

    Jordi

  3. Ara sona millor, és que m’he quedat amb el terme ‘professional’ i se m’ha oblidat si era modificació o creació de nou.

    Encara que jo prefereixo montar-ho de tal manera que després no hagi de patir perquè el client ha actualitzat i s’ha carregat la feina, a part de que me n’oblido completament asegurant-me que allò funcionarà durant força temps. Ho faig per experiència (si, existeixen els backups, però sempre millor no haver de tirar d’ells).

    Salut!

    • Potser professional sona molt fort. No volia destacar la professionalitat de fer servir un tema fill per sobre de crear un tema de zero, sino per sobre d’editar un tema directament, cosa que estaràs d’acord amb mí, que a apart d’una pèrdua de temps, evident quan actualitzem i perdem tots els canvis, és una aproximació d’aficionat.

Deixa un comentari

Els camps obligatoris se senyalen amb *.