¿Cómo crear un tema hijo en WordPress?

Mar

17

¿Cómo crear un tema hijo en WordPress?

Un tema hijo hereda la funcionalidad y estilos de otro tema cualquiera el cual será llamado tema padre.

Uso frecuente:

  • En caso de requerir una actualización del tema actual, se perderán todas las modificaciones que se hubieren hecho sobre este. Es aquí donde se utiliza un tema hijo, sobre el cual se pueden realizar todas las personalizaciones deseadas y sin perderlas.
  • En un tema hijo se tiene menos archivos, menos código y mucho espacio para la creatividad, es esta la razón por la que el desarrollo se hace más ágil.
  • Necesariamente el uso de un tema hijo incrementa el conocimiento sobre desarrollo de temas wordpress desde cero, y tal vez sea la pauta para crear uno propio; rápido y sencillo.

Creación de un tema hijo:

Groso modo basta con crear un directorio y dos archivos:directorio con temas

  • Un directorio cuyo nombre finalice con la cadena ‘-child’
  • Un archivo ‘style.css’
  • Un archivo ‘functions.php’

Detalles:

Directorio nombretema-child:

Basta con crear este directorio dentro de la carpeta wp-content/themes/ y preferiblemente iniciar su nombre con el mismo del tema que se necesite como padre; temahoteles-child

Archivo style.css

Se coloca dentro del directorio recien creado y se escribe en el su descripción:

/*
Theme Name:   temahoteles
Theme URI:    http://hoteles.com/temahoteles-child/
Description:  Hoteles Child Theme
Author:       Nombre Apellido
Author URI:   http://ejemplo.com
Template:     temahoteles
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar
Text Domain:  temahoteles-child
*/

Según la información del tema, se diligencia el fragmento de arriba, donde:

Template: corresponde al nombre del directorio del tema que se desea como padre.

Este archivo ya esta listo, sin embargo si se necesita un estilo personalizado, por ejemplo cambiar el tamaño de fuente del body, basta con agregar la linea de código.

body { font-size:14px }

Archivo functions.php

Este archivo es opcional, se coloca dentro del directorio recién creado y allí se establece el orden de carga de los archivos css. Por su puesto se desea que los estilos del tema hijo se cargen de último para que sean estos los que queden visualizandose.

<?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' );
?>
Datos adicionales acerca del functions.php

Durante la inicialización de wordpress, este archivo será cargado automáticamente y será útil para:

  • Establecer el orden de carga de los archivos css.
  • Establecer configuraciones del tema relacionadas con: Barras Laterales, Menús de Navegación, Imágenes en miniatura de los post, Formato de los post, Encabezados de página personalizados, Fondos personalizados.
  • Definir funciones que serán usadas en las plantillas del tema.

Lo anterior está tomado del Códex de WordPress, donde hay otros ejemplos: https://codex.wordpress.org/Child_Themes https://codex.wordpress.org/Theme_Development#Theme_Stylesheet

Add Comment

Your email address will not be published. Required fields are marked *