Làm cách nào để xếp hàng biểu định kiểu con / s * sau * mỗi biểu định / biểu định kiểu cha mẹ?


11

Tôi đang sử dụng chủ đề Oenology được viết tốt bởi Chip Bennett với tư cách là chủ đề Phụ huynh cho Con của tôi.

Trong quá trình phát triển của mình, tôi đã phát hiện ra rằng có một số thách thức đối với những người viết chủ đề Trẻ em khi nói đến phong cách kiểm soát.

Tôi vừa phát hiện ra rằng tệp style.css chính của mình được tải trước mỗi liên kết hoặc câu lệnh biểu định kiểu khác trong <head> và điều này giải thích lý do tại sao tôi gặp sự cố khi ghi đè một số kiểu Cha mẹ.

nghiên cứu sâu hơn về vấn đề này cho thấy các kiểu và kiểu cha mẹ khác nhau có thể được xếp hàng trong <head> ở ba vị trí; add_action('wp_print_styles',, add_action('wp_enqueue_scripts',và sau đó add_action('wp_head',.

để đơn giản hóa, tôi dự định tạo hai bảng định kiểu. trang tính 'style.css' chính đầu tiên sẽ chỉ bao gồm @import url()lệnh, cần thiết để tải biểu định kiểu chính của Oenology.

biểu định kiểu thứ hai sẽ chứa các quy tắc Con của tôi. để đảm bảo rằng nó được tải sau tất cả các quy tắc khác, tôi sẽ xếp hàng bằng cách sử dụng add_action( 'wp_head',.

Điều này nghe có hợp lý không? hoặc có cách nào tốt hơn (đúng hơn) để làm điều đó?

btw, có ai biết '/parent-theme/style.css không? MRPreviewRefresh = 723 ' nghĩa là gì?

Cập nhật

wp_enqueue_style () dường như không hoạt động trong wp_head ().

chúc mừng,
Gregory

Câu trả lời:


21

Chỉ cần FYI, câu hỏi này có lẽ giáp với quá cục bộ , vì nó đặc trưng cho Chủ đề Oenology.

Điều đó nói rằng, đây là nơi tôi nghĩ rằng bạn đang gặp vấn đề: Oenology mê hoặc hai phong cách:

  1. style.css, trực tiếp trong đầu tài liệu (do đó trước khi wp_head() bị sa thải)
  2. {varietal}.css, tại wp_enqueue_scripts, với mức độ ưu tiên 11, trong functions/dynamic-css.php:

    /**
     * Enqueue Varietal Stylesheet
     */
    function oenology_enqueue_varietal_style() {
    
    // define varietal stylesheet
    global $oenology_options;
    $oenology_options = oenology_get_options();
    $varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
    $varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';
    
    wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
    }
    // Enqueue Varietal Stylesheet at wp_print_styles
    add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

Biểu định kiểu varietal, áp dụng "skin", ưu tiên liệt kê 11, để đảm bảo rằng biểu định kiểu cơ sở style.css, tải trước và biểu định kiểu varietal tải thứ hai , để tạo ra tầng chính xác.

Vì vậy, nếu bạn cần ghi đè lên biểu định kiểu varietal , chỉ cần liệt kê biểu định kiểu thứ hai của bạn sau biểu định kiểu varietal; tức là với mức độ ưu tiên ít nhất 12hoặc lớn hơn.

Biên tập

Để cung cấp một câu trả lời tổng quát hơn, cho câu hỏi tổng quát hơn:

Để ghi đè biểu đồ định kiểu Chủ đề phụ huynh, bạn cần biết hai điều:

  1. Các móc hành động mà tại đó các stylesheet được enqueued
  2. Các ưu tiên mà tại đó các callback sẽ được thêm vào móc

Các hàm Enqueue ( wp_enqueue_script()/ wp_enqueue_style()) có thể được thực hiện đúng ở bất cứ đâu giữa inithook và wp_print_scripts/ wp_print_styleshook. (Hiện tại móc chính xác về mặt ngữ nghĩa để thực thi các wp_enqueue_*()chức năng wp_enqueue_scripts.) Danh sách này bao gồm các hành động sau (trong số các hành động khác; đây chỉ là các nghi phạm thông thường):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

(Lưu ý rằng wp_enqueue_scripts, wp_print_styleswp_print_scripts tất cả các ngọn lửa bên trong của wp_head, tại một ưu tiên cụ thể .

Vì vậy, để ghi đè biểu định kiểu Phụ huynh-Chủ đề, bạn cần thực hiện một trong các thao tác sau:

  • Hủy đăng ký bản định kiểu Phụ huynh-Chủ đề, thông quawp_dequeue_style( $handle )
  • Xóa cuộc gọi lại Chủ đề phụ huynh bao trùm phong cách, thông quaremove_action( $hook, $callback )
  • Sử dụng tầng CSS để ghi đè biểu định kiểu Phụ huynh-Chủ đề, bằng cách nối wp_enqueue_style()cuộc gọi biểu định kiểu Chủ đề con của bạn vào cùng một móc nối với mức độ ưu tiên thấp hơn hoặc vào một móc nối sau .

    Đối với tùy chọn cuối cùng này, nếu Chủ đề gốc sử dụng:

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... Sau đó, Theme trẻ em sẽ sử dụng:

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`

cảm ơn bạn Chip. Tôi thực sự có thể sử dụng wp_enqueue_scripts và một thứ tự cao để tải biểu định kiểu Con tôi tải lần cuối. tuy nhiên vẫn còn 3 tuyên bố kiểu khác nhau sau tuyên bố biểu định kiểu Con tôi. 2 trong số đó là đầu ra của chính WP !!!, và 1 là đầu ra bởi Oenology thông qua hàm add_custom_image_header () của wp.
Gregory

câu lệnh kiểu body.custom-background được xuất bởi chính WP, nhưng có vẻ như tôi có thể chỉ định màu nền tùy chỉnh bằng cách xác định 'BACKGROUND_COLOR'. lạ là quy tắc css cơ bản sẽ cần được đặt thông qua hằng số WP tùy chỉnh.
Gregory

1
Chip bình luận cuối cùng. Câu hỏi này không quá cục bộ. nhiều chủ đề sẽ sử dụng tất cả các hook có sẵn để enqueue hoặc in các kiểu, và các nhà phát triển chủ đề Child cần biết cách ghi đè các kiểu đó mà không nhất thiết phải vô hiệu hóa chúng. chúc mừng
Gregory

Vấn đề tôi thấy với điều này là child_theme_enqueue_style sẽ tải kiểu con với mức độ ưu tiên cao hơn, tiếp tục xuống wp_head NHƯNG nó sẽ nhân đôi biểu định kiểu con - Wordpress sẽ tự động tải biểu định kiểu con ở mức ưu tiên bình thường và sau đó, tải lại kiểu, tiếp tục xuống với ưu tiên mới. Mặc dù nó đạt được kết quả ghi đè tất cả các biểu định kiểu khác, nhưng nó tạo ra một bản định kiểu trùng lặp trong trang.
php-b-học sinh

2

cách duy nhất để đảm bảo rằng các phong cách của tôi có tiếng nói cuối cùng trong dòng thác là đưa chúng vào cuối <head> thông qua hook wp_head. wp_enqueue không hoạt động trong wp_head nên tôi phải lặp lại liên kết trực tiếp:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

cuối cùng, tôi có thể thiết lập các kiểu của mình một cách dễ dàng và không sử dụng mức độ cụ thể cao, hoặc quy tắc quan trọng chỉ nên được sử dụng như là phương sách cuối cùng.

WP cần một hệ thống mê hoặc phong cách tốt hơn. mọi kiểu, cho dù một liên kết tệp hoặc một kiểu nội tuyến, phải được chuyển qua cùng một hook cho phép Ưu tiên xác định thứ tự của chúng. tùy chọn cho mục đích gỡ lỗi, sẽ hữu ích nếu hook cũng xuất ra các giá trị Ưu tiên của mỗi kiểu có thể ở dạng nhận xét.

Cập nhật

Tôi đã có thể duy trì quyền kiểm soát các kiểu trong chủ đề Con tôi trong khi duy trì tầng gốc của chủ đề Cha mẹ (sử dụng biểu định kiểu chính, biểu định kiểu phụ và một vài câu lệnh kiểu) bằng cách chia biểu định kiểu của tôi thành hai như được giải thích trong câu hỏi. Tôi không còn sử dụng hook wp_head () nữa, thay vào đó sử dụng hook wp_enqueue_scripts () phù hợp và chuẩn với một thứ tự cao để đảm bảo rằng bản định kiểu của tôi được tải lần cuối.

Biểu định kiểu mặc định của chủ đề Con tôi:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

chức năng để chinh phục biểu định kiểu chính của tôi:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

tuy nhiên, có một số câu lệnh kiểu do WP tạo (nghĩa là không phải chủ đề gốc) được nêu sau biểu định kiểu của tôi và tôi sẽ phải xem xét sử dụng các quy tắc css có tính đặc hiệu cao để ghi đè lên các quy tắc liên quan đến tôi hoặc tìm kiếm móc để vô hiệu hóa chúng, đặc biệt là quy tắc body.custom-background.

Cảm ơn tất cả các bạn cho ý kiến ​​của bạn.

chúc mừng,
Gregory


1

Bạn phải luôn luôn sử dụng wp_enqueue_style()để tải biểu định kiểu của mình và các chức năng đó sẽ được nối vào móc wp_enqueue_scripts với các lần chạy trong đầu . Tôi nghi ngờ rằng bạn không móc nó ở đó, do đó vấn đề của bạn. (Kể từ WP 3.3, nếu wp_enqueue_style()được nối với bất kỳ thứ gì khác, nó sẽ ném Thông báo khi bật WP_Debug).


Câu trả lời của @ Chip tốt hơn câu trả lời của tôi và anh ấy có thể đủ điều kiện để thảo luận về chủ đề Oenology;) Đây có phải là trường hợp tôi nên xóa câu trả lời của mình mặc dù nó đúng không?
mrwweb

Không, tôi sẽ để lại câu trả lời của bạn. Nó là chính xác, và giải quyết một phần cụ thể của câu hỏi.
Chip Bennett
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.