Cách thêm page slug vào body class đơn giản, chi tiết

Lượt xem
Home

Bạn cần cách để thêm một page slug vào body class của theme? Việc này sẽ giúp tùy chỉnh một cách linh hoạt mà không gặp rắc rối. Bạn có thể dễ dàng thay đổi màu sắc, phông chữ và các yếu tố khác dựa trên từng trang cụ thể. Trong bài viết này, Vietnix sẽ chỉ cho bạn cách thêm page slug vào body class của theme WordPress, giúp tạo ra một liên kết chặt chẽ hơn giữa các phần tử trang và giao diện.

Tại sao cần thêm page slug vào body class trong theme?

Thêm page slug vào body class của theme WordPress sẽ giúp bạn tùy chỉnh từng trang cụ thể một cách dễ dàng và chính xác hơn.

Tại sao cần thêm Page Slug vào Body Class
Tại sao cần thêm page slug vào body class

Bằng cách này, bạn có thể điều chỉnh màu sắc, phông chữ và các yếu tố khác cho từng trang riêng biệt. Ngoài ra, bạn cũng có thể thực hiện các tùy chỉnh khác như thay đổi font chữ hay làm nổi bật các phần tử trên landing page.

Cách thêm page slug vào body class

Để thêm URL của trang vào body class của theme WordPress, bạn có thể nhập code sau vào file functions.php của theme.

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

Để thêm code vào body class của theme một cách đơn giản, bạn có thể sử dụng một plugin WordPress như WPCode thay vì chỉnh sửa trực tiếp các file của theme, điều này giúp tránh rủi ro và tiết kiệm thời gian.

Plugin WPCode
Plugin WPCode

Với WPCode, bạn có thể dễ dàng thêm code vào trang web của mình chỉ trong vài phút mà không gặp lỗi. Plugin này cũng đảm bảo rằng code sẽ không bị xóa khi cập nhật hoặc thay đổi theme. Để bắt đầu, bạn chỉ cần cài đặt và kích hoạt WPCode plugin miễn phí. Nếu bạn chưa biết cách cài đặt plugin, hãy xem qua video sau của Vietnix

Hướng dẫn cài đặt plugin WordPress

Sau đó, bạn có thể quản lý và thêm các đoạn code tùy chỉnh thông qua trình quản lý “Code Snippets” trong admin area WordPress. WPCode cũng cung cấp thư viện code mẫu để bạn tùy chỉnh trang web WordPress một cách nâng cao mà không cần kiến thức lập trình. Để thêm đoạn code tùy chỉnh, hãy nhấp vào button “Add New“.

Thêm code mới trong WPCode
Thêm code mới trong WPCode

Điều này sẽ dẫn đến trang “Add Snippet“, nơi bạn có thể lựa chọn một đoạn code từ thư viện sẵn có hoặc thêm code tùy chỉnh của riêng mình bằng cách điều hướng đến tùy chọn “Add Your Custom Code (New Snippet)” và nhấp vào button “Use snippet“.

Thêm code tùy chỉnh trong WPCode
Thêm code tùy chỉnh trong WPCode

Hãy đặt một tiêu đề cho đoạn code và nhập code vào ô “Code Preview“. Bạn cần chọn đúng loại code từ danh sách thả xuống ở bên phải.

Chọn đúng loại code
Chọn đúng loại code

Tiếp theo, cuộn xuống phần “Insertion“. Tại đây, bạn có thể chọn phương pháp “Auto Insert” để tự động chèn và áp dụng code vào vị trí cụ thể trong WordPress như admin, frontend và nhiều hơn nữa. Nếu bạn không chắc, hãy giữ tùy chọn mặc định “Run Everywhere”.

Tùy chọn chèn trong WPCode
Tùy chọn chèn trong WPCode

Hoặc, bạn có thể chọn phương pháp “Shortcode“. Với phương pháp này, đoạn code sẽ không được chèn tự động. Thay vào đó, bạn sẽ nhận được một shortcode có thể chèn thủ công vào bất kỳ vị trí nào trên trang web bằng cách chuyển công tắc từ “Inactive” sang “Active” và nhấp vào button “Save Snippet” ở góc trên bên phải để lưu lại.

Kích hoạt và lưu mã
Kích hoạt và lưu mã

Body class mới sẽ xuất ra như sau: page-{slug}. Sử dụng class đó để ghi đè lên các kiểu mặc định và tùy chỉnh các phần tử cho từng trang cụ thể. Ví dụ, giả sử bạn muốn tạo kiểu cho các widget thanh bên, nhưng chỉ trên một trang có slug “education“. Trong trường hợp đó, bạn có thể thêm CSS như sau:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Ngoài những thông tin trong bài liên quan đến thêm page slug vào body class, có thể bạn quan tâm:

Lời kết

Vietnix hy vọng qua bài viết này bạn đã nắm được cách thêm page slug vào body class. Bạn cũng có thể tham khảo thêm các bài viết khác như 3 cách thêm trang hồ sơ tác giả tùy chỉnh vào WordPress đơn giản hoặc cách cho phép PHP vào posts và pages trong WordPress đơn giản, để hỗ trợ tối ưu website tốt hơn. Chúc bạn thành công!

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

5/5 - (164 bình chọn)

Hoàng Vui

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Bình luận