body .my-element {
background: blue;
}.my-elementred-bodyred-body
May mắn thay, điều này là dễ dàng và may mắn thay, các mục đích cho nó không trần tục như nhu cầu sơn nền màu đỏ.
Tuy nhiên, đối với mục đích khá đơn giản này, tất cả những gì bạn cần làm là thêm ngay lớp bạn muốn vào như sau:body_class()
<body <?php body_class('red-body'); ?>>Với điều đó, mỗi khi phần tử body được xuất ra trong chủ đề của bạn - cùng với nhiều lớp CSS do lõi khác xác định - WordPress sẽ bao gồm lớp ’ ’ của bạn . Có quyền truy cập vào cái này và cần ghi đè kiểu trước đó của lớp, bạn sẽ đưa vào tệp CSS của mình một cái gì đó cụ thể như sau:red-body
body.red-element .my-element {
background: red;
}Điều này đảm bảo rằng phần tử belovéd mang lớp của bạn luôn có màu đỏ bất cứ khi nào phần tử body có lớp là .my-elementred-element
Nếu bạn đã chia chủ đề WordPress của mình thành các phần mẫu có thể quản lý, bạn có thể sẽ có một chủ đề chứa HTML của bạn và có lẽ là các phần trên cùng của chủ đề tổng thể của bạn.header.php<head>
Trong phần mẫu này, bạn sẽ có phần mở đầu HTML của mình <body> mà WordPress đề xuất bạn đủ khả năng . Khi tất cả đã nói và hoàn thành, đối với phần tử body, bạn có thể sẽ có một cái gì đó giống như sau:body_class()
<body <?php body_class(); ?>>Giấc mơ ướt át của nhà thiết kế web bao giờ cũng vậy, và dù bạn có biết hay không, thì lớp cơ thể của bạn, khi được cấp quyền truy cập sẽ trở nên vô cùng quý giá đối với bạn.body_class()
Bây giờ, mỗi khi bạn tải một trang cụ thể bằng cách sử dụng mẫu trang đã xác định hoặc xem một danh mục hoặc trang thẻ, vân vân, vân vân, sẽ có các lớp CSS do chính WordPress tạo ra được chèn vào lớp.<body>
Tùy thuộc vào cách triển khai của bạn, có thể sẽ có một lớp CSS cho id trang cụ thể. Khác dựa trên tình trạng chuyến thăm của bạn. tức là bạn đã đăng nhập hay chưa. Một cái khác cho mẫu trang, v.v.
Nhìn thấy màu đỏ
Nếu các lớp do WordPress định nghĩa không làm gì cho bạn, thì nó rất dễ thao túng để thực hiện việc đặt giá thầu của riêng bạn. Đầu tiên là một cách tiếp cận khá thủ công.body_class()
Giả sử rằng bất cứ khi nào phần tử body có một lớp red-element bạn muốn phần tử này có nền màu đỏ. Cho dù đánh dấu hiện tại xác định điều này là gì, bạn biết rằng bạn cần phải có CSS xác định điều này, một cách rõ ràng. Trong của style.css bạn, bạn đã có những thứ sau đây:
body.red-element .my-element {
background: red;
}Sau đó, trong bất kỳ mẫu nào có đánh dấu liên quan cho phần tử body, bạn sẽ điều chỉnh để thêm phần tử này vào các lớp đầu ra cuối cùng. như vậy:body_class()red-element
<body <?php body_class('red-element'); ?>>Rõ ràng là chúng tôi chỉ đề cập đến vấn đề này bởi vì nó là một khả năng nhưng nó là một cách tiếp cận thủ công hoàn toàn. Chức năng, em bé, chức năng !! Bạn mãi mãi muốn tìm cách làm cho WordPress trở nên dễ dàng vô hạn và có thể lặp lại cũng như có thể nhân rộng và điều chỉnh. Đưa mọi thứ vào các hàm và nếu có thể vào các hàm cho phép điều kiện là cách nên làm.
Vì vậy, bạn muốn của bạn my-element chỉ có nền màu đỏ khi phần tử body có một lớp red-element. Không thành vấn đề. Nhưng điều gì sẽ xảy ra nếu bạn muốn thứ gì đó khác khi bạn đang ở trên một trang sử dụng mẫu trang? Hoặc khi trang web mà bạn đang thiết kế chủ đề có nhiều tác giả. Hoặc khi tận dụng chức năng WordPress mới nhất và tuyệt vời nhất, trang web có hình ảnh tiêu đề. Điều gì sẽ xảy ra nếu mọi thứ cần phải hoạt động khác nếu chúng ta đang ở trên trang kết quả tìm kiếm. Hoặc khi chúng ta có một trang đầu được thiết lập chắc chắn. Điều gì sẽ xảy ra nếu một sửa đổi chủ đề rất cụ thể đã được thực hiện yêu cầu mọi thứ trông khác biệt, rất khác biệt trên giao diện người dùng. Sau đó là gì?contact.php
Sau đó, chúng tôi crack mở và xác định một chức năng cho điều này.functions.php
Xác định chức năng
Chúng tôi không muốn súp có điều kiện (if / else) ở đây vì vậy vì lợi ích của ví dụ này, hãy xác định 3 quy tắc cơ bản cụ thể:-
Khi mẫu được sử dụng, chúng tôi muốn bao gồm một lớp CSS trong .
red-page.phpred-bg-elementsbody_class() -
Nếu người dùng đặt hình ảnh tiêu đề, chúng tôi nối thêm một
header-image-in-uselớp. -
Nếu chúng ta đang xem một trang mục nhập duy nhất KHÔNG phải là trang đầu tĩnh do người dùng xác định, hãy bao gồm một lớp
no-static-single.
function butter_conditional_body_classes( $classes ) {
// #1
if ( is_page_template( 'red-page.php' ) ) {
$classes[] = 'red-bg-elements';
}
// #2
if ( get_header_image() ) {
$classes[] = 'header-image-in-use';
}
// #3
if ( is_singular() && ! is_front_page() ) {
$classes[] = 'no-static-single';
}
return $classes;
}
add_filter( 'body_class', 'butter_conditional_body_classes' );<body> phần tử bất kỳ lớp nào bạn cần một cách có điều kiện .
Với những điều trên, bạn có thể dễ dàng nhắm mục tiêu bất kỳ phần tử nào bạn muốn và tạo kiểu cho nó khi cần trong CSS.
Không có gì cần thiết trên giao diện người dùng với chức năng này. Bộ lọc WordPress xử lý việc thêm các điều kiện và lớp của chúng tôi, v.v.body_class()