Nhận lớp cơ thể WordPress

WordPress, by default, adds a lot of different CSS classes you can utilize to customize your website. Some of them can be found within the element. These are created thanks to the body_class() function and are often used for styling purposes.

Cho dù bạn là một nhà phát triển trẻ và đầy tham vọng muốn mở rộng kiến ​​thức WordPress hiện tại của mình hay chủ sở hữu trang web WordPress muốn tìm hiểu các thủ thuật tạo kiểu bổ sung, thì việc tìm hiểu thêm về chức năng này có thể rất đáng giá. Vì lý do này, chúng tôi đã quyết định tạo bài viết này về body_class của WordPress và cách sử dụng nó

Không chần chừ thêm nữa, chúng ta hãy bắt đầu. Đây là những gì chúng ta sẽ nói về

• WordPress body_class là gì và nó được sử dụng khi nào

• Cách thêm lớp cơ thể tùy chỉnh trong WordPress bằng plugin

• Cách thêm một lớp cơ thể tùy chỉnh trong WordPress bằng mã

Chủ đề Qode. Chọn hàng đầu

Cầu

Chủ đề WordPress đa mục đích sáng tạo

X-tốc-khôm

Một chủ đề đa khái niệm thực sự

Bắt đầu làm đi

Chủ đề kinh doanh khởi nghiệp mới

WordPress body_class là gì và nó được sử dụng khi nào

The WordPress body_class() function is responsible for displaying all the class names for the element on each WordPress page or post. This is why the call to this function is commonly inserted inside the header.php file of any theme, since that file loads on any page or post. More precisely, the call to the body_class() function is commonly inserted directly after the opening tag.

As an example, we have included a screenshot of the header.php file belonging to the Lekker theme we used for the article. In the screenshot, the opening tag and the call to the body_class() function have been highlighted.

Điều đó nói rằng, hàm body_class() là một phần của các tệp cốt lõi của WordPress và nằm trong wp-gộp/post-template. tập tin php. Nhìn kỹ hơn vào hàm cho thấy rằng nó chỉ lặp lại thuộc tính lớp, cùng với tất cả các tên lớp được tạo bằng hàm get_body_class(), cũng là một phần của tệp đã đề cập trước đó

As for the get_body_class() function, it creates an array of body class names dynamically, based on the page or post you are on. For example, it can create classes like home, blog, privacy-policy or search for your homepage, blog page, privacy policy, and search page, respectively. Following that, if a page has a certain page template enabled, classes like page-template or page-template- are also added. On the other hand, posts can have classes like single, single- or postid-, archives can have classes like archive, post-type-archive, author-, category-, tag-, tax-, and so on.

Đối với những người thắc mắc mục đích của ký hiệu <> là gì, nó chỉ đơn giản là để cho thấy rằng trong một số trường hợp, ngay cả một phần của tên lớp cũng có thể được tạo động. Ví dụ: một bài đăng có ID là 321 sẽ có loại postid-321, một mục loại tùy chỉnh danh mục đầu tư có thể có một loại mục danh mục đầu tư đơn lẻ, nếu mục danh mục đầu tư là sên của loại bài đăng tùy chỉnh đó, trong khi một

Điều đó nói rằng, có các lớp hữu ích bổ sung như đăng nhập, thanh quản trị, rtl hoặc wp-custom-logo, tương ứng với các điều kiện cụ thể đáp ứng trên một trang hoặc bài đăng cụ thể. Ngoài ra, một trang hoặc bài đăng cũng có thể chứa một số lớp tùy chỉnh, đây sẽ là chủ đề chính của bài viết này

Tuy nhiên, trước khi đi sâu vào hướng dẫn của bài viết này, chúng ta vẫn phải giải thích cách thiết lập tên lớp cơ thể nào có mặt trên trang hoặc bài đăng hiện tại và cách sử dụng các lớp này hoặc bất kỳ tên tùy chỉnh nào

Đầu tiên, để tìm ra tất cả các tên lớp cơ thể của bất kỳ trang hoặc bài đăng nào, bạn cần kiểm tra nó bằng công cụ kiểm tra trình duyệt. Để làm như vậy, hãy mở một trang hoặc bài đăng mà bạn muốn kiểm tra và nhấp chuột phải vào bất kỳ đâu trong đó. Sau đó, nhấp vào tùy chọn “Kiểm tra” từ menu mở ra

Thao tác này sẽ mở các công cụ dành cho nhà phát triển của trình duyệt hiện tại của bạn và đưa bạn vào tab Thành phần, trên thành phần HTML mà bạn đã nhấp chuột phải, tab này cũng sẽ được đánh dấu trên trang

While creating suitable CSS code, you need to inspect the HTML structure of a certain element or part of the page thoroughly. In this case, you only need to locate the opening tag. To do so, scroll to the top of the HTML structure using the side scroller. Having found the opening tag, you will see all the class names of the current page or post after the class=” part.

Một cái nhìn kỹ hơn về ảnh chụp màn hình trước đó cho thấy một số lớp mặc định của WordPress mà chúng tôi đã thảo luận (được đánh dấu bên dưới) kết hợp với các lớp bổ sung được thêm vào bởi chủ đề Lekker, các plugin đi kèm của nó hoặc các plugin bổ sung của bên thứ ba như Elementor

Đã chỉ ra điều đó, điều duy nhất còn lại là giải thích cách sử dụng các tên lớp cơ thể này và tại sao trong một số trường hợp, việc thêm tên lớp mới có thể có lợi hơn

Tên lớp cơ thể mới và lớp cơ thể mới

Generally speaking, you can use one or multiple body class names to apply specific CSS styling rules intended for all the pages that share that specific class/those specific classes. When it comes to choosing a suitable CSS selector for a CSS code, there are two approaches you can take. Firstly, you can use the body classes only, if you want to apply a set of CSS rules directly to the element that has those classes.

Meaning, you would use selectors like .body-class-name (e.g. .home, .page, .postid-27, etc.) or selectors which use multiple class names that are joined into a singular CSS class selector (e.g. .page.page-template-default.logged-in). Doing so, you would apply CSS rules to the element of pages that have the specific body class name or have all of the body class names that were used, respectively.

And, while there is some merit to applying the CSS rules to the element, as some CSS properties can be inherited to inner HTML elements, it is more common to write CSS code targeting the specific HTML elements on the pages denoted by the body class names. To do so, you would need to create an additional CSS selector and append it to the body class name selectors we mentioned previously. Meaning, more frequently, your CSS code would have the structure of the following example.

<body-class-selector> <additional-css-selector> {
// CSS rules go here
}

Tất nhiên, để tạo bộ chọn CSS bổ sung này, cũng như bất kỳ quy tắc CSS nào được sử dụng, ít nhất bạn sẽ cần có hiểu biết cơ bản về mã CSS. Tuy nhiên, ngay cả khi bạn vượt qua rào cản này, trong một số trường hợp, các lớp mặc định được cung cấp bởi hàm body_class() không đủ để tạo kiểu đúng cho các trang bạn cần. Đây là lý do tại sao một số plugin và chủ đề bao gồm các tên lớp cơ thể tùy chỉnh được cung cấp dựa trên các chức năng mà chúng tương quan

Bằng cách đó, bạn sẽ có nhiều cách hơn để tạo kiểu cho các trang và bài đăng theo nhu cầu của mình. Hơn nữa, bạn thậm chí có thể mở rộng phạm vi tiếp cận kiểu dáng của mình bằng cách thêm các lớp nội dung tùy chỉnh vào các trang và bài đăng hoặc loại trang và bài đăng cụ thể. Chúng tôi sẽ đề cập nhiều hơn về chủ đề này trong phần sau của bài viết

Mặc dù chủ đề của bạn hoặc một số plugin của bạn cũng có thể bao gồm tên lớp cụ thể của chúng được in bằng hàm body_class(), nhưng trong bài viết này, chúng tôi sẽ đề cập đến hai cách để bạn có thể tự làm như vậy – sử dụng plugin WordPress phù hợp hoặc

Cách thêm lớp cơ thể tùy chỉnh trong WordPress bằng plugin

Mặc dù không có nhiều plugin mới hơn cho mục đích này, nhưng chúng tôi có thể tìm thấy một plugin WordPress cũ hơn có tên là Custom Body Class mà chúng tôi đã thử nghiệm đúng cách và thấy nó hoạt động hoàn hảo với phiên bản WordPress mới nhất. Plugin đã được tạo riêng cho mục đích thích hợp này và cung cấp một bộ chức năng rất hạn chế mà chúng tôi sẽ đề cập bên dưới. chúng ta hãy bắt đầu

Sau khi cài đặt và kích hoạt plugin, hãy điều hướng đến phần Cài đặt > Lớp cơ thể tùy chỉnh. Plugin cung cấp hai cách để thêm lớp nội dung tùy chỉnh trong WordPress. Đầu tiên là thêm một lớp toàn cầu vào tất cả các trang và bài đăng của bạn, trong khi cách thứ hai là bật hộp meta lớp tùy chỉnh trên tất cả các loại bài đăng, bao gồm các loại bài đăng tùy chỉnh để bạn có thể chèn một lớp cụ thể trên một trang hoặc bài đăng cụ thể. Ngoài ra, plugin cung cấp một cách để hạn chế việc sử dụng nó chỉ dành cho quản trị viên, có tùy chọn tự động hoàn thành, cũng như một cách khác để vô hiệu hóa chức năng của nó

Tuy nhiên, trong bài viết này, chúng tôi sẽ không tập trung vào các chức năng bổ sung mà plugin cung cấp mà chỉ nói về hai cách sử dụng nó. Đầu tiên, để thêm một lớp toàn cầu vào thẻ của tất cả các trang và bài đăng của bạn, hãy nhập tên của lớp toàn cầu của bạn vào trường nhập bên cạnh nhãn “Lớp toàn cầu” và nhấp vào nút “Lưu thay đổi”

The custom class that you insert will, then, be a part of the class property of the tag, which you can see by inspecting any of your website’s pages or posts using developer tools of your current browser. Those who aren’t sure how to inspect a page or post are advised to review the previous section of this article, in which we made a general overview of the WordPress body classes, i.e. class names, and how they can be inspected.

Phải nói rằng, để làm ví dụ, chúng tôi đã thêm một lớp có tên là my-global-css-class, có thể thấy lớp này trong ảnh chụp màn hình bên dưới. Tuy nhiên, vì chủ đề của bạn hoặc một số plugin khác cũng có thể bao gồm các lớp tùy chỉnh của chúng, nên việc tìm kiếm lớp CSS được thêm vào có thể hơi khó khăn. Do đó, chúng tôi khuyên bạn nên nhấp vào thẻ HTML trong tab Thành phần và nhấn đồng thời các phím Ctrl và F (Cmd và F, đối với người dùng macOS) để kích hoạt và sử dụng tính năng tìm kiếm. Sau đó, bạn có thể tìm kiếm cụ thể lớp đã thêm, lớp này sẽ được đánh dấu như trên ảnh chụp màn hình của chúng tôi bên dưới, nếu nó được thêm thành công

Sau khi đảm bảo rằng lớp CSS đã được thêm thành công, bạn có thể tạo các quy tắc tạo kiểu CSS phù hợp mà bạn muốn áp dụng cho lớp đó, từ đó áp dụng chúng cho tất cả các trang và bài đăng trên trang web của bạn. Một ví dụ có thể được đưa ra dưới đây. Không cần phải nói, để nó hoạt động bình thường, bạn cần thay thế trình giữ chỗ “my-global-css-class” bằng tên thật của lớp mà bạn đã thêm trước đó, cũng như thay thế dòng nhận xét bằng các quy tắc CSS có liên quan

.my-global-css-class {
// CSS rules go here
}

Đã nói rằng, chúng ta hãy tiếp tục với trường hợp sử dụng thứ hai của plugin Custom Body Class – kích hoạt hộp meta Classes. Để làm như vậy, hãy điều hướng đến phần Cài đặt > Lớp cơ thể tùy chỉnh và tìm phần Loại bài đăng của các tùy chọn. Ở đó, bạn sẽ có thể xem tất cả các loại bài đăng đã đăng ký trên trang web của mình và đánh dấu vào hộp kiểm bên cạnh (các) loại mà bạn muốn bật hộp meta Lớp học. Sau khi kích hoạt nó bằng các tùy chọn plugin, bạn sẽ cần xác định vị trí hộp meta trên một trang hoặc bài đăng cụ thể và sử dụng nó, chúng tôi sẽ đề cập bên dưới. Đánh dấu vào các hộp kiểm bên cạnh loại bài đăng mà bạn muốn bật hộp meta này và nhấp vào nút “Lưu thay đổi”

Đối với việc sử dụng hộp meta này, nó giống nhau cho dù bạn chọn loại bài đăng nào. Tuy nhiên, chúng tôi sẽ chỉ ra cách nó có thể dành cho cả trang và mục danh mục đầu tư, đây là loại bài đăng tùy chỉnh được kích hoạt bởi chủ đề Lekker mà chúng tôi đang sử dụng trong ví dụ của mình. Lý do tại sao chúng tôi gọi hộp meta là hộp meta Lớp học là do nó có từ lớp học như một phần của tiêu đề

Tuy nhiên, để tạo thành tiêu đề hộp meta đầy đủ, từ này được đặt trước tên của loại bài đăng tùy chỉnh. Có nghĩa là, đối với các trang, nó sẽ được đặt tên là Lớp trang, đối với danh mục đầu tư, nó sẽ là lớp Mục danh mục đầu tư, đối với sản phẩm – Lớp sản phẩm, v.v. Đã nói rằng, chúng ta hãy tiếp tục

Để thêm một lớp CSS tùy chỉnh vào một trang cụ thể, hãy nhấp để chỉnh sửa trang đó và tìm phần hộp meta Lớp trang ở bên phải

Bạn sẽ tìm thấy một trường số ít với phần giữ chỗ cho biết “Nhấp vào đây để thêm lớp”. Bằng cách nhấp vào nó, bạn sẽ có thể thêm một lớp CSS sẽ được đặt trước dấu chấm (. ), tôi. e. hiển thị dưới dạng bộ chọn CSS phù hợp. Để lưu những gì bạn đã làm, hãy nhấp vào nút “Cập nhật” sau đó. Tất nhiên, bạn có thể thêm nhiều lớp CSS vào trang cụ thể đó bằng cách lặp lại quy trình nêu trên hoặc xóa một số lớp mà bạn đã chèn trước đó bằng cách sử dụng liên kết “X” bên cạnh chúng. Đối với bài viết này, chúng tôi đã thêm một lớp có tên là lớp cụ thể theo trang, như bên dưới

This class can, then, be observed as the part of the classes assigned to the tag on that particular page, when inspected using the browser inspector tool.

Sau đó, để chỉ áp dụng một kiểu cụ thể trên trang cụ thể đó, bạn chỉ cần thêm các quy tắc CSS nhắm mục tiêu vào lớp CSS đã đề cập ở trên. Đây là một ví dụ cho trường hợp của chúng tôi

.page-specific-class {
// CSS rules go here
}

Tất nhiên, để sử dụng mã này, bạn sẽ cần thay thế phần lớp cụ thể của trang bằng lớp CSS mà bạn đã thêm và thay thế dòng nhận xét bằng các quy tắc CSS tương ứng

Ngoài ra, chúng tôi phải đề cập đến những việc cần làm nếu ban đầu bạn không thể tìm thấy hộp meta Lớp trang. Nếu bạn đang sử dụng màn hình trình chỉnh sửa Gutenberg, thì có thể đơn giản là bảng điều khiển Lớp trang chưa được bật. Để kích hoạt nó, hãy nhấp vào menu ba chấm ở góc trên cùng bên phải của màn hình và nhấp vào tùy chọn “Preferences” từ menu xuất hiện

Thao tác này sẽ mở cửa sổ bật lên Tùy chọn và định vị bạn trong tab Chung. Mở tab Bảng điều khiển và đảm bảo rằng bảng điều khiển Lớp trang được bật. Sau đó, bạn có thể đóng cửa sổ bật lên Tùy chọn và tiến hành thêm lớp dành riêng cho trang như đã đề cập ở trên

Điều này kết thúc phần của chúng tôi về việc thêm các lớp CSS dành riêng cho trang và cách sử dụng của nó. Như đã đề cập, chúng tôi cũng sẽ giới thiệu cách bạn có thể thêm một lớp CSS vào thẻ nội dung của một bài đăng mục danh mục đầu tư cụ thể. Mặc dù mục danh mục đầu tư là một loại bài đăng tùy chỉnh cụ thể được cung cấp bởi chủ đề Lekker mà chúng tôi đang sử dụng, các bước tương tự mà chúng tôi sẽ trình bày bên dưới có thể được thực hiện cho bất kỳ loại bài đăng tùy chỉnh nào khác. Hơn nữa, lần này chúng tôi đã cố tình sử dụng màn hình Trình chỉnh sửa cổ điển để hiển thị một tập hợp các bước tương đương với bước mà chúng tôi đã mô tả ở trên. Điều đó nói rằng, chúng ta hãy tiếp tục

Để tìm hộp meta Lớp học trên mục loại bài đăng tùy chỉnh của bạn, hãy nhấp để chỉnh sửa nó và tìm hộp meta lớp tên CPT, trong đó phần “Tên CPT” được thay thế bằng tên loại bài đăng tùy chỉnh tương ứng. Trong trường hợp của chúng tôi, đó là siêu dữ liệu các lớp Hạng mục Danh mục đầu tư, như đã đề cập trước đó

Sau khi tìm thấy nó, hãy nhấp vào hộp meta và thêm một lớp cụ thể vào mục bài đăng đó. Sau đó, nhấp vào nút "Cập nhật" để lưu các thay đổi bạn đã thực hiện

For this example, we have used the “portfolio-item-specific-class” as the class name. Of course, once added in this manner, that class will be one of many tag CSS classes on that particular post item, as seen when inspecting the item using developer tools.

Sau đó, để sử dụng nó, bạn sẽ cần viết một số mã CSS tương tự như ví dụ của chúng tôi bên dưới, với cả lớp CSS và dòng chú thích được thay thế cho phù hợp

.portfolio-item-specific-class {
// CSS rules go here
}

Cuối cùng, như chúng ta đã làm với ví dụ trước, chúng ta không thể không đề cập đến những gì bạn nên làm nếu không thể nhìn thấy hộp meta lớp tên CPT ban đầu. Nếu bạn đang sử dụng Trình chỉnh sửa cổ điển như chúng tôi có trong ví dụ này, bạn chỉ cần bật hộp meta trong Tùy chọn màn hình

Để làm như vậy, hãy tìm Tùy chọn màn hình ở góc trên bên phải màn hình của bạn và nhấp để mở phần. Sau đó, xác định tùy chọn lớp tên CPT trong phần phụ Thành phần màn hình và đánh dấu vào tùy chọn đó. Sau đó, nhấp vào Tùy chọn màn hình một lần nữa để ẩn chúng và tiến hành thêm một lớp CSS theo cách chúng tôi đã thảo luận ở trên

Với nó, chúng tôi kết luận tổng quan về plugin Custom Body Class

Cách thêm một lớp cơ thể tùy chỉnh trong WordPress bằng mã

Apart from using a WordPress plugin, adding a new CSS class to the tag of pages and posts can be done with a bit of custom code. While this is not the preferred choice of many WordPress users, the DIY approach can be quite effective when it comes to adding new functionalities and changing existing ones. And, in this particular case, it only requires a moderate amount of coding knowledge.

Tuy nhiên, chúng tôi sẽ cố gắng giải thích các ví dụ mã mà chúng tôi đã chuẩn bị cho bài viết này để tất cả người dùng WordPress đều có thể hiểu được chúng. Tuy nhiên, trong phần này của bài viết, chúng tôi sẽ chỉ tập trung vào mã cho phép bạn thêm các tên lớp cơ thể CSS bổ sung. Để biết thêm mẹo về cách tạo mã CSS sử dụng tên lớp CSS đã thêm, chúng tôi khuyên bạn nên đọc phần đầu tiên của bài viết này, cũng như tổng quan chung của chúng tôi về mã CSS

Ngoài ra, như một biện pháp phòng ngừa, chúng tôi khuyên bạn nên sao lưu trang web của mình trước khi chèn bất kỳ đoạn mã nào được bao gồm bên dưới. Hơn nữa, vì việc chèn các đoạn trích đó ít nhất cần có hiểu biết cơ bản về FTP, chúng tôi khuyên bạn cũng nên trau dồi kiến ​​thức về chủ đề đó. Làm xong việc đó, tiến hành như mô tả bên dưới

Trong bài viết này, chúng tôi sẽ đề cập đến cách bạn có thể thêm các tên lớp nội dung tùy chỉnh bằng cách tạo các hàm phù hợp và nối chúng vào hook bộ lọc body_class chịu trách nhiệm lọc các tên lớp nội dung nào sẽ được hiển thị cho bất kỳ trang hoặc bài đăng cụ thể nào. Tất nhiên, để hiểu quy trình này, bạn cần có ít nhất một sự hiểu biết cơ bản về các hook WordPress là gì và chúng được sử dụng như thế nào. Vì lý do đó, chúng tôi sẽ tổng quan nhanh về chủ đề hook WordPress trước khi đi sâu vào các đoạn mã mà chúng tôi đã chuẩn bị cho bài viết

Các hook WordPress là các đoạn mã giữ chỗ do các nhà phát triển để lại để những người dùng WordPress nâng cao khác có thể sử dụng chúng để thêm các chức năng mới hoặc thay đổi các chức năng hiện có. Đó là lý do tại sao các hook WordPress được chia thành hai loại – hook hành động, được sử dụng để thêm các chức năng mới và hook bộ lọc, được sử dụng để thay đổi các chức năng hiện có

Sử dụng móc WordPress yêu cầu bạn viết các chức năng tùy chỉnh, được gọi là chức năng gọi lại hoặc gọi lại, với mã cho phép một chức năng nhất định. Tuy nhiên, để nó hoạt động, chức năng gọi lại cần được “gắn vào” một hook WordPress phù hợp. Điều này được thực hiện bằng cách sử dụng hàm add_action() cho móc hành động và hàm add_filter() cho móc bộ lọc. Cả hai hàm đều chấp nhận bốn đối số giống nhau. tên của hook, tên của hàm gọi lại, mức độ ưu tiên của nó và số lượng đối số tối đa mà hàm gọi lại có thể chấp nhận, theo thứ tự đó. Trong số bốn đối số này, trong hầu hết các trường hợp, chỉ có hai đối số đầu tiên được sử dụng, giả sử các giá trị mặc định cho hai đối số còn lại

Và mặc dù phần khó khăn nhất của việc sử dụng các hook WordPress đúng cách là tìm hook hành động hoặc hook bộ lọc phù hợp, nhưng trong trường hợp cụ thể này, đó không phải là vấn đề. Đối với bài viết này, chúng tôi sẽ sử dụng hook bộ lọc cũng có trong wp-gộp/post-template. php, được gọi giống như hàm là chủ đề chính của chúng ta – body_class. Để sử dụng hook bộ lọc này, bạn sẽ cần viết các đoạn mã tùy chỉnh tương tự như ví dụ giả sau

function name-of-the-function( some-variables-go-here ) {
// Some code goes here
return $one-of-the-variables;
}
add_filter( 'body_class', 'name-of-the-function' );

Loại ví dụ này sẽ có ý nghĩa hơn nhiều sau khi xem xét các ví dụ thực tế mà chúng tôi đã chuẩn bị cho bài viết. Do đó, chúng tôi khuyên bạn nên xem lại đoạn mã này một lần nữa sau khi xem qua các ví dụ mà chúng tôi để lại bên dưới

Điều đó nói rằng, vẫn còn một cái gì đó chúng ta phải thêm. Mặc dù việc sử dụng các móc nối WordPress có thể được coi là một phương pháp khó, nhưng nó có giá trị hơn là chỉnh sửa trực tiếp các tệp mẫu, điều đã được thực hiện trong quá khứ. Vì tất cả mã tùy chỉnh phải được chèn vào hàm. php của chủ đề con của bạn hoặc một plugin dành riêng cho trang web, bạn sẽ không phải lo lắng về việc mất nó sau khi cập nhật một chủ đề, plugin hoặc các tệp cốt lõi của WordPress. Hơn nữa, bằng cách lưu trữ nó theo cách như vậy và thông qua các phương pháp đặt tên chức năng phù hợp, bạn sẽ có một cách dễ dàng để theo dõi tất cả các tùy chỉnh mã hóa mà bạn đã thêm vào trang web WordPress

Đã nói rằng, chúng ta hãy tiếp tục với các đoạn mã

Tên lớp cơ thể toàn cầu

Thêm tên lớp cơ thể toàn cầu là một cách rõ ràng để bắt đầu đoạn mã của chúng tôi. Nó cũng là một phần của plugin mà chúng tôi đã trình bày ở trên, vì nó cho phép bạn viết mã CSS có thể áp dụng cho mọi trang và bài đăng. Đoạn mã có liên quan được bao gồm bên dưới

function qode_add_global_body_class( $classes ) {
$classes[] = 'qode-global-css-class';
return $classes;
}
add_filter( 'body_class', 'qode_add_global_body_class' );

Mã của nó khá đơn giản – nó đại diện cho một hàm gọi lại tùy chỉnh được gọi là qode_add_global_body_class() được nối với bộ lọc body_class. Trong hàm gọi lại, chúng tôi đã thêm lớp tùy chỉnh có tên qode-global-css-class vào biến $classes, sau đó lớp này được trả về. Biến này đại diện cho một mảng gồm tất cả các tên lớp nội dung cho trang hoặc bài đăng hiện tại

But, since our callback function doesn’t include any conditional statements which can restrict the scope of the added CSS class, the added class will be a part of the tag for all pages and posts. Therefore, the code above represents the simplest way of adding a global body class name. As mentioned above, the added class name can be seen when inspecting any page or post using the developer tools of your current browser. Then, the said class name can be used as a CSS selector or a part of a CSS selector for the code that is meant to be applied globally.

Điều này kết thúc ví dụ của chúng tôi về lớp cơ thể toàn cầu. Trong ba ví dụ sau, chúng tôi sẽ giới thiệu cách sử dụng các câu lệnh có điều kiện để hạn chế phạm vi của tên lớp được thêm vào, đây là cách tiếp cận phổ biến hơn khi sử dụng hook bộ lọc body_class

Tên lớp cơ thể có điều kiện

Trong khi một lớp CSS toàn cầu có một số cách sử dụng trong việc áp dụng các quy tắc CSS nhất định cho tất cả các trang và bài đăng, thì nhiều khả năng bạn sẽ cần phân biệt các quy tắc CSS nhất định và chỉ áp dụng chúng cho các bài đăng hoặc trang nhất định hoặc một nhóm trong số chúng. Ví dụ: bạn có thể chỉ cần áp dụng một số cách điệu trên trang chủ của mình hoặc cho tất cả các trang danh mục danh mục đầu tư, bài đăng trên blog, sản phẩm, v.v. Do đó, bạn sẽ cần sửa đổi đoạn mã nêu trên để nó bao gồm một điều kiện nhất định trong đó lớp mong muốn được thêm vào. Để làm điều đó, bạn sẽ cần bao gồm một câu lệnh có điều kiện với một thẻ có điều kiện trong mã của hàm gọi lại của bạn

Do đó, một ví dụ khả thi về đoạn mã mà bạn phải tạo sẽ có dạng như sau

function name_of_the_function( $classes ) {
if ( condition-goes-here ) {
/*
Some code that assigns a new class
to the $classes[] variable.
*/
}
return $classes;
}
add_filter( 'body_class', 'name_of_the_function' );

Tất nhiên, khi xem xét một ví dụ như ví dụ này, có một số điều cần xem xét

Trước hết, ngoài câu lệnh if, bạn cũng có thể sử dụng câu lệnh if…else, câu lệnh if…elseif…else hoặc câu lệnh switch. Về phần điều kiện, bạn có thể sử dụng một hoặc nhiều thẻ điều kiện kết hợp với các toán tử logic phù hợp

Đối với mã được biểu thị bằng nhận xét trong câu lệnh if, nó phải gán tên lớp nội dung tùy chỉnh của bạn cho mảng $classes, nhưng nó có thể có các dòng mã bổ sung, tùy thuộc vào mức độ phức tạp của những gì bạn đang cố gắng đạt được

Cuối cùng, mặc dù tên của hàm gọi lại có thể ít liên quan hơn, nhưng cách tốt nhất là đặt tên cho hàm theo mục đích của mã mà nó chứa. Tất nhiên, khi làm như vậy, hãy đảm bảo thay thế cả hai trình giữ chỗ name_of_the_function mà chúng ta đã để lại ở trên để hàm gọi lại sẽ được nối đúng vào hook bộ lọc body_class

Đã nói rằng, chúng ta hãy đi sâu vào các đoạn trích còn lại mà chúng tôi đã chuẩn bị cho bài viết này. Mỗi đại diện cho một trường hợp sử dụng thích hợp của bộ lọc body_class, do đó, bạn nên xem lại phần giải thích cho mã để đạt được kết quả mong muốn hoặc nếu cần, hãy thay đổi một chút đoạn mã để phù hợp với trường hợp của bạn

• Lớp cơ thể dành riêng cho mẫu

Since the WordPress 4.7 update, you can create custom template files used for all post types, not only pages. This is why it has become increasingly easier to create a custom template file and edit your pages and posts similarly. But, when it comes to the styling of those pages and posts, you need to use .page-template- and .post-template- body classes in conjunction, as there isn’t a unified body class name.

Mặc dù đây chỉ là một sự bất tiện nhỏ đối với hầu hết người dùng WordPress, nhưng nó có thể được khắc phục bằng cách thêm một lớp tùy chỉnh vào cả trang và bài đăng đã bật một mẫu nhất định. Và, đó chính xác là những gì chúng ta đã làm trong ví dụ sau

Chính xác hơn, chúng tôi đã viết một hàm tùy chỉnh có tên qode_add_template_specific_body_class() và móc nó vào hook bộ lọc body_class. Trong hàm, chúng tôi đã bao gồm một câu lệnh điều kiện đơn giản để kiểm tra xem mẫu của trang hoặc bài đăng hiện tại có phải là mẫu được cung cấp bởi toàn bộ chiều rộng của tệp hay không. php, nằm trong thư mục của chủ đề hiện đang hoạt động của bạn

Tất nhiên, nếu bạn chọn sử dụng đoạn mã này, bạn sẽ cần thay thế toàn bộ chiều rộng. php với tên của mẫu tùy chỉnh hoặc đường dẫn tương đối của nó, nếu nó nằm trong thư mục con của chủ đề hiện đang hoạt động của bạn

function qode_add_template_specific_body_class( $classes ) {
if ( is_page_template( 'full-width.php' ) ) {
$classes[] = 'qode-full-width';
}
return $classes;
}
add_filter( 'body_class', 'qode_add_template_specific_body_class' );

Phải nói rằng, chúng tôi đã thêm một tên lớp CSS là qode-full-width vào danh sách tên lớp cơ thể cho các trang và bài đăng đã hoàn thành câu lệnh điều kiện đã đề cập trước đó

Đổi lại, điều này có nghĩa là bạn có thể sử dụng lớp CSS đã thêm để tạo kiểu cho tất cả các trang và bài đăng đã bật mẫu nói trên bằng cách sử dụng một bộ quy tắc CSS phù hợp

• lớp dành riêng cho CPT

Mặc dù các lớp nội dung cụ thể được thêm vào mọi loại bài đăng tùy chỉnh (CPT) theo mặc định, nhưng như đã đề cập trước đó, vẫn có những trường hợp có thể thêm các lớp mới. Một cách sử dụng khả thi mà chúng tôi nghĩ đến là khi bạn muốn áp dụng các kiểu dáng khác nhau cho các mục loại bài đăng tùy chỉnh cụ thể dựa trên các tác giả đã tạo ra chúng. Nhiệm vụ này khá dễ dàng trên các trang lưu trữ của tác giả, vì các tên lớp cơ thể dành riêng cho tác giả được thêm vào đó, nhưng khá khó nếu không. May mắn thay, điều này có thể được thay đổi bằng cách sử dụng đoạn trích mà chúng tôi đưa vào bên dưới

Trong đó, chúng tôi đã tạo một hàm gọi là qode_add_cpt_specific_body_class() và móc nó vào hook bộ lọc body_class, như đã đề cập trước đó. Đối với nội dung của hàm, nội dung của nó được đặt trong thẻ điều kiện is_singular(), thẻ này sẽ kiểm tra xem bài đăng hiện tại có sên bài đăng của mục danh mục đầu tư hay không. Như đã đề cập trước đây, đây là loại bài đăng tùy chỉnh được cung cấp bởi chủ đề Lekker mà chúng tôi đang sử dụng. Không cần phải nói, bạn sẽ cần phải thay thế phần danh mục đầu tư bằng sên của loại bài đăng tùy chỉnh của bạn

That said, the inner part of the code can be broken into twos. In the first part, we have added a body class name called “qode-portfolio-item”. In the second part, we have added the code concerning the author-specific body class. More precisely, using the get_the_author_meta() function we have gotten the author’s display name. Then, we have added a new class called author-, which has been properly sanitized using the sanitize_html_class() function by stripping any invalid characters.

Finally, as a precaution, in the case that the author’s name contains only invalid characters, we have set the author’s ID as the fallback. Meaning, if the author’s display name is invalid, the author- class will be added instead.

________số 8

Phải nói rằng, hai lớp được thêm vào có thể được nhìn thấy khi kiểm tra trang mục danh mục đầu tư bằng công cụ kiểm tra trình duyệt

Cuối cùng, để áp dụng kiểu dáng dành riêng cho tác giả cho các mục loại bài đăng tùy chỉnh của bạn (trong trường hợp của chúng tôi là các mục danh mục đầu tư), bạn sẽ cần sử dụng cả hai lớp CSS đã được hiển thị để tạo bộ chọn CSS chính xác. Trong trường hợp của chúng tôi, điều đó có nghĩa là sử dụng. qode-danh mục đầu tư-mục. tác giả-quản trị viên là bộ chọn CSS mà các quy tắc CSS được áp dụng

• lớp trường tùy chỉnh

Cuối cùng, trong một số trường hợp, bạn có thể muốn điều chỉnh kiểu dáng của các trang, bài đăng hoặc loại bài đăng tùy chỉnh cụ thể. Cách dễ nhất để làm như vậy là thêm một tên lớp cơ thể cụ thể vào bài đăng hoặc trang đó, sau đó viết mã CSS nhắm mục tiêu lớp đó. Bạn sẽ nhớ rằng điều này đã được kích hoạt bằng cách sử dụng hộp meta Lớp trong plugin Lớp cơ thể tùy chỉnh mà chúng tôi đã trình bày trước đây. Tuy nhiên, điều tương tự có thể được thực hiện bằng cách sử dụng phần Trường tùy chỉnh và đoạn mã sau

function qode_add_custom_field_body_class( $classes ) {
if ( is_single() || is_page() ) {
$value = get_post_meta( get_queried_object_id(), 'qode_body_class', true );
if ( ! empty( $value ) ) {
$body_classes = explode( ',', $value );
foreach ( $body_classes as $body_class ) {
$classes[] = str_replace( ' ', '', rtrim( $body_class ) );
}
}
}
return $classes;
}
add_filter( 'body_class', 'qode_add_custom_field_body_class' );

Nó đại diện cho một chức năng tùy chỉnh được gọi là qode_add_custom_field_body_class() được nối vào hook bộ lọc body_class. Phần chính của hàm được đặt trong ( is_single(). câu lệnh điều kiện is_page() , tôi. e. mã sẽ hoạt động miễn là một trong các thẻ điều kiện được đáp ứng

Vì thẻ điều kiện is_single() trả về true cho tất cả các bài đăng đơn lẻ, ngoại trừ các trang và tệp đính kèm, trong khi thẻ điều kiện is_page() chỉ đúng cho các trang đơn lẻ, điều đó có nghĩa là mã của chúng tôi sẽ chỉ được áp dụng cho các bài đăng và trang đơn lẻ, không bao gồm các tệp đính kèm. Điều đó nói rằng, mã được thực thi khi các điều kiện trước đó được đáp ứng dựa trên phần Trường tùy chỉnh, như đã đề cập ở trên

Trước tiên, chúng tôi đã lưu trữ giá trị thuộc về trường tùy chỉnh mà chúng tôi đã đặt tên là qode_body_class bằng cách sử dụng hàm get_post_meta() trong biến $value. Về mặt kỹ thuật, chúng ta có thể đã thêm biến $value trực tiếp vào mảng $classes[] tại thời điểm này, biến này sẽ chèn bất kỳ thứ gì bạn thêm vào phần trường tùy chỉnh dưới dạng một mục nhập số ít. Tuy nhiên, như đã thấy trong ví dụ trước, có những trường hợp bạn có thể cần thêm nhiều lớp

Vì lý do đó, chúng tôi đã điều chỉnh mã để nó cho phép bạn chèn bao nhiêu tên lớp CSS nội dung tùy ý, miễn là chúng được phân tách bằng dấu phẩy. Bạn có thể chèn chúng vào một trong các hình thức sau

tên-lớp-1, tên-lớp-2, tên-lớp-3,…

hoặc là

tên-lớp-1,tên-lớp-2,tên-lớp-3,...

i. e. có hoặc không có khoảng trắng ở cuối sau dấu phẩy. Được viết theo cách như vậy, mục nhập của bạn sẽ được phân tích cú pháp chính xác và được thêm vào biến $classes[] dưới dạng các tên lớp nội dung riêng biệt. Điều này kết thúc phần giải thích của đoạn mã. Tuy nhiên, vì đoạn mã này khó hơn một chút so với đoạn mã trước, nên có những điều bổ sung mà chúng tôi phải đề cập

Đầu tiên, mã phụ thuộc rất nhiều vào việc sử dụng phần Trường tùy chỉnh, vì vậy điều quan trọng là phải biết cách bật phần này. Nếu phần được bật theo mặc định nhưng bị ẩn thì bạn chỉ cần đánh dấu vào tùy chọn đúng để hiển thị. Đây có thể là trường hợp với các trang và bài đăng trên blog. Tuy nhiên, vì việc hiển thị phần Trường tùy chỉnh có thể thay đổi dựa trên màn hình chỉnh sửa bạn đang sử dụng, chúng tôi khuyên bạn nên xem lại bài viết của chúng tôi về cách giải quyết vấn đề trường tùy chỉnh không hiển thị để biết thêm thông tin

Mặt khác, nếu phần Trường tùy chỉnh không được bật cho các loại bài đăng tùy chỉnh được cung cấp bởi chủ đề hoặc plugin bên thứ ba của bạn, thì chúng tôi khuyên bạn nên tham khảo ý kiến ​​tác giả của họ về cách bật nó

Thứ hai, ngay cả sau khi kích hoạt nó, bạn phải hiểu cách sử dụng nó đúng cách. Để đạt được hiệu quả mong muốn, hãy mở một trang hoặc bài đăng và tìm phần Trường tùy chỉnh mà bạn đã bật trước đó. Ở phần trên cùng của phần, bạn sẽ có danh sách các trường tùy chỉnh và giá trị của chúng mà bạn đã thêm trước đó, trong khi ở phần dưới cùng, bạn sẽ có thể thêm trường tùy chỉnh mới. Tìm liên kết “Nhập mới” trong phần phụ Thêm trường tùy chỉnh mới và nhấp vào liên kết đó

Sau đó, nhập tên trường tùy chỉnh và (các) giá trị lớp tương ứng theo cách đã thảo luận ở trên. Không cần phải nói, bạn sẽ phải đặt tên cho trường tùy chỉnh giống với tên đã được sử dụng trong mã để mã hoạt động bình thường. Tất nhiên, điều này có nghĩa là nếu bạn muốn thay đổi tên trường tùy chỉnh, bạn sẽ phải thay đổi cả trong đoạn mã và trong phần Tên tương ứng

Sau khi thêm cả tên và giá trị của trường tùy chỉnh, hãy nhấp vào nút “Thêm trường tùy chỉnh” bên dưới

Như bạn có thể thấy từ ảnh chụp màn hình bên dưới, chúng tôi đã thêm hai lớp – new-class-1 và new-class-2, được phân tách bằng dấu phẩy và một khoảng trắng. Để đảm bảo chúng được lưu trữ đúng cách trong cơ sở dữ liệu, hãy đảm bảo nhấp vào nút “Cập nhật”, sau đó

Sau đó, các lớp này có thể được nhìn thấy khi kiểm tra trang hoặc bài đăng cụ thể mà chúng được thêm vào bằng cách sử dụng phần Trường tùy chỉnh

Do đó, bạn có thể sử dụng một trong hai hoặc thậm chí cả hai để tạo bộ chọn CSS tương ứng và cách điệu trang hoặc bài đăng của bạn cho phù hợp. Hơn nữa, bạn thậm chí có thể mở rộng điều này bằng cách sử dụng phần Trường tùy chỉnh trên các trang và bài đăng khác và chèn cùng một hoặc nhiều lớp tùy chỉnh

Do đó, bạn có thể tạo kiểu thống nhất cho bất kỳ bộ sưu tập trang và bài đăng nào dựa trên giá trị lớp và trường tùy chỉnh được chia sẻ, bất kể chúng có chia sẻ bất kỳ điểm tương đồng nào khác không, chẳng hạn như danh mục, thẻ hoặc phân loại tùy chỉnh khác. Do đó, nó sẽ làm cho khả năng tạo kiểu trang web chỉ bị hạn chế bởi lượng kiến ​​thức CSS mà bạn sở hữu. Với lưu ý đó, chúng tôi kết thúc bài viết

Suy nghĩ cuối cùng

Các lớp cơ thể WordPress có thể được sử dụng để áp dụng các điều chỉnh kiểu dáng cho các trang và bài đăng khác nhau. Trong bài viết này, chúng tôi đã đưa ra một cái nhìn tổng quan về những thứ đó có thể trông như thế nào và đưa ra các gợi ý về cách chúng có thể được sử dụng. Hơn nữa, chúng tôi đã xây dựng kỹ lưỡng các cách chung để mở rộng danh sách các lớp cơ thể và cung cấp một số ví dụ thích hợp để củng cố các luận điểm được đưa ra trong bài viết

Ngoài ra, chúng tôi đã đề cập đến nhiều khái niệm mã hóa WordPress quan trọng như móc WordPress, trường tùy chỉnh, thẻ điều kiện và thực tiễn đặt tên chức năng phù hợp, có thể có lợi cho bất kỳ người dùng WordPress trung cấp nào hoặc các nhà phát triển trẻ đầy tham vọng. Chúng tôi khuyên bạn nên đánh dấu trang bài viết này và sửa đổi nó, hoặc một số phần của nó, vào một ngày sau đó để nắm bắt đầy đủ tất cả các điểm chúng tôi đã đề cập

Làm cách nào để lấy lớp cơ thể trong php?

Lớp cơ thể trong WordPress là gì?

Làm thế nào tôi có thể thêm một lớp cơ thể?

Lớp cơ thể trong HTML là gì?