it-swarm-vi.tech

Làm cách nào tôi có thể phiên bản tệp CSS chính?

Làm cách nào tôi có thể hướng dẫn wordpress sử dụng tên tệp khác với 'style.css' cho biểu định kiểu chính của mình - ví dụ: style-1.css? Tôi muốn làm điều này cho các mục đích phiên bản và bộ nhớ đệm.

7
Bobby Jack

Style.css là bắt buộc cho chủ đề WordPress của bạn. Đó là nơi WordPress lấy tên chủ đề và thông tin meta cho menu Giao diện >> Chủ đề từ đó. Điều đó nói rằng, bạn thực sự không phải sử dụng style.css trong chủ đề của mình. Tôi biết một số chủ đề có sẵn không sử dụng nó và tôi chỉ sử dụng nó trong một số ít các thiết kế tùy chỉnh của mình.

Trong header.php chỉ cần đặt thẻ sau vào vị trí của liên kết biểu định kiểu thông thường:

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

Điều này sẽ tải biểu định kiểu thay thế của bạn dưới dạng biểu định kiểu của trang và hoàn toàn bỏ qua style.css thông thường.

3
EAMann

Điều này có thể không phù hợp, xin vui lòng cho tôi biết nếu tôi bỏ lỡ một cái gì đó.

Đối số thứ tư cho wp_enqueue_style() là số phiên bản của biểu định kiểu. Trong chủ đề của bạn là 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');

Yêu cầu header.php của bạn thực hiện wp_head(), mà tất nhiên dù sao bạn cũng đang làm. ;)

Điều này cho phép bạn Đẩy các tiêu đề hết hạn dài bằng tệp CSS của mình và buộc khách hàng tải xuống một tệp mới bằng cách cập nhật số phiên bản. WP sẽ thêm "? Ver = N" vào URL của tệp CSS của bạn.

13
Annika Backstrom

Thả tệp này vào tệp tin.php của chủ đề:

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

Lưu ý rằng bạn không nên sử dụng truy vấn cho phiên bản tệp (proxy không lưu trữ chúng).

Cách tốt hơn là phiên bản tên tệp như thế bằng cách thêm một số như

  • phong cách. 123 . css
  • phong cách. 124 . css

Vì vậy, cách tiếp cận của tôi là như sau:

Chuyển hướng htaccess của Apache

Nếu bạn đang sử dụng Bản tóm tắt HTML5 với Apache, bạn có thể tìm thấy phần sau trong tệp.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>

(Bạn thường phải kích hoạt nó trước, bằng cách bỏ qua các dòng)

Chức năng chủ đề.php

Tôi muốn tự động sử dụng phiên bản chủ đề của mình cho biểu định kiểu, vì vậy tôi đã đưa ra các cách sau:

Bạn có thể thêm các mục sau vào chủ đề của mình Hàm.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');

Lưu ý rằng tôi đã cung cấp null dưới dạng phiên bản thay vì false, vì vậy Wordpress không nối thêm phiên bản của nó trong chuỗi truy vấn.

Kết quả

Điều này xuất ra một bản định kiểu như sau cho Phiên bản 1.0.2 của chủ đề của bạn:

<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' />

Sau khi tôi thay đổi chủ đề của mình thành Phiên bản 2.0.0 trong style.css, nó sẽ xuất ra như sau:

<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' />

Ghi chú bổ sung

Hãy cẩn thận, nếu bạn chỉ tước các chấm của phiên bản như tôi đã làm, bạn có thể gặp vấn đề với phiên bản chủ đề như 1.2.23 và 1.22.3, vì cả hai đều dẫn đến phiên bản 1223 không có dấu chấm.

Một cách tốt hơn sẽ là đưa nó vào tài khoản trong tệp .htaccess. Ví dụ, bạn có thể cho phép gạch dưới giữa các số và có thể thay thế các dấu chấm bằng chúng.

Điều này chưa được kiểm tra, nhưng nên hoạt động:

.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>

hàm.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

EAMann là chính xác, bạn không phải sử dụng tệp style.css cho tất cả CSS của mình.

Để tạo phiên bản biểu định kiểu và các tệp khác trong chủ đề của bạn, bạn có thể thêm tệp này vào tệp tin.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';
    }
}

Và sau đó khi bạn tạo liên kết đến biểu định kiểu của bạn, bạn có thể làm điều này.

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

Bằng cách này, bạn không phải cập nhật thủ công số phiên bản, bất cứ khi nào tệp được cập nhật trên máy chủ, phiên bản sẽ tự động thay đổi theo dấu thời gian UNIX đó

3
Paul Sheldrake

Chà, đơn giản là bạn có thể sử dụng style.css làm nơi bạn gọi phiên bản bạn muốn. Chỉ cần đặt

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

Sau đó, khi bạn nâng cấp một phiên bản, chỉ cần chỉnh sửa nó thành:

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

Đối với các phiên bản lưu, bạn đã cân nhắc sử dụng Subversion hoặc git ? Sau đó, bạn có thể có một bản ghi theo dõi đầy đủ của biểu định kiểu của bạn. Có thể tôi không hoàn toàn hiểu lý do đầy đủ cho phiên bản của bạn.

2
artlung

Tôi bắt gặp câu hỏi cũ này và thấy tất cả các câu trả lời dường như đã lỗi thời ngày nay.

Tôi chỉ đơn giản là sử dụng phiên bản chủ đề như được định nghĩa trong phần tiêu đề tệp style.css. Bạn có thể lấy nó với 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' );

Giống như thế này, số phiên bản sẽ tự động được thêm vào url như ?ver=#.## và url thay đổi ngay khi phiên bản của chủ đề được tăng lên trong style.css.

2
JHoffmann

Trong functions.php thay đổi

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

đến

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

thay đổi $ver thành bất kỳ giá trị nào hoặc time() cho chế độ phát triển.

1
Rashed Hasan

Tôi không chắc liệu điều này có thay đổi đối với WP3 hay không, vì vậy tôi không hoàn toàn chắc chắn, nhưng có một cách là trực tiếp chỉnh sửa tệp php có liên quan (Tôi không biết liệu có thể được thực hiện từ trong trang Dashboard/Admin không :

wp-folder/wp-content/themes/your-theme/

Và mở lên header.php. Trong tập tin này tìm dòng này:

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

Để thêm 'phiên bản' vào biểu định kiểu được liên kết (giả sử bạn muốn nó giống như: stylesheetURL.css?version=2), hãy đổi nó thành:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />

Tuy nhiên, đây là loại không phù hợp, vì vậy nếu có cách nào tốt hơn tôi muốn tự mình nghe nó =)


Để sử dụng biểu định kiểu khác styles-1.css, bạn có thể chỉ dòng (ở trên) để:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />

(Về cơ bản loại bỏ <?php ... ?> và thay thế nó bằng một đường dẫn thông thường.)

0
David Thomas