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


8

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.

Câu trả lời:


3

Style.csslà cần thiết 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.csstrong chủ đề của bạn. 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.phpchỉ đặt thẻ sau ở vị trí của liên kết stylesheet thường xuyên:

<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 thông thường style.css.


1
Để làm rõ, bạn phải có tệp style.css trong chủ đề WordPress của mình với tên chủ đề trong đó. Bạn KHÔNG phải tải tệp đó trong tệp header.php của mình.
Doug

1
Và bạn không nên đặt kiểu của mình trực tiếp vào các tệp chủ đề - thay vào đó hãy sử dụng wp_enqueue_style - nó sẽ đẹp hơn cho các chủ đề và plugin con.
Krzysiek Dróżdż

13

Đ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ư wp_enqueue_style()là số phiên bản của biểu định kiểu. Trong chủ đề của bạn 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 bạn header.phplàm một wp_head(), tất nhiên bạn đang làm gì. ;)

Đ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ẽ nối "? Ver = N" vào URL của tệp CSS của bạn.


3

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

Có lẽ, tôi sẽ cần gọi chức năng đó từ một nơi nào đó ... (và tôi cho rằng việc mất tích / là một sai lầm!)
Bobby Jack

Đúng, dấu gạch chéo bị thiếu đó là một sai lầm và tôi đã thêm móc lọc bạn cũng sẽ cần sử dụng.
John P Bloch

Ngoài ra, lưu ý rằng khi bạn tăng phiên bản, đối số thứ hai ( '/style-1.css') sẽ thay đổi, nhưng đối số thứ nhất ( '/style.css') sẽ luôn giữ nguyên.
John P Bloch

thật tuyệt vời, chúng ta nên tạo plugin cho việc này!
ariefbayu

3

EAMann là chính xác, bạn không phải sử dụng style.csstệp 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

Lưu ý rằng bạn không nên sử dụng truy vấn để tạo phiên bản tệp (proxys 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 .cs
  • Phong cách. 124 .cs

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 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 năng chủ đề của mình.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 nulldưới dạng phiên bản thay vì falsevậ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ỉ xóa các dấu chấm của phiên bản như tôi đã làm, bạn có thể gặp sự cố 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');

2

Chà, đơn giản là bạn có thể sử dụng style.csslà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 hay git chưa? 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

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ớiwp_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 thích ?ver=#.##và url thay đổi ngay khi phiên bản của chủ đề được tăng lên trong style.css.


tôi có một câu hỏi. lý do để ưu tiên 40 là gì?
Kanon Chowdhury

Trường hợp này không yêu cầu bất kỳ ưu tiên cụ thể. Sẽ chỉnh sửa nó ra, cảm ơn.
JHoffmann

1

trong functions.phpsự thay đổi

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

đến

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

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


0

Tôi không chắc liệu điều này có thay đổi cho 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 nó có thể được thực hiện từ trong trang Bảng điều khiển / Quản trị viên không) :

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

Và mở ra 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:) thay đổ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ó =)


Tôi vừa đọc lại câu hỏi của bạn ...

Để sử dụng biểu định kiểu khác, styles-1.cssbạ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.)


1
"Tuy nhiên, đây là loại không phù hợp" - vâng, đặc biệt nếu tôi muốn sử dụng một tệp có tên "style-1.css"! ;-)
Bobby Jack

@Bulk Jack, đã đồng ý và +1 (mặc dù tôi đã thử và thêm một cách tiếp cận không phù hợp tương tự để đạt được mục tiêu của bạn.) = /
David nói phục hồi Monica

ĐỒNG Ý. Tôi đoán rằng tôi đã lo ngại rằng styleheet_url có thể được sử dụng ở nơi khác, nhưng thực sự không có lý do nào cho điều đó, phải không? Ngoài ra còn có một thực tế là sẽ rất tốt nếu có một số cơ chế để tự động cập nhật để luôn sử dụng phiên bản tệp gần đây nhất, nhưng tôi mới bắt đầu phơi bày những sai sót trong câu hỏi của mình bây giờ :)
Bobby Jack
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.