Saltar al contenido principal
Wordpress

•▷ Qué es y Cómo crear un child theme o tema hijo en WordPress




Puede que te sientas tentado de ir y editar el código fuente de un tema de terceros (es decir, un tema que no hayas escrito tú mismo), pero no lo hagas La próxima vez que actualices ese tema, se descargarán nuevos archivos y perderás todos los cambios que hayas hecho.

Frustrante, por no decir más.

Pero, ¿qué puede hacer si necesita editar el tema?

Por suerte hay una manera de editar el código en un tema, y de todas maneras tener la capacidad de descargar las últimas actualizaciones: eso es creando un tema infantil usando el tema original como tema principal.

Esto significa que activará el tema hijo en el administrador de WordPress, pero dentro del código de ese tema hay instrucciones para que WordPress le diga que este es un tema hijo, y cuál es el tema padre. Usted mantiene el tema padre instalado en su sitio, pero no lo activa. (Es esencial mantenerlo instalado, dado que sin él, el tema infantil se romperá.)

En este tutorial te voy a enseñar cómo crear un tema infantil en WordPress. Al mismo tiempo te daré algunos consejos sobre cómo funcionan los temas para niños y padres, para es importante es importante que sepas qué conjunto de código se está utilizando para mostrar el contenido de tu sitio.

Lo primero que hay que hacer es crear el tema hijo en su carpeta wp-content/themesfolder. El tema hijo debe tener dos archivos para trabajar: una hoja de estilos y un archivo de funciones. Al mismo tiempo puede agregar archivos opcionales, como archivos de plantilla o archivos de inclusión.

Cree una carpeta para el tema de su hijo en la carpeta de temas y dele un nombre adecuado. Estoy llamando a la mía»Mi tema hijo».

Dentro de esa carpeta, cree un archivo llamado style.css.

En la parte superior de ese archivo, agregue el siguiente código comentado:

Esto le dice a WordPress que este es un tema, y proporciona la misma información sobre el tema que la que usted encontraría en cualquier tema – con una adición. La plantilla: veintidós líneas le dice a WordPress que consiste en un niño del tema Veinte y Diecinueve.

Puede usar cualquier tema como tema principal, usando el nombre de la carpeta donde se encuentra almacenado. No utilice el título del tema: en su lugar, utilice el nombre de la carpeta.

Ahora guarde la hoja de estilo y cree otro archivo en el tema hijo, llamado functions.php.

En este archivo, necesita encolar la hoja de estilos del tema principal. Solía ser que usted hacía esto usando una línea @import en la hoja de estilo, pero esta ya no es la forma recomendada de hacerlo.

En su lugar, en el fichero de funciones, añada este código:

<?php

function pimpampress_parent_styles() {

    

    

    wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );

        

}

add_action( 'wp_enqueue_scripts', 'pimpampress_parent_styles');

 

Esto coloca correctamente la hoja de estilo del tema principal, usando get_tempate_directory_uri() para encontrar ese tema (el directorio de plantilla es la carpeta donde se almacena el tema principal, mientras que el directorio de la hoja de estilo es la carpeta donde se almacena el tema actual).

Si desea añadir algún estilo al tema hijo para anular o aumentar el estilo del tema principal, vuelva a la hoja de estilos del tema hijo y añádalo allí. No agregue en el archivo de funciones o intente hacer cola en más hojas de estilo.

Al mismo tiempo puede agregar funciones al archivo de funciones del tema hijo, y archivos de plantilla a la carpeta de temas, que anulará los mismos archivos de plantilla en el tema principal.

Por ende ahora ya tienes el tema de tu hijo, ¡así de fácil! Sin embargo, es importante señalar comprender exactamente cómo interactúan los archivos de plantillas de temas para niños y padres.

Ahora echemos un vistazo a los archivos de plantillas de temas. El archivo de plantilla que WordPress utiliza para mostrar una página en su sitio dependerá de dos cosas: la jerarquía de plantillas y los archivos que agregue al tema hijo.

Imagine que está viendo la página de archivo de la categoría Viajes en su sitio. WordPress utilizará la jerarquía de plantillas para encontrar el archivo más relevante:

  1. un fichero de plantilla de archivo de categoría para esa categoría específica, usando el slug: category-travel.php
  2. un fichero de plantilla de archivo de categoría para esa categoría específica, utilizando el ID: category-23.php
  3. un archivo de categoría general: category.php
  4. un fichero de archivo general: archive.php
  5. el catch-all: index.php

WordPress buscará esto tanto en el tema para padres como en el tema para niños. WordPress utilizará el primer archivo de la jerarquía que encuentre, ya sea en el tema padre o en el tema hijo.

Hay una excepción. Cuando el archivo de plantilla más relevante dispone de una versión en los temas padre e hijo, WordPres utilizará el archivo del tema hijo e ignorará el del tema padre. Este es uno de los usos más comunes de los temas hijo: anular un archivo específico en el tema padre.

Aquí hay algunos ejemplos, usando la categoría de ejemplo anterior:

  • Si su tema hijo tiene archive.php e index.php, y su tema padre tiene category.php e index.php, entonces WordPress usará category.php del tema padre debido a que es el más alto en la jerarquía
  • Si su tema hijo tiene categoría.php e index.php y su tema padre tiene archivo.php e index.php, WordPress utilizará el archivo category.php del tema hijo, dado que éste es el más alto de la jerarquía
  • Si el tema hijo tiene archive.php e index.php y el tema padre tiene archive.php e index.php, WordPress utilizará el archivo archive.php del tema hijo. Esto se debe a que hay dos copias del archivo más alto de la jerarquía y el tema hijo prevalece sobre el tema padre.

De esta manera, si desea anular un archivo de plantilla en el tema principal, cree un duplicado de ese archivo en el tema secundario con el código que desee. O cree un archivo que sea más alto en la jerarquía de plantillas y añádalo al tema de su hijo.

Las funciones funcionan de forma diferente a los archivos de plantilla y son un poco menos sencillas.

Si agrega una función al tema hijo con el mismo nombre que una del tema padre, WordPress lanzará un error, debido a que está intentando llamar a la misma función dos veces.

Pero esto no sucederá si la función en el tema padre es enchufable.

Un archivo enchufable se incluye en una comprobación condicional para otra función con el mismo nombre, que tiene el siguiente aspecto:

1

2

3

4

5

6

7

8

if ( ! function_exists( 'pimpampress_function_name' ) ) {

    function pimpampress_function_name() {

    

    }

}

Aquí, WordPress comprobará que no se ha llamado a ninguna función que tenga el mismo nombre. Si es así, ejecutará esta función. Esto se debe a que las funciones del tema subordinado se llaman antes que las funciones del tema principal. Si escribe una función en el tema hijo con el mismo nombre, se ejecutará en su lugar.

¿Pero qué pasa si la función del tema padre no es enchufable y quieres anularla?

Bueno, puede hacerlo escribiendo una nueva función que esencialmente cancele la función en el tema padre, y dándole una prioridad mayor que la función en el tema padre, para que se ejecute después de ella la función funciton del tema padre. Alternativamente, puede descolgar la función del tema padre y escribir una nueva función en el tema hijo, enganchada a ese mismo gancho.

Imagine que la función del tema principal tiene este aspecto:

function pimpampress_parent_function() {     

    

}

add_action ( 'init', 'pimpampress_parent_function' );

Si su función en el tema hijo pudiera deshacer la función del tema padre sin tener que detener la función del tema padre, lo escribiría así:

function pimpampress_child_function() {

    // contents of function here

}

add_action ( 'init', 'pimpampress_child_function', 20 );

Pero si tuvieras que evitar que se ejecute la función del tema padre, primero lo desengancharías, así:

function wpmu_remove_parent_function(){

    remove_action( 'init', 'pimpampress_parent_function' );

}

add_action( 'wp_head', 'wpmu_remove_parent_function' );

Tenga en cuenta que todavía tiene que poner la función remove_action() dentro de otra función, enganchada al gancho wp_head() en este caso.

Entonces podría escribir la función para el tema hijo como si el del tema padre nunca hubiera existido, ¡recuerde que no debe darle el mismo nombre!

Los temas infantiles tienen dos usos principales:

  • Con un tema que ha sido diseñado para ser usado como un tema de padres (habitualmente referido como un marco de trabajo). El marco de trabajo no está diseñado para su uso por sí solo: en su lugar, se agregan estilos y archivos de plantilla adicionales con un tema hijo.
  • Para permitirle editar el tema principal sin tener que editarlo directamente, o para añadir archivos de plantilla adicionales. Esto significa que cuando el tema de los padres se actualice en el futuro, no perderá su trabajo.

Por ende la próxima vez que leas un tutorial que te diga que uses un tema infantil en lugar de editar un tema de terceros, ¡sabrás qué hacer!

2EwyhSO

R Marketing Digital