Child Themes o temas hijo en WP

A continuación te presentamos una guía sencilla y rápida de cómo crear un tema hijo.

Así que vamos a ello, es más fácil de lo que piensas …

1. Lo básico

Lo primero es crear una carpeta dentro de /wp-content/themes/ como si otro tema fuera. Puedes elegir el nombre que quieras aunque parecería lógica alguna referencia sobre qué es, por ejemplo:
carpetas tema hijo wordpress

Una vez creada la carpeta simplemente crea la hoja de estilos, es decir, un ficherostyle.css dentro. Si lo prefieres, para ahorrarte tecleo, copia la cabecera de la hoja de estilos del tema principal, del padre. En cualquier caso la estructura básica sería esta:

 

/*
Theme Name: MyProduct Hijo
Theme URI: http://semanticae.es
Version: 4.0
Description: Tema hijo de MyProduct para hacer cambios sin riesgo
Author: Semanticae
Author URI: http://semanticae.es
Template: MyProduct
*/

@import url("../MyProduct/style.css");

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline; }

 

Las líneas importantes son estas:

  • Theme name: lógicamente diferente del nombre del tema padre, pero pon el que quieras.
  • Template: aquí no hay improvisación posible, debe ser el nombre de la carpeta del tema padre. Si la carpeta se llama wordpress-style-theme eso es lo que debes poner, sin cambio alguno o no funcionará.
  • @import url(xxxx): Usando la estructura del ejemplo, aquí es donde le decimos al tema hijo de donde heredar la hoja de estilos original, de modo que al activarlo funcione todo.

La magia empieza a partir de la última línea, pues una vez activemos el tema hijo ya podemos personalizarlo para obtener el mismo diseño del tema original (padre) pero con las modificaciones que hagamos en el tema hijo, que no se verán afectadas por actualizaciones del tema original, que es una de las principales virtudes de los temas hijo.

Así que ya solo con esto podemos activar el tema hijo, igual que cualquier otro tema. Nuestra web no notará cambio alguno pues de momento no hemos introducido modificación alguna, lo único que hace es importar archivos (Template: MyProduct) y hoja de estilos (@import url("../MyProduct/style.css");) del tema padre.

tema hijo activo

2. Añadiendo estilos

A partir de este momento el tema hijo activo hereda el CSS de la hoja de estilos original, salvo que añadamos clases personalizadas, en cuyo caso tomará primero las del tema hijo, aplicando el resto de la hoja de estilos del tema padre, así de simple.

De este modo, si modificamos la hoja de estilos del tema hijo añadiendo algo así …

/*

Theme Name: MyProduct Hijo
Theme URI: http://semanticae.es
Version: 4.0
Description: Tema hijo de MyProduct para hacer cambios sin riesgo
Author: Semanticae
Author URI: http://semanticae.es
Template: MyProduct
*/

@import url("../MyProduct/style.css");

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline; }

… estaremos añadiendo estilos personalizados a los enlaces, y el resto de estilos los aplicará del tema padre.

3. Añadiendo plantillas

Lo siguiente que podemos hacer es personalizar los ficheros del tema o incluso añadir nuevos, me refiero a “los php“, y el proceso es igual de sencillo.

Si, por ejemplo, queremos personalizar el pié de página simplemente copiamos el fichero footer.php original del tema padre a la carpeta de nuestro tema hijo y hacemos las modificaciones en el tema hijo. Una vez guardemos los cambios el resultado se verá de inmediato para esa plantilla concreta, permaneciendo inalterable el resto del aspecto de la web.
copia en tema hijo wordpress de plantilla php

Es importante tener en cuenta aquí que debes seguir la estructura de carpetas del tema padre. O sea, que si el fichero blog-style.php (por ejemplo) del tema padre está en /tema-padre/includes/blog-style.php en el tema hijo debe seguir la misma estructura/tema-hijo/includes/blog-style.php. Por lo demás, de puro fácil casi asusta.
plantilla copiada a tema hijo wordpress

Puedes, como he apuntado antes, añadir nuevas plantillas específicas, de página o lo que sea.

4. Funciones

Un tema hijo básicamente funciona así:

  1. WordPress revisa el tema activo (el tema hijo) y carga los archivos del tema padre (Template: MyProduct)
  2. WordPress a continuación carga la hoja de estilos importada (@import url("../MyProduct/style.css");)
  3. Carga primero las modificaciones en la hoja de estilos del tema hijo y ficheros modificados en el tema hijo, y completa lo que le falta con la hoja de estilos y archivos originales del archivo padre, en ese orden.
  4. Carga el archivo de funciones (functions.php) del tema hijo y luego carga el fichero de funciones original o padre.

La sutil diferencia es que WordPress prioriza el archivo functions.php del tema hijo sobre el del tema original, o padre, pero no lo sobreescribe sino que solo tendrá en cuenta las modificaciones (funciones añadidas) del tema hijo, no sobreescribe – por decirlo de algún modo – el original.

O sea, a efectos prácticos, que no tienes que copiar entero el fichero functions.phpdel tema padre sino solo crear uno vacío (por supuesto con la apertura PHP) yponer ahí las funciones específicas que quieras añadir como personalizaciones que, por supuesto, no quieras perder con las actualizaciones del tema.

Un ejemplo muy típico sería añadir un favicon. Si solo añades esta personalización el fichero sería algo tan básico como esto:

<?php
// Favicon
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

Y ya está, a partir de aquí es cosa tuya añadir las personalizaciones que quieras hacer, que no se perderán con las actualizaciones del tema padre salvo que este cambie sustancialmente su estructura de archivos claro, que puede pasar aunque no es habitual.

Fuente: Codex

Etiquetado con: , , ,
Publicado en: Diseño Web, Templates, WP
Calendar
September 2017
M T W T F S S
« Sep    
 123
45678910
11121314151617
18192021222324
252627282930