web-development-kb-pt.site

Como posso versão do arquivo CSS principal?

Como posso instruir o wordpress a usar um nome de arquivo diferente de 'styles.css' para minha folha de estilo principal - por exemplo, styles-1.css? Eu gostaria de fazer isso para fins de controle de versão e armazenamento em cache.

7
Bobby Jack

Style.css é necessário para o seu tema WordPress. É aí que o WordPress obtém o nome do tema e informações meta para o menu Aparência >> Temas de. Dito isso, você não precisa usar style.css no seu tema. Conheço vários temas prontamente disponíveis que não o usam, e só o uso em vários projetos personalizados.

Em header.php basta colocar a seguinte tag no lugar do link da folha de estilo regular:

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

Isso carregará sua folha de estilo alternativa como a folha de estilo da página e ignorará completamente o style.css comum.

3
EAMann

Isso pode ser inadequado, por favor, deixe-me saber se eu perdi alguma coisa.

O quarto argumento para wp_enqueue_style() é o número da versão da folha de estilo. No functions.php do seu 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');

Requer que o seu header.php faça uma wp_head(), o que é claro você estava fazendo assim mesmo. ;)

Isso permite que você envie cabeçalhos de expiração longos com seu arquivo CSS e force os clientes a baixarem um novo arquivo, atualizando o número da versão. WP irá acrescentar "? Ver = N" ao URL do seu arquivo CSS.

13
Annika Backstrom

Solte isso no arquivo functions.php do seu 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

Note que você não deve usar querystrings para versionamento de arquivos (os proxys não os armazenam em cache).

Uma maneira melhor seria a versão dos nomes de arquivo, adicionando um número como

  • style. 123 . css
  • style. 124 . css

Então, minha abordagem é a seguinte:

O Apache Htaccess redireciona

Se você estiver usando o HTML5 boilerplate com o Apache, você pode encontrar a seguinte seção no arquivo.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>

(Você geralmente tem que ativá-lo primeiro, descomentando as linhas)

Tema functions.php

Eu queria usar automaticamente a versão do meu tema para a folha de estilo, então eu fiz o seguinte:

Você pode adicionar o seguinte aos seus 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');

Note que eu forneci null como uma versão em vez de false, então o Wordpress não anexa sua versão na querystring.

Resultado

Isso gera uma folha de estilo como a seguinte para a versão 1.0.2 do seu 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' />

Depois que eu mudei meu tema para a versão 2.0.0 no meu style.css, ele produziria o seguinte:

<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 Adicionais

Tome cuidado, que se você apenas tira os pontos da versão como eu fiz você pode ter problemas com a versão do tema como 1.2.23 e 1.22.3, pois ambos resultam em uma versão sem ponto de 1223.

Uma maneira melhor seria levar isso em conta no arquivo .htaccess. Por exemplo, você poderia permitir sublinhados entre os números e poderia substituir os pontos com eles.

Isso não foi testado, mas deve 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>

funções.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
Alexander Taubenkorb

EAMann está correto, você não precisa usar o arquivo style.css para todo o seu CSS.

Para versionar a folha de estilo e outros arquivos em seu tema, você pode adicionar isso ao seu arquivo 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';
    }
}

E quando você fizer o link para sua folha de estilos, você pode fazer isso.

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

Dessa forma, você não precisa atualizar manualmente o número da versão, sempre que o arquivo for atualizado no servidor, a versão será automaticamente alterada para o timestamp do UNIX.

3
Paul Sheldrake

Bem, você poderia simplesmente usar style.css como o lugar onde você chama a versão que você quer. Basta colocar

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

Então, quando você atualizar uma versão, basta editá-la como:

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

Quanto às versões de salvamento, você considerou usar um Subversion , ou git ? Então você pode ter um histórico completo de sua folha de estilo. É possível que eu não esteja entendendo completamente as razões completas para o seu controle de versão.

2
artlung

Eu me deparei com essa velha pergunta e encontrei todas as respostas para parecer desatualizado hoje em dia.

Eu simplesmente usaria a versão do tema conforme definido na parte do cabeçalho do arquivo style.css. Você pode obtê-lo com 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' );

Assim, o número da versão será automaticamente anexado ao url como ?ver=#.## e o URL será alterado assim que a versão do tema for incrementada em style.css.

2
JHoffmann

Em functions.php change

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

para

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

mude $ver para qualquer valor, ou time() para o modo de desenvolvimento.

1
Rashed Hasan

Eu não tenho certeza se isso mudou para o WP3, então não tenho certeza, mas uma maneira é editar o arquivo php relevante diretamente (não sei se isso pode ser feito dentro das páginas do Dashboard/Admin) :

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

E abra header.php. Neste arquivo encontre esta linha:

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

Para adicionar uma 'versão' à folha de estilo vinculada (supondo que você queira que seja algo como: stylesheetURL.css?version=2) altere-a para:

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

Isso é meio deselegante, então, se há uma maneira melhor, eu adoraria ouvir sozinho =)


Para usar uma folha de estilo diferente styles-1.css, você pode apenas a linha (acima) para:

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

(Basicamente removendo o <?php ... ?> e substituindo-o por um caminho normal).

0
David Thomas