• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Dani Sánchez - Gestionatuweb

Desarrollador web freelance - Dani Sánchez Gestionatuweb

  • ¿Eres agencia?
  • WordPress
    • Mantenimiento
    • Desarrollo
    • Soporte técnico
  • Cursos
  • Porfolio
  • Blog
  • Contacto
  • Solicita Presupuesto
Estás aquí: Inicio / Tutoriales / Crea un tema hijo (child theme) a partir de un tema principal en WordPress

Tutoriales, Wordpress / 13 de septiembre de 2017

Crea un tema hijo (child theme) a partir de un tema principal en WordPress

Siempre que utilizamos uno de los miles de temas que tenemos a nuestra disposición en el mundo WordPress, necesitamos darle nuestro toque personal o realizar modificaciones que nos demande nuestro cliente. Si solamente necesitamos cambiar algún que otro color, podemos hacerlo cómodamente desde el editor CSS adicional que ya se incluye en las últimas versiones de WordPress:

Pero si necesitamos realizar cambios estructurales en el HTML de la cabecera, el pié de página o añadir / modificar funciones, necesitaremos modificar los archivos internos del tema (header.php, footer.php, functions.php…) con el inconveniente de que en el momento que salga una nueva versión del tema y actualicemos, perderemos todos los cambios que hayamos realizado, ya que al actualizar un tema se sobreescriben todos los archivos de este.

Para ello surgió la técnica de crear temas hijos o child themes, que consiste en un tema (o sub-tema), que hereda todas las propiedades del tema principal (tema padre), con la particularidad de que si realizas un cambio en el tema hijo, este permanecerá aunque se actualice el tema padre, con lo que podemos aprovechar las mejoras y optimizaciones del tema padre sin perder los cambios que hayamos realizado para nuestro proyecto. Y ahora viene lo mejor, lo fácil que es crear un tema hijo.

¿Cómo se crea un tema hijo o child theme?

Tan sencillo como crear una nueva carpeta dentro del directorio de themes de WordPress (wp-admin/content/themes), usando el nombre que deseemos darle a nuestro nuevo tema hijo. Lo mejor es crearlo en minúsculas, de una sola palabra y sin caracteres especiales.

Ahora dentro de esta carpeta crearemos dos archivos muy importantes:

  • style.css
  • functions.php

Configurar style.css

Vamos a añadir un pequeño código comentado para configurar el tema hijo, con datos como el nombre de la plantilla, el autor, descripción, etc:

<?php
/*
Theme Name: Boutique (nombre para la plantilla)
Theme URI: https://www.url_de_nuestra_plantilla.com
Author: Nuestro nombre
Author URI: https://nuestro_dominio.com
Description: Descripción de la plantilla
Version: 1.0
Template: storefront
*/
?>

La mayoría de las etiquetas son opcionales, pero lo más importante es indicar el Template, que el directorio donde está el tema padre, en este caso «storefront»

Configurar functions.php

Ahora vamos a añadir una función al archivo functions.php para cargar los estilos del tema padre:

<?php
function estilos_padre(){
    wp_enqueue_style('estilos-padre', get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts', 'estilos_padre');

Con esta función le decimos a WordPress, dónde se encuentran los estilos principales para aplicarlos al tema hijo, de lo contrario, nuestro tema hijo no tendría ninguń estilo CSS configurado.

Con esto, ya podemos ir al menú Apariencia – Temas de WordPress, y debería aparecer el nuevo tema hijo para seleccionarlo y activarlo:

Si queremos que aparezca una captura del tema, podemos crear un archivo screenshot.png y ponerlo en la carpeta del tema hijo.

A partir de aquí podemos modificar las clases que deseemos, si por ejemplo queremos cambiar el color de fondo de la cabecera, solo tenemos que llamar a su clase y cambiar el valor del background:

.site-header{
   background:#ff3300;
}

Modificar archivos internos (header.php, footer.php, content.php…)

Para hacer cambios en la estructura de las cabeceras, pie de página, contenido… simplemente tenemos que copiar los archivos del tema padre y pegarlos en el tema hijo. Todas las modificaciones que hagamos en el tema hijo prevalecerán aunque se actualice el tema padre.

Muy importante es respectar la jerarquía de directorios del tema padre. Si por ejemplo queremos modificar un archivo que se encuentra en:

tema_padre/assets/lib/plantilla.php

Tenemos que crear esta misma jerarquía en el tema hijo:

tema_hijo/assets/lib/plantilla.php

Modificaciones en el archivo de funciones (functions.php)

En este caso no es necesario copiar todo el archivo functions.php del tema padre. Basta con añadir las funciones que necesitemos en el nuevo tema hijo.

Si necesitamos modificar una función del tema padre, podemos copiarla y modificarla en el tema hijo, pues WordPress siempre leerá primero las funciones del tema hijo y continuará cargando las del tema padre.

Archivado en:Tutoriales, Wordpress Etiquetado con:desarrollo web, publicaciones, tutoriales, wordpress

Interacciones con los lectores

Este artículo puede contener código que podría no funcionar correctamente en tu versión de WordPress o causar incompatibilidad con tu plantilla o plugins. Úsalo bajo tu responsabilidad y haz siempre copia de tus archivos antes de modificarlos.

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  Acepto la política de privacidad

Barra lateral primaria

Daniel Sánchez

@danisanchez82
t.me/gestionatuweb

Buscar en la web

Entradas recientes

  • Adiós WhatsApp…
  • Configuración de WP Fastest Cache
  • Cómo añadir un enlace personalizado en el menú admin de WordPress
  • Hooks de Genesis Framework (init, header y framework) – Parte 1
  • Añade el soporte de Genesis Framework para tus Custom Post

Categorías

  • Actualidad
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • Wordpress

Comentarios recientes

  • Carlos en Crear un WebView con Android Studio para cargar una web en una APP Android
  • william maffiold en Instalar LAMP y phpMyAdmin en MX Linux 19
  • dani en Divi, diseñar una plantilla predeterminada para cargar Custom Posts
  • dani en Subir un WordPress terminado de tu ordenador (local) al servidor final (hosting)
  • Carlos en Divi, diseñar una plantilla predeterminada para cargar Custom Posts

Hosting de confianza

Footer

Buscar en la web

  • Inicio
  • Agencias
  • Mantenimiento WordPress
  • Desarrollo WordPress
  • Soporte técnico WordPress
  • Cursos
  • Portfolio
  • Blog
  • Contacto
  • Política de privacidad

Mis redes

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

© 2016–2021 Gestionatuweb · Programado con Genesis Framework · Iniciar sesión

Utilizo cookies para obtener datos estadísticos sobre el uso de mi sitio web y personalizar la publicidad (no intrusiva) del blog según tus intereses. En ningún caso estas cookies te identifican como persona, solo a tu dispositivo en la Red. Aceptando el uso de cookies me ayudarás a mantenener el blog gracias a la publicidad y podré mejorar la experiencia de uso gracias a la analítica web. Puedes navegar por mi sitio web sin que se instale ninguna de estas cookies, aunque este mensaje permanecerá visible en todo momento.AceptoPolítica de privacidad