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

>

Bây giờ, hãy thêm lớp nội dung tùy chỉnh của bạn làm đối số cho hàm 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

>

Thêm lớp nội dung vào mẫu trang một cách có điều kiện

Bạn có thể cần thêm lớp nội dung dựa trên tên mẫu khi tạo mẫu trang tùy chỉnh

Ví dụ: trên trang web của chúng tôi, chúng tôi cần thêm một lớp tùy chỉnh vào mẫu trang

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

3 mà chúng tôi đã tạo cho trang nhật ký thay đổi của mình

Để thêm lớp tùy chỉnh vào mẫu của chúng tôi, chúng tôi đã sử dụng chức năng này

________số 8

Hàm ở trên sẽ chỉ thêm lớp nội dung tùy chỉnh vào các trang bằng tên mẫu cụ thể

Đảm bảo thay thế

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

4 bằng tên mẫu của bạn

Thêm lớp vào một mục menu

Thêm một lớp vào mục menu WordPress dễ dàng hơn bạn nghĩ vì bạn có thể làm điều đó mà không cần sử dụng bất kỳ plugin hoặc chức năng nào

Hơn nữa, WordPress cho phép chúng tôi thêm một lớp mục menu theo mặc định, nhưng tùy chọn này bị ẩn

Để thêm một lớp vào bất kỳ liên kết menu WordPress nào, trước tiên chúng tôi sẽ bật tùy chọn đó

Đầu tiên, bên trong bảng điều khiển WordPress của bạn, điều hướng đến Giao diện -> Menu

Sau đó, nhấp vào Tùy chọn màn hình ở góc trên cùng bên phải và chọn hộp Lớp học CSS

Thứ hai, nhấp vào mục menu mà bạn muốn thêm một lớp

Bạn sẽ thấy tùy chọn Lớp CSS mới nơi bạn sẽ cần nhập lớp mong muốn của mình

Thứ ba, lưu menu, truy cập lại trang web của bạn sau khi thêm lớp và kiểm tra thành phần menu để đảm bảo khóa học đã được thêm thành công

Thêm một lớp vào một Widget

Để thêm một lớp vào tiện ích WordPress, chúng tôi sẽ sử dụng một plugin đơn giản cho phép chúng tôi làm điều đó

Do đó, hãy điều hướng đến Plugins -> Add New, tìm kiếm và cài đặt và tìm kiếm Widget CSS Classes

Khi bạn kích hoạt plugin, hãy điều hướng đến Giao diện -> Tiện ích và mở rộng tiện ích bạn muốn cung cấp cho một lớp

Bạn có thể thêm một lớp vào thẻ body không?

Làm cách nào để thêm lớp vào thẻ body bằng jQuery?

Một đối tượng trong WordPress là gì?