Cách thêm phiên bản của style.css trong wordpress

Cách thêm phiên bản style.csstrong WordPress như dưới đây tôi có thể làm trong Joomla.

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

tôi biết rằng style.csssẽ tải động. Xin hãy giúp tôi làm thế nào để làm điều đó.

Số phiên bản là một tham số của wp_enqueue_style().

Theo Codex, đây là tất cả các tham số wp_enqueue_stylechấp nhận.

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

Vì vậy, ví dụ để tải biểu định kiểu với số phiên bản bạn sẽ làm như sau:

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');

Thay vì làm cứng phiên bản, trong một số trường hợp, bạn có thể tìm thấy phiên bản động hơn cho biểu định kiểu của mình để bất cứ khi nào bạn thay đổi, nó sẽ tự động thay đổi và làm mới bộ đệm của trình duyệt ngay lập tức mà không phải chỉnh sửa lại nhiều lần.

Bạn có thể sử dụng filemtime () để làm điều đó. Dưới đây là cách thực hiện điều đó theo kiểu con tham chiếu cha_style

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

Nếu bạn là nhà phát triển chủ đề, bạn có thể muốn buộc tải lại tài sản của mình khi bạn đẩy phiên bản mới.

Vì vậy, phiên bản của một chủ đề được thực hiện trong style.css

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

Ở đầu trang của bạn functions.php:

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

Sau này khi bạn liệt kê CSS hoặc JS, hãy sử dụng THEME_VERSIONlàm đối số thứ tư:

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

Sẽ xuất ra trang:

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

Tiện dụng khi bạn có nhiều tài sản cần quan tâm và không muốn thay đổi chúng theo cách thủ công.

Bạn có thể đạt được điều này bằng một trong những cách sau:

1) Thêm thẻ sau trong tệp header.php của chủ đề.

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

2) Thêm mã sau vào tệp tin.php của chủ đề.

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');

Để biết thêm thông tin xem trang này.

cách tốt nhất để tải css vào chủ đề wordpress của bạn là đoạn mã sau trong tệp tin.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');

Đây là cách phù hợp để tải các kiểu trong chủ đề của bạn và cũng là cách tốt nhất cho mục đích dàn dựng / thử nghiệm vì mỗi lần làm mới sẽ cung cấp phiên bản cập nhật của kiểu.

Nếu bạn muốn tránh tải cách thứ 1, bạn có thể sử dụng phiên bản rút gọn này và đặt dòng sau vào tệp header.php của bạn và sẽ nhận được kết quả tương tự:

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

Chúc mừng

Thử cái này:

Thêm phần này vào hàm.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();
}

Thêm phần này vào đầu trang hoặc chân trang -> autoVer ('/ js / main.js');

Trái với các phương thức được trình bày cho đến nay, tôi tin rằng tốt hơn là sử dụng số phiên bản xuất hiện ở đầu tệp style.css của bạn:

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

Để sử dụng phiên bản của chủ đề trong css của bạn, hãy thêm đoạn mã sau vào tập lệnh Hàm.php (hoặc tương đương):

<?php

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

Điều này có nghĩa là, sau khi bạn chỉnh sửa tệp style.css, tất cả những gì bạn cần làm là thay đổi số phiên bản ở đầu cùng một tệp để xem các thay đổi ở lối vào.

Nếu bạn kiểm tra phần đầu của HTML của chủ đề, bạn sẽ thấy như sau:

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

Đây là cách khá đơn giản để lấy số phiên bản bằng cách gọi hàm bloginfo($show) hai lần. Đầu tiên cho biểu định kiểu và thứ hai cho số phiên bản.

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

Thats tất cả để có nó. Hy vọng rằng sẽ giúp hoặc là hữu ích. Bạn có thể đi qua tất cả các tham số có sẵn và xem những gì bạn có thể xuất ra với bloginfo()chức năng.

Bỏ qua nhận xét của tôi vì @Ravs đã chỉ ra lỗi của tôi liên quan đến tham số 'phiên bản' cho hàm bloginfo (). Nó thực sự in số phiên bản Wordpress.