Thêm page slug vào body class WordPress

Thêm Page Slug vào Body Class WordPress: Hướng Dẫn Chi Tiết

Trong quá trình phát triển giao diện WordPress, việc tùy biến hiển thị trang web dựa trên từng trang cụ thể là vô cùng quan trọng. Một trong những kỹ thuật hữu ích để đạt được điều này là thêm page slug (đường dẫn rút gọn của trang) vào thuộc tính class của thẻ <body>. Điều này cho phép bạn áp dụng các kiểu CSS hoặc JavaScript riêng biệt cho từng trang, mang lại sự linh hoạt và chuyên nghiệp cho website của bạn.

Tại Sao Cần Thêm Page Slug vào Body Class?

Việc thêm page slug vào body class mang lại nhiều lợi ích thiết thực:

Tùy biến CSS dễ dàng: Dễ dàng tạo các kiểu CSS riêng cho từng trang mà không cần phải sử dụng CSS specificity phức tạp hoặc các bộ chọn (selectors) rườm rà.
Điều khiển JavaScript chính xác: Cho phép bạn chỉ chạy các đoạn JavaScript cụ thể trên những trang nhất định, giúp tối ưu hóa hiệu suất website và tránh xung đột.
Cải thiện khả năng bảo trì: Giúp code dễ đọc và dễ bảo trì hơn, vì bạn có thể dễ dàng xác định kiểu dáng và chức năng của từng trang dựa trên tên class.
Tăng cường trải nghiệm người dùng: Tạo ra trải nghiệm người dùng độc đáo và phù hợp cho từng trang, giúp người dùng dễ dàng điều hướng và tương tác với website.

Cách Thêm Page Slug vào Body Class

Có nhiều cách để thêm page slug vào body class trong WordPress. Dưới đây là hai phương pháp phổ biến nhất:

1. Sử Dụng Hàm `body_class()` trong `functions.php`

Đây là phương pháp được khuyến khích vì nó an toàn và tuân thủ các tiêu chuẩn WordPress. Bạn sẽ cần chỉnh sửa file functions.php của theme đang sử dụng.

Truy cập file functions.php: Bạn có thể tìm thấy file này trong thư mục theme của mình. Ví dụ: /wp-content/themes/ten-theme-cua-ban/functions.php. Bạn có thể sử dụng trình quản lý file của hosting hoặc FTP để truy cập và chỉnh sửa file này.
Thêm đoạn code sau vào file functions.php:


    <?php
    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' );
    ?>

Giải thích đoạn code:

add_slug_body_class( $classes ): Đây là một hàm tùy chỉnh nhận một mảng các class đã có sẵn trong <body>.
global $post;: Khai báo biến $post là biến toàn cục để có thể truy cập thông tin về bài viết/trang hiện tại.
if ( isset( $post ) ) { ... }: Kiểm tra xem biến $post có tồn tại hay không. Điều này quan trọng để tránh lỗi trên các trang không phải là bài viết hoặc trang (ví dụ: trang chủ).
$classes[] = $post->post_type . '-' . $post->post_name;: Thêm một class mới vào mảng $classes. Class này được tạo thành từ kiểu bài viết (post_type) và tên đường dẫn rút gọn (post_name) của trang, được phân tách bằng dấu gạch ngang. Ví dụ, với một trang có slug là “gioi-thieu” và thuộc kiểu “page”, class sẽ là “page-gioi-thieu”.
return $classes;: Trả về mảng $classes đã được cập nhật.
add_filter( 'body_class', 'add_slug_body_class' );: Sử dụng hàm add_filter() để “móc” hàm add_slug_body_class() vào bộ lọc body_class của WordPress. Điều này đảm bảo rằng hàm của bạn sẽ được thực thi mỗi khi WordPress tạo ra thuộc tính class cho thẻ <body>.

Lưu file functions.php: Sau khi thêm đoạn code trên, hãy lưu lại file functions.php.
Kiểm tra kết quả: Truy cập vào trang web của bạn và xem source code của trang (nhấn chuột phải và chọn “View Page Source” hoặc tương tự). Bạn sẽ thấy một class mới được thêm vào thẻ <body>, chứa page slug của trang đó.

2. Sử Dụng Plugin

Nếu bạn không muốn chỉnh sửa file functions.php, bạn có thể sử dụng một plugin để thêm page slug vào body class. Có nhiều plugin miễn phí và trả phí có thể thực hiện việc này.

Tìm và cài đặt plugin: Truy cập vào trang quản trị WordPress của bạn, chọn “Plugins” -> “Add New”. Tìm kiếm các plugin như “Body Class”, “Custom Body Class”, hoặc “Add Slug to Body Class”. Chọn một plugin phù hợp và cài đặt nó.
Kích hoạt plugin: Sau khi cài đặt, hãy kích hoạt plugin.
Cấu hình plugin (nếu cần): Một số plugin có thể yêu cầu bạn cấu hình một vài tùy chọn. Đọc hướng dẫn của plugin để biết cách cấu hình nó một cách chính xác.
Kiểm tra kết quả: Truy cập vào trang web của bạn và xem source code của trang. Bạn sẽ thấy một class mới được thêm vào thẻ <body>, chứa page slug của trang đó.

Ví dụ Sử Dụng Page Slug trong CSS

Sau khi đã thêm page slug vào body class, bạn có thể sử dụng nó để tạo các kiểu CSS riêng cho từng trang. Ví dụ, nếu bạn có một trang với slug là “lien-he”, bạn có thể thêm đoạn CSS sau vào file style.css của theme:


    .page-lien-he {
      background-color: #f0f0f0;
    }

    .page-lien-he h1 {
      color: #007bff;
    }

Đoạn CSS này sẽ thay đổi màu nền và màu chữ tiêu đề trên trang “lien-he”. Bạn có thể tùy chỉnh các thuộc tính CSS khác để tạo ra giao diện độc đáo cho từng trang.

Ví dụ Sử Dụng Page Slug trong JavaScript

Tương tự như CSS, bạn cũng có thể sử dụng page slug để chỉ chạy các đoạn JavaScript cụ thể trên những trang nhất định. Ví dụ, bạn có thể sử dụng đoạn code JavaScript sau:


    document.addEventListener('DOMContentLoaded', function() {
      if (document.body.classList.contains('page-gioi-thieu')) {
        // Thực hiện các hành động JavaScript cụ thể cho trang "gioi-thieu"
        console.log('Đây là trang giới thiệu!');
      }
    });

Đoạn code này sẽ kiểm tra xem thẻ <body> có chứa class “page-gioi-thieu” hay không. Nếu có, nó sẽ thực hiện các hành động JavaScript cụ thể cho trang “gioi-thieu”.

Lưu Ý Quan Trọng

Sao lưu file functions.php: Trước khi chỉnh sửa file functions.php, hãy sao lưu nó để đề phòng trường hợp xảy ra lỗi.
Kiểm tra tính tương thích: Đảm bảo rằng plugin bạn sử dụng tương thích với phiên bản WordPress của bạn.
Tối ưu hóa hiệu suất: Tránh thêm quá nhiều class vào body class, vì nó có thể ảnh hưởng đến hiệu suất website.
Sử dụng công cụ phát triển trình duyệt: Sử dụng công cụ phát triển trình duyệt (Developer Tools) để kiểm tra và gỡ lỗi CSS và JavaScript.

Kết Luận

Việc thêm page slug vào body class là một kỹ thuật đơn giản nhưng vô cùng hữu ích để tùy biến giao diện WordPress của bạn. Bằng cách áp dụng các kiểu CSS và JavaScript riêng biệt cho từng trang, bạn có thể tạo ra trải nghiệm người dùng độc đáo và chuyên nghiệp. Hãy thử áp dụng các phương pháp được trình bày trong bài viết này để cải thiện website của bạn ngay hôm nay.

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

Thêm page slug vào body class WordPress