Присвоение номера версии основной таблице стилей дочерней темы

12

В header.php мне нравится присваивать номер версии таблице стилей, чтобы браузер был вынужден обновить ее. Но при работе с дочерней темой ее таблица стилей явно не вызывается, скорее WordPress автоматически ищет ее. Так как или где приписать номер версии к таблице стилей дочерней темы?

drake035
источник

Ответы:

5

Вы можете обновить версию в самой таблице стилей дочерних тем ...

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.1.2 <---- Update here
*/
Мэтт Роял
источник
Вы уверены, что это обязательно очистит любую кэшированную таблицу стилей и заставит загружать новую версию так же, как при добавлении номера версии в header.php?
drake035
Да, если вы посмотрите на исходный код страницы, то увидите, что строка запроса обновляется при изменении номера версии в ваших дочерних темах style.css
Matt Royal
7
Это все еще работает? Для меня изменение версии в style.css дочерней темы не имеет значения - строка запроса style.css в заголовке по-прежнему отображается как номер версии Wordpress (в данном случае 4.1.1).
Тим Мэлоун
2
Это зависит от того, как настроена ваша тема. Посмотрите вниз на страницу ответа @kraftner. Если ваша тема отменяет регистрацию, а затем повторно регистрирует файл, то это не сработает.
Мэтт Роял
4
Взял другой взгляд, и версия по умолчанию теперь основана на версии WP. Так что этот ответ больше не действителен! ( github.com/WordPress/WordPress/blob/… )
Мэтт Роял
14

Я думаю, что лучший способ сделать это - оставить таблицу стилей дочерней темы (style.css) пустой только с необходимыми комментариями (такими как название темы, описание и т. Д., Чтобы WordPress распознал вашу тему), а затем сделать другой файл CSS в вашем тема-имя-папки / CSS / main.css

После этого в файле function.php вы можете иметь новую «версию» каждый раз, когда вы меняете свой файл:

function my_scripts_and_styles(){

$cache_buster = date("YmdHi", filemtime( get_stylesheet_directory() . '/css/main.css'));
wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/css/main.css', array(), $cache_buster, 'all' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles', 1);

Логика:

Каждый раз, когда вы сохраняете файл, время его изменения изменяется. Новое время передается в функцию date для преобразования времени (filemtime возвращает целое число, представляющее время) в формат даты, чтобы сделать его строкой в ​​желаемом формате. В нашем примере время форматируется с точностью до минут. Вы можете изменить его, чтобы отслеживать даже секунду, т. "YmdHis"Е. После этого новое время изменения файла передается в качестве новой версии wp_enqueue_style.

Ссылка :

http://www.php.net/filemtime

http://php.net/manual/en/function.date.php

Laxmana
источник
2
Я предпочитаю использовать версию темы в качестве кеша. Если вы используете, $cache_buster = wp_get_theme()->get('Version')вы получите версию, указанную в блоке комментариев в style.css. См. Codex.wordpress.org/Function_Reference/wp_get_theme для справки.
Марсель Стёр
Ницца не знала о существовании этой функции. Но опять же, вы должны вручную менять версию каждый раз, когда вносите изменения, и это может быть расстроено, особенно при разработке (учитывая проблемы с кешем). Также вы обязаны кодировать в style.css, даже если вы импортируете туда свой файл main.css, что, кстати, я не считаю хорошим подходом. Кроме того, если вы кодируете в SASS, это может быть снова трудно поддерживать. Наконец, я думаю, что быстрее проверить время файла, чем открыть файл, прочитать первые комментарии и найти версию (я не уверен, wp_get_theme()->get('Version')что так работает).
Лаксмана
Правда, но с положительной стороны вы получаете лучший контроль над своими стилями. Вы можете обновлять CSS постепенно, и когда вы будете удовлетворены результатом, вы можете, наконец, поднять версию и «выпустить» ее.
Марсель Стёр
1
«Отпусти» его пользователям, которые возвращаются на сайт. новые пользователи видят свежие все, что есть в файле.
Райанрайн
10

Вам нужно отменить регистрацию основного стиля по дескриптору, а затем заново зарегистрироваться по номеру версии. В этом случае ручка есть style-css.

Вы можете определить дескриптор, который вам нужно использовать, посмотрев ссылку на визуализированную таблицу стилей:

<link rel='stylesheet' id='style-css-css'  href='http://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' type='text/css' media='all' />

Здесь идентификатор style-css-cssозначает, что наша ручкаstyle-css

Поместите это в function.php вашей дочерней темы:

function wpse_145141_change_style_version(){
    // First de-register the main stylesheet
    wp_deregister_style( 'style-css' );
    // Then add it again, using your custom version number
    wp_register_style( 'style-css', get_stylesheet_uri(), array(), "VERSION_NUMBER" );
    //finally enqueue it again
    wp_enqueue_style( 'style-css');
}

add_action( 'wp_enqueue_scripts', 'wpse_145141_change_style_version');
kraftner
источник
1

Текущий верхний ответ зависит от темы, поскольку он требует, чтобы разработчик темы преобразовал номер версии этой дочерней темы в переменную, а затем добавил его в дочерний файл style.css при его постановке в очередь. Я видел это на некоторых темах, но не на многих. Следующее работает для любой темы, которая регистрирует дочерние стили в functions.php - не будет работать со старым правилом @import, которого я больше не видел.

В functions.php дочерней темы у вас должно быть что-то похожее на это:

// enqueue the child theme stylesheet

function wp_schools_enqueue_scripts() {
  wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
  wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

Если вы измените его на следующее, он будет добавлять временную метку в качестве номера версии при каждом сохранении файла, что позволяет каждому изменению таблицы стилей проходить через локальный кэш:

 // enqueue the child theme stylesheet

 function wp_schools_enqueue_scripts() {
   wp_register_style( 
     'childstyle', 
     get_stylesheet_directory_uri() . '/style.css', 
     array(), 
     filemtime( get_stylesheet_directory() . '/style.css' ) 
   );
   wp_enqueue_style( 'childstyle' );
 }
 add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

Надеюсь, это кому-нибудь поможет. Я использую это на каждом сайте, которым я активно управляю.

Джефф Травилла
источник
0

Я считаю, что если вы используете редактор тем Wordpress для редактирования таблицы стилей вашей дочерней темы, он автоматически добавляет новый номер версии каждый раз, когда вы сохраняете файл.

selfagency
источник
1
Правильно, но я не использую редактор WP для работы над моими таблицами стилей ..
drake035
0

Вместо того, чтобы использовать style.css по умолчанию, я обычно использую wp_enqueue_style в файле functions.php дочерней темы или в другом включенном php-файле. Таким образом, у вас все еще будет style.css в дочерней теме со всеми деталями дочерней темы, но затем вы можете иметь отдельный файл css в дочерней теме для фактического стиля дочерней темы (я обычно помещаю это в assets / css каталог в рамках дочерней темы). Это также позволит вам установить версию CSS с 4-м параметром. Например:

function theme_name_child_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/assets/css/child-style.css', array(), '1.0.0', 'screen');
}

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts' );

Вы можете добавить приоритет к действию, если оно не загружается в правильном порядке или работает с параметром зависимости в wp_enqueue_style выше:

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts', 20 );
Bjorn
источник