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.
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.
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.
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' );
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
Então, minha abordagem é a seguinte:
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)
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.
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' />
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:
# ------------------------------------------------------------------------------
# | Filename-based cache busting |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.([_\d]+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>
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');
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.
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.
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.
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.
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).