Wordpress thêm lớp vào cơ thể

Các lớp Cơ thể tùy chỉnh của WordPress là điều mà bất kỳ nhà phát triển WordPress nào cũng sẽ cần phải giải quyết sớm hay muộn

Sử dụng plugin cho việc này sẽ là quá mức cần thiết vì trong hầu hết các trường hợp, tất cả những gì chúng ta cần là một vài dòng mã

Vì vậy, làm cách nào để chúng tôi thêm các lớp Nội dung tùy chỉnh của WordPress?

WordPress có cả chức năng body_class và bộ lọc body_class (hook)

Hàm body_class được sử dụng trong các chủ đề để thêm các lớp do WordPress tự động tạo vào thẻ body của trang web của bạn

Đây là cách nó được thêm vào tiêu đề. tập tin php của chủ đề của bạn

>

Tùy thuộc vào trang nào được truy cập, WordPress sẽ xuất các lớp cụ thể

1) Đối với bài đăng “Xin chào thế giới” mặc định, các lớp cơ thể là

2) Các lớp nội dung của trang mẫu là

3) Các lớp nội dung của các trang lưu trữ danh mục là

4) Các lớp cơ thể của trang lưu trữ tác giả là

5) Lớp nội dung của trang chủ (giả sử bạn có)

5 ví dụ được cung cấp ở trên, phổ biến đối với hầu hết các chủ đề mặc định khi người dùng quản trị đăng nhập

Khi đăng xuất, các lớp sẽ hơi khác một chút

Các lớp trong HTML được sử dụng để tạo kiểu trang web thông qua CSS

Tuy nhiên. trong nhiều trường hợp, các lớp được tạo tự động là không đủ và chúng tôi có thể cần thêm một số lớp tùy chỉnh

Để thêm các lớp tùy chỉnh, chúng tôi sẽ sử dụng bộ lọc body_class

Khi sao chép các đoạn sau vào chức năng của bạn. php, các lớp nội dung tùy chỉnh mới sẽ xuất hiện trên đánh dấu trang web của bạn

Chúng tôi sẽ sử dụng bộ lọc body_class

Thêm một lớp cơ thể tùy chỉnh WordPress

function my_custom_body_class($classes) {

// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.

$classes[] = 'my-class';

// return the modified $classes array

return $classes;

}

// add my custom class via body_class filter

add_filter('body_class','my_custom_body_class');

Điều này sẽ thêm lớp mới. “my-class” vào thẻ body của tất cả các trang trên trang web của bạn

Nếu tôi cần thêm nhiều hơn 1 lớp thì sao?

Thêm 2 hoặc nhiều lớp cơ thể tùy chỉnh WordPress

Đây sẽ là kết quả

Điều gì sẽ xảy ra nếu tôi chỉ muốn thêm một lớp nội dung trên một trang cụ thể nơi chúng tôi muốn thêm một số kiểu tùy chỉnh qua CSS?

Thêm một lớp nội dung tùy chỉnh WordPress vào một trang cụ thể

Điều này có thể được thực hiện theo nhiều cách

1) Thêm lớp nội dung tùy chỉnh bằng ID trang

Đây sẽ là kết quả trên trang có id 2, trong khi tất cả các trang khác sẽ không có lớp tùy chỉnh

2) Thêm lớp nội dung tùy chỉnh bằng sên trang

Thao tác này sẽ thêm lớp tùy chỉnh “my-class” trên trang có biểu mẫu liên hệ slug, trong khi tất cả các trang khác sẽ không có lớp tùy chỉnh

3) Thêm lớp nội dung tùy chỉnh bằng tiêu đề trang

Thao tác này sẽ thêm lớp tùy chỉnh “my-class” trên trang có tiêu đề Biểu mẫu liên hệ, trong khi tất cả các trang khác sẽ không có lớp tùy chỉnh

4) Thêm lớp nội dung tùy chỉnh bằng mẫu trang

Thao tác này sẽ thêm lớp tùy chỉnh “my-class” trên trang bằng cách sử dụng mẫu my-custom-page-template. Tất cả các trang khác sẽ không có lớp tùy chỉnh

Chúng tôi cũng có thể thêm lớp tùy chỉnh vào trang danh mục hoặc thẻ, cả thông qua ID hoặc sên danh mục/thẻ

Thêm lớp cơ thể tùy chỉnh WordPress vào kho lưu trữ danh mục hoặc thẻ

1) Danh mục

2) Thẻ

Điều này sẽ chỉ thêm lớp cơ thể tùy chỉnh trong trang lưu trữ của danh mục my-category và gắn thẻ my-tag

Chúng tôi cũng có thể thêm lớp cơ thể tùy chỉnh vào một trang của mỗi bài đăng trong danh mục danh mục của tôi hoặc với thẻ my-tag

Chúng tôi sẽ sử dụng các hàm in_catgeory và has_tag

1) Danh mục (cả kho lưu trữ và trang đơn)

2) Thẻ (cả kho lưu trữ và trang đơn)

2 ví dụ cuối cùng này sẽ thêm lớp tùy chỉnh trong cả trang lưu trữ và trang đơn

Thêm tên Danh mục làm lớp nội dung tùy chỉnh WordPress trong mỗi bài đăng

Nếu bạn muốn thêm danh mục tên đẹp làm lớp nội dung tùy chỉnh cho mỗi bài đăng, bạn sẽ cần đoạn mã sau

Ví dụ: nếu bạn đang truy cập một bài đăng thuộc danh mục “Du lịch”, đoạn mã trên sẽ thêm lớp cơ thể Du lịch để bạn có thể tạo kiểu cho các bài đăng của từng danh mục khác nhau

Thêm lớp cơ thể tùy chỉnh WordPress khi được truy cập từ thiết bị di động

Chúng ta có thể dễ dàng làm như vậy bằng chức năng wp_is_mobile

Các lớp nội dung tùy chỉnh cũng có thể được thêm vào 1 hoặc tất cả các trang được tạo bởi plugin (tùy thuộc vào plugin)

Thư mục địa lý

GeoDirectory thêm các lớp cơ thể tùy chỉnh của riêng nó. Mỗi trang GeoDirectory chẳng hạn sẽ có lớp cơ thể. trang geodir

Nếu tìm kiếm nâng cao và/hoặc tiện ích bổ sung loại bài đăng tùy chỉnh được cài đặt, các lớp. geodir_advance_search geodir_custom_posts sẽ được thêm tương ứng

Ví dụ về Trang chủ GD

Trong các trang danh sách (loại bài đăng tùy chỉnh hoặc kho lưu trữ danh mục), bạn sẽ tìm thấy một lớp khác nhau cho từng Loại bài đăng tùy chỉnh

Ví dụ ở Places sẽ có post-type-archive-gd_place

Trong trang chi tiết danh sách, bạn cũng sẽ tìm thấy một lớp khác nhau cho từng Loại bài đăng tùy chỉnh được sử dụng, ví dụ: trong Địa điểm sẽ có. single-gd_place

Tuy nhiên, đôi khi có thể cần đến các lớp nội dung tùy chỉnh khác. Hãy làm một số ví dụ

1) Thêm lớp nội dung tùy chỉnh vào trang vị trí

cùng một thẻ điều kiện

2) Thêm lớp nội dung tùy chỉnh vào trang xem trước danh sách

3) Thêm lớp cơ thể tùy chỉnh trong trang chi tiết cho các gói giá khác nhau

4) Thêm lớp nội dung tùy chỉnh trong trang tìm kiếm cho các CPT khác nhau đã tìm kiếm

WooC Commerce

1) Thêm lớp nội dung tùy chỉnh vào tất cả các trang WooC Commerce

2) Chỉ thêm lớp nội dung tùy chỉnh vào trang Cửa hàng

3) Thêm lớp nội dung tùy chỉnh vào trang Danh mục sản phẩm

4) Thêm lớp nội dung tùy chỉnh vào trang Danh mục sản phẩm cụ thể

5) Thêm lớp nội dung tùy chỉnh vào trang Sản phẩm

6) Thêm lớp cơ thể tùy chỉnh vào một trang Sản phẩm cụ thể

Có rất nhiều thẻ điều kiện WooC Commerce khác, chẳng hạn như

• is_product_tag() để lưu trữ thẻ
• is_cart() cho trang giỏ hàng
• is_checkout() cho trang thanh toán
• is_account_page() cho các trang tài khoản khách hàng

Bạn có thể tìm thấy chúng ở đây. https. // tài liệu. wootheme. com/tài liệu/thẻ điều kiện/

Thêm các lớp cơ thể tùy chỉnh của WordPress vào các trang được tạo bởi các plugin khác

Điều tương tự cũng có thể được thực hiện đối với bất kỳ plugin nào cung cấp thẻ có điều kiện

Ví dụ: bạn có thể tìm thấy các thẻ điều kiện của bbPress tại đây. https. // codex. bbpress. org/bbpress-thẻ có điều kiện/

một ví dụ?

1) thêm thẻ body tùy chỉnh vào tất cả trang bbpress, bạn sẽ cần cái này

Bạn cũng sẽ tìm thấy các thẻ có điều kiện cho BuddyPress và hầu hết các plugin tốt nhất hiện có

Loại bỏ các lớp cơ thể

Mặc dù bạn có thể thêm nội dung nào đó qua bộ lọc nhưng bạn cũng có thể xóa nội dung đó

Bạn có gặp sự cố khi thêm hoặc xóa các lớp cơ thể khỏi trang web WordPress của mình không?

Bạn có thể thêm một lớp vào phần tử cơ thể không?

Tôi có thể thêm một lớp vào thẻ body trong HTML không?