Tutorial sobre la creación de un tema hijo de WordPress

Muchos de nosotros queremos personalizar algo en el tema. ¿También está buscando agregar o editar algo en el tema que está utilizando? Si es así, entonces ha venido al lugar correcto, amigo. Esta publicación es un tutorial simple y completo sobre la creación de un tema hijo de WordPress.

Si el tema tiene muchas opciones de personalización, esto podría ayudarlo a satisfacer sus necesidades. Pero independientemente de cuántas opciones haya disponibles, puede haber algo que el tema actual que tiene no pueda hacer o no sea de la manera que le gusta. Entonces, si se siente cómodo con los códigos y WordPress, entonces puede sumergirse en los archivos del tema y comenzar a editarlo, dedicando algunos minutos, horas a agregar los cambios que le gustan al tema, solo para descubrir que ha perdido esos cambios cuando su tema sea el próximo. la actualización se da vueltas.

Entonces, para evitar esto, viene nuestro héroe llamado Child Theme . La creación de un tema hijo le permite realizar cambios en su sitio sin cambiar nada en el código del tema original. Incluso si solo está haciendo algunos ajustes menores, vale la pena dedicar unos minutos a crear un tema secundario.

Nota : Para realizar cambios simples de CSS en su sitio web, puede usar el cuadro CSS adicional agregado en WordPress 4.7 en lugar de crear un tema secundario. Estos cambios realizados a través del cuadro de CSS adicional permanecerán allí incluso si actualiza el tema. Pero si está buscando otros cambios adicionales como editar archivos PHP, debe crear un tema hijo.

Entonces, creo que esto cubrirá el tema ' ¿Por qué crear un niño?' pregunta. Entonces, sigamos adelante y creemos un tema hijo.

¿Cómo crear un tema infantil de WordPress?

En este tutorial, mostraremos cómo crear un tema hijo para nuestro propio tema popular Spacious .

Paso uno:

Crea una nueva carpeta en tu directorio de temas. Puede hacerlo usando el cPanel o vía FTP. El directorio de temas es wp-content / themes. Entonces, nombremos la carpeta como niño espacioso. Puede nombrarlo como desee, pero recuerde que no debe haber ningún espacio en el nombre de la carpeta. Es un enfoque común nombrar el tema hijo como el tema padre más el hijo añadido al final.

Segundo paso:

Dentro de la carpeta espaciosa-niño, cree un archivo llamado style.css y complete la información como se muestra a continuación.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

Agregue esto y guarde el archivo.

Puntos para recordar :

• El nombre de la plantilla (aquí en este caso espacioso) debe coincidir con el nombre de la carpeta del tema principal y también asegurarse de que no haya espacios en blanco después del nombre.
• Se pueden agregar o cambiar otros detalles a su gusto.

Paso tres:

Cree un archivo llamado functions.php como creó 'style.css' en el Paso Dos. Y complete la información como se muestra a continuación.

<?php
/**
 * Child theme functions file.
 */
function spacious_child_enqueue_styles() {
	// Parent theme style handle 'spacious_style'.
	$parent_;

	// Enqueue parent and child theme style.css.
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

Al crear un tema hijo, los archivos style.css y functions.php son obligatorios, mientras que los archivos de plantilla y otros archivos son opcionales y se pueden crear si es necesario.

Por último , para activar el tema hijo, en el panel vaya a Apariencia-> Temas. Busque el tema hijo que creó y actívelo. Eso es todo. Además, asegúrese de que el tema principal también esté presente en los temas instalados para que funcione el tema secundario. Si ahora visita su sitio, debería verse igual que cuando se activó el tema principal. Sin embargo, es posible que deba restablecer algunas de las configuraciones en el Personalizador.

Modificar el CSS de su tema

Si desea modificar el CSS del tema, puede agregar CSS al final del archivo style.css y guardarlo. Estas líneas CSS sobrescribirán el CSS del tema principal.

Por ejemplo, decimos que queremos cambiar el tamaño de fuente del título del sitio para el amplio tema de 36px valor predeterminado a 42px y también cambiar su color de #444444 defecto a azul ( #0000FF ). Luego, puede agregar las siguientes líneas CSS.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
	color: #0000FF;
	font-size: 42px;
}

Realizar más cambios

Editar otros archivos de tema
También puede realizar cambios estructurales en los archivos de tema ajustando los archivos de plantilla. Digamos que desea algunos cambios o desea agregar un código adicional en el encabezado. Luego, puede copiar el archivo header.php del tema principal, pegarlo dentro del tema secundario y realizar / agregar cambios allí y guardar el archivo. Este archivo header.php se cargará en lugar del archivo header.php del tema principal.

Terminando

Con suerte, ahora puede crear un tema hijo y realizar la personalización que desee. ¿Quieres decir algo? Agréguelo en los comentarios y me pondré en contacto con usted. ¡Disfrutar!