Sử dụng wp_add_inline_style mà không có biểu định kiểu


18

Tôi cần thêm các kiểu nội tuyến tùy chỉnh vào tiêu đề của một chủ đề tùy chỉnh mà tôi đang tạo. Tôi đã tìm thấy wp_add_inline_style()chức năng này hoạt động nhưng không thực sự phù hợp với tôi vì nó phụ thuộc vào một biểu định kiểu cụ thể. Tôi cần thêm các kiểu nội tuyến ở cuối thẻ head mà không cần phụ thuộc vào biểu định kiểu.

Tôi đã cố gắng đặt biểu định kiểu chủ đề hoặc kiểu không tồn tại. Trong cả hai trường hợp, nó đều hoạt động nhưng đó là một chút hack IMO (tải biểu định kiểu chủ đề hai lần hoặc tham chiếu đến tệp ma ...). Có một cách thích hợp để thêm các kiểu nội tuyến trong đầu mà không phụ thuộc vào biểu định kiểu không?

Tất nhiên, tôi có thể thêm chúng trực tiếp vào tệp header.php nhưng tôi muốn tránh điều này.

Câu trả lời:


24

Bạn chỉ cần thêm các kiểu trực tiếp vào đầu trang. Cách tốt nhất để làm điều này là sử dụng hook hành động 'wp_head', giả sử bạn đang sử dụng một chủ đề có hook. Thích như vậy:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Kiểm tra codex WP để tìm hiểu thêm về hook hành động.


Không vấn đề gì! Rất vui vì tôi có thể giúp.
SkyShab

Nếu (như tôi) bạn muốn thêm CSS nội tuyến tùy chỉnh vào các trang bảng điều khiển, bạn có thể sử dụng admin_headhành động.
chàng người Brazil đó

16

Bạn chỉ có thể sử dụng một tay cầm "giả":

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

Tôi thực sự thích giải pháp này vì phong cách của tôi có một tay cầm và được mê hoặc như thể nó được bao gồm từ tệp .css.
dev_masta

Sử dụng sai làm nguồn của wp_register_style cũng không được phép theo tài liệu codex.wordpress.org/Function_Reference/ Kẻ
16patsle

3

Chủ đề của bạn chắc chắn có biểu định kiểu mặc định (nếu không, nó thậm chí sẽ không được tải dưới dạng chủ đề). Chỉ cần sử dụng biểu định kiểu này làm trình xử lý cho CSS nội tuyến của bạn. Một ví dụ có thể được tìm thấy trong functions.php của theme TwentyFifteen (mã bỏ qua cho ngắn gọn):

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}

1
OP đặc biệt yêu cầu một phương thức khác hơn là sử dụng wp_add_inline_style (). Cả hai phương pháp đều hoạt động và tôi không tìm thấy bất kỳ lý do thuyết phục nào để đi với wp_add_inline_style (). Nếu bạn biết một lý do, tôi muốn biết về nó.
SkyShab

Giải pháp của bạn hoạt động, nhưng nó vẫn "hacky" theo những gì tôi đã nghe từ một người nào đó trong nhóm WP (nếu tôi không nhầm); không chính xác ý kiến của tôi . Tôi nghĩ rằng OP đã nghĩ rằng không có cách nào để làm điều này mà không tải trang mẫu hai lần hoặc sử dụng hook hook. Dù sao, nếu họ không phải là tác giả của một plugin, luôn có một bảng kiểu của chủ đề đi cùng. Tôi cũng đang chỉnh sửa câu trả lời của mình vì giải pháp của bạn được ghi lại trong Codex. :)
Casper

Tôi đã chơi xung quanh với wp_add_inline_style () và đây là những gì tôi tìm thấy. Lợi ích của việc gắn các kiểu vào biểu định kiểu là nếu nó bị lỗi, các kiểu sẽ không được in ra. Nhưng một trong hai phương pháp in chúng nội tuyến trong đầu. Vì vậy, giả sử bạn là một nhà phát triển plugin và phong cách của bạn được in ra trong đầu. Điều này không liên quan gì đến các kiểu chủ đề, và vì vậy nếu một chủ đề con đã loại bỏ các kiểu chủ đề chính để sử dụng các kiểu chủ đề đó, thì bây giờ các kiểu plugin của bạn không được xuất ra. Vì vậy, OP có thể đã chỉ định rằng một phần của yêu cầu vì lý do này.
SkyShab
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.