it-swarm-es.com

¿Cómo puedo versionar el archivo CSS principal?

¿Cómo puedo indicar a WordPress que use un nombre de archivo distinto de 'styles.css' para mi hoja de estilo principal, por ejemplo, styles-1.css? Me gustaría hacer esto para propósitos de versionado y almacenamiento en caché.

7
Bobby Jack

Se requiere Style.css para su tema de WordPress. Ahí es donde WordPress obtiene el nombre del tema y la meta información para el menú Apariencia >> Temas de. Dicho esto, en realidad no tienes que usar style.css en tu tema. Sé de varios temas fácilmente disponibles que no lo usan, y solo lo uso en algunos de mis diseños personalizados.

En header.php simplemente coloque la siguiente etiqueta en lugar del enlace de la hoja de estilo regular:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-1.css" />

Esto cargará su hoja de estilo alternativa como la hoja de estilo de la página e ignorará completamente el style.css regular.

3
EAMann

Esto puede ser inapropiado, por favor avíseme si me perdí algo.

El cuarto argumento de wp_enqueue_style() es el número de versión de la hoja de estilo. En el functions.php de tu tema:

function my_theme_styles() {
    // replace "10" with your version number; increment as you Push changes
    wp_enqueue_style('my-theme-style', get_bloginfo('template_directory') . '/style.css', false, 10);
}
add_action('wp_print_styles', 'my_theme_styles');

Requiere que su header.php hace una wp_head(), que por supuesto que estaba haciendo de todos modos. ;)

Esto le permite empujar encabezados largos de caducidad con su archivo CSS, y obligar a los clientes a descargar un nuevo archivo actualizando el número de versión. WP agregará "? Ver = N" a la URL de tu archivo CSS.

13
Annika Backstrom

Coloca esto en el archivo functions.php de tu tema:

function my_cool_style_versioner( $style ){
  return str_replace( '/style.css', '/style-1.css', $style );
}

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );
3
John P Bloch

Tenga en cuenta que usted no debe usar cadenas de consulta para la versión del archivo (los proxys no los almacenan en caché).

Una mejor manera sería versionar los nombres de archivo agregando un número como

  • estilo. 123 . css
  • estilo. 124 . css

Así que mi enfoque es el siguiente:

Apache htaccess redirecciones

Si está utilizando plantilla de HTML5 con Apache, puede encontrar la siguiente sección enARCHIVO .HTACCESS:

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------

# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.

# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

(Por lo general, primero tiene que habilitarlo, sin comentar las líneas)

Funciones de tema.php

Quería usar automáticamente la versión de mi tema para la hoja de estilo, por lo que se me ocurrió lo siguiente:

Puede agregar lo siguiente a sus temas functions.php :

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');

Tenga en cuenta que proporcioné null como una versión en lugar de false, por lo que Wordpress no agrega su versión en la cadena de consulta.

Resultado

Esto genera una hoja de estilo como la siguiente para la versión 1.0.2 de su tema:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.102.css' type='text/css' media='all' />

Después de cambiar mi tema a la versión 2.0.0 en mi style.css, se mostraría lo siguiente:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.200.css' type='text/css' media='all' />

Notas adicionales

Tenga cuidado, ya que si solo quita los puntos de la versión como lo hice yo, es posible que tenga problemas con la versión del tema como 1.2.23 y 1.22.3, ya que ambos dan como resultado una versión sin punto de 1223.

Una mejor manera sería tenerlo en cuenta en el archivo .htaccess. Por ejemplo, puede permitir guiones bajos entre los números y reemplazar los puntos con ellos.

Esto no está probado, pero debería funcionar:

.htaccess

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.([_\d]+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

funciones.php

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','_',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');
3

EAMann tiene razón, no tiene que usar el archivo style.css para todo su CSS.

Para la versión de la hoja de estilo y otros archivos en su tema, puede agregar esto a su archivo functions.php

function fileVersion($filename)
{
    // get the absolute path to the file
    $pathToFile = TEMPLATEPATH.'/'.$filename;
    //check if the file exists
    if (file_exists($pathToFile)) 
    {
        // return the time the file was last modified
        echo filemtime($pathToFile);
    }
    else
    {
        // let them know the file wasn't found
        echo 'FileNotFound';
    }
}

Y luego, cuando haces el enlace a tu hoja de estilo, puedes hacer esto.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=<?php fileVersion('style.css'); ?>" />

De esta manera, no tiene que actualizar manualmente el número de versión, cada vez que se actualice el archivo en el servidor, la versión cambiará automáticamente a esa marca de tiempo de UNIX

3
Paul Sheldrake

Bueno, simplemente puedes usar style.css como el lugar donde llamas a la versión que deseas. Simplemente pon

@import url("style-1.css");

Luego, cuando actualice una versión, simplemente edítela para que sea:

@import url("style-2.css");

En cuanto a guardar versiones, ¿ha considerado usar un Subversion , o git ? Entonces puedes tener un historial completo de tu hoja de estilo. Es posible que no entienda completamente las razones de su versión.

2
artlung

Encontré esta vieja pregunta y encontré que todas las respuestas parecían obsoletas en la actualidad.

Simplemente usaría la versión del tema como se define en la parte del encabezado del archivo style.css. Puedes conseguirlo con wp_get_theme()->get( 'Version' )

function my_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/style.css', false, wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

De esta manera, el número de versión se agregará automáticamente a la url como ?ver=#.## y la url cambiará tan pronto como la versión del tema se incremente en style.css.

2
JHoffmann

En functions.php cambio

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri();

a

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), $ver );

cambie $ver a cualquier valor, o time() para el modo de desarrollo.

1
Rashed Hasan

No estoy seguro de si esto ha cambiado para WP3, por lo que no estoy del todo seguro, pero una forma es editar el archivo php relevante directamente (no sé si se puede hacer desde las páginas de Dashboard/Admin) :

wp-folder/wp-content/themes/your-theme/

Y abre header.php. En este archivo encuentra esta línea:

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

Para agregar una 'versión' a la hoja de estilo vinculada (suponiendo que desea que sea algo como: stylesheetURL.css?version=2), cámbiela a:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />

Sin embargo, esto es poco elegante, así que si hay una manera mejor de hacerlo, me encantaría escucharlo =)


Para usar un styles-1.css diferente de la hoja de estilos, puede simplemente la línea (arriba) para:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />

(Básicamente, elimine el <?php ... ?> y sustitúyalo por una ruta regular).

0
David Thomas