Podcast: Descargar (Duración: 13:00 — 24.0MB)
Hoy vamos a descansar un poco de seguridad y vamos a empezar a ver los Child Themes.
Hay veces en las que queremos hacer un cambio en un tema, ya sea un css o en el functions.php o donde sea, pero hacer ese cambio directamente en la plantilla implica que en la próxima actualización del tema vamos a perder esos cambios, lo cual hace muy compleja la gestión de cambios.
Para evitar eso se han inventado los child themes, que son temas dependientes de otros, los padres o parent, y que añaden funcionalidades o hacen modificaciones sobre el tema padre, de forma que nos cubrimos ante posibles actualizaciones del tema padre.
Cabecera fichero style.css (en negrita campos obligatorios)
/* Theme Name: Twentyseventeen Child Theme Theme URI: https://radiowordpress.com Description: Un tema hizo de twentyseventeen Author: Eduardo Collado Author URI: https://www.eduardocollado.com Template: popper */
Opción para incluir el contenido del style.css del tema padre en el child theme
@import url("../tema_padre/style.css")[showhide type=»transcripcion» more_text=»Ver transcripción(%s más palabras)» less_text=»Esconder transcripción (%s menos palabras)»]
Transcripción
Hola a todos, esto es Radio WordPress.com, un podcast dedicado a todos aquellos que de una manera u otra convivimos con WordPress.
Hoy vamos a descansar un poco de seguridad y vamos a introducir a los child themes, ¿qué son? ¿para qué sirven? ¿qué nos hace falta? ¿cómo se montan? etc
A modo de introducción os diré que cualquier cambio que hagáis en una plantilla en el momento en el que se actualice lo perderéis y obviamente no es la idea, esa esa una de las ventajas que nos ofrecen los child themes, el modificar temas con la seguridad que una actualización no lo machacará.
Pero no os caliento más la cabeza y vamos a empezar con los child themes.
—MUSICA—
Lo primero que tenéis que saber si queréis trabajar con child themes es que es necesario que tengáis una buen manejo de WordPress, así como un html y css básico, no hace falta ser gurús, pero sí saber qué es y como funciona, eso es fundamental.
Otra cosa que vais a necesitar, es un editor de texto, a ver, es muy obvio esto, pero no uséis un bloc de notas, tenéis opciones mucho más inteligentes como Sublime Text o Atom que os van a ayudar muchísimo en vuestros desarrollos
Y por supuesto que tengamos un entorno de desarollo, de pruebas, es decir, otro worpdress donde podamos probar los cambios antes de aplicarlos en el site definitivo, no es necesario que esté en un servidor, podéis tenerlo en vuestro propio PC, no hay problema, ya os lo he comentado varias veces, pero los experimentos con gaseosa.
El entorno de desarrollo obviamente debe de tener contenido, así que lo más fácil es exportar el contenido de la web principal a la de desarrollo para que sean exactamente iguales.
—MUSICA—
Cuando tenemos un tema que realmente nos gusta, pero que requiere alguna modificación, para adaptar algún CSS o para cambiar alguna plantilla tenemos la opción de clonar el tema completo, o crear child themes.
Clonar el tema completo nos va a obligar a actualizar los cambios que se vayan realizando y a mantenerlo totalmente, lo cual al final es un trabajo innecesario por completo.
Sin embargo los child themes son algo maravilloso, porque se ejecutan sobre el tema que nos gusta y es ahí donde se aplican los cambios que necesesitamos, por ejemplo si el tema dice que el título H3 es azul, pero nosotros lo queremos marrón modificaremos el css del child theme dicen que ahora es marrón. En el tema original seguirá siendo azul, pero como el child theme se ejecutará al final se sobreescribirá el marrón y a los efectos de nuestra web habremos cambiado el color del H3.
Realmente se puede hacer un child theme de cualquier tema en WordPress, lo que pasa es que con unos va a ser más facil y con otros más difícil, si vais a crear vuestro primer child theme os recomiendo usar los temas que vienen por defecto en wordpress, aunque ya os digo, si ya tenéis elegido el tema que queréis lo único es que a lo mejor os va a costar un poquito más, pero adelante, sin miedo.
—MUSICA—
Bien, vamos a empezar a crear nuestro Child Theme, para ello iremos a nuestro directorio de temas en wordpress, recordad que es el wp-content/themes y ahí crearemos un directorio donde pondremos nuestro child theme.
Si seguimos las recomendaciones el directorio se llamará igual que el directorio que contenga el directorio padre, pero terminado en guión child.
Por ejemplo si vamos a crear un child theme del tema twentyseventeen el directorio se puede llamar twentyseventeen-child, así de fácil.
Ahora una vez creado para empezar sólo tenemos que crear un fichero, el style.css, en singular y en ese fichero pondremos uno comentarios que van a decir lo siguiente:
/* Theme Name: Twentyseventeen Child Theme Theme URI: https://radiowordpress.com Description: Un tema hizo de twentyseventeen Author: Eduardo Collado Author URI: https://www.eduardocollado.com Template: popper */
En las notas del programa os dejo la cabecera, pero os comento, realmente tenemos dos líneas obligatorias, que son el
Theme Name: nombre del tema
que nos va decir el nombre del child theme, el nombre que nos va a aparecer en Wordspress en la sección de temas
El otro parámetro obligatorio es
Templante: nombre del directorio que contiene el parent theme, el tema padre
Eso hará que en nuestra sección de temas nos diga que el tema este es hijo del que está en el otro directorio.
Estas dos líneas van comentadas, es decir entre dos líneas, la primera /* y la última */
—MUSICA—
Pero hay otros campos que son opcionales y que es interesante ponerlos y que son
Theme URI: https://radiowordpress.com
Este nos dice cual es la URL del tema, desde donde se puede bajar básicamente
Description: Un tema hizo de twentyseventeen
Una descripción para que se pueda saber más sobre el tema, es un campo libre
Author: Eduardo Collado
El nombre del autor
Author URI: https://www.eduardocollado.com
La URL del autor, donde se le puede localizar.
Y si ya queréis dejarlo niquelado os recomiendo que subáis un pantallazo del tema llamado screenshot.png para que podáis mostrar el tema de forma visual en vuestra sección de temas de WordPress.
Una vez tengáis todo esto ya tenéis creado el tema hijo, el child theme, pero si váis al tema y lo activáis veréis que sale como si no tuviera CSS alguno, es normal, para solucionar eso lo único que tenéis que hacer es ir al fichero style.css original y copiar todo lo que esté debajo de la cabecera, es decir, después del */ y ya lo tendréis funcionando, cualquier cambio que queráis hacer ya lo podéis hacer aquí sin miedo a que pase nada ni a que se pierdan los cambios.
Otra opción es simpelmente importar el fichero css del tema padre con
@import url(«../tema_padre/style.css»)
Lo recomendable es copiar el fichero entero en vez de hacer el import, pero a mi personalmente me resulta mucho más cómodo hacer el import, aunque si hay alguna actualización pierdo el control, ahí cada uno tiene que evalutar qué prefiere.
[/showhide]