Añade un tema hijo (child theme) a WordPress + 1 regalo

86 / 100

¿Qué es un tema hijo?

Un tema hijo, o “Child Theme” es, para explicarlo brevemente, un tema de WordPress que hereda los estilos y funcionalidades del tema principal usado como plantilla para tu sitio web.

 

Temas de WordPress

De izquierda a derecha:
Tema hijo de Divi, tema padre Divi y tema Twenty Twenty de WordPress

¿Por qué deberías usar un tema hijo?

Cuando haces personalizaciones para añadir (o eliminar) funcionalidades al tema principal que estás usando te expones a que, en una actualización de dicho tema, éstas desaparezcan. Serán sobreescritas por la instalación del tema actualizado.

Para prevenir esto se usan los temas hijo. Éstos no se actualizan, no se sobreescriben cuando actualizas algo, ni se quedan obsoletos. Siempre puedes añadir o eliminar funcionalidades y mantenerlas el tiempo que quieras.

¿Qué funcionalidades puedes añadir?

Muchas. Por ejemplo, imagina que quieres que toda tu web tenga un mismo color de fondo en páginas y entradas. Tan solo debes añadirlo en el archivo de estilos del tema hijo.
De esta forma no tendrás que ir cambiando el color cada vez que creas una página o una entrada del blog.
Piensa en el tema hijo como si fuera una autoridad superior al tema padre, aunque suene paradójico. Las funciones y estilos del tema hijo se cargan antes y tienen prioridad sobre las del tema original.

 

¿Cómo se crea un tema hijo?

El modo manual

El modo manual es bastante simple. Debes acceder al administrador de archivos de tu hosting, bien a través del navegador web, bien a través de algún programa de FTP.

 

Administrador de archivos en cPanel

Cuando estés en el administrador de archivos, sigue esta ruta a través de las carpetas del sitio:

/public_html/wp-content/themes/

Crea una nueva carpeta, seleccionando la opción “New Folder”, si usas cPanel. O “Nueva carpeta”, si tu programa de FTP está en español.

Llámala como el tema padre añadiendo el sufijo “-child”. Si creas un tema hijo de Divi, éste se llamaría “divi-child”, aunque puedes llamarla como quieras, siempre que recuerdes que es la carpeta del tema hijo.

Muy importante: no escribas los nombres de carpetas y archivos con espacios. Usa guiones (-) en su lugar.

 

Creando una carpeta nueva en el servidor

Dentro de la carpeta que acabas de crear y renombrar, crea un archivo llamado “functions.php”.

Creando el archivo functions.php

Edítalo y pon este código (puedes copiar y pegar):

Esto hará que el tema hijo importe los estilos del tema padre.
Guarda los cambios.

Crea otro archivo con el nombre “style.css”.

Creando el archivo style.css
Edítalo y pega este código:

En realidad puedes crear un tema hijo para cualquier tema de WordPress, pero en este ejemplo he usado Divi.

Te explico lo que significa cada línea:

  • Theme Name: el nombre del tema hijo. Te recomiendo añadirle “Child”, o “Child Theme”, para que no te confundas, aunque no es obligatorio.
  • Theme URI: La URL del sitio web en el que está el child theme.
  • Description: Pues eso, la descripción del tema hijo.
  • Author: El nombre de quien lo ha creado.
  • Author URI: La URL del sitio web del creador del child theme.
  • Template: El nombre del tema padre. Ojo, el nombre de la carpeta que lo contiene. Si el tema se llamase “Landscape Photo”, su carpeta será “landscape-photo”.
  • Version: La versión del tema hijo. Si es la primera, 1.0.0. Si le añadieses modificaciones, renombra la versión a tu gusto.
  • Text Domain: Esto es para que el tema pueda ser traducido por plugins de WordPress. Debes asignarle un nombre único, como por ejemplo el del tema padre seguido de “-child”.
  • License: Si vas a crear el tema hijo para alguien, ponle una licencia de libre atribución y distribución. Puede ser cualquiera (BSD, Creative Commons, GNU…). Puedes ponerle la misma que el tema padre.
  • License URI: La URL de la licencia que has usado.

Ya tenemos el tema hijo creado. Si vamos al panel de Apariencia/Temas de WordPress, nos aparece algo así:

 

Previsualización de nuevo tema hijo

Ahora puedes crear una previsualización del tema. No es obligatorio, pero quedará más “profesional”.
Crea una miniatura de 880x660px de la página principal de tu sitio web y nómbrala como “screenshot.jpg”.
Súbela mediante FTP o con el administrador de archivos del cPanel a la carpeta de tu tema hijo.

Ya tienes un tema hijo básico, pero funcional. Ahoro solo te resta ir al panel “Apariencia” de tu área de administración de WordPress y seleccionar el tema hijo como tema activo.
No cambiará nada en la web, pero ya tienes tu child theme listo para añadirle estilos, funciones con PHP y hasta JavaScript personalizado.
Y no perderás las personalizaciones con cada actualización.

El modo automático, con plugins

Si eres de los que no les gusta andar trasteando con código ni con servidores, el repositorio de plugins de WordPresss es tu salvación, ya que ahí podrás encontrar alguno que sirva a tus propósitos.

Usaremos uno muy conocido: Child Theme Configurator, de Lilaea Media.

Instalar Child Theme Configurator

Instálalo y actívalo en tu sitio. Luego ve al panel de herramientas de WordPress y selecciona “Temas Hijo”.
Escoge la opción CREAR un nuevo tema hijo.
Selecciona un tema padre: (Escoge tu plantilla).
Ahora escoge Analizar el tema padre.

Ajustes para crear un tema hijo
Análisis del tema padre en el plugin Child Theme Configurator

Tras el análisis, el plugin te dirá si todo irá bien. Dale un nombre descriptivo a tu tema hijo en la casilla nº 4 y el resto de opcionas las puedes dejar como están.

Ahora tan solo te queda darle al botón azul “Create New Child Theme”.

Al terminar, el plugin te permite personalizar algunos apartados, como los que te indiqué antes. Y también previsualizar el tema hijo antes de activarlo.

Tema hijo creado

 

¿Y si instalamos un tema hijo que ya tenemos?

Perfecto.
En este caso tan solo tienes que acceder al panel de “Apariencia” de WordPress, luego a “Temas”, “Añadir nuevo” y subir el archivo zip que contiene el tema hijo.
Una vez cargado tan solo tienes que activarlo y listo.

Mi regalo para suscriptores del blog

Una de las ventajas de tener un tema hijo instalado es que puedes personalizar muchos detalles de tu web sin necesidad de instalar más plugins.
Una de estas personalizaciones es adaptar la pantalla de login para que coincida con la imagen corporativa de tu sitio web.

Si quieres hacerlo, te ofrezco un tema hijo para Divi completamente funcional y con un editor de pantalla de login incorporado. Tan solo tienes que suscribirte a la newsletter de mi blog para obtenerlo de forma gratuita.

Mira todo lo que puedes cambiar tan solo con tener este tema hijo activo:

Opciones del editor de login en ajustes de WordPress

Puedes pasar de la aburrida pantalla de login de WordPress a una personalizada.

Pantalla de login de WordPress
Pantalla de login de WordPress personalizada

¿Lo quieres?

Rellena el formulario de abajo para suscribirte al blog y te lo enviaré completamente personalizado.
Recuerda: es para Divi o Extra, ambos temas de Elegant Themes.

¡Espero que lo disfrutes!

Recibe tu child theme para Divi o Extra

Consentimiento

Aviso legal

Finalidad de la recogida y tratamiento de los datos personales: Suscripción al blog de la web y recibir tema hijo para Divi o Extra.
Legitimación: Consentimiento del interesado.
Destinatarios: Hosting: Raiola Networks, SL, empresa de hosting española.
Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en https://volutaestudio.com/solicitud, así como el derecho a presentar una reclamación ante una autoridad de control.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios significará que no podré atender la solicitud de contacto.
Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en las siguientes páginas de mi web: Aviso legal, así como consultar mi Política de privacidad.

Aviso legal

Finalidad de la recogida y tratamiento de los datos personales: Suscripción al blog de la web y recibir información comercial.
Legitimación: Consentimiento del interesado.
Destinatarios: Hosting: Raiola Networks, SL, empresa de hosting española.
Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en https://volutaestudio.com/solicitud, así como el derecho a presentar una reclamación ante una autoridad de control.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios significará que no podré atender la solicitud de contacto.
Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en las siguientes páginas de mi web: Aviso legal, así como consultar mi Política de privacidad.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Finalidad de la recogida y tratamiento de los datos personales: Responder a los comentarios en el blog.
Legitimación: Consentimiento del interesado.
Destinatarios: Hosting: Raiola Networks, SL, empresa de hosting española.
Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en https://volutaestudio.com/solicitud, así como el derecho a presentar una reclamación ante una autoridad de control.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios significará que no podré atender la solicitud de contacto.
Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en las siguientes páginas de mi web: Aviso legal, así como consultar mi Política de privacidad.

Pin It on Pinterest

Abrir chat
📲 Contacta con Voluta Estudio
WhatsApp con Voluta Estudio
Hola 👋🏻
¿Te ayudo?