El término ‘tema hijo’ es algo que verás mucho si visitas páginas y comunidades relacionadas con WordPress. Sin embargo, si eres un principiante en WordPress, es probable que sea un tema del que tendrás poco conocimiento. En este caso, a menudo tendrás tres preguntas: ¿Cuáles son los temas secundarios de WordPress, cómo funcionan y por qué los debes usar?
En pocas palabras, los temas secundarios son una función de WordPress que te permite personalizar tu sitio web de forma segura. Puedes establecer cualquier tema que desees como ‘padre’ y usar su hijo para hacer los cambios que desees. De esta manera, el tema original permanece sin cambios, y puedes hacer un mejor seguimiento del trabajo que haces.
En este tutorial de tema hijo de WordPress, hablaremos sobre lo que son y por qué deberías usarlos. Luego, te enseñaremos cómo crear un tema secundario de WordPress manualmente, o mediante el uso de un plugin. ¡Pongámonos a trabajar!
Qué es un tema de WordPress Hijo (y por qué debería usar uno)
Cuando configuras un tema en WordPress, la plataforma crea una carpeta única para almacenar todos sus archivos. Esto incluye todo el código central de WordPress, cualquier imagen que necesite usar y cualquier hoja de estilo en cascada (CSS) que use para darle estilo a tu sitio. Además, los temas secundarios heredan toda la funcionalidad básica de tus temas principales. Tienen sus propias carpetas, por lo que WordPress las reconoce como un tema diferente, pero superficialmente funcionan igual que sus padres.
En este punto, es posible que estés pensando ¿Por qué querría crear una copia de un tema que ya tengo? Hay múltiples respuestas a esa pregunta, y las responderemos una por una:
- Te permite personalizar tu tema. Si deseas realizar cambios en cómo funciona y se ve el tema activo, tiene sentido crear un elemento secundario. De esta forma, cualquier cambio que realices solo afectará al hijo, y siempre puedes regresar a la versión original en cualquier momento.
- Las actualizaciones de temas pueden eliminar cualquier cambio que hayas realizado en ellos. Cuando actualizas tu tema, pierdes cualquier personalización que hayas realizado en tu código o estilo. Sin embargo, si estás utilizando un tema secundario, puedes actualizar su padre de manera segura sin afectar los cambios que implementó.
- Mantiene las cosas organizadas. Con el tiempo, es fácil perder la pista de los cambios que has realizado en tu tema. El uso de un tema secundario de WordPress le permite estar más organizado ya que tus archivos solo deben incluir el código nuevo que ha agregado.
Imagine, por ejemplo, que está usando Twenty Seventeen como tu tema activo de WordPress. En algún momento, es posible que desees realizar un ligero cambio en el tema, como la apariencia de la sección del pie de página. En esta etapa, tiene dos opciones: puedes seguir adelante y modificar los archivos que necesita de inmediato, o puedes crear un tema secundario en WordPress de antemano. Si vas por la primera ruta, no verás problemas iniciales. Sin embargo, una vez que actualices el tema, perderás esos cambios y tendrás que pasar por la molestia de implementarlos de nuevo.
Por otro lado, al crear un tema secundario, tus cambios se conservarán cuando se actualices el tema. Es un buen intercambio de algo que normalmente toma alrededor de media hora, y eso solo si es la primera vez que creas un tema de WordPress.
Cómo crear un tema secundario en WordPress manualmente (en 3 pasos)
Crear un tema secundario de WordPress es un proceso relativamente simple. Tendremos que configurar una nueva carpeta, luego usar algún código para vincular el tema principal y decirle a WordPress qué información debe cargar. Explicaremos cada parte del proceso a medida que avancemos en tu camino, así que no te dejes intimidar. ¡Hagámoslo!
Paso # 1: Crea un Directorio para Tu Tema de Hijo de WordPress
Crear una carpeta es una tarea simple en la mayoría de los casos: elige dónde colocarla, da unos pocos clics y estarás listo. Lo mismo aplica cuando estás creando una nueva carpeta en tu parte posterior de WordPress. Sin embargo, deberás usar algo llamado Protocolo de transferencia de archivos (FTP) para hacerlo.
FTP es una tecnología que te permite transferir archivos desde y hacia cualquier servidor al que tenga acceso. Dentro del servidor deberían estar tus archivos y carpetas de WordPress, que son los que permiten que la plataforma funcione.
Lo primero es lo primero: necesitarás dos cosas para acceder a tu sitio web a través de FTP: un cliente que te permita conectarse, como FileZilla y tus credenciales de FTP. Ten en cuenta que estos no son los mismos que usas para iniciar sesión en tu escritorio de WordPress. En la mayoría de los casos, tu proveedor de alojamiento web te enviará un correo electrónico con tus credenciales de FTP cuando se registres, así que consulta en tu bandeja de entrada cualquier correo electrónico de 000Webhost. Alternativamente, puede ir a la pestaña Settings > General en tu tablero 000Webhost. Deberías haber una sección llamada FTP Details en la Website Settings:
Hay tres campos que nos interesan en esta sección: Host name, Username, y Password. Este último es el mismo que el de tu cuenta de 000Webhost, pero tome nota de los otros dos o manten la pestaña abierta por ahora. Continúa e instala FileZilla si aún no lo has hecho, luego abre el programa. En la parte superior de tu pantalla, verá cuatro campos vacíos llamados Host, Username, Password y Port:
Escribe tus credenciales de FTP en sus respectivos campos dentro del programa, e ignora la configuración del puerto. Cuando estés listo, da clic en el botón que dice Quickconnect, y verás una sucesión de mensajes en la pestaña a continuación.
Cuando tu cliente FTP se conecta exitosamente al servidor, tus archivos y carpetas aparecerán en la parte inferior derecha de la ventana:
La carpeta llamada public_html es el directorio raíz de WordPress. Su nombre proviene del hecho de que es donde van todos los archivos y carpetas de WordPress. Accede ahora, luego navegue a wp-content> themes:
En el interior, encontrarás carpetas exclusivas para cada uno de los temas instalados en tu sitio web. Sin embargo, da clic con el botón derecho en cualquiera de los espacios en blanco aquí y selecciona la opción Create Directory. Aparecerá una ventana que te pedirá un nombre:
Recomendamos que nombres tu nueva carpeta como twentyseventeen-child para que puedas reconocerla fácilmente más adelante. Por supuesto, el nombre debería variar según el tema que quieras usar como padre. Ingresa tu nueva carpeta ahora y continúe con el paso número dos.
Paso # 2: crea una hoja de estilo para tu Tema Hijo
Tu nueva carpeta de temas secundarios debería parecer bastante vacía ahora, así que vamos a solucionar eso añadiéndole una ‘hoja de estilo’. Este es un archivo que contiene todas tus personalizaciones de CSS, esencialmente código que proporciona diseño a tu sitio. Una vez que termines de configurar el tema hijo, podráa realizar cambios en el aspecto de tu tema con este archivo.
Da clic derecho en cualquier lugar de la carpeta y elige la opción Create new file. Cuando FileZilla te pregunte el nombre de tu nuevo archivo, escriba style.css:
Ahora, da clic derecho en tu archivo style.css y selecciona View/Edit:
Esta opción descargará y abrirá el archivo style.css localmente con tu editor de texto predeterminado. Cuando se abre el archivo, debe estar en blanco y deberá pegar el siguiente fragmento dentro de:
/* Theme Name: Twenty Seventeen Child Theme URI: http://yourwebsite.com/twentyseventeen-child/ Description: Your first child theme! Author: John Doe Author URI: http://www.wordpress.org Template: twentyseventeen Version: 1.0.0 Tags: child theme Text Domain: twenty-seventeen-child */
Hay mucho que desempacar allí, así que vamos a descomponerlo poco a poco. Primero, necesitarás escribir el nombre completo del tema hijo. Este nombre aparecerá en la pantalla de selección de tema de WordPress, y puede ser lo que quieras. Por supuesto, tiene sentido identificarlo como un tema infantil y mencionar cuál es su padre.
Continuando, la URL de tu tema, la descripción, el autor y la URL del autor pueden ser prácticamente cualquier cosa que desees, de ahí las descripciones de marcador de posición que establecimos anteriormente. Luego viene la parte más importante de todo el fragmento: el campo template. La plantilla que elijas le dice a WordPress qué tema debería usar como padre, y en este caso, elegimos twentyseventeen.
Ten en cuenta que no necesitas escribir aquí el nombre completo de tu tema principal, solo el nombre de su carpeta. Si no estás seguro de lo que es, regrese a public_html> wp-content> themes usando tu cliente FTP, y revisa el nombre de la carpeta para el tema que desea usar como padre.
Pasando, la versión que establezcas tampoco importa, y tampoco las etiquetas que elijas. Sin embargo, el último campo puede ser útil si alguna vez deseas traducir tu tema a otro idioma. Por ahora, solo establece algo que puedas recordar en el campo Text Domain.
Después, guarda los cambios en tu archivo style.css y cierre el editor. FileZilla cargará automáticamente el archivo actualizado y sobrescribirá la versión existente en tu servidor. A continuación, accede a tu escritorio de WordPress y busca una nueva opción en la pestaña Apariencia > Temas:
Sin embargo, tu nuevo tema secundario de WordPress aún no está listo para su uso, así que no lo actives. Hay un paso más antes de poder usarlo.
Paso # 3: modifica tu archivo de funciones de WordPress
En esta etapa, tu tema de WordPress debería funcionar. Sin embargo, si intentas activarlo, verás que no se parece a tu tema principal. Esto se debe a que su hoja de estilo está vacía, por lo que debemos decirle a WordPress que cargue la de tu tema principal. Podemos hacer eso agregando un archivo functions.php al directorio de tu tema secundario.
Cada configuración de WordPress incluye múltiples archivos functions.php. Se usan comúnmente para agregar funciones específicas a todo tu sitio (o temas individuales, en este caso). Regresa al directorio del tema hijo, que se encuentra en public_html> wp-content> themes> twentyseventeen-child (o lo que sea que se llame al tema hijo). Cuando estés dentro, crea un nuevo archivo llamado functions.php siguiendo los mismos pasos que hicimos anteriormente:
Ahora usa la opción View/Edit para abrir el archivo usando tu editor de texto local y pega el siguiente código dentro de:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Es un fragmento de PHP, que es el lenguaje en el que se basa WordPress. Lo que hace es decirle a la plataforma que debe cargar la hoja de estilo de tu tema principal, luego la tuya en la parte superior. Esencialmente, esto significa que tu sitio web se verá tal como lo hizo mientras usaba el tema principal, al menos hasta que comience a ajustar tu nuevo archivo style.css.
Recuerda guardar los cambios en tu archivo functions.php, luego ciérrelo. Ahora vaya a la pestaña Apariencia > Temas en tu tablero de WordPress, luego activa tu tema secundario:
Si abres tu página de inicio ahora, verás que se ve igual que antes, lo que significa que hizo todo bien:
Ahora viene la parte que requiere más trabajo: hacer tus personalizaciones. Si no estás familiarizado con CSS, debes leer sobre cómo funciona antes de comenzar a hacer cambios en el tema hijo. Si algo sale mal, siempre puedes eliminarlo y comenzar de cero.
Cómo crear un tema de WordPress Hijo Usando Plugins
Si no te siente seguro de retocar los archivos de WordPress (aunque recomendamos el enfoque manual), siempre puedes usar un plugin para ayudarte a configurar tu tema hijo. Uno de nuestros favoritos es el plugin Child Theme Configurator. Es la herramienta más popular para crear un tema hijo de WordPress, y es fácil de usar también. Para instalarlo, ve a la pestaña Plugins > Agregar nuevo en tu tablero y use la barra de búsqueda para encontrar el plugin:
Da clic en el botón Instalar ahora y espera mientras WordPress configura el plugin. Una vez que el botón cambie a azul y diga Activar, haz clic una vez más y listo, el plugin está listo para funcionar. Ahora, ve a la nueva pestaña Herramientas > Child Themes en tu Escritorio. En el interior, encontrarás una opción para crear un nuevo tema hijo y una lista de opciones para usar como elemento principal:
Haga clic en el botón Analyze y el plugin verificará si el tema que eligió puede usarse como padre. Si es así, aparecerá un nuevo menú a continuación, donde podrás establecer un nombre para el directorio de tu nuevo tema hijo. Las opciones a continuación deben dejarse en sus valores predeterminados, lo que creará un tema secundario como el que hicimos en nuestros ejemplos anteriores:
Desplázate hasta la parte inferior de la página ahora y da clic en el botón Create New Child. Solo debería tomar un segundo antes de que tu nuevo tema hijo esté listo. Ahora ve a la pestaña Apariencia> Temas y comprueba si aparece allí:
En este punto, puedes activar tu tema hijo ahora como de costumbre y comenzar a personalizarlo.
Conclusión
El uso de un tema hijo de WordPress es un paso importante en tu viaje utilizando la plataforma. Te permite tomar cualquier tema y usarlo como base para construir tus personalizaciones. Nada te impide modificar el tema principal directamente, pero corre el riesgo de perder esos cambios durante las actualizaciones. Un tema secundario conserva estos cambios, independientemente de las actualizaciones realizadas en el elemento primario.
Recapitulemos los tres pasos para crear un tema hijo de WordPress manualmente:
- Crea un directorio para tu tema hijo.
- Configura una hoja de estilo para tu tema hijo.
- Modifica tu archivo de funciones de WordPress.
¿Tiene alguna pregunta sobre cómo crear un tema infantil en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!
