Cómo crear, personalizar y utilizar un child theme de WordPress

Si amas tu tema actual pero quieres modificar sus características y apariencia, lo puedes lograr al utilizar su child theme. En este tutorial te explicaremos por qué esta práctica es, además, necesaria y te guiaremos a través del proceso para que puedas crear y editar un child theme de WordPress, independientemente de tus habilidades técnicas.

¿Por qué deberías usar Child Themes con WordPress?

Dado que un tema secundario hereda las características de un tema principal, puedes personalizar su código sin romper la funcionalidad del original. De esta manera, si un tema recibe una actualización, no se sobrescribirán todos los cambios que hayas realizado.

Otra razón para utilizar un child theme es que ofrece una solución a prueba de fallas si alguna vez arruinas algo con tus ediciones. Además, te permite realizar un seguimiento eficiente de las partes que has cambiado, ya que los archivos de un tema secundario están separados de los de los temas principales.

Cómo funciona un child theme en WordPress

Como mencionamos antes, un child theme se almacena en un directorio separado del tema principal, cada uno con sus propios archivos style.css y functions.php. Puedes agregar otros archivos según sea necesario, pero esos dos son el mínimo requerido para que utilizar un child theme y que funcione correctamente.

Usando los archivos .css y .php relevantes, puedes modificar todo, desde el estilo, los parámetros de diseño hasta la codificación real y los scripts utilizados por un tema secundario, incluso si los atributos no están presentes en tu tema principal.

Piensa en ello como una superposición. Cuando un visitante carga tu sitio web, WordPress primero carga el subtema y luego llena los estilos y funciones que faltan utilizando partes del tema maestro. Como resultado, obtienes lo mejor de tu diseño personalizado sin sacrificar la funcionalidad principal del tema.

Crear un child theme en WordPress

En el ejemplo que verás en este tutorial crearemos un child theme basado en el tema Twenty Seventeen, puedes usar otro tema si lo prefieres. También vamos a usar el Administrador de archivos de Hostinger para agregar y editar los archivos, aunque con FTP también funciona.

Ahora, sin más preámbulos, te explicamos cómo crear un tema secundario en WordPress:

1. Accede al panel de control del Hosting y selecciona ‘Administrador de Archivos’.
2. Navega entre las carpetas hacia public_htm l-> wp-content -> themes.
3. Selecciona la opción ‘New Folder’ (nueva carpeta) haciendo clic en el icono correspondiente («+«) en el menú superior. Ingresa el nombre del tema secundario y haz clic en Create (crear). Recomendamos utilizar el nombre del tema principal seguido del sufijo -child. En este ejemplo, nombramos la carpeta twentyseventeen-child.
   

   IMPORTANTE: reemplaza los espacios en el nombre de un archivo con guiones (-) para evitar errores.

4. Dentro de la carpeta, crea un archivo style.css. Pega el siguiente código:

   /* 
   Nombre del Tema: Twenty Seventeen Child 
   URL del Tema: http://tudominio.com
   Descripción: Twenty Seventeen Child 
   Autor del Tema: Tu Nombre
   URL del Autor: http://tudominio.com
   Tema: twentyseventeen 
   Version: 1.0.0 
   Text Domain: twentyseventeen-child 
   */

5. Cambia todos los valores respectivamente. El campo más importante es Plantilla porque le dice a WordPress en qué tema principal se basa tu tema secundario. Una vez hecho esto, haz clic en Save & Close (Guardar y cerrar).
6. Crea otro archivo llamado functions.php en la misma carpeta, pero no lo llenes con el código del archivo del tema principal porque debe permanecer separado. En su lugar, copia y pega el siguiente código en el archivo en blanco y guárdalo:

   <?php
   add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
   function enqueue_parent_styles() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
   }
   ?>

7. Visita tu sitio web y accede a Apariencia -> Tema. Activa el child theme que acabas de crear y notarás que tiene el mismo aspecto que el tema principal.

Cómo puedes ver, ¡crear un child theme de WordPress no es más complicado que trabajar con un tema maestro!

Personaliza tu child theme de WordPress

Para personalizar el child theme, necesitas una comprensión básica de las reglas de CSS y el conocimiento sobre cómo inspeccionar los elementos para poder identificar su código CSS y la clase a la que están asignados.

Ahora, echemos un vistazo a los conceptos básicos para personalizar uno. Para hacerlo, haz clic en Personalizar -> CSS adicional desde tu tema secundario activo.

Cambiar el color de fondo

Inserta la siguiente regla CSS si deseas cambiar el color de fondo de tu tema secundario de WordPress:

.site-content-contain {
    background-color: #DEF0F5;
    position: relative;
}

El valor junto a background-color: corresponde al código hexadecimal del color que elijas. En este ejemplo, dado que lo estamos cambiando de blanco a azul claro, el resultado se ve así:

Cambiar de color de la barra lateral

Puedes crear una visualización agradable de tus widgets agregando algo de color a la barra lateral con el siguiente código CSS:

.widget {
background: #B9EBFA;
padding: 25px;
}

Nuevamente, no olvides editar el código de color con el color que quieres. Deberías obtener un resultado como este:

Cambiar tipos de fuente, tamaños y colores

Para cambiar el tipo de fuente, el tamaño y el color de su tema secundario de WordPress, inserte el siguiente código:

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

La etiqueta p significa párrafo. Como puedes ver a continuación, la regla anterior cambió el aspecto de las fuentes del párrafo en función de los valores especificados.

Para cambiar la fuente de otras partes del texto, como el título o el encabezado, inspecciona los elementos para ver primero tus parámetros CSS. En aras de la ilustración, intentemos cambiar el color de fuente del título.

1. Primero, haz clic derecho en el texto y selecciona Inspeccionar. Localiza el enlace de estilo CSS y ábrelo en una nueva pestaña.
   
2. Encuentra la parte exacta que estás buscando usando CTRL+F y copia el código en la pestaña CSS adicional. Cambia los valores en función de lo que quieras.
   

Puedes hacer lo mismo con cualquier otro elemento que desees cambiar.

Cambiar el diseño de publicaciones y páginas

Al igual que el CSS personalizado de un child theme de WordPress anula el estilo de tu tema principal, los archivos de plantilla te permiten crear tus propios diseños al suplantar los predeterminados.

Tu nueva plantilla debe tener el mismo nombre de archivo y estar en las mismas carpetas que corresponden al original. Es una buena idea copiar el archivo de plantilla maestra a tu directorio de temas secundarios de WordPress y trabajar a partir de ello.

Los archivos de la plantilla principal están en la carpeta principal del tema. Por ejemplo, la plantilla para ver una sola publicación es single.php, y la plantilla para páginas es page.php.

Twenty Seventeen también divide sus plantillas en partes de plantilla (template-parts) a las que se hace referencia en la plantilla principal utilizando la función get_template_part() de WordPress. Por ejemplo, si deseas editar page.php, puedes comenzar localizando las partes de la plantilla para ver si esos son los bits que necesitas editar. En nuestro archivo de ejemplo, la línea 28 dice:

get_template_part( 'template-parts/page/content', 'page' );

¿Cómo leemos esto? template-parts/page/ es la ruta de la carpeta. Mientras tanto, «contenido» se refiere al carácter en el nombre del archivo antes del guión y «página» después del guión.

Juntos forman la ruta completa wp-content/themes/twentyseventeen/template-parts/page/content-page.php.

Siguiendo la estructura, si deseas cambiar el diseño de content-page.php, debes copiarlo en la carpeta de temas secundarios y colocarlo en esta ubicación: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.

¡Y eso es todo!

Agregar y quitar funciones

Otra ventaja significativa de utilizar un child theme en WordPress es la capacidad de tener un archivo functions.php separado, que, al igual que los plugins, se usa para agregar (o eliminar) ciertas características usando el código PHP.

Por ejemplo, las siguientes líneas desactivarán la función del clic derecho en tu tema:

function your_function() {
   ?>
<script>
jQuery(document).ready(function(){
    jQuery(document).bind("contextmenu",function(e){
        return false;
    });
});
</script>
<?php
}
add_action('wp_footer', 'your_function');

Conclusión

Los temas secundarios de WordPress ofrecen una forma poderosa de crear un proyecto completamente nuevo basado en las características del tema maestro existente sin romper su función principal. Con un poco de codificación simple y administración de directorios, puedes modificar el child theme tan poco o tanto como desees, proporcionando una amplia gama de posibilidades para tu diseño.

Para obtener más tutoriales de desarrollo de WordPress, consulta nuestra sección de tutoriales de WordPress aquí. ¡No dudes en dejar un comentario a continuación si tienes alguna pregunta!