Chủ đề con vấn đề ưu tiên CSS mà không sử dụng! Quan trọng

Tôi đã thay đổi trang web WordPress của mình để sử dụng các chủ đề con, nhưng kiểu chủ đề gốc được ưu tiên hơn bất kỳ thay đổi nào tôi thực hiện trên CSS chủ đề con. Tôi có thể làm việc xung quanh nó bằng cách sử dụng !important, tuy nhiên đây là một giải pháp chắp vá và các chủ đề con sẽ hoạt động như tài nguyên đầu tiên của trang web.

Ví dụ: trong trang web của tôi , đường viền bao gồm .wp-captioncùng màu với nền sử dụng !importantthẻ, nhưng sẽ không hoạt động nếu không có nó.

Điều này có phải làm với tập tin tests.php không?

Đây là nội dung của tệp PHP của tôi:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Hãy thử mê hoặc CSS của chủ đề con bạn như vậy:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Lưu ý một số điều:

1) PHP_INT_MAX là ưu tiên để nó chạy lần cuối

2) get_stylesheet_directory_uri () so với get_template_directory_uri () sẽ trỏ đến thư mục mẫu của chủ đề con thay vì cha mẹ.

Tôi cũng đã thêm một thư mục con ở đó /styles/vì tôi giữ CSS của mình trong thư mục con của chủ đề của tôi một cách bình thường.

3) tiếp theo là array( 'parent-style' )làm cho CSS con có CSS ​​cha làm phụ thuộc, có tác dụng đặt chủ đề gốc lên đầu và CSS chủ đề con theo sau nó. Do đó, bất cứ điều gì cũng xuất hiện trong chủ đề con đã có trong chủ đề gốc sẽ ghi đè lên phiên bản của chủ đề gốc.

Câu trả lời TLDR: tham số đầu tiên của mỗi wp_enqueue_style()không nên để lại là 'kiểu cha mẹ' và 'kiểu con'. Chúng nên được đổi tên để phù hợp với tên của chủ đề cha mẹ và con của nó.

Vấn đề

Nếu bạn không đổi tên các tham số, bạn sẽ nhận được chủ đề con được xử lý lần thứ hai có thể dẫn đến các quy tắc xuất hiện hai lần trong Fireorms và thay đổi giá trị sai không có hiệu lực rõ ràng, điều này có thể lừa bạn nghĩ rằng quy tắc con của bạn không ' t ghi đè lên cha mẹ.

Kỳ vọng

Các trang Codex về Child Themes nói một cách chính xác rằng nếu bạn không làm gì cả, CSS con được liên kết tự động. Nó làm, nhưng chỉ có vậy. Quy trình làm việc CSS có một chút khác biệt: bạn muốn ghi đè, không thay thế. Nó hợp lý (nó hoạt động như các tệp chủ đề khác) nhưng chúng có thể có một ghi chú.

Giải pháp

Đổi tên các tham số. Tôi làm như dưới đây để có thêm (một chút) quyền kiểm soát, lưu ý rằng bạn nên thay thế twentysixteen và twentysixteen-child bằng tên của chủ đề con và chủ đề con của bạn:

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(Cũng lưu ý rằng bạn không có quyền kiểm soát thứ tự liên kết của một số (tất cả?) Các plugin WP trong hành động này. Chúng được liên kết sau.)

Happy-select-hunt;)

Bạn có thể sử dụng một bộ chọn cụ thể hơn trong CSS của chủ đề con để nó được ưu tiên.

Vì vậy, thay vì:

.wp-chú thích {
     nền: # 2d2d2d! quan trọng;
}

Sử dụng:

.entry .wp-chú thích {
     nền: # 2d2d2d;
}

Bạn cũng muốn chắc chắn ghi lại biểu định kiểu chủ đề con trong tệp tin.php của bạn nếu bạn chưa có.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style