Cómo forzar la actualización del caché para el style.css de un tema hijo

Question

Cómo forzar la actualización del caché para el style.css de un tema hijo

2 ene 2016, 01:35:51

Vistas: 14.5K

Votos: 13

Mi pregunta puede tener varios aspectos, pero en esencia es simple: ¿cómo asegurarte de que los cambios en el style.css de un tema hijo se propaguen correctamente a través de los cachés?

He leído en varios lugares que WordPress debería/colocaría la versión de WP en nnn cuando se solicita el recurso como http://host/wp-content/themes/theme-child/style.css?ver=nnn. En mi instalación en http://frightanic.com/ veo que se usa la versión del tema padre en su lugar. Tengo W3 Total Cache y una CDN configurados, pero incluso si están desactivados, se solicita un recurso como wp-content/themes/frightanic/style.css?ver=3.0.7. 3.0.7 es la versión del tema padre Decode.

Pero sea como sea, si actualizo el CSS de mi tema hijo sin actualizar WordPress o el tema padre al mismo tiempo, ¿cómo puedo forzar la actualización del caché?

Marcel Stör

361

tema hijo caché

Comentarios

http://wordpress.stackexchange.com/a/147215/8105

montrealist

2 ene 2016 01:46:42

Todas las respuestas a la pregunta

Comentarios

¡Genial! Si respondiste tu propia pregunta, está bien aceptar tu propia respuesta como la solución.

phatskat

4 ene 2016 17:21:52

Lo sé, pero tienes que esperar 2 días hasta que esa función esté disponible.

Marcel Stör

4 ene 2016 18:25:11

El manual actual de temas de WP ahora contiene una solución adecuada: https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

Marcel Stör

26 ene 2017 00:02:58

@MarcelStör ¿Puedes describir exactamente en qué parte de la página que enlazaste se menciona 'cache busting', porque no lo he encontrado?

Eric Hepperle - CodeSlayer2010

27 ago 2024 19:51:17

Esto funciona bien cuando lo añades directamente en tu archivo header.php y actualizas la caché cada vez que modificas tu archivo CSS:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" />

Muestra algo como: style.css?324932684 donde el número representa la hora en que el archivo fue modificado

jcdarocha

11

30 sept 2016 20:23:04

Comentarios

Los estilos deben cargarse usando wp_enqueue_style en lugar de codificarlos directamente.

bravokeyl

30 sept 2016 20:29:52

Esto también puede funcionar. Usando la función rand de PHP:

function 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?'.rand(),
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Joshua Coolman

1

22 dic 2016 14:08:42

Comentarios

No es una buena idea ya que quieres que esos recursos sean cacheados por el navegador mientras no cambien.

Marcel Stör

22 dic 2016 17:44:27

WordPress ahora cubre esto con una función.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // esto solo funciona si tienes Version en el encabezado del estilo
    );
}

Utiliza el Version: 1.0.0 en tu hoja de estilos actual Encolar hoja de estilos con revisión

user1676224

196

24 ago 2020 13:12:42

Marcel Stör 361 · Accepted Answer · 2016-01-02T16:51:50Z

El comentario de @dalbaeb eventualmente llevó a discusiones interesantes y a una solución viable. ¡Muchas gracias!

Creo que la razón por la que mi CSS del tema hijo se cargaba usando 'ver=<parent-theme-version> fue porque seguí el WP Codex sobre temas hijos al pie de la letra. Mi functions.php contenía esto:

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

El código que terminé usando fue mencionado primero en https://wordpress.stackexchange.com/a/182023/30783 pero numerosos sitios en Internet lo copiaron y pegaron (sin dar el crédito correspondiente).

// Asegurando que tu tema hijo tenga una versión independiente y pueda romper cachés: https://wordpress.stackexchange.com/a/182023/30783
// Filtra get_stylesheet_uri() para devolver la hoja de estilos del tema padre
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');
// Encola los scripts y estilos de este tema (después del tema padre)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

function use_parent_theme_stylesheet()
{
    // Usa la hoja de estilos del tema padre
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles()
{
    $themeVersion = wp_get_theme()->get('Version');

    // Encola nuestro style.css con nuestra propia versión
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

Actualización 2017-01-26

El manual actual de temas de WP ahora contiene una solución adecuada: https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet