Tìm hiểu cách kiểm soát các biểu định kiểu của bạn và giảm lượng CSS không sử dụng mà bạn đang phân phối khi tải trang của mình. Hướng dẫn dễ làm theo này rất hữu ích cho các nhà phát triển và những người không phải là nhà phát triển.
Đây có thể không phải là cảnh báo lớn nhất trong số các cảnh báo trong báo cáo Lighthouse về tốc độ trang của bạn, nhưng đây là một cảnh báo dễ sửa… và quá trình khắc phục nó sẽ để lại cho bạn một chủ đề trang web dễ quản lý và tinh chỉnh hơn trong tương lai.
Đó là tất cả về cấu trúc các tệp của bạn một cách độc đáo.
Để sử dụng hướng dẫn này, bạn nên sử dụng một chủ đề con tùy chỉnh để bạn có thể chỉnh sửa functions.php và style.css trong thư mục chủ đề con của mình.
Nó sẽ hoạt động như thế nào
Một sai lầm kinh điển khi viết phần mềm là tiếp tục thêm mã vào một tệp để tệp ngày càng lớn hơn, cho đến khi không thể tìm thấy bất kỳ thứ gì trong mã nguồn của bạn. Vì vậy, những gì chúng ta sẽ làm ở đây là tạo một số tệp CSS nhỏ hơn, thay vì có một tệp style.css lớn.Nhưng… có nhiều tệp nhỏ sẽ ảnh hưởng đến tốc độ tải trang của bạn, vì trình duyệt phải thực hiện nhiều yêu cầu hơn để lấy tất cả các tệp từ máy chủ web. Cách chúng tôi khắc phục điều này là sử dụng một bộ thu nhỏ. Đây là một công cụ lấy các tệp CSS / JS, loại bỏ những thứ như nhận xét và khoảng trắng, và kết hợp chúng lại với nhau thành ít tệp được nén hơn, được phân phối nhanh hơn. Chúng tôi sẽ sử dụng một plugin có sẵn để thực hiện tất cả những điều này cho chúng tôi. Tôi thích Autoptimize vì nó dễ cấu hình, hoạt động tốt và không gây cản trở.
Đối với mỗi trang được cung cấp bởi WordPress, chúng tôi sẽ thêm một số mã vào tệp functions.php của chủ đề, vì vậy chúng tôi sẽ chỉ bao gồm (các) tệp CSS mà chúng tôi cần cho trang đó. Điều này có nghĩa là chúng tôi đang cung cấp ít khai báo kiểu hơn trên mỗi lần tải trang.
Tách các tệp CSS của bạn
Ví dụ về cách bạn có thể chia CSS của chủ đề con thành các tệp nhỏ hơn…| File | Info |
|---|---|
| style.css | Every page will have this, so include general colours, fonts, header and banner styles… whatever is common to every page on your site. |
| frontpage.css | Styles specific to your front page. Things like <h2> and <g> elements are usually quite different on a site’s front page than elsewhere on a site, so stick them in a dedicated stylesheet file. |
| post.css | Styles that are specific to Post single and archive pages. This will have definitions like .entry-content p and .entry-title
|
| my-post-type.css | If you’ve got a custom post type that needs a different layout to your post archive page (e.g. list instead of grid) then put the declarations in a separate file. |
| search.css | The layout declarations for search results. |
| basket.css | Declarations that only apply to the WooCommerce basket/cart page, but nowhere else on the site. |
Bit PHP
WordPress đi kèm với rất nhiều hàm “is_” hữu ích giúp bạn xác định loại nội dung nào đang được phân phát. Chúng tôi sẽ sử dụng một số trong số này trong một chút PHP để thêm động các liên kết CSS vào tiêu đề của chúng tôi. Mở tệp functions.php của chủ đề con tùy chỉnh của bạn và tìm một hàm xử lý hành động wp_enqueue_scripts trên trang web của bạn. Nó sẽ trông giống như thế này, tùy thuộc vào chủ đề chính của bạn.function custom_enqueue_scripts() {
$theme_version = wp_get_theme()->get('Version');
$base_uri = get_stylesheet_directory_uri();
// Enqueue our child theme's style.css file.
wp_enqueue_style('child-style', $base_uri . '/style.css', null, $theme_version);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
Tất cả những gì chúng tôi sẽ làm là đặt một số logic nếu… sau đó… khác sau khi chúng tôi đã xếp hàng style.css của chủ đề con của chúng tôi . Điều này sẽ khác đối với trang web của bạn, nhưng đây là một ví dụ về cách nó có thể trông như thế nào:
function custom_enqueue_scripts() {
$theme_version = wp_get_theme()->get('Version');
$base_uri = get_stylesheet_directory_uri();
// Enqueue our child theme's style.css file.
wp_enqueue_style('child-style', $base_uri . '/style.css', null, $theme_version);
if (is_front_page()) {
wp_enqueue_style('child-front-page', $base_uri . '/front-page.css', array('child-style'), $theme_version);
} elseif (is_archive() || is_search() || is_tax()) {
// Post archive, search and taxonomy pages look the similar on our site.
wp_enqueue_style('child-archive', $base_uri . '/archive.css', array('child-style'), $theme_version);
} else {
// ...
}
// WooCommerce styles.
if (!function_exists('WC')) {
// WooCommerce not installed, so is_shop() and is_product() won't exist.
} elseif (is_shop()) {
wp_enqueue_style('child-product', $base_uri . '/shop-catalog.css', array('child-style'), $theme_version);
} elseif (is_archive() && is_product()) {
wp_enqueue_style('child-product', $base_uri . '/single-product.css', array('child-style'), $theme_version);
} else {
// ...
}
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
Bạn có thể thêm bao nhiêu khối nếu… sau đó… khối khác tùy thích. Ví dụ…
// Custom styles for a custom post type called "my_custom_post_type".
if (is_archive() && (post_type() == 'my_custom_post_type')) {
wp_enqueue_style('child-my_custom_post_type', $base_uri . '/my_custom_post_type.css', array('child-style'), $theme_version);
}
Triển khai và Kiểm tra
Miễn là bạn tiếp tục tải lại trình duyệt của mình bằng cách bỏ qua bộ nhớ cache ([Ctrl] [Shift] [R] trong hầu hết các trình duyệt) thì bạn không thực sự cần phải làm bất kỳ điều gì đặc biệt để triển khai… ngoại trừ…Khi bạn hoàn thành việc chỉnh sửa các tệp CSS của mình, Autoptimze (hoặc bất kỳ trình thu nhỏ nào bạn đã sử dụng) cần biết rằng một số thứ trong chủ đề con của bạn đã thay đổi. Xóa bộ nhớ cache của trình thu nhỏ sẽ hữu ích, nhưng bạn sẽ thấy rằng chúng tôi đã thêm $theme_versionvào các wp_enqueue_stylecuộc gọi của mình. Điều này để WordPress có thể biến các URL của bảng định kiểu thành những thứ như sau:
... / my-child-theme / frontpage.css? ver = 1.0.14
Con số ở cuối đến từ dòng thông tin phiên bản trong style của bạn.css
Vì vậy, tất cả những gì bạn cần làm để đảm bảo rằng mọi thứ đều trôi chảy một cách dễ dàng là tăng số phiên bản trong tệp style.css của bạn khi bạn hoàn thành. Bằng cách đó, tất cả các URL biểu định kiểu của bạn sẽ chọn phiên bản mới này trong hậu tố URL và Tự động tối ưu hóa sẽ biết rằng nó cần phải thu nhỏ lại và hoàn thiện mọi thứ,
Lời về Số phiên bản
Cách tiêu chuẩn để ghi lại số phiên bản được gọi là lập phiên bản ngữ nghĩa (SemVer). Nó hoạt động bằng cách sử dụng ba số, được phân tách bằng dấu chấm.Major.Minor.Patch
Nó hoạt động như thế này:
- Bump / tăng phiên bản chính nếu bạn đã thay đổi cơ bản cách hoạt động của mã / chủ đề của mình.
- Bump the Minor phiên bản nếu bạn đã thêm một tính năng mới, nhưng không thay đổi / phá vỡ bất kỳ thứ gì đã có trong đó.
- Tăng số bản vá nếu bạn vừa thực hiện một chỉnh sửa, sửa chữa hoặc thay đổi rất nhỏ khác.