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

Question

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

Nội dung chính Show

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ó)
Thêm một lớp cơ thể tùy chỉnh WordPress
Thêm 2 hoặc nhiều lớp cơ thể tùy chỉnh WordPress
Thêm một lớp nội dung tùy chỉnh WordPress vào một trang cụ thể
1) Thêm lớp nội dung tùy chỉnh bằng ID trang
2) Thêm lớp nội dung tùy chỉnh bằng sên trang
3) Thêm lớp nội dung tùy chỉnh bằng tiêu đề trang
4) Thêm lớp nội dung tùy chỉnh bằng mẫu trang
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
1) Danh mục (cả kho lưu trữ và trang đơn)
2) Thẻ (cả kho 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
Thêm lớp cơ thể tùy chỉnh WordPress khi được truy cập từ thiết bị di động
Thư mục địa lý
1) Thêm lớp nội dung tùy chỉnh vào trang vị trí
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ể
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
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
Loại bỏ các lớp cơ thể
Tôi có thể thêm lớp vào thẻ body không?
Làm cách nào để thêm lớp trong thẻ body bằng JavaScript?

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

<body <?php body_class($class); ?>>

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à

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

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

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

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

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

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

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

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) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

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

________số 8_______

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

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

Đ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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

0

Đâ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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

1

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

3

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

4

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

5

2) Thẻ

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

6

Đ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)

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

7

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

8

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

9

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

0

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

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

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í

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

2

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3có thể được sử dụng cho bất kỳ trang gd nào, ví dụ như trang xem trước

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

4

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

5

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

6

WooC Commerce

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

7

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

8

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

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

9

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

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

0

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

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

1

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

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

2

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

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

3

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 đó

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4

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?

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

$("body"). attr("class", "about"); Nó sử dụng attr() của jQuery để thêm lớp 'about' vào phần thân. Điều này hoạt động tốt để thêm một lớp vào cơ thể.

Làm cách nào để thêm lớp trong thẻ body bằng JavaScript?

Javascript cho phép bạn thêm các lớp vào nội dung trang web của mình thông qua tài liệu. nội dung hoặc tài liệu. getElementById("id") . Các lớp có thể được thêm trực tiếp vào phần tử HTML dưới dạng thuộc tính (Ví dụ:.

programming