En este articulo te mostraremos cómo crear un CHIL THEME para WORDPRESS de manera fácil y rápida. Para ello te presentamos 2 caminos que puedes tomar para realizarlo, ambas son muy simples.
Un Child Theme o Tema Hijo es cómo un «subtema» que llama directamente al tema padre que vendría a ser la base de todo. Es la mejor opción a la hora de modificar tu tema sin perder tus cambios al momento de actualizarlo y sin ralentizar tu página web. Lo que modifiques en tu Child Theme sobrescribirá lo de tu tema padre, no eliminará los archivos, solo dará prioridad a los archivos creados en tu Child Theme.
Tabla de contenidos
Crear Child Theme/Tema Hijo para WordPress mediante código.
Crear un Child Theme mediante código es bien fácil. Como ejemplo crearemos un tema hijo para el tema Astra.
1. Crear carpeta
Primero se debe crear una carpeta con el nombre que desees donde guardaremos los archivos del tema hijo. Como buena práctica le pondremos el nombre de tema padre más «-child».
2. Crear archivo CSS.
Luego comenzamos creando el archivo para los estilo css. Para ello, podemos utilizar algún editor de código o simplemente un block de notas donde agregaremos el siguiente comentario al comienzo del archivo, editamos el comentario según la información de nuestro tema padre y guardamos el archivo con el nombre style.css dentro de la carpeta que creamos anteriormente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Theme Name: Astra Child Theme URI: http://misitio.com/astra/ Description: Child theme para modificaciones varias Author: Brainstorm Force Author URI: https://wpastra.com/docs/about-beta-versions/ Template: astra Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-child */ |
Explicación del código anterior:
- Theme Name: nombre del tema hijo
- Theme URI: opcional, la url de la documentación y demo del tema hijo.
- Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
- Template: este parámetro te indica el nombre de la carpeta del tema padre.
- Version: versión del tema hijo, importante para el control de cambios.
- License, License URI: si se quieres hacer alguna variación a la licencia.
- Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
- Text-Domain: si tus cambios implican agregar texto traducible.
Reemplazamos la información del código con la información correspondiente al tema padre y a nuestro tema hijo que vamos a crear. Siempre que tengas problemas para visualizar las modificaciones que hagas a tu tema en la hoja de estilos, cambia la versión para que el servidor recargue el archivo.
3. Creando Archivo functions.php
Una vez realizado los pasos anteriores, necesitaremos conectar el Child Theme con el tema padre. Creamos un nuevo archivo que guardaremos dentro de nuestra carpeta con el nombre functions.php donde previamente le agregamos el siguiente código dentro:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php function enqueue_styles_child_theme() { $parent_style = 'astra-style'; $child_style = 'astra-child-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( $child_style, get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' ); |
En el código anterior:
- La función:
enqueue_styles_child_theme, es llamada en la acción:wp_enqueue_scripts - Definimos dos variables, que serán los IDs de los estilos a cargar.
- El ID del padre ya existe por lo que tenemos que buscarlo en el archivo functions.php del theme padre.
- El ID del theme hijo puede ser cualquier texto, aunque se recomienda igualmente que tenga un nombre similar al theme padre.
- Colocamos en cola el estilo del tema padre a través de la función
wp_enqueue_style. - Colocamos en cola el estilo del tema hijo, igualmente usando la función
wp_enqueue_style. - En la carga del style.css del tema hijo usamos el tercer parámetro para indicar dependencia.
- También usamos el cuarto parámetro para usar la versión que se ha definido en el archivo style.css del tema hijo.
4. Añade una imagen destacada para tu Child Theme.
Si quieres añadir una imagen destacada a tu tema hijo es tan simple como colocar la imagen con el nombre screenshot.png que quieres mostrar dentro de la carpeta de tu Tema Hijo.
Automáticamente WordPress detectará que esa en la imagen destacada de tu Tema Hijo y la mostrará en la vista de Temas del menú de WordPress.
Crea Child Theme mediante PLUGIN.
Existen varios plugins para crear un tema, pero uno de lo más usados y de los mas recomendados es Child Theme Configurator, es completamente gratuito y lo puedes encontrar en el repositorio de WordPress.
https://es.wordpress.org/plugins/child-theme-configurator/
Solo tienes que instalarlo y después dirigirte al apartado de Herramientas >> Temas hijo en la barra lateral izquierda el menú de administrador de
WordPress. Una vez dentro, seleccionas «CREAR nuevo tema hijo«, escoges el tema padre que usarás y le das a «Analizar«.
Hecho esto, te cargarán opciones extras por si quieres modificar algo en tu Tema Hijo, sino es así solo debes darle al botón «Create New Child Theme«.
¡Y listo! te deberá aparecer un mensaje de confirmación, con esto podrás ir a tu apartado de temas y activar el tema hijo. Finalmente, podrás eliminar el plugin.
EXTRA: Añade código JavaScript desde tu Child Theme.
La mejor manera de añadir código a JavaScript a nuestra web, es mediante el Child Theme.
Para ello el siguiente código al final de tu archivo functions.php de tu Tema Hijo o Child Theme.
|
1 2 3 4 5 6 7 8 9 10 |
add_action("wp_enqueue_scripts", "dcms_insertar_js"); function dcms_insertar_js(){ wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true ); wp_enqueue_script('miscript'); } |
En el código anterior:
- La función add_action usa el Hook wp_enqueue_scripts el cual ejecutará la función dcms_insertar_js que posteriormente codificaremos.
- La función wp_register_script sirve para registrar el script.
- El primer parámetro es el manejador o ID, lo usamos para poner en cola el script, para desregistralo, o para marcar dependencia.
- El segundo parámetro es la ruta en donde esta el archivo script.js, usaremos una función get_template_directory() de WordPress para encontrar la url completa.
- El tercer parámetro es un array y se usa para definir las dependencias, en nuestro caso es dependiente del manejador o ID jquery, quiere decire que nuestro script se debe cargar luego de la librería jQuery por que posiblemente usaremos algunas funciones de jQuery dentro.
- El cuarto parámetro es la versión, esto se concatenará a la url en el código HTML, es muy útil cuando actualizamos nuestro script para que el navegador no mantenga en cache la versión anterior.
- El parámetro final es un booleano, indica si el script se insertará en la parte superior como parte del header o en la parte final del código luego del body, esto es muy útil para optimización, google recomienda insertar los scripts siempre al final (valor true).
- La función wp_enqueue_script sirve para poner en cola el script, es en esta función en donde realmente el script será mostrado en el front-end del sitio, usa como parámetro el manejador o ID definido en el registro.
Luego de ello solo debes crear una carpeta nueva con el nombre «js» dentro de la carpeta de tu Tema Hijo y dentro de la carpeta añadir un archivo con el nombre «script.js» donde agregarás el código JavaScript que necesites.
