El tema hijo no sobrescribe el archivo style.css del tema padre

10 oct 2014, 17:24:44
Vistas: 49.1K
Votos: 4

Acabo de crear un tema hijo pero cada cambio que hago en el style.css no sobrescribe el style.css del tema padre - otros archivos funcionan. Lo hice así:

  1. Creé una nueva carpeta para el tema hijo en el directorio de temas
  2. Copié el style.css original en ella
  3. Agregué en su encabezado "Template: orion"
  4. Seleccioné y activé mi tema hijo en las opciones de temas de WordPress

Y ahora cuando cambio cosas en el style.css del tema hijo... la página se ve igual después del cambio. ¿Por qué?

0
Todas las respuestas a la pregunta 4
8
13

Cabe destacar que la hoja de estilos del tema hijo se carga después de los estilos del tema padre, por lo que esto no debería ser un problema. Creo que lo que está sucediendo aquí es que estás intentando cambiar estilos que no están en la hoja de estilos del tema padre, sino en otras hojas de estilos personalizadas. Si ese es el caso, entonces tus cambios no funcionarán ya que muy probablemente tu hoja de estilos del tema hijo se está cargando antes que las hojas de estilos personalizadas del tema padre.

También se debe tener en cuenta que @import no debe usarse para importar la hoja de estilos del tema padre. La forma correcta es encolarla usando wp_enqueue_style() enganchado a wp_enqueue_scripts

Aquí está cómo encolar y agregar correctamente la hoja de estilos del tema padre al tema hijo.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Según el Codex, así es como debería verse correctamente tu hoja de estilos

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Tema hijo de Twenty Fourteen
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


/* =La personalización del tema comienza aquí
-------------------------------------------------------------- */

NOTA

He actualizado el codex con esta información en este post

EDITADO

De un comentario abajo

Si el tema padre no usa wp_enqueue_style(), ¿cómo se puede encolar el style.css del tema padre SIN modificar las plantillas del tema padre? Este punto no está claro en el Codex que actualizaste. ¿Podrías aclararlo con un ejemplo?

Quiero comenzar diciendo esto: si eres un autor de temas, por favor, NUNCA agregues hojas de estilos o scripts mediante etiquetas <link> en el encabezado de tu tema. Esta es la forma incorrecta de hacerlo. Encola y registra correctamente estos estilos y scripts mediante el gancho wp_enqueue_scripts como se describe en el Codex.

Para ser honesto, nunca me di cuenta de que todavía hay algunos autores de temas que hacen esto. Creo que la mejor manera probable de resolver este problema es copiar el archivo header.php del tema padre a tu tema hijo y eliminar manualmente los estilos y scripts del encabezado.

Luego puedes proceder a encolar y registrarlos como de costumbre usando wp_enqueue_scripts como en el ejemplo anterior. Solo recuerda, usa get_template_directory_uri() para encolar y registrar scripts y estilos del tema padre, y recuerda, el orden en que cargas los estilos y scripts es importante aquí. Si un script/estilo depende de otro, cárgalo después de ese script/estilo específico.

11 oct 2014 12:17:25
Comentarios

Buena idea actualizar la página del Codex ;-)

birgire birgire
11 oct 2014 14:57:31

Gracias, estoy totalmente de acuerdo. Espero que esto ayude a otros en el futuro a hacer las cosas un poco mejor :-)

Pieter Goosen Pieter Goosen
11 oct 2014 15:00:42

si el tema padre no usa wp_enqueue_style(), ¿cómo se puede encolar el style.css del padre SIN modificar las plantillas del tema padre?

Tara Tara
6 nov 2014 23:09:56

si el tema padre no utiliza wp_enqueue_style(), ¿cómo se puede encolar el style.css del padre sin modificar las plantillas del tema padre? Como sabes, el propósito de crear un tema hijo es precisamente no modificar las plantillas del tema padre.

Tara Tara
6 nov 2014 23:12:06

@Pieter Goosen: Si el tema padre no utiliza wp_enqueue_style(), ¿cómo se puede encolar el style.css del tema padre SIN modificar las plantillas del tema padre? Este punto no está claro en el Codex que actualizaste. ¿Podrías aclararlo con un ejemplo? Gracias.

Tara Tara
6 nov 2014 23:16:10

@Tara Gracias por plantear esto, honestamente nunca pensé que la gente todavía estuviera haciendo esto. Por favor, mira mi edición en mi respuesta.

Pieter Goosen Pieter Goosen
7 nov 2014 06:36:31

@PieterGoosen Estoy usando un tema que tiene diferentes versiones, como oscuro, claro, etc. Agrega una hoja de estilos personalizada para esto. Mi pregunta es cómo anularlo desde el tema hijo.

Imran Subhani Imran Subhani
30 jun 2015 13:58:17

@Imran deberías crear una nueva pregunta con este problema :-)

Pieter Goosen Pieter Goosen
30 jun 2015 14:00:52
Mostrar los 3 comentarios restantes
2

Asegúrate de que tu tema padre no utilice wp_enqueue_style() en su archivo functions.php.

Si lo hace, también puedes encolar la hoja de estilos del hijo desde su functions.php

add_action( 'wp_enqueue_scripts', 'load_my_child_styles', 20 );
function load_my_child_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css', array('twentyfourteen-style'), '1.0.0' );
}

Aquí tienes un ejemplo de cómo debería verse el encabezado en el archivo style.css de tu tema hijo

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Tema hijo de Twenty Fourteen
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

http://codex.wordpress.org/Child_Themes

10 oct 2014 17:58:18
Comentarios

Hola, solo quiero mencionar que la parte de @import no es recomendada, es mejor ponerla en cola (enqueue). Por ejemplo, mira este hilo.

birgire birgire
10 oct 2014 20:38:35

@birgire Gracias por la actualización. Mira este post con un método alternativo http://wordpress.stackexchange.com/a/167903/9884

Brad Dalton Brad Dalton
9 nov 2014 13:39:13
1

Encontré este hilo mientras leía el capítulo de Temas Hijos en el Codex de WordPress.

Construí un tema hijo basado en Simone (que a su vez está basado en _s underscores) y creé un archivo functions.php con el código recomendado:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

Sin embargo, usar este método creó un problema en mi tema hijo. Reporté el problema en GitHub: enlace. La solución fue eliminar la constante PHP_INIT_MAX de la parte de add_action().

Me pregunto si esto es un problema relacionado con Simone o si afecta a otros temas también (en cuyo caso podría ser un problema en la función)...

¡Gracias!

20 oct 2014 16:23:45
Comentarios

Deberías haber preguntado esto como una pregunta. Lamentablemente esta es la primera vez que veo esta publicación tuya. Este problema se planteó ayer y ya está resuelto. Por favor mira esta publicación

Pieter Goosen Pieter Goosen
7 nov 2014 06:15:16
1

Tuve el mismo problema, lo resolví modificando los permisos de la carpeta del tema hijo y los archivos dentro a 775. Puede que no sea la forma más segura, pero funcionó. Déjame saber si esto te funciona :)

15 jun 2017 09:03:51
Comentarios

Vaya. No puedo imaginar el nivel de desesperación que podría haberte llevado a esto. Esto es muy peligroso. Buscaría alguna otra solución, o algún otro tema.

Tedinoz Tedinoz
13 sept 2018 03:25:19