Làm cách nào để thêm một lớp vào nội dung wordpress?

Các lớp WordPress là cách dễ nhất để tạo kiểu hoặc nhắm mục tiêu một trang, bài đăng hoặc thành phần cụ thể trên trang web của chúng tôi

Khi làm việc với WordPress, có khả năng cao là bạn sẽ cần biết cách thêm một lớp tùy chỉnh vào các phần khác nhau của trang web của mình vào lúc này hay lúc khác

Bởi vì chúng tôi thường sử dụng các quy tắc CSS để tạo kiểu cho trang web của mình, nên sẽ rất hữu ích khi biết cách thêm một lớp vào các phần tử khác nhau

Hầu hết các chủ đề WordPress thêm các lớp khác nhau vào các trang, bài đăng hoặc mục menu theo mặc định. Tuy nhiên, đôi khi chúng tôi thấy chưa đủ, và chúng tôi muốn bổ sung thêm các lớp học của mình

Bài viết này sẽ hướng dẫn bạn cách thêm body class trong WordPress có hoặc không có plugin

Tại sao thêm một lớp cơ thể?

Khi xây dựng một trang web, chúng ta cần sử dụng các lớp để nhóm nhiều trang lại để tạo kiểu cho chúng giống nhau

Chúng tôi có thể liên kết nhiều trang hoặc bài đăng theo ID của họ với các quy tắc CSS. Tuy nhiên, nó không thông minh vì hai lý do chính

1. ID trang không khớp với môi trường địa phương và sản xuất
2. Quy tắc CSS quá dài

.page-id-2, .page-id-3, .page-id-4 {
    background-color: grey;
}

Sẽ hợp lý hơn nếu cung cấp cho tất cả các trang cùng một loại và nhắm mục tiêu chúng theo cách đó. Hơn nữa, nó cũng làm cho việc thêm nhiều trang trong tương lai trở nên đơn giản hơn

Cách thêm một lớp cơ thể trong WordPress

Có một số cách để thêm body class trong WordPress và tôi sẽ chỉ cho bạn cả hai cách trong bài viết này. Cách đầu tiên là sử dụng plugin và cách thứ hai là mã hóa cứng nó vào tệp mẫu

Trước tiên hãy bắt đầu bằng cách sử dụng plugin

Phương pháp số 1. Thêm một lớp cơ thể với một plugin

Từ bảng điều khiển WordPress của bạn, điều hướng đến Plugin -> Thêm mới, tìm kiếm và cài đặt plugin Custom Body Class

Sau khi được kích hoạt, hãy chỉnh sửa bất kỳ trang hoặc bài đăng nào mà bạn muốn thêm lớp học vào đó

Sau đó, nhấp vào tùy chọn mới được gọi là lớp trang hoặc đăng lớp

Nhập lớp mong muốn của bạn và cập nhật trang

Sau khi cập nhật các thay đổi, hãy truy cập lại trang hoặc bài đăng của bạn và kiểm tra trang đó để đảm bảo lớp mới đã được thêm thành công

Sử dụng plugin là cách đơn giản và dễ hiểu nhất, do đó, được khuyến nghị. Tuy nhiên, nếu bạn muốn thêm một lớp cơ thể bằng một hàm, hãy đọc phần bên dưới

Phương pháp #2. Thêm một lớp cơ thể bằng một hàm

Ngoài ra, bạn có thể thêm một lớp cơ thể vào bất kỳ trang, bài đăng hoặc loại bài đăng tùy chỉnh nào của WordPress bằng cách sử dụng một chức năng thay vì plugin

Chúng tôi khuyên bạn nên sử dụng các chức năng bên dưới bên trong tệp

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

0 của chủ đề con hoặc plugin tùy chỉnh

Mẹo. vui lòng sao lưu trang web của bạn trước khi chỉnh sửa các tệp cốt lõi

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

Đoạn mã trên sẽ thêm một lớp tùy chỉnh ['ví dụ'] vào ID trang 8 và ID trang 10

Đảm bảo thay đổi số ID của các trang trong mã ở trên thành ID trang bạn muốn. Vui lòng đọc bài viết của chúng tôi về cách tìm bất kỳ trang hoặc số ID bài đăng nào

Phương pháp #3. Thêm một lớp cơ thể bên trong một mẫu

Một cách tuyệt vời khác để thêm một hoặc nhiều lớp vào thẻ

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

1 của bạn là chuyển các lớp tùy chỉnh vào chính thẻ

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

1

Trong hầu hết các chủ đề WordPress, bạn có thể tìm thấy thẻ mở đầu

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

1 bên trong tệp

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

0

Một lần nữa, chỉnh sửa các tệp chủ đề con sẽ tốt hơn để tránh mất các thay đổi trong bản cập nhật chủ đề tiếp theo

Điều hướng đến Giao diện -> Trình chỉnh sửa chủ đề và nhấp vào tệp

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

0 từ danh sách tệp ở bên phải

Ở đó, tìm kiếm thẻ mở đầu

add_filter[ 'body_class', 'pfwp_add_custom_class' ];
function pfwp_add_custom_class[ $classes ] {
    if [ is_page[[8, 10]] ] {
        $classes[] = 'example';
    }
    return $classes;
}

1. Trong hầu hết các trường hợp, nó sẽ giống như vậy

>

Để thêm nhiều lớp cơ thể, hãy sử dụng một mảng bên trong hàm như vậy