Com crear un child-theme per canviar l’aspecte del nostre WP Site

Per desenvolupar una primera maqueta d’un lloc web encomanat per un client, el més habitual es utilitzar algun tema (gratuït o de pagament) descarregat de la xarxa que s’ajusti aproximadament als criteris de disseny que ens exigeix el client. Aquest pas simplifica la feina de disposar d’una maqueta sobre la que treballar però per complir amb els requeriments del client serà necessari afegir petits (o grans canvis) al tema original (sempre previ pressupost del cost associat al fet d’ajustar la web als desitjos del pagador).

Podem procedir de diverses maneres:

  • Mètode Not tomorrowland

Consisteix en modificar els arxiu d’estil, html, php del tema directament. Inicialment, és l’elecció més ràpida (també ens pot servir per aprendre i entendre com funcionen els temes), però no té futur. Per què? En el moment d’aplicar una actualització tots els canvis fets es perdran i serà necessari reescriure’ls manualment.

  • Mètode The hard way

Si us voleu convertir en uns cracks del WordPress i fer merits a desenvolupador profesional de themes, lo ideal és crear un tema de zero i carregar amb tota la feina. No és una mala solució, però té un cost incial associat important així com moooolta feina. Pels que us hi animeu podeu partir d’aquest tutorial (els passos explicat aquí també ens seran útils per a la creció de child themes).

Crear un theme de WordPress desde zero

  • Mètode The smart way

Es la solució intermitja, es tracta de crear un tema fill associat als arxius del tema pare, d’aquesta manera les actualitzacions del tema pare no afecten als canvis del tema fill, com a molt ens cal adaptar el fill als canvis que l’afectin de l’actualització. En aquesta solució aprofitem el tema pare i nomes canviem, afegim, modifiquem el que volem a la carpeta del tema fill. Per crear un tema fill consulteu els següents tutorials:

A grans trets podem resumir el procés en els següents passos:

  1. Primer cal tenir instal.lat el tema pare al directori wp-content\themes, millor un tema no molt complex i que cobreixi les necessitats de disseny. Per exemple: Twenty Eleven, Thematic, WhiteBoard
  2. Crear una nova carpeta dins de themes, per nomenclatura, el mateix nom del pare afegint el sufix -child. Si el tema pare és thematic, al child l’anomenarem thematic-child
  3. Dins de la carpeta fill, afegir un arxiu style.css, un functions.php i una imatge screenshot.jpg.
    • style.css: En aquest arxiu introduirem les dades que descriuen el tema fill, la plantilla de referencia (el tema pare) i importarem els estils del pare. Tingueu en compte que a l’apartat Template cal indicar el nom del tema pare (cohincidint amb el nom de la carpeta a WP), si voleu crear un tema nou no cal ficar aquesta secció Template.
      /*  
      Theme Name: thematic-child (nom del tema)
      Theme URI: the-theme's-homepage
      Description: a-brief-description
      Author: your-name
      Author URI: your-URI
      Template: thematic
      Version: a-number--optional
      .
      General comments/License Statement if any.
      .
      */
      @import url(../thematic/style.css);
    • functions.php: pot estar buit inicialment, aquí afegirem funcions al hook de WP.
    • screenshot.jpg: captura de pantalla del tema per fer el preview en el moment d’activar el tema a WP
  4. Ara des del panel de control, activeu el tema fill – el tema pare estarà al directori de themes pero inactiu, of course –


Observant els canvis

Hem creat un tema fill però de moment no observem cap canvi. Algunes coses que podem fer per anar agafant rodatge:

  • Override parents style (sobrescriure estil del tema pare)
    Afegir al final de style.css el següent canvi i observeu que fa:
    /* override parents style */
    body {
    background: #ffcc00;
    }

Com sabem quins canvis fer? Feu us del Firebug o DevConsole per saber que sobreescriure.

Alguns exemple més complert en aquests temes: modificar TweentyEleven & thematic theme

  • Les plantilles. Si observeu en el tema pare podreu veure diversos arxius header.php, footer.php, frontpage.php, slidebar.php, … són plantilles que corresponent a diverses parts de la web, respectivament capçaleram peu, pagina principal, barra latera, etc.
    Si copieu alguna d’aquestes plantilles al tema fill i la modifiqueu podreu fer canvis en l’estructura de la web.
  • Afegir accions al hook de WP. Podem també aplicar accions concretes que realitzarà WP fent us de l’arxiu functions.php, afegint accions al hook (llista de com procedirà WP en el seu funcionament). Per exemple, afegiu el següent codi a functions.php:<?php
    function show_dolly_lyrics() {
    if ( ! is_home() || !is_front_page())
    return;
    ?>
    <div id="featureposts">
    <center>
    <?php
    echo "Frase de la peli Hola Dolly!:";
    hello_dolly();
    ?>
    </center>
    </div>
    <?php
    }add_action( 'get_footer', 'show_dolly_lyrics', 10 );
    ?>

    Per observar com funciona cal activar el plugin Hello dolly (aquest genera una frase aleatòria)

    El codi crea la funció show_dolly_lyrics() que genera un tros d’html la frase que retorna la funcion del pluggin hello_dolly()
    Per a que WP l’executi afegim una acció (add_action) que quan es produeixi l’acció wp_head (que es vagi a pintar el head de la pàgina), s’executi el codi de show_dolly_lyrics()

    Podeu consultar més possibles accions a la API/Actions  WP References