Cómo crear un tema hijo en wordpress

Cómo crear un tema hijo en wordpress

Cómo crear un tema hijo en wordpress

por la cuenta de la vieja

Acabamos de cumplir un año. Y para el estreno, como ya dijimos en nuestro post de aniversario, “nos aderezamos de plugins, nos colgamos unos wigdets, nos compramos una buena plantilla sobre la que caminar, llenamos el fondo de armario y luego escogimos nuestro mejor traje tricolor para salir a pasear por el planeta digital”.

Y afortunadamente, (o extrañamente) la buena plantilla sobre la que caminar no ha tenido actualizaciones en estos 365 días. Con lo que no hemos pasado aún por ese momento en el que las “tiemblas te piernan” antes de darle a ese dubitativo botón “actualizar”.

Eso sí, habíamos dado a luz ya un hijo, pero un pelín tarde, porque lo creamos sobre la plantilla del tema en la que ya habíamos efectuado algunos cambios. Y ahí lo tenemos guardado, sin activar, en la botica de plantillas, para el crucial desenlace que algún día puede llegar.

Y hacer hijos en un lenguaje que no entendemos (style, css, php, html…etc…etc…) no siempre fecunda a la primera, y aunque parezca un tema obsoleto y del principio de los tiempos, la encarnación no se produce de manera simple el primer día que empiezas a probar, muertecita de miedo te vayas a cargar algo importante que no tiene vuelta atrás.

Así que voy a contaros a todos los que un día como yo, tendrán que pelearse con su panel de control, su hoja de estilo, su “apariencia de temas”, los tutoriales en inglés, y el chino ó html, cómo se hace un “child theme” por la cuenta de la vieja.

Para resumir el concepto, se trata de hacer una copia idéntica a la del tema principal, y luego personalizarla, y aprender al menos en principio a cambiarle los colores, para que tu página no sea idéntica a todas las páginas web que hayan instalado la misma plantilla que tú.

De esta manera cuando llegue una actualización de tu plantilla, los cambios que te has tirado horas haciendo, no se vayan al garete al darle al botón del pánico: “actualizar”. Porque si lo haces, tendrás que volver a empezar cada vez que la versión de tu plantilla sume un punto en su apellido: 1.1.4 – 1.2.7 – 1.4.0…

Vamos por orden:

Primer paso: Panel de control

Accede al panel de control del servidor donde tienes alojada tu página.

httpdocs

Dentro del directorio: httpdocs/, sigue esta ruta: wp-contents – wp-themes. (en esta carpeta es donde se guardan todas las plantillas).

ruta themesY crea allí una nueva carpeta, o directorio, con el nombre que le vayas a poner a tu plantilla personalizada:

nuevo directorio

Segundo paso: Hoja de estilo

Una vez creada tu nueva carpeta con tu nombre, necesitará de una hoja de estilo (un archivo: style.css).

Para evitarte complicaciones de programas que la lean sin destrozarla si la descargas a tu ordenador para modificarla, lo mejor es que copies la del tema padre dentro de la nueva carpeta que has creado.

Buscas el archivo style.css dentro de la carpeta del tema principal o padre, la marcas, y le indicas al panel que vas a hacer una copia para otro directorio (la carpeta del tema hijo que has creado).

copiar archivos

Ya tienes: la carpeta de tu nueva plantilla, y la hoja de estilo que vas a personalizar.

copia de archivos

Tercer paso: Importar tema principal en la hoja de estilo

A partir de este momento podrás hacer todos los cambios que quieras en tu nueva hoja de estilo. Pero te queda un pequeño paso antes: le tienes que indicar a esta hoja de estilo de donde procederán todas las habilidades de tu nueva plantilla.

De la siguiente manera:

Abres la nueva hoja de estilo que has creado dentro del nuevo directorio o nueva plantilla y modificas algunas líneas del código:

o Theme Name: sustituyes el nombre del padre por el nombre del hijo (el mismo de la carpeta que creast

o Description: indicaciones para que tú lo reconozcas

o Template:  el nombre de la carpeta de la plantilla padre

o Indicaciones: de donde traerá las hojas de estilo principales que tu vas a modificar a continuación:

@import url(‘../nombre de la carpeta que guarda la hoja de estilo/style.css’);

hojas de estilo

En nuestro caso aparece como directorio, porque la hoja de estilo no está dentro de la carpeta principal del tema, sino en una inferior

@import url(‘../BresponZive-Pro/bresponzive_pro/style.css’);

Pero si te va bien, copia este código y sustituye lo que corresponda (amarillo):

/*
Theme Name: Mi tema hijo 
Theme URI: : http://demo.themepacific.com/bresponzive/ 
Version: 3.3 
Description: Mi tema hijo de BresponZive Pro 
Author: ThemePacific 
Author URI: http://themepacific.com 
Template: BresponZive-Pro/bresponzive_pro 

*/ 

@import url("../BresponZive-Pro/bresponzive_pro/style.css"); 

/*----------------- Aquí empieza tu personalización ------------------*/

Importante:

  • El nombre de la plantilla (Template) puede no aparecer en la hoja de estilo del padre (está dentro de las carpetas del tema padre, indícaselo usando guiones medio (carpeta primaria) o bajo (carpeta dentro de carpeta primaria) según donde se encuentre).
  • Si la denominación de la carpeta tiene mas de una palabra, hay que separar las palabras con guión medio –
  • Si el tema padre tiene varias hojas de estilo, impórtalas todas y te evitas complicaciones.
  • Las personalizaciones las haremos sobre esta hoja de estilo, sustituyendo lo que queramos cambiar, por ejemplo los colores o las tipografías. Si supiéramos html no nos haría falta mantenerla tal cual, sino que escribiríamos directamente en código sólo las modificaciones que se harán sobre la hoja de estilo del padre de la que hereda todo el estilo (css).

Cuarto paso: Comprobar que funciona

Dirígete de nuevo al panel de tu escritorio de wordpress y en apariencia: TEMAS debe aparecer el tema hijo que has creado

temas

 Comprueba que está todo, y si es así ya lo puedes activar.

Recuerda hacer todas tus personalizaciones en la nueva hoja de estilo que has creado y a la que podrás acceder fácilmente desde tu mismo editor de wordpress.

editor

Si le pierdes el miedo practicando con la hoja de estilo, puedes probar a modificar ficheros de la plantilla (archivos .php), de la misma manera que copiaste la hoja de estilo del tema padre en la carpeta del tema hijo, copias el archivo php en la carpeta del hijo siguiendo la misma estructura de árbol en que esté guardado en la carpeta del padre…y a customizar!

Según la frikipedia, la cuenta de la vieja se puede usar para hacer todo tipo de cuentas. En realidad, hay muchas cuentas de la vieja distintas. El requisito esencial es nunca, nunca, usar variables, letras, puntos ni ho*&%$s.

Ah, y prohibido saltarse pasos, que luego se equivoca una. Número a número, y despacito.

No obstante, si en algún paso yo me he saltado algo, no os preocupéis, que esta manera de tener hijos es la manual, y afortunadamente contamos con otra automática mucho mas fácil y en la que darle al botón: Generar Child Theme, seguro que no os produce ningún pánico.

Pero ésta la dejo a cuenta!