it-swarm.xyz

Как я могу сделать версию основного файла CSS?

Как я могу указать WordPress использовать имя файла, отличное от 'styles.css', для моей основной таблицы стилей - например, styles-1.css? Я хотел бы сделать это в целях управления версиями и кэширования.

7
Bobby Jack

Style.css необходим для вашей темы WordPress. Вот откуда WordPress получает название темы и мета-информацию для меню "Внешний вид"> "Темы". Тем не менее, вам вообще не нужно использовать style.css в вашей теме. Я знаю о нескольких легко доступных темах, которые не используют его, и я использую его только в нескольких моих собственных проектах.

В header.php просто поместите следующий тег вместо обычной ссылки таблицы стилей:

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

Это загрузит вашу альтернативную таблицу стилей как таблицу стилей страницы и полностью проигнорирует обычный style.css.

3
EAMann

Это может быть неуместно, пожалуйста, дайте мне знать, если я что-то пропустил.

Четвертый аргумент 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.

13
Annika Backstrom

Перетащите это в файл 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' );
3
John P Bloch

Обратите внимание, что вы не должны использовать строки запросов для управления версиями файла (прокси не кэшируют их).

Лучшим способом было бы создать версию имен файлов, например, добавив число, подобное

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

Итак, мой подход заключается в следующем:

Apache htaccess перенаправляет

Если вы используете шаблон 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 в моем style.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');
3
Alexander Taubenkorb

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.

3
Paul Sheldrake

Ну, вы можете просто использовать style.css как место, где вы называете нужную версию. Проще говоря

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

Затем, когда вы обновляете версию, просто измените ее следующим образом:

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

Что касается сохранения версий, вы рассматривали возможность использования Subversion или git ? Тогда вы можете получить полный список ваших стилей. Возможно, я не до конца понимаю все причины вашего управления версиями.

2
artlung

Я наткнулся на этот старый вопрос и нашел, что все ответы кажутся устаревшими в наши дни.

Я бы просто использовал версию темы, как определено в части заголовка файла 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.

2
JHoffmann

В functions.php изменить

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

в

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

измените $ver на любое значение или time() для режима разработки.

1
Rashed Hasan

Я не уверен, изменилось ли это для WP3, поэтому я не совсем уверен, но один из способов - это редактировать соответствующий php-файл напрямую (я не знаю, можно ли это сделать на страницах Dashboard/Admin) :

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 ... ?> и заменяем его обычным путем.)

0
David Thomas