Как добавить версию style.css в WordPress


12

Как добавить версию style.cssв WordPress, как показано ниже, я могу сделать в Joomla.

<link rel="stylesheet" href="/templates/example/css/style.css?v=1.2">

Я знаю, что style.cssбудет загружаться динамически. Пожалуйста, помогите мне, как это сделать.


Вот плагин wordpress.org/plugins/wp-css-version-history , который автоматически добавит номер версии в таблицу стилей. Создается новая таблица стилей, которая загружается последней. Нет необходимости очищать кеш, чтобы увидеть изменения. Использует Wordpress, встроенный в редактор CSS и блокировку пользовательских файлов для совместной работы.
Брайан Хольцбергер

Ответы:


16

Номер версии является параметром wp_enqueue_style().

В соответствии с Кодексом, здесь все параметры, которые wp_enqueue_styleпринимает.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

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

function wpa_90820() {
    wp_enqueue_style('my-styles', get_stylesheet_directory_uri() .'/my-styles.css', array(), '1.0' );       
}

add_action('wp_enqueue_scripts', 'wpa_90820');

когда я делаю это, старый style.css также загружается. Как это убрать?
Торетто

@VinodDalvi, что вы подразумеваете под ручкой. я не знаю об этом, я новичок в WordPress, пожалуйста, мне.
Торетто

1
@Toretto Либо ваша тема жестко программирует ее в header.php, либо ваша тема также ставит ее в очередь с другим дескриптором (первый параметр). Решение также зависит от того, редактируете ли вы файл functions.php вашей темы или создали дочернюю тему.
helgatheviking

@Toretto, $ handle показан в моем ответе и также описан в ссылке, которую я предоставил на страницу Кодекса, wp_enqueue_styleпожалуйста, сделайте свою домашнюю работу.
helgatheviking

1
@Toretto Если ваша тема используется wp_enqueue_style()для загрузки рассматриваемой таблицы стилей, то ее дескриптор является первым параметром. Если ваша тема жестко программирует таблицу стилей в header.php, тогда она не будет иметь дескриптора.
helgatheviking

5

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

Вы можете использовать filemtime () для этого. Вот как это сделать в дочернем стиле, который ссылается на parent_style

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );

Со временем я стал отдавать предпочтение версиям тем, но было бы неплохо использовать здесь filemtime (), если у вас нет согласованной практики создания версий тем.
Джангсо

3

Если вы являетесь разработчиком тем, вы можете захотеть перезагрузить свои ресурсы, когда будете загружать новую версию.

Так что версия темы сделана в style.css

/*
    Theme Name: Your Theme Name
    Version: 1.0.2
*/

В верхней части вашего functions.php:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css

Позже, когда вы поставите в очередь CSS или JS, используйте в THEME_VERSIONкачестве четвертого аргумента:

function theme_styles()
{
    wp_enqueue_style('main', get_template_directory_uri().'/css/main.css', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles'); 

Будет выводить на страницу:

.../your-theme-name/css/main.css?ver=1.0.2 

Удобно, когда вам нужно заботиться о большем количестве активов, и вы не хотите менять их вручную.


2

Вы можете достичь этого одним из следующих способов:

1) Добавьте следующий тег в файл header.php темы.

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

2) Добавьте следующий код в файл functions.php темы.

function theme_styles()  
{ 
  // Register the style like this for a theme:  
  // (First the unique name for the style (custom-style) then the src, 
  // then dependencies and ver no. and media type)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Для получения дополнительной информации см. Эту страницу.


когда я делаю это, старый style.css также загружается. Как это убрать?
Торетто

Что такое ручка старого style.css?
Винод Далви,

если вы не можете найти дескриптор, просто скопируйте и вставьте весь URL-адрес style.css сюда ... я получу его оттуда ...
Vinod Dalvi

Или вы можете сказать мне, как называется ваша тема или название папки?
Винод Далви,

1
Добро пожаловать .... :)
Vinod Dalvi

1

лучший способ загрузить css в вашу тему WordPress - это следующий код в вашем файле functions.php:

function theme_styles()  
{ 
  global $ver_num; // define global variable for the version number
  $ver_num = mt_rand() // on each call/load of the style the $ver_num will get different value
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

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

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

ура


1

Попробуй это:

Добавьте это в functions.php

function autoVer($filename){
    $url = get_template_directory_uri() . $filename;
    $file = get_template_directory() . $filename;
    if ( file_exists($file)) {
        return $url . '?v=' .md5(date("FLdHis", filectime($file)) . filesize($file));
    }
    clearstatcache();
}

Добавьте это в верхний или нижний колонтитул -> autoVer ('/ js / main.js');


1

Вопреки представленным выше методам, я считаю, что лучше использовать номер версии, который появляется вверху вашего файла style.css:

// style.css
/**
Theme Name: My theme
...
Version: 1.2.3
...
**/

Чтобы использовать версию темы в вашем css, добавьте следующее в ваш скрипт functions.php (или эквивалентный):

<?php

wp_enqueue_style(
    'my-theme',
    get_stylesheet_directory_uri() . '/style.css',
    [],
    wp_get_theme()->get('Version')
);

Это означает, что после того, как вы отредактируете свой файл style.css, все, что вам нужно сделать, это изменить номер версии в верхней части того же файла, чтобы увидеть изменения во внешнем интерфейсе.

Если вы изучите заголовок раздела HTML темы, вы увидите следующее:

<link rel='stylesheet'
    id='my-theme-css'
    href='... style.css?ver=1.2.3'
    type='text/css'
    media='all'
/>

-1

Это довольно простой способ получить номер версии, дважды вызвав функцию bloginfo($show) . Сначала для таблицы стилей, а затем для номера версии.

<link rel="stylesheet" id="style-css" href="<?php bloginfo('stylesheet_url'); ?>?ver=<?php bloginfo('version'); ?>" type="text/css" media="all" />

Вот и все, что нужно сделать. Надеюсь, что это помогает или полезно. Вы можете просмотреть все доступные параметры и посмотреть, что можно вывести с помощью bloginfo()функции.

Не обращайте внимания на мой комментарий, так как @Ravs указал на мою ошибку в отношении параметра «версии» для функции bloginfo (). Он действительно печатает номер версии Wordpress.


Я думаю, что это не правильный ответ, потому что <? Php bloginfo ('version')?> Дает вам текущую версию WordPress, в то время как вопрос касается версии append style.css, а не версии WordPress.
Равиндер Кумар
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.