Cách tải tập lệnh / kiểu cụ thể cho một trang


8

Tôi biết rằng theo quy trình khởi động Wordpress mặc định, trước tiên functions.phpđược gọi, sau đó sẽ đi tất cả các công cụ chủ đề. Nhưng tôi hiện đang tái cấu trúc hoàn toàn chủ đề của mình để tối ưu hóa nó. Ý tưởng của tôi là có một tệp css cơ sở cho các thuộc tính chung, chuẩn hóa, màu sắc. Hoặc để giữ tập tin css duy nhất, nhưng trong trường hợp này tôi cần chuyển mã cứng trong trường hợp functions.phpđể xác định trang. Và một trang khác cụ thể cho từng trang, bởi vì điều này không có nghĩa là tải tệp kiểu css lớn với tất cả các kiểu được xác định.

Vì vậy, câu hỏi của tôi là nơi tốt nhất để móc để tải tập lệnh / phong cách cụ thể là gì?

Nó nên header-xxx.phphay một tập tin khác? Có lẽ có một cách để thực hiện ý tưởng này theo cách có thể mở rộng và thanh lịch hơn?

Tôi thật sự rất biết ơn những người đã giúp đỡ tôi.

Câu trả lời:


9

Tất cả phụ thuộc vào quy mô tùy chỉnh của bạn và cách bạn sẽ sắp xếp công cụ của mình. Nhưng có 2 cách chính để làm điều đó. functions.phpfile mẫu

Con đường tôi muốn làm điều đó, là đăng ký tất cả các kịch bản của tôi / phong cách trong functions.php vì vậy tôi biết những gì tôi sẽ làm việc với nhưng tôi sẽ enqueue chỉ những gì tôi cần khi tôi cần nó.

Bạn có thể liệt kê tất cả nội dung của mình một cách có điều kiện trong tệp tin.php của bạn ( if( is_page( 'blah') { //... enqueue stuff }) hoặc bạn có thể sử dụng các tệp mẫu để định kiểu các danh mục / thẻ / bài đăng / trang cụ thể, v.v.

Sau đó, trong tệp mẫu đó, bạn gọi các tệp script / style enqueue của bạn ở đó. Điều đó làm cho nó cũng là cách để hiểu những gì được tải ở đâu.

Nhưng chắc chắn, nếu bạn muốn chia nhỏ biểu định kiểu của mình thành các tệp nhỏ hơn, bạn sẽ cần sử dụng

Logic tương tự sẽ áp dụng cho tập lệnh với các hàm đăng ký / enqueue tương ứng

Ngoài ra, hãy xem xét số lượng yêu cầu trong chiến lược của bạn, nếu bạn chia nhỏ nội dung của mình thành nhiều tệp, hãy cố gắng giữ số lượng tệp được tải ở mức thấp để bạn không ảnh hưởng tiêu cực đến tải trang theo cách đó.

Có một điều khác bạn có thể làm để tăng tốc độ tải trang. Nếu bạn yêu cầu trình duyệt lưu bộ định kiểu của bạn, thì có thể 1 (hoặc một số nhỏ) sẽ có nhiều cơ hội được tải từ bộ đệm hơn nếu bạn có nhiều tệp trên trang web của mình và chúng luôn cần được tìm nạp từ máy chủ vì đó là một yêu cầu tập tin mới trên mỗi trang mới được tải. Vì vậy, hãy ghi nhớ điều này.

Bất kể, bộ nhớ đệm 1 hoặc nhiều tài sản là một cách tiếp cận tốt và sẽ tăng trang web của bạn nhận được phản hồi về tốc độ trang web.

Nếu bạn cần thêm hướng dẫn về cách sử dụng các chức năng đó, chỉ cần cho chúng tôi biết.

BIÊN TẬP

Những lý do chính để đăng ký tập lệnh là như sau

  • Làm cho nó dễ dàng hơn để gọi một kịch bản / phong cách khi chúng ta cần nó
  • Làm cho nó có thể sử dụng tập lệnh / kiểu đã đăng ký làm phụ thuộc cho tệp chúng ta cần tải.
  • Ngăn chặn bản thân viết cùng một mã nhiều hơn mức cần thiết, đơn giản hóa hiệu quả mã của chúng tôi
  • Nhiều điều mà tôi có thể không nghĩ đến ngay bây giờ

GHI CHÚ

Một tập lệnh / kiểu đã được đăng ký không cần phải được xử lý nếu nó được liệt kê là một $depstrong những tập tin mà bạn hiện đang mê hoặc.

Một ví dụ (không nhất thiết là bạn nên làm như thế nào, nhưng vì vậy bạn hiểu mục đích)

tôi đã đăng kí

  • phong cách chung.css
  • navigation.css
  • nút.css

Bây giờ những kiểu đó đã được đăng ký, vì vậy nếu tôi vào một trang cụ thể và muốn áp dụng một kiểu khác ở đó. Tôi enqueue trên trang đó (bằng câu lệnh có điều kiện trong hàm.php hoặc trong mẫu trang của tôi) specific-style.cssnhư vậy.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Lưu ý rằng mảng trong wp_enqueue_stylelà một mảng các thẻ điều khiển của các kiểu đã đăng ký. WP sẽ thuận tiện tải cả 4 tệp theo đúng thứ tự để tôn trọng sự phụ thuộc.

Bạn có thể xếp tầng phụ thuộc bằng cách đăng ký từng tập lệnh / kiểu với phụ thuộc chính xác

tức là các nút.css phụ thuộc vào navigation.css phụ thuộc vào common-style.css

Nếu tôi đăng ký với logic đó, tôi chỉ cần liệt kê các style.css cụ thể với các nút.css như một phụ thuộc và WP sẽ tạo chuỗi tải để tuân theo thứ tự.


Cảm ơn câu trả lời tuyệt vời, nó sẽ không ảnh hưởng đến hiệu suất nếu tôi sẽ wp-register-style/scriptviết các tập lệnh / kiểu cho tất cả các trang của mình trong hàm.php? Lợi ích của việc đăng ký tất cả các phong cách và chỉ mê hoặc khi cần thiết là gì?
CROSP

2
Thông thường không, bạn sẽ không thấy các vấn đề về hiệu suất, thậm chí nên làm theo cách này . Tôi sẽ cập nhật câu trả lời của mình với những ưu điểm chính
bynicolas

1
cập nhật câu trả lời!
bynicolas

3

Bạn chắc chắn có thể thực hiện một điều kiện để kiểm tra xem ai đó đang ở trang nào và liệt kê một biểu định kiểu cụ thể cho từng trang, nhưng bạn có thể nên nhắm mục tiêu trang bằng CSS.

Trong tệp header.php của bạn, đảm bảo body_classhàm nằm trong thẻ body, như thế này:

<body <?php body_class(); ?>>

Điều này sẽ chèn các lớp vào thẻ body mà bạn có thể sử dụng để nhắm mục tiêu các tính năng cụ thể của trang.

Ví dụ: nếu tôi muốn H1 trên một trang cụ thể có màu đỏ, tôi có thể làm:

body.page-id-12 h1 {
    color: #ff0000;
}

Vì vậy, trên trang có ID 12, nó sẽ áp dụng kiểu đó.

Để nhắm mục tiêu một mẫu trang cụ thể, bạn có thể làm:

body.page-template-template-about h1 {
    color: #ff0000;
}

Điều đó sẽ nhắm mục tiêu các trang với mẫu "về" được áp dụng. Chỉ cần nhìn vào các lớp trong thẻ body trên trang bạn muốn tạo kiểu.

Tuy nhiên, nếu bạn vẫn muốn liệt kê một biểu định kiểu cụ thể cho một trang cụ thể, bạn có thể làm điều này:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );

Tôi nghĩ rằng câu trả lời của bạn đang thiếu điểm. OP muốn biết cách tải một kiểu cụ thể trên một trang cụ thể. không phải làm thế nào để thêm một lớp CSS vào một trang.
bynicolas

Tôi đã thêm thông tin về cách liệt kê biểu định kiểu cho một trang cụ thể, nhưng điểm quan trọng của hàm body_ class là vì vậy bạn không phải làm theo cách đó.
Nate Allen

1
Tôi hiểu điều đó và nó vẫn ổn trong nhiều trường hợp, nhưng OP muốn KHÔNG tải 1 bản định kiểu lớn cho tất cả các trang web của anh ấy. Vì vậy, giải pháp của bạn sẽ không áp dụng ở đây
bynicolas

1
Tôi đã bỏ phiếu cho câu trả lời của bạn vì nó áp dụng cho câu hỏi tốt hơn. Tôi sẽ giữ câu trả lời của mình ở đây trong trường hợp ai đó thấy nó hữu ích.
Nate Allen

1
@KhushbuVaghelaif ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
Nate Allen

3

" Tái cấu trúc ", " tối ưu hóa ", " có thể mở rộng ", " thanh lịch ". Mối quan tâm lớn! Bạn đang đi đúng hướng. Tuy nhiên, việc chia một tệp CSS thành nhiều phần không phải là câu trả lời cho những lo ngại này. Đây là lý do tại sao:

Trình duyệt lưu tập tin CSS. Vì vậy, một khi trang đầu tiên tải trình duyệt sẽ không yêu cầu cùng một tệp CSS cho trang tiếp theo. Có, tải trang đầu tiên sẽ hơi, chậm hơn đáng kể. Nhưng phần còn lại của các trang sẽ được hưởng lợi từ điều này.

Ít yêu cầu hơn là một trong những cách quan trọng nhất để tối ưu hóa tốc độ trang web. (xem Steve Souder hoặc bài viết này ).

Một tối ưu hóa nữa là để giảm thiểu CSS của bạn. (xem bài đăng trên Google PageSpeed .) Cảm ơn @bynicolas về đề xuất này.

Chắc chắn bạn có thể nói, nhưng những gì về thanh lịch ? Đây là tin tốt: SassLESS . Chúng cho phép bạn viết ít mã hơn, chia mã thành nhiều tệp được biên dịch thành một tệp CSS và nhiều hơn nữa.


PS: Tôi thực sự đã có cùng một ý tưởng vài năm trước: tại sao không chia một tệp CSS lớn thành các tệp CSS cụ thể trang nhỏ hơn? Nó trông giống như một sự tối ưu hóa rõ ràng cho đến khi một trong những đồng nghiệp của tôi giải thích cho tôi tại sao nó thực sự sẽ làm cho trang web chậm hơn.
zendka

3
Câu trả lời tuyệt vời, tôi đã nói một chút về điều đó trong câu trả lời của tôi nhưng bạn đặt nó tốt. Nó có thể không trực quan lúc đầu, nhưng thực tế là mọi thứ được lưu trữ sẽ thực sự làm mọi thứ nhanh hơn. Tôi sẽ thêm rằng giảm thiểu 1 tệp CSS lớn hơn sẽ có ích hơn nhiều so với tải nhiều
tệp

điểm tốt về giảm thiểu!
zendka

Cảm ơn, có thể tôi đã mô tả ý tưởng của mình hơi mờ, nhưng tôi sẽ có tối đa hai tệp CSS đầu tiên common.cssvà thứ hai là cụ thể cho từng trang.
CROSP
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.