Bài đăng này đưa ra một vài câu hỏi mà tôi đã gặp liên quan đến những thay đổi gần đây xung quanh các phương pháp vẽ biểu đồ định kiểu được đưa ra trong chủ đề này và chủ đề này .
Các vấn đề tôi gặp phải trong một tình huống sử dụng chung, sử dụng chủ đề gốc được sử dụng rộng rãi và được duy trì tốt, đặc biệt là chủ đề con sẵn sàng trên bản cài đặt WP 4.0. Hàm.php của chủ đề con tôi chỉ chứa wp_enqueue_stylehàm như chi tiết trong Codex .
Xin lưu ý rằng mặc dù mã được tham chiếu bên dưới là dành riêng cho chủ đề này, phần lớn nó sử dụng các quy ước mã hóa hiện tại được sử dụng bởi các chủ đề gốc. Ngoài ra, các lĩnh vực quan tâm của tôi rất có thể trùng lặp trên một số lượng lớn các chủ đề gốc được thiết lập hiện đang tồn tại. Ngoài ra, các câu hỏi nâng cao này có thể áp dụng ở cấp độ phổ quát, bất kể chủ đề gốc nào đang được sử dụng.
VẤN ĐỀ 1: Hai lần
Cài đặt được đề xuất:
Chủ đề phụ huynh là các kiểu chữ viết và kịch bản sử dụng wp_enqueue_scriptshook, phần có liên quan như sau:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}Chủ đề con tôi functions.phpmê hoặc phong cách cho mỗi thay đổi codex gần đây:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}Lưu ý các ID sau được sử dụng bởi mã được tham chiếu:
id='dm-parent-style-css'là bản định kiểu của chủ đề phụ huynh, được bao bọc bởi chức năng chủ đề con tôiid='avia-style-css'là bản định kiểu của chủ đề con tôi, được bao bọc bởi chức năng chủ đề gốcid='dm-child-style-css'là bản định kiểu của chủ đề con tôi, được bao bọc bởi chức năng chủ đề con tôi
Kết quả:
Thoạt nhìn, mọi thứ đều ổn, với <head> hiển thị thứ tự sau:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Sau khi cài đặt một plugin, thứ tự enqueue bây giờ đã thay đổi như sau:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->Cuối cùng, tôi cần css của chủ đề con tôi để tải sau bất kỳ plugin nào, vì vậy tôi buộc phải thêm số ưu tiên vào chức năng trong chủ đề con của mình (xem thảo luận trước về số ưu tiên) .
Tuy nhiên, vì chức năng của tôi chỉ bao gồm css của chủ đề gốc, kết quả là bây giờ css của chủ đề gốc đã được chuyển đến cuối cùng, khiến css của chủ đề con tôi rơi vào tình trạng thậm chí còn tồi tệ hơn trước.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />Bây giờ tôi cũng buộc phải dùng đến việc mê hoặc phong cách chủ đề của con tôi, để đảm bảo nó được di chuyển trở lại phía trước của dòng, gây ra vấn đề đã nói ở trên hai thuật ngữ (thuật ngữ mới? Lol) cho chủ đề con css.
Thiết lập không dùng nữa:
Chức năng sửa đổi trong chủ đề con:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Kết quả:
Sản xuất theo thứ tự sau <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Mặc dù bao gồm cả biểu định kiểu con trong chức năng của tôi khiến nó bị mê hoặc hai lần, IMHO thích hợp hơn mã hóa theo giả định rằng chủ đề gốc sẽ phù hợp với biểu định kiểu con của chúng ta. Dựa trên ID được gán cho từng kiểu được liệt kê, có vẻ như chủ đề gốc sẽ mê hoặc nó, không phải bất cứ thứ gì trong WP Core.
Shivm của tôi:
Mặc dù tôi hầu như không đề xuất đây là phương tiện được đề xuất (và tôi chắc chắn rằng các nhà phát triển có nhiều kinh nghiệm mã hóa hơn bản thân tôi sẽ than thở về giải pháp này), tôi đã loại bỏ ID của chủ đề phụ huynh (được sử dụng để thể hiện phong cách của chủ đề con tôi) ngay trên sự mê hoặc của chính tôi trong tập tin chức năng của chủ đề con tôi như được hiển thị:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Kết quả:
Điều này giải quyết các vấn đề trong tay, dẫn đến:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Tất nhiên, điều này đòi hỏi phải biết ID được sử dụng bởi chủ đề gốc - một cái gì đó chung chung hơn sẽ được sử dụng làm phương pháp phát triển chủ đề con tiêu chuẩn.
VẤN ĐỀ 2: Di dời các bảng định kiểu con
.
Tôi không bao giờ sử dụng mặc định style.csstrong thư mục gốc của chủ đề con cho các kiểu chủ đề của mình - rõ ràng nó phải ở đó, nhưng tất cả các kiểu thực tế của tôi được biên dịch từ SCSS dưới dạng tệp .css rút gọn trong thư mục / css /. Mặc dù tôi nhận ra đây không phải là "tiêu chuẩn dự kiến" ở cấp độ phổ biến cho phát triển chủ đề trẻ em, nhưng hầu hết các nhà phát triển WordPress nghiêm túc mà tôi biết đều làm điều tương tự. Tất nhiên, điều này đòi hỏi phải ghi lại thủ công bản định kiểu đó trong chức năng của tôi bất kể chủ đề gốc có thu hút nó hay không.
Tổng hợp tất cả ...
- Có an toàn không khi đưa ra giả định rằng các chủ đề phụ huynh phù hợp với các kiểu chủ đề con, theo quan điểm của các tiêu chuẩn chủ đề con?
- Xóa mức độ ưu tiên có khả năng tạo ra sự nhầm lẫn nhiều hơn cho một phần của cộng đồng WordPress, khi các kiểu chủ đề con bắt đầu bị ghi đè bởi một plugin. Chúng tôi hy vọng các chủ đề sẽ ghi đè lên các kiểu, nhưng không quá nhiều với các plugin.
- Khi sử dụng biểu định kiểu tùy chỉnh cho các kiểu chủ đề con thực tế (như được cho là đặt chúng vào định nghĩa trước
style.css), việc ghi lại thủ công tệp đó trở nên cần thiết. Về mặt duy trì tính liên tục trên một phạm vi rộng các nhà phát triển, sẽ không có ý nghĩa gì khi khuyến khích thủ công bản định kiểu con bất kể có thể trùng lặp không?