Trong suốt trải nghiệm sử dụng WordPress, chúng tôi đã thấy rằng các nhà thiết kế chủ đề thường nghĩ quá nhiều về một chức năng nhất định. Họ đang tìm kiếm các bộ lọc và móc nối WordPress điên rồ để hoàn thành nhiệm vụ khi tất cả những gì họ cần là một CSS đơn giản. WordPress theo mặc định tạo ra nhiều lớp CSS. (Bảng tính gian lận CSS CSS). Một trong những lớp CSS này là các kiểu lớp cơ thể. Trong bài viết này, chúng tôi sẽ giải thích WordPress body class 101 và chia sẻ một số mẹo và thủ thuật hữu ích cho những người bắt đầu thiết kế chủ đề.
Lớp cơ thể WordPress là gì?
Body Class (body_group) là một chức năng WordPress cung cấp cho các thành phần cơ thể các lớp khác nhau, vì vậy các tác giả chủ đề có thể thiết kế trang web của họ một cách hiệu quả bằng CSS. Thẻ body HTML chủ yếu xuất hiện trong tệp header.php của bạn được tải trên mỗi trang. Khi mã hóa một chủ đề, bạn có thể đính kèm hàm body_group vào thành phần cơ thể của mình như sau:
>
Bằng cách thêm yếu tố nhỏ này, bạn có thể linh hoạt dễ dàng sửa đổi giao diện của từng trang bằng CSS. Tùy thuộc vào loại trang đang được tải, WordPress sẽ tự động thêm lớp thích hợp. Ví dụ: nếu bạn đang ở trên một trang lưu trữ, WordPress sẽ tự động thêm lớp lưu trữ vào thành phần cơ thể nếu bạn chọn sử dụng nó. Nó làm điều này cho hầu hết các trang. Dưới đây là một số ví dụ về các lớp phổ biến mà WordPress có thể thêm:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
Như bạn có thể thấy, có sẵn một nguồn tài nguyên mạnh mẽ như vậy, bạn hoàn toàn có thể tùy chỉnh trang WordPress của mình chỉ bằng CSS. Bạn có thể tùy chỉnh các trang hồ sơ tác giả cụ thể, các tệp dựa trên ngày, v.v. Vì vậy, làm thế nào và khi nào bạn sẽ sử dụng này?
Cách sử dụng WordPress Body Class
Trong hầu hết các trường hợp, lớp cơ thể WordPress là giải pháp đơn giản mà các nhà thiết kế chủ đề thường bỏ qua. Vâng, điều này cũng bao gồm chúng tôi. Khoảng một năm trước, chúng tôi cần thiết kế một mục menu WordPress chỉ có trên một trang cụ thể. Chúng tôi quyết định đi sâu vào tìm bộ lọc để thêm một lớp điều hướng đặc biệt vào các mục menu sẽ được thêm bằng cách sử dụng câu lệnh có điều kiện. Ví dụ: nếu là một trang đơn, hãy thêm lớp “Blog” vào các mục menu. Sau khi dành toàn bộ thời gian để giải mã tất cả những điều đó và viết một bài về nó, một trong những người dùng của chúng tôi đã chỉ ra rằng chúng tôi có thể dễ dàng thực hiện nó với lớp cơ thể hiện có như thế này:
.single #navigation .leftmenublog div{display: inline-block !important;}Lưu ý: cách bạn sử dụng lớp cơ thể .single được thêm vào trên tất cả các trang bài đăng riêng lẻ.
Chàng trai, chúng ta không cảm thấy ngu ngốc sau đó sao? Kể từ đó, chúng tôi đã ghi chú để xem liệu mọi thứ có thể được thực hiện với lớp cơ thể trước khi đào sâu hơn không.
Để cho bạn một ví dụ khác. Khi một người dùng tiếp cận chúng tôi yêu cầu cách thay đổi hình ảnh logo trên trang web của họ dựa trên trang danh mục. Hầu hết các thiết kế chủ đề, bao gồm cả của bạn, đã tải logo bằng CSS (#header .logo). Chúng tôi đề xuất cách sử dụng lớp cơ thể .c Category-slug để thay đổi logo của bạn như thế này:
.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}
.category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}
Nhà thiết kế chủ đề mới này đã có cùng thời điểm ah-hah chúng ta có. Hy vọng rằng, bây giờ bạn đang học cách bạn có thể sử dụng lớp cơ thể trong các thiết kế chủ đề của mình. Nhưng chờ đã, điều này thậm chí còn mạnh mẽ hơn bởi vì có một cách để thêm các lớp cơ thể tùy chỉnh bằng bộ lọc. Chúng ta hãy xem làm thế nào để làm điều đó.
Làm thế nào để thêm các lớp cơ thể tùy chỉnh
WordPress có một bộ lọc mà bạn có thể sử dụng để thêm các lớp cơ thể tùy chỉnh khi cần. Chúng tôi sẽ chỉ cho bạn cách thêm một lớp cơ thể bằng bộ lọc trước khi hiển thị cho bạn kịch bản trường hợp sử dụng cụ thể để mọi người có thể ở trên cùng một trang.
Vì các lớp cơ thể là chủ đề cụ thể, bạn sẽ cần phải viết một hàm tùy chỉnh trong tệp tin.php. Như thế này:
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'test-class-name';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
Mã ở trên sẽ thêm một lớp “tên lớp kiểm tra” vào thẻ body trên mỗi trang của trang web của bạn. Điều đó không tệ lắm phải không? Sức mạnh thực sự của chức năng này là trong các nhãn có điều kiện. Bạn có thể yêu cầu thêm lớp XYZ chỉ trên các trang riêng lẻ, v.v. Hãy lấy ví dụ này và áp dụng nó vào kịch bản trường hợp sử dụng thực tế.
Thêm lớp thể loại vào các trang bài cá nhân
Giả sử bạn muốn tùy chỉnh các trang bài đăng riêng lẻ cho từng danh mục. Tùy thuộc vào loại tùy chỉnh, bạn có thể sử dụng các lớp cơ thể cho nó. Để đơn giản, giả sử bạn muốn thay đổi màu nền của trang dựa trên danh mục của từng bài đăng. Bạn có thể làm điều này bằng cách thêm các lớp thể loại vào chế độ xem trang một bài đăng của bạn. Dán chức năng sau vào tệp tin.php của chủ đề:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
Đoạn mã trên sẽ thêm lớp thể loại vào lớp cơ thể của bạn cho các trang bài đăng đơn. Sau đó, bạn có thể sử dụng các lớp css để thiết kế nó theo ý muốn.
Thêm sên trang trong lớp cơ thể của các chủ đề WordPress của bạn
Dán đoạn mã sau vào tệp tin.php của chủ đề:
//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );
Đọc bài viết của chúng tôi về con sên trong trang lớp cơ thể sẽ giải thích lý do tại sao chúng ta cần điều này.
Phát hiện trình duyệt và các lớp cơ thể dành riêng cho trình duyệt
Đôi khi bạn có thể cần phải có các kiểu CSS đặc biệt để mọi thứ hoạt động chính xác trong một số trình duyệt nhất định (Sugerencia: Internet Explorer). Chà, Nathan Rice đã đề xuất một giải pháp rất thú vị là thêm các lớp cụ thể của trình duyệt vào lớp cơ thể dựa trên trình duyệt mà người dùng truy cập trang web.
Tất cả bạn phải làm là dán đoạn mã sau vào tệp tin.php.
Sau đó, bạn có thể sử dụng các lớp như:
.ie .navigation {some item goes here}Nếu đó là một vấn đề nhỏ về phần lề hoặc phần đệm, đây là cách khắc phục khá nhanh.
Nhiều trường hợp sử dụng:
Chúng tôi có thể liệt kê nhiều trường hợp sử dụng hơn, nhưng chúng tôi sẽ không, nếu không bài viết này sẽ vượt khỏi tầm kiểm soát. Mục tiêu chính là giúp các nhà phát triển các chủ đề mới hiểu được các khái niệm cơ bản của lớp cơ thể WordPress và các lợi thế của nó. Trường hợp sử dụng được giới hạn trong trí tưởng tượng của bạn. Chúng tôi đã thấy các nhà phát triển chủ đề kinh doanh (Genesis) sử dụng các lớp cơ thể để cung cấp các tùy chọn thiết kế khác nhau. Ví dụ: Bố cục toàn trang, Nội dung thanh bên, Thanh bên nội dung, v.v. Bằng cách đó, người dùng có thể dễ dàng thay đổi thiết kế trang của họ mà không phải lo lắng về các vấn đề về ngoại hình vì nó đã được sửa bằng CSS.0
Chúng tôi đã thấy một số nhà phát triển thêm các yêu cầu HTTP để tải các tệp CSS cho các lược đồ màu khác nhau mà họ cung cấp. Trong nhiều trường hợp, những thay đổi cũng rất nhỏ. Không có điểm sạc 3 tờ phong cách khi công việc có thể được thực hiện. Chỉ cần sử dụng lớp cơ thể cho điều đó.
Hy vọng bài viết này đã hữu ích cho bạn. Chúng tôi sẽ rất vui mừng khi nghe những suy nghĩ của bạn về Lớp cơ thể và cách bạn đã sử dụng nó trong quá khứ hoặc dự định thực hiện trong tương lai.
