Cómo crear un tema hijo en wordpress

Cómo crear un tema hijo en wordpress
0 Flares 0 Flares ×

 

WordPress es un sistema de gestión de contenidos (CMS) que permite crear y mantener un blog u otro tipo de web.

Con casi 10 años de existencia y más de un millar de temas (plantillas) disponibles en su web oficial, no es solo un sistema sencillo e intuitivo para crear un blog personal, sino que permite realizar toda clase de web más complejas.

WordPress es un sistema ideal para un sitio web que se actualice periódicamente. Si se escribe contenido con cierta frecuencia, cuando alguien accede al sitio web, puede encontrar todos esos contenidos ordenados cronológicamente (primero los más recientes y por último los más antiguos).

Es el sistema ideal para los principiantes, o para los que no tienen demasiados conocimientos técnicos. WordPress dispone de un sistema de plugins, que permiten extender las capacidades de WordPress, de esa forma se consigue un CMS más flexible.

¿Qué puedo hacer con WordPress?

En muchas ocasiones se asocia WordPress con una herramienta que solo sirve para hacer blogs. Esto no es correcto: con WordPress podemos hacer un blog y mucho más: webs empresariales, tiendas online, periódico digital, central de reservas, etc. A continuación vamos a ver algunas de las cosas que podemos crear con este gestor de contenidos.

Blog

Es su función más conocida. WordPress incorpora, en su instalación por defecto todas las funcionalidades típicas de un blog: mostrar artículos en formato blog, opción de añadir comentarios a las entradas, posibilidad de organizar los artículos por categorías o etiquetas, etc..

Además se podrán agregar en la web diversos módulos, llamados widgets en WordPress, habituales de los blogs: listado de categorías del blog, listado de etiquetas, buscador, lista de artículos más leídos, lista de últimos comentarios, etc.

Con todo ello se puede decir que posiblemente WordPress sea la mejor herramienta para crear un blog, con más razón si cabe si tenemos en cuenta su sencillez de manejo.

 

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.