fbpx

Creació d’un tema fill a WordPress

Un dels primers aspectes a tenir en compte en endinsar-se en la programació és la creació d’un tema fill en WordPress. Un cop hem començat a realitzar modificacions en el css del nostre tema i potser fins i tot hem creat alguna funció, per no perdre el nostre treball en la següent actualització del tema, ens cal crear un tema fill (child theme).

El motiu és que tots els fitxers del tema es desen a la carpeta wp-content / themes / nom-del-tema i en actualitzar el tema, tots els seus fitxers es sobreescriuen, així que perdem tota la feina feta.

VCrearem un tema fill per Storefront, el tema oficial de Woocommerce

Per crear un tema fill a WordPress necessitem 3 elements bàsics:

  • Una carpeta que contengui els nostres fitxers
  • Un full d’estil: style.css
  • L’arxiu de funcions: functions.php

Carpeta del tema

Cal crear una carpeta dins de ./wp-content/themes amb el nom del nostre tema. No és obligatori, però sí recomanable, utilitzar el nom del tema seguit de “-child”. En el nostre exemple, la carpeta que crearem serà ./wp-content/themes/storefront-child.

Style.css

Aquest fitxer contindrà totes les classes que utilitzem per modificar el tema original. L’únic requisit és que contingui aquesta capçalera:

/*
 Theme Name:   Storefront Child
 Theme URI:    http://example.com/storefront-child/
 Description:  Storefront Child Theme
 Author:       FerBcn
 Author URI:   http://FerBcn.com
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  storefront-child
*/

Les dues línies importants són:

  • Theme name:Aquest serà el nom que veurem a la pàgina de selecció de temes.
  • Template: Aquesta és la carpeta que conté el tema “pare” del nostre tema. Si aquesta dada és incorrecte, no es carregaran els estils i funcions del tema pare.

Functions.php

En aquest arxiu escriurem les funcions que vulguem afegir i afegirem o traurem hooks de funcions ja existents (pròximament escriuré un post explicant com realitzar modificacions en el tema manipulant els hooks). A més, cal incloure una funció perquè el full d’estils del nostre tema es carregui després de la de l’estil pare.

Aquest és el codi indicat al codex de WordPress per”encuar” el nostre css:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Activar el tema fill a WordPress

Ara, per activar el tema en el nostre site només hem de pujar pujar tots aquests fitxers per ftp a la carpeta que hem creat.

En cas de no disposar d’una connexió ftp, sempre podem crear un arxiu zip de la carpeta del tema i carregar des aparença-> temes-> Afegeix un tema.

I, per acabar de personalitzar el tema, jo sempre crec un screenshot per diferenciar de la resta. La imatge que mostra WordPress per a cada tema és la continguda en el fitxer screenshot.png. Només cal descarregar la imatge del tema pare, modificar-la al nostre gust i afegir-la a la carpeta del nostre tema fill en WordPress.

Imagen de portada por Luca Bravo en Unsplash

ferbcn

M'agrada escriure, fer fotos, la programació, el disseny i el màrqueting. De vegades ho junt tot, faig webs i les posiciono.

Deixa un comentari

Aquest lloc utilitza Akismet per reduir el correu brossa. Aprendre com la informació del vostre comentari és processada

%d bloggers like this: