WordPress Body Class: Mẹo cho thiết kế theme

2 tuần ago, WordPress Themes, 3 Views

Giới thiệu về Body Class trong WordPress

Body class trong WordPress là một tính năng mạnh mẽ và linh hoạt, cho phép bạn thêm các lớp (class) CSS vào thẻ <body> của website. Điều này mở ra vô vàn khả năng tùy chỉnh thiết kế theme, dựa trên ngữ cảnh cụ thể của trang mà người dùng đang xem. Thay vì phải viết mã CSS phức tạp để xử lý các trường hợp khác nhau, bạn có thể tận dụng body class để nhắm mục tiêu các thành phần một cách chính xác và hiệu quả.

Ví dụ, bạn có thể sử dụng body class để thay đổi màu nền, bố cục hoặc thậm chí ẩn hiện các thành phần dựa trên:

Loại trang (trang chủ, trang bài viết, trang danh mục, trang tìm kiếm,…)
ID của bài viết hoặc trang cụ thể
Danh mục hoặc thẻ của bài viết
Trạng thái đăng nhập của người dùng
Và nhiều yếu tố khác!

Bằng cách sử dụng body class một cách thông minh, bạn có thể tạo ra một theme WordPress linh hoạt và dễ dàng tùy biến, giúp người dùng của bạn có thể tạo ra những website độc đáo và ấn tượng.

Cách WordPress Thêm Body Class Mặc Định

WordPress tự động thêm một số lớp CSS vào thẻ <body>, dựa trên ngữ cảnh hiện tại. Bạn có thể xem các lớp này bằng cách kiểm tra mã nguồn của trang web của bạn. Một số ví dụ phổ biến bao gồm:

home: Được thêm vào trang chủ.
blog: Được thêm vào trang hiển thị các bài viết mới nhất.
archive: Được thêm vào các trang lưu trữ (ví dụ: trang danh mục, trang thẻ).
single: Được thêm vào các trang bài viết đơn.
page: Được thêm vào các trang tĩnh.
search: Được thêm vào trang kết quả tìm kiếm.
error404: Được thêm vào trang lỗi 404.

Ngoài ra, WordPress còn thêm các lớp CSS dựa trên ID của bài viết/trang, danh mục, thẻ và các thông tin khác. Ví dụ:

postid-123: Lớp này được thêm vào trang bài viết có ID là 123.
category-uncategorized: Lớp này được thêm vào trang danh mục “Uncategorized”.
tag-wordpress: Lớp này được thêm vào trang thẻ “wordpress”.

Những lớp CSS mặc định này đã cung cấp một nền tảng tốt để bắt đầu tùy chỉnh theme của bạn. Tuy nhiên, bạn hoàn toàn có thể thêm các lớp CSS tùy chỉnh của riêng mình để tăng thêm sự linh hoạt.

Thêm Body Class Tùy Chỉnh bằng `functions.php`

Cách phổ biến nhất để thêm body class tùy chỉnh là sử dụng hàm body_class trong file functions.php của theme. Hàm này cho phép bạn lọc (filter) danh sách các lớp CSS trước khi chúng được thêm vào thẻ <body>.

Dưới đây là một ví dụ cơ bản:


function my_custom_body_class( $classes ) {
  // Thêm lớp CSS 'my-custom-class'
  $classes[] = 'my-custom-class';

  // Trả về mảng các lớp CSS đã được sửa đổi
  return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

Đoạn mã trên sẽ thêm lớp CSS my-custom-class vào tất cả các trang trên website của bạn. Tuy nhiên, bạn có thể sử dụng các câu lệnh điều kiện (if, elseif, else) để thêm các lớp CSS khác nhau dựa trên ngữ cảnh.

Ví dụ, bạn có thể thêm một lớp CSS chỉ vào trang chủ:


function my_custom_body_class( $classes ) {
  if ( is_front_page() ) {
    $classes[] = 'my-homepage-class';
  }

  return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

Hoặc thêm một lớp CSS dựa trên ID của bài viết:


function my_custom_body_class( $classes ) {
  if ( is_single( 123 ) ) { // Kiểm tra xem có phải bài viết có ID là 123 không
    $classes[] = 'my-special-post';
  }

  return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

Các Ví Dụ Ứng Dụng Body Class Trong Thiết Kế Theme

Body class có thể được sử dụng trong nhiều trường hợp khác nhau để tùy chỉnh thiết kế theme của bạn. Dưới đây là một số ví dụ:

1. Thay đổi màu nền dựa trên danh mục

Giả sử bạn muốn thay đổi màu nền của trang bài viết dựa trên danh mục của bài viết đó. Bạn có thể sử dụng đoạn mã sau:


function my_custom_body_class( $classes ) {
  if ( is_single() ) {
    $categories = get_the_category();
    if ( ! empty( $categories ) ) {
      $first_category = $categories[0];
      $classes[] = 'category-' . $first_category->slug;
    }
  }

  return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

Đoạn mã này sẽ thêm một lớp CSS có dạng category-ten-danh-muc vào thẻ <body>. Sau đó, bạn có thể sử dụng CSS để thay đổi màu nền cho từng danh mục:


.category-tin-tuc {
  background-color: #f0f0f0;
}

.category-cong-nghe {
  background-color: #e0e0e0;
}

2. Hiển thị các thành phần khác nhau dựa trên trạng thái đăng nhập

Bạn có thể sử dụng body class để hiển thị các menu hoặc widget khác nhau cho người dùng đã đăng nhập và chưa đăng nhập:


function my_custom_body_class( $classes ) {
  if ( is_user_logged_in() ) {
    $classes[] = 'logged-in';
  } else {
    $classes[] = 'logged-out';
  }

  return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

Sau đó, bạn có thể sử dụng CSS để ẩn hiện các thành phần:


.logged-in .menu-logged-out {
  display: none;
}

.logged-out .menu-logged-in {
  display: none;
}

3. Tùy chỉnh bố cục trang dựa trên template

Bạn có thể tạo các template trang khác nhau và gán các body class khác nhau cho mỗi template:


// Trong file template của bạn (ví dụ: template-contact.php)
<?php
/*
Template Name: Contact Page
*/

get_header();
?>

<body <?php body_class( 'template-contact' ); ?>>
  <!-- Nội dung trang liên hệ -->
</body>

<?php get_footer(); ?>

Sau đó, bạn có thể sử dụng CSS để tùy chỉnh bố cục cho template trang liên hệ:


.template-contact .main-content {
  width: 80%;
  margin: 0 auto;
}

Lời Khuyên Khi Sử Dụng Body Class

Để sử dụng body class một cách hiệu quả, hãy ghi nhớ những lời khuyên sau:

Đặt tên lớp CSS rõ ràng và dễ hiểu: Điều này sẽ giúp bạn dễ dàng quản lý và bảo trì mã CSS của mình.
Sử dụng các tiền tố (prefix) cho các lớp CSS tùy chỉnh: Điều này giúp tránh xung đột với các lớp CSS mặc định của WordPress hoặc các plugin khác. Ví dụ: bạn có thể sử dụng tiền tố mytheme-.
Kiểm tra kỹ lưỡng các lớp CSS được thêm vào: Đảm bảo rằng các lớp CSS được thêm vào đúng ngữ cảnh và không gây ra các lỗi không mong muốn.
Sử dụng công cụ phát triển của trình duyệt để kiểm tra thẻ <body>: Điều này giúp bạn xem các lớp CSS đã được thêm vào và dễ dàng gỡ lỗi.

Kết Luận

Body class là một công cụ vô cùng hữu ích cho việc tùy chỉnh thiết kế theme WordPress. Bằng cách tận dụng các lớp CSS mặc định và thêm các lớp CSS tùy chỉnh của riêng mình, bạn có thể tạo ra những website độc đáo, linh hoạt và phù hợp với mọi nhu cầu. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để bắt đầu sử dụng body class một cách hiệu quả trong thiết kế theme của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa