Bạn có muốn thêm các lớp chẵn và lẻ vào các bài báo về chủ đề của bạn blog WordPress ? Thêm một lớp sẽ cho phép bạn hiển thị một phong cách cụ thể cho mỗi bài viết.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách hiển thị các lớp chẵn hoặc lẻ trên WordPress.
Tại sao thêm lớp? cặp "Hoặc" Odd »Về chủ đề của bạn blog WordPress ?
Nhiều Chủ đề WordPress sử dụng một lớp cũ hoặc cùng một lớp cho các bình luận WordPress. Nó cho phép người dùng xem nơi một bình luận kết thúc và một bình luận khác bắt đầu.
Tương tự như vậy, bạn có thể sử dụng kỹ thuật này cho các bài báo của mình. Nó trông đẹp mắt về mặt thẩm mỹ khi cho phép người dùng quét nhanh các trang có dung lượng lớn. Điều này đặc biệt hữu ích cho trang chủ của các trang báo hoặc tạp chí.
Như vậy, chúng ta sẽ xem cách thêm một lớp vào các bài viết của bạn. blog WordPress.
Làm thế nào để thêm một lớp học thậm chí / lẻ trên WordPress
WordPress tạo các lớp CSS mặc định và thêm chúng vào các bài viết khác nhau trên trang web của bạn một cách nhanh chóng. Các lớp CSS này giúp các nhà phát triển plugin và chủ đề thêm các kiểu riêng cho mỗi bài viết khác nhau.
WordPress cũng cung cấp một chức năng gọi là " Post_class Được sử dụng bởi các nhà phát triển chủ đề để thêm các lớp vào bài viết.
Chức năng Post_class Cũng là một bộ lọc, có nghĩa là bạn có thể thao tác với. Đó chính xác là những gì chúng ta sẽ làm ở đây.
Chỉ cần thêm mã này vào tệp functions.php của bạn. theme WordPress.
function oddeven_post_class ($ classes) {toàn cầu $ current_class; $ classes [] = $ current_class; $ current_class = ($ current_class == 'lẻ')? 'even': 'lẻ'; trả về $ lớp học; } add_filter ('post_class', 'oddeven_post_class'); $ current_class toàn cầu; $ current_class = 'lẻ';
Chức năng này chỉ cần thêm một lớp học cho các mục lẻ và thậm chí.
Bạn sẽ tìm thấy các lớp chẵn và lẻ trong mã nguồn của trang web của bạn. Chỉ cần đưa chuột đến tiêu đề của một bài báo, sau đó nhấp chuột phải để Kiểm tra mục.
Bây giờ bạn đã thêm các lớp chẵn và lẻ vào bài viết của mình. Bước tiếp theo là tạo cho chúng một phong cách riêng với CSS. Bạn có thể thêm mã CSS tùy chỉnh của mình vào chủ đề con của mình hoặc bằng cách sử dụng một plugin CSS đơn giản.
Dưới đây là một ví dụ về mã CSS mà bạn có thể sử dụng làm điểm bắt đầu:
ngay cả {background: #f0f8ff; } .odd {background: #f4f4fb; }
Đây là cách kết quả có thể là:
Bạn sẽ cần thực hành một chút để đạt được kết quả tốt, nhưng đối với điều này, bạn sẽ cần phải thành thạo CSS hoặc chỉ sử dụng một công cụ như CSS Hero.
Nó đơn giản như thế. Tôi hy vọng hướng dẫn này sẽ giúp ích cho bạn. Hãy đặt câu hỏi cho chúng tôi hoặc chia sẻ hướng dẫn này với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.