Crear un tema hijo o tema child es muy recomendable cuando hacemos modificaciones en los archivos de nuestro tema en WordPress.
Los escenarios más habituales son:
- Queremos implementar código de seguimiento de herramientas como Google Analytics, Google Tag Manager o el Pixel de Facebook.
- Queremos hacer modificaciones estructurales en nuestro Theme, habitualmente modificando el código HTML o PHP.
El tema hijo nos va a permitir mantener nuestros cambios, ya que sus archivos se priorizan sobre el tema padre (el tema que estamos modificando), y nos va a llevar apenas unos minutos configurarlo.
Crear tema child en WordPress de forma manual
Podemos crear nuestro tema hijo en unos sencillos pasos manualmente sin necesidad de cargar nuestra página con código no necesario de plugins y reduciendo el riesgo por sus potenciales vulnerabilidades.
1. En nuestro panel de WordPress veremos nuesto theme activo accediendo a Apariencia > Temas. Lo que vamos a hacer es crear un nuevo tema que podremos activar desde esta sección.
Un pequeño consejo, si estas utilizando un tema y te encuentras con varios en esta sección te animo a que elimines el resto, no queremos cargar nuestro servidor con más recursos de los necesarios.
Apariencia ➜ Temas
2. Accederemos al gestor de archivos de nuestro sitio web, el proveedor de alojamiento o hosting te facilitará el acceso para que entres ya sea a través de un administrador de archivos (En nuestro caso cPanel, uno de los más utilizados en la industria) o a través del protocolo FTP (FileZilla por ejemplo es uno de los softwares gratuitos más populares ).
En cPanel pulsaremos en «Administrador de Archivos»
3. Dentro del Administrador de Archivos seguiremos la siguiente ruta a través de las carpetas: Public_html > wp-content > themes. Aquí encontraremos las carpetas que guardan todos los contenidos de nuestros temas.
4. Crearemos una nueva carpeta con el nombre que queramos para nuestro tema hijo, en nuestro caso vamos a nombrarlo como Rankyra, el nombre de nuestra agencia de marketing y publicidad para Amazon.
Pulsamos sobre «+Carpeta» y creamos la de nuestro tema hijo
5. Entraremos ahora en la carpeta que hemos creado para nuestro tema hijo y crearemos un archivo con el nombre style.css. Se trata del archivo que va a recoger los estilos visuales de nuestro theme.
Pulsamos sobre «+Archivo» y creamos el style.css
6. Pulsamos clic derecho sobre el archivo style.css recién creado y pegamos lo siguiente, cambiando la información según corresponda:
Debemos escribir correctamente el «Theme Name» y el «Template»
Theme Name: nombre de la carpeta de tu tema child
Theme URI: http://tuweb.com
Version: 4.0
Description: Tema hijo de rttheme18
Author: Tu
Author URI: http://tuweb.com
Template: Nombre EXACTO de la carpeta de tu tema padre
*//*—————– Cambios a partir de aquí ——————————-*/
7. Crearemos ahora el segundo y último archivo que necesitaremos para que nuestro tema child funcione, el functions.php.
Creamos el archivo functions.php
8. Clic derecho sobre nuestro recién creado functions.php y pegamos el siguiente código:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-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', 'my_theme_enqueue_styles' );
?>
9. Enhorabuena, ya tenemos nuestro tema hijo creado en nuestro WordPress. Únicamente debemos activarlo y habremos terminado.
Activamos el tema hijo que hemos creado
CSS adicional en temas hijos en WordPress
Si estamos creando un tema hijo para un tema en el que hemos trabajado sus estilos a través del «CSS adicional» deberemos copiarlos y pegarlos en el CSS adicional de nuestro tema hijo.
Clic en «Personalizar» y vamos a «CSS adicional»
CTRL+A para seleccionar todo el código en el CSS adicional de nuestro tema padre, lo copiamos con CTRL+C y activamos el tema hijo. Pegamos el código en el CSS adicional y tendremos todos los cambios aplicados en nuestro nuevo tema.
Crear imagen para nuestro tema hijo
Si lo deseamos podemos añadir una imagen en nuestro tema hijo, únicamente debemos de añadir una imagen en formato .png o .jpg con el nombre screenshoot.
Subimos un archivo de imagen screenshot.jpg
Si estas trabajando con WordPress esto te puede interesar:
¿Sabías que una buena formación puede ahorrarte mucho tiempo, además de dinero y frustración en tu trabajo?
He preparado algo muy especial para ti, con este curso adquirirás todos los conocimientos básicos para crear y gestionar blogs, tiendas online y páginas de empresa para tus proyectos y los de tus clientes de manera eficiente y eficaz.
