Nuevo diseño de ScaryPenguin: Temas hijo de WordPress

Cuando empecé ScaryPenguin hace un par de años personalicé un tema de WordPress, Always Forever, pero al volver a escribir en el blog note que se había quedado obsoleto. No es un diseño web adaptable, tenia que usar el plugin WPtouch Mobile Plugin para dispositivos móviles y aunque sea un buen plugin no acababa de ser lo que yo quería.

Por eso a partir de ahora el tema de ScaryPenguin va a ser uno de los temas por defecto de WordPress, Twenty Fourteen, que se adapta casi perfectamente a lo que busco (sencillez y limpieza) y poco a poco lo iré personalizando a mi gusto creando un tema «hijo» basado en el.

De ahí la segunda parte de esta entrada explicando como crear temas hijo de WordPress.

Temas hijo de WordPress

Un tema hijo, o child theme, de WordPress es una forma especial de tema en la que este tema hijo hereda el diseño del tema padre y permite hacer modificaciones de forma que al actualizar el tema padre no perderemos todo nuestro trabajo. De esta forma podemos preservar las modificaciones y beneficiarnos de las actualizaciones en el tema sobre el que trabajamos.

En esta entrada trataremos solo lo más básico de los temas hijo: Su creación y la edición de estilos.

Creando el tema hijo

Para crear este tema hijo tenemos que tener instalado el tema padre sobre el que queremos trabajar y crear una nueva carpeta en /wp-content/themes/ como si fuese un tema nuevo normal y crear una hoja de estilos para el con la siguiente información básica:

style.css
1
2
3
4
5
6
7
8
9
10
11
12
/*
Theme Name: Nombre del tema Hijo
Theme URI: http://www.scarypenguin.es
Version: 1.0
Description: Tema hijo para modificar libremente
Author: ScaryPenguin
Author URI: http://www.scarypenguin.es
Template: tema-padre
*/
@import url("../tema-padre/style.css");
 
/*--- A partir de aquí podremos añadir estilos ---*/
  • Theme name: El nombre que elijamos para nuestro tema (Distinto al del padre evidentemente).
  • Template: Nombre de la carpeta del tema padre.
  • @import url(«url»): La url relativa al archivo css del tema padre del que el tema hijo heredará los estilos.

Después de editar este archivo y activar el nuevo tema en nuestro blog podemos empezar la personalización. Inicialmente nuestro blog se verá igual que el tema padre, por el momento lo único que hace es importar los archivos y hoja de estilo del tema padre.

Al comenzar a añadir nuevas lineas con reglas css se podrán empezar a ver los cambios, ya que nuestras reglas tendrán prioridad sobre las incluidas en la hoja de estilo del tema padre.

Si por ejemplo añadimos la linea:

1
2
3
4
5
/*--- A partir de aquí podremos añadir estilos ---*/
 
body {
  color: #rr0000;
}

Todo el texto de nuestro blog, que no sea afectado por otra regla, se vera en color rojo.

Esto es lo básico como he dicho, pero también se pueden editar las plantillas y funciones del tema padre.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.