Como crear “Child Themes” en WordPress – style.css y activar el tema – Parte 4 de 5

Como crear “Child Themes” en WordPress – style.css y activar el tema – Parte 4 de 5
5 (100%) 1 voto

Introducción

Tras analizar el porqué elegir el desarrollo y creación de “Child Themes”, también conocidos como “Temas Hijos”, y elegir nuestro tema base dando los primeros pasos, creamos la estructura de directorios. Vamos ahora a empezar con los archivos necesarios.

Archivos requeridos

El primer archivo y más importante, es el “style.css”. Es lo primero que tenemos que hacer, crearlo dentro de nuestra carpeta /sparkling-child/ , en la misma raíz. Insisto en que es fundamental mantener esta estructura al pie de la letra.

Tras esto, tendremos que generar unas líneas concretas a modo de cabecera en el archivo .css que acabamos de generar. WordPress si existe esta carpeta la reconocerá, buscará dentro de la mísma un único archivo, justo el que acabamos de generar, y leerá la cabecera.

Si esta cabecera está perfectamente formateada, leerá la información, la asociará y comparará con el tema original. A partir de ese momento, los archivos de la carpeta /sparkling-child/ tendrán prioridad sobre el tema original, es decir, lo que pongamos dentro, será lo que WordPress ejecutará y presentará.

Pero no nos adelantemos y verifiquemos la cabecera del archivo .css:

Cabecera dentro del archivo .css que le indica a WordPress los detalles esenciales del "Child-Theme".

Cabecera dentro del archivo .css que le indica a WordPress los detalles esenciales del “Child-Theme”.

Lo esencial en esta cabecera, es rellenar todos los campos, no tocar la estructura general salvo los datos necesario, y prestar especial atención a estos dos:

  • Template: El nombre exacto de la carpeta del tema original, no el nombre del tema (aunque a veces suele coincidir).
  • @import url: Definir exactamente la ruta desde el archivo style.css del Child Theme hasta el archivo style.css original del tema. Como la estructura de carpetas siempre será la misma, la ruta será igual a esta, menos el nombre del directorio del tema.

Comprobaciones

Ahora es cuando comprobaremos que los pasos los hemos realizado correctamente, y que estamos un paso más cerca por tanto de nuestro objetivo.

tutorial-como-crear-child-themes-creado-ok-javier-tejerina-com

Esta es la prueba de que hemos creado correctamente el Child Theme para nuestra web.

Ya podemos empezar a poner nuestras reglas CSS dentro de este archivo. Pero antes, veamos si WordPress ha detectado correctamente el tema.

Ya tenemos nuestro primer child Theme.

Vamos a la pestaña de “Apariencia / Temas” y veremos una escena similar a la de la imagen anterior.

Ahora si movemos el ratón sobre nuestra caja vacía “sparkling Child Theme, veremos que nos invita a “Activar” , “Vista Previa” y “Detalles del tema”.

Si podemos ver estos botones, ¡Perfecto! ya tenemos nuestro primer Child Theme creado, aunque sea de manera rudimentaria.

A continuación, vamos a facilitar el código de la cabecera que hay que poner dentro del archivo style.css.


/* 
 Theme Name:     sparkling Child Theme
 Theme URI:      http://www.javiertejerina.com/
 Description:    sparkling Child Theme
 Author:         Javier Tejerina
 Author URI:     http://www.javiertejerina.com
 Template:       sparkling
 Version:        0.1.0
*/
 
@import url("../sparkling/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

Recuerda que el “Theme Name” es el nombre que verás para tu Tema Hijo en “Apariencia / Temas”, y que debes customizar esta cabecera según sea tu caso, para que cuadre perfectamente.

Comprobaciones

Aunque en realidad, ya podemos considerar por terminado la realización del Tema Hijo, lo cieto es que es un tema bastante extenso, y seguirmos tratando sobre el mismo. En el próximo artículo veremos como reutilizamos nuestro CSS ya creado sobre un plugin para readaptarlo dentro de nuesto Child Theme.

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+

Deja un comentario