Contexto
Construí un tema infantil basado en Twenty Thirteen que funciona bastante bien. Después de actualizar el tema principal a la versión 1.3, noté un comportamiento extraño con el estilo que fue causado por un tema primario en caché style.css
.
Aquí está el contenido del tema de mi hijo style.css
(omitiendo encabezados)
/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');
Entonces, el tema secundario style.css
no hace más que importar el tema principal style.css
.
También tengo otro archivo css con las personalizaciones de mi tema hijo que pongo en cola como en functions.php
:
// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');
// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
null, $themeVersion);
Esto me da una URL de CSS muy bonita como esta: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1
eso asegura que la hoja de estilo se vuelva a cargar cuando se actualice el tema secundario.
Ahora el problema
La declaración @import url('../twentythirteen/style.css');
es completamente independiente de la versión del tema principal subyacente. De hecho, el tema principal se puede actualizar sin actualizar el tema secundario, pero los navegadores seguirán utilizando versiones en caché del anterior ../twentythirteen/style.css
.
Código relevante en Twenty Thirteen que pone en cola el style.css
:
function twentythirteen_scripts_styles() {
// ...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );
// Loads our main stylesheet.
wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
// Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css
// Loads the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Se me ocurren algunas formas de resolver este problema, pero ninguna es realmente satisfactoria:
Actualizar mi tema secundario cada vez que se actualiza el tema principal para cambiar una cadena de versión en
style.css
(p@import url('../twentythirteen/style.css?ver=NEW_VERSION');
. Ej .). Esto crea un vínculo innecesario y molesto entre la versión del tema principal y el secundario.En mi hijo
functions.php
, 1)wp_dequeue_style
el tema hijo incluidostyle.css
y 2)wp_enqueue_style
el tema padrestyle.css
directamente con la cadena de versión. Esto desordena el orden de css en cola en el tema principal.Utilice el
style_loader_tag
filtro para modificar la<link>
etiqueta css generadastyle.css
y modifique la ruta para que apunte directamente al tema principalstyle.css
CON una cadena de versión. Parece bastante oscuro para una necesidad tan común (almacenamiento en caché).Volcar el tema principal en el tema de
style.css
mi hijostyle.css
. Lo mismo que (1) realmente, pero un poco más rápido.Hacer que el tema de mi hijo
style.css
sea un enlace simbólico con el tema principalstyle.css
. Esto parece bastante hack ...
¿Me he perdido algo? ¿Alguna sugerencia?
editar
Añadido genericicons.css
y ie.css
las hojas de estilo en el tema de los padres para aclarar por qué no puedo cambiar la @import
declaración CSS para wp_enqueue_style
en mi tema de niño. Actualmente, con una @import
declaración en el tema de mi hijo style.css
, tengo este orden en las páginas generadas:
- twentythirteen / genericons / genericons.css -> en cola por tema principal
- child-theme / style.css -> en cola por tema padre, @importes twentythirteen / style.css
- twentythirteen / css / ie.css -> en cola por tema principal
- child-theme / css / main.css -> en cola por tema hijo
Si pongo en cola a los padres style.css
como una dependencia de main.css
, esto se convertirá en:
- twentythirteen / genericons / genericons.css -> en cola por tema principal
- child-theme / style.css -> vacío, en cola por tema principal
- twentythirteen / css / ie.css -> en cola por tema principal
- twentythirteen / style.css -> en cola por tema hijo como dependencia de main.css
- child-theme / css / main.css -> en cola por tema hijo
Tenga en cuenta que ie.css ahora se incluye antes del tema principal style.css
. No quiero cambiar el orden en cola de los archivos css del tema principal porque no puedo presumir que esto no causará problemas con la prioridad de las reglas css.
style.css
no se incluiría en el mismo lugar que ahora. El padre incluye otros archivos CSS que deben interponerse entre su style.css
CSS y el tema de mi hijo.
@import
, configure la hoja de estilo del tema principal como una dependencia de su propia hoja de estilo .