Cómo crear un Tema Hijo en WordPress (Child Theme)

Categorias: Wordpress

Cómo crear un Tema Hijo en WordPress (Child Theme)

Cuando se trabaja con WordPress, una de las cosas que se hace al principio de crear un nuevo proyecto o web, es elegir el theme o tema que será la base del diseño del sitio.

Un theme es una plantilla que cambia la apariencia de WordPress de cara a los visitantes. Los cambios no afectan al panel de administración de WordPress.

Existen miles de themes distintos, no todos gratuitos, pero muchísimos disponibles de manera libre para cualquiera que quiera usarlos.

Cuando se elige un theme, se suele modificar algún aspecto del mismo. Colores, la imagen de cabecera, el fondo, etc…

Todos estos cambios son relativamente sencillos de realizar y se tiene acceso desde el propio panel de administración de WordPress, pero en ocasiones hay que tocar código PHP o la hoja de estilos CSS.

Para modificar PHP o CSS se requieren ciertos conocimientos, aunque muchos usuarios se atreven a modificar estos archivos con el manido método de prueba y error, previa copia de seguridad de los archivos que se vayan a modificar.

Uno de los problemas en los que se pueden encontrar un administrador de WordPress después de modificar el theme en profundidad, es que si aparece alguna actualización del theme, los cambios realizados se perderán al actualizarlo.

Así que, para no tener que repetir los cambios en el theme, se opta por no actualizar, con los problemas de seguridad que pueden traer esta situación.

Pero existe una opción para poder realizar cambios en cualquier theme de WordPress y que estos no se pierdan al actualizarlo. Se trata de hacer un Tema Hijo o Child Themeen inglés.

Qué es un Tema Hijo o Child Theme

Un tema hijo se trata de una característica de WordPress, aunque no exclusivamente de WordPress, que se basa en permitir la modificación del theme sin que estas modificaciones afecten al theme original.

Se le llama tema hijo porque adquiere las características del tema padre, tanto en funcionalidades como en apariencia, sin embargo, las modificaciones realizadas en el tema hijo no afectan al tema padre.

De esta forma se pueden realizar los cambios necesarios en en los archivos de WordPress, sin perder los cambios al actualizar el theme.

Cómo se Crea un Tema Hijo o Child Theme en WordPress

Para crear un tema hijo, lo primer que se necesita es saber cuál es el theme que se va a usar como ”padre”.

Si en algún momento se cambia de theme, habrá que crear otro tema hijo, ya que como decimos, está relacionado con el theme principal.

Para crear el tema hijo hay que acceder a los archivos de WordPress desde un cliente FTP o desde el Administrador de Archivos de cPanel.

Para crear el tema hijo hay que crear una carpeta dentro de la carpeta themes de la instalación de WordPress.

La ruta para encontrar la carpeta themes, será la siguiente, salvo que WordPress no esté instalado en public_html~:

public_html/wp-content/themes/

Dentro de la carpeta themes se guarda todos los themes que tengamos disponibles en nuestra instalación de WordPress.

Por defecto, se instalan los populares Twenty…, en nuestro caso vamos a crear un child theme de Twenty Seventeen.

Recordad que hay que hacerlo del theme que se esté usado.

La carpeta que tenemos que crear debe de tener el mismo nombre que la carpeta del theme original, aunque es habitual añadir -hijoo -child al final para poder diferenciarlos.

Así pues, si queremos crear el tema hijo para Twenty Seventeen, tendremos que crear una carpeta llamada twentyseventeen-child.

 carpeta tema hijo administrador de archivos cPanel   

Una vez creada la carpeta, hay que añadir dentro un archivo llamado style.css.

crear archivo style tema hijo

 

Una vez creado el archivo style.css, pulsamos con el botón derecho sobre el archivo y seleccionamos Edit.

editar archivo style tema hijo

Ahora hay que pegar el siguiente texto:

/*
 Theme Name:   Twenty Seventeen
 Theme URI:    http://MiDominio.info/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Nombre de Autor
 Author URI:   http://MiDominio.info
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyseventeen-child
*/
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

En este código hemos tomado como base el theme Twenty Seventeen, pero habrá que realizar las modificaciones tomando en cuenta el theme original, sobre todo la linea Template, en la que debe aparecer en nombre exacto de la carpeta del theme.

Una vez añadido el encabezado en en archivos, hay que guardar los cambios.
 

Cómo Activar el Tema Hijo en WordPress

Con el archivo que hemos creado, el tema hijo ya puede ser activado.

Debemos ir al panel de administración de WordPress y dirigirnos a Apariencia > Temas.

Si todo ha ido bien, veremos el theme que tenemos activado y el tema hijo que acabamos de crear.

tema hijo creado en wordpress

Para activarlo, solo debemos hacer lo mismo que haríamos para activar cualquier otro theme, pulsar en Activar.

activar tema hijo en WordPress

Una vez activado, podemos visitar la página para ver si ha funcionado. Como no hemos añadido ningún CSS, deberíamos ver el nuestro sitio sin ningún tipo de estilo.

A partir de aquí ya podemos empezar a editar sin miedo los archivos que añadamos en la carpeta del tema hijo, ya que los archivos originales del theme no serán modificados.

Por ejemplo, si queremos editar el archivo header.php, solo debemos copiarlo del theme original, a la carpeta del tema hijo respetando la ruta, ya que los archivos que añadamos sustituyen a los originales.

El archivo functions.php es la excepción, ya que no sustituye al original, sólo añade funcionalidades al archivo original.

Por este motivo no hay que copiarlo a la carpeta del tema hijo, sólo hay que crearlo y añadir lo que se necesite, ya que se añadirá al archivo original.

Si en algún momento se quiere volver el theme original, únicamente hay activarlo de nuevo desde WordPress.

Para más información sobre los chils themes, WordPress.com ofrece esta página en español.
 

Recuerda…

En Hostinet podemos ofrecerte un hosting WordPress con todas las garantías y con la mejor relación calidad/precio:

  • Hosting especializado en WordPress con discos SSDWordPress 509´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 257´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 53´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 509´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 257´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 53´99/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precio para nuevas altas. Contratación anual.