Как я могу изменить версию основного CSS-файла?
Как я могу указать wordpress использовать имя файла, отличное от "styles.css", для моей основной таблицы стилей - например, styles-1.css? Я хотел бы сделать это для целей управления версиями и кэширования.
9 answers
Style.css
требуется для вашей темы WordPress. Вот откуда WordPress получает название темы и метаданные для меню Внешний вид >> Темы. Тем не менее, на самом деле вам вообще не нужно использовать style.css
в своей теме. Я знаю несколько легкодоступных тем, в которых он не используется, и я использую его только в нескольких своих собственных проектах.
В header.php
просто поместите следующий тег вместо обычной ссылки на таблицу стилей:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-1.css" />
Это загрузит вашу альтернативную таблицу стилей как таблица стилей страницы и полностью игнорирует обычную style.css
.
Это может быть неуместно, пожалуйста, дайте мне знать, если я что-то пропустил.
Четвертый аргумент wp_enqueue_style()
- это номер версии таблицы стилей. В вашей теме functions.php
:
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');
Требует, чтобы ваш header.php
выполнял wp_head()
, что , конечно, вы все равно делали. ;)
Это позволяет вам вставлять заголовки с длительным сроком действия в файл CSS и заставлять клиентов загружать новый файл, обновляя номер версии. WP добавит "?ver=N" к URL-адресу вашего CSS-файла.
Поместите это в свою тему functions.php файл:
function my_cool_style_versioner( $style ){
return str_replace( '/style.css', '/style-1.css', $style );
}
add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );
EAMann прав, вам не нужно использовать файл style.css
для всех ваших CSS.
Для управления версиями таблицы стилей и других файлов в вашей теме вы можете добавить это в свой 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';
}
}
А затем, когда вы создадите ссылку на свою таблицу стилей, вы сможете сделать это.
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=<?php fileVersion('style.css'); ?>" />
Таким образом, вам не нужно вручную обновлять номер версии, каждый раз, когда файл обновляется на сервере, версия автоматически изменится на эту временную метку UNIX
Обратите внимание, что вы не должны использовать строки запросов для управления версиями файлов (прокси не кэшируют их).
Лучшим способом было бы изменить имена файлов, например, добавив число, например
- стиль.123. css
- стиль.124. css
Итак, мой подход заключается в следующем:
Перенаправление htaccess Apache
Если вы используете шаблон HTML5 с apache, вы можете найти следующий раздел в . файл 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>
(Обычно вам сначала нужно включить его, раскомментировав строки)
Тема functions.php
Я хотел автоматически использовать версию моей темы для таблицы стилей, поэтому я придумал следующее:
Вы можете добавить следующее в свои темы 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');
Обратите внимание, что я предоставил null
в качестве версии вместо false
, поэтому Wordpress не добавляет свою версию в строка запроса.
Результат
Это выводит таблицу стилей, подобную следующей для версии 1.0.2 вашей темы:
<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' />
После того, как я изменю свою тему на версию 2.0.0 в своем стиле.css, она выведет следующее:
<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' />
Дополнительные примечания
Позаботьтесь о том, чтобы, если вы просто удалите точки версии, как это сделал я, у вас могут возникнуть проблемы с версиями темы, такими как 1.2.23 и 1.22.3, поскольку они оба приводят к версии 1223 без точек.
Лучшим способом было бы учтите это в файле .htaccess. Например, вы могли бы разрешить подчеркивания между цифрами и заменить ими точки.
Это непроверено, но должно сработать:
.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>
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');
Ну, вы могли бы просто использовать style.css
в качестве места, где вы называете нужную версию. Проще говоря
@import url("style-1.css");
Затем, когда вы обновляете версию, просто отредактируйте ее следующим образом:
@import url("style-2.css");
Что касается сохранения версий, рассматривали ли вы возможность использования подрывной деятельности или git? Затем у вас может быть полный послужной список вашей таблицы стилей. Возможно, я не до конца понимаю все причины вашего управления версиями.
Я наткнулся на этот старый вопрос и обнаружил, что в наши дни все ответы кажутся устаревшими.
Я бы просто использовал версию темы, определенную в заголовке файла style.css. Вы можете получить его с помощью 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' );
Таким образом, номер версии будет автоматически добавлен к URL-адресу, например ?ver=#.##
, и URL-адрес изменится, как только версия темы будет увеличена в style.css.
В functions.php
изменить
wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri();
До
wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), $ver );
Измените $ver
на любое значение или time()
для режима разработки.
Я не уверен, изменилось ли это для WP3, поэтому я не совсем уверен, но один из способов - отредактировать соответствующий php-файл напрямую (я не знаю, можно ли это сделать из панели управления/страниц администратора):
wp-folder/wp-content/themes/your-theme/
И открой header.php
. В этом файле найдите следующую строку:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Чтобы добавить "версию" в связанную таблицу стилей (при условии, что вы хотите, чтобы она была чем-то вроде: stylesheetURL.css?version=2
), измените ее на:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />
Хотя это несколько неэлегантно, так что, если есть лучший способ, я бы с удовольствием послушал это я сам =)
Я только что перечитал ваш вопрос...
Чтобы использовать другую таблицу стилей styles-1.css
, вы можете либо просто (выше) строку:
<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />
(В основном удаляя <?php ... ?>
и заменяя его обычным путем.)