Đôi khi bạn muốn tùy biến Genesis theo ý riêng của mình nhưng chưa biết làm sao cả!? Đôi khi muốn tùy biến một cái trang trong Genesis cho nó lung linh – khác biệt so với những trang khác trong trang?! Nếu như thế thì việc bạn cần làm đó là thêm một Custom Body Class vào Genesis child theme.
Việc sử dụng thêm Custom Body Class là sao?! Tức là mình sẽ thêm một class vào thẻ
của Genesis Framework để tạo ra sự khác biệt so với những trang còn lại trong child theme.
Để thực hiện được điều này bạn có thể sử dụng đoạn code bên dưới thêm vào tập tin functions.php để thêm một custom class vào thẻ body ở toàn bộ website:
https://gist.github.com/nhatdongnguyen/3a74e615f7943f3d0e79
Với đoạn mã bên trên thì class mình sử dụng là nhatdong-home trong tập tin style.css của child theme. Và kết quả của đoạn mã bên trên khi thể hiện ở dạng HTML là:
https://gist.github.com/nhatdongnguyen/4c6897ed121ed32cc973
Bạn có thể dễ dàng nhận ra trong thẻ body có hiện hữu class nhatdong-home đúng không nào – đó chính là Custom Body Class trong Genesis child theme.
Trong trường hợp bạn chỉ muốn sử dụng Custom Body Class ở chỉ một trang hay post nào đó trong Genesis thì sao?! Như mình đã nói trong các bài viết trước, mọi điều có thể thực hiện với hàm điều kiện Conditional Tag 🙂
Ví dụ bạn muốn thêm Custom Body Class vào có slug là lien-he (trang liên hệ) thì bạn có thể sử dụng đoạn mã bên dưới để thực hiện điều đó:
https://gist.github.com/nhatdongnguyen/4b716dce34aa4943734a
Tiếp theo, nếu bạn muốn tùy biến các class con trong Custom Body Class thì phải làm sao?! Dễ lắm bạn ơi, trong CSS3 có một cái cực kỳ ngon lành cành đó đó là dạng CSS Selector! Class chỉ thằng nào thì thằng đó lo mà thực thi những gì bạn đã sai bảo 🙂 Để chỉ đạo thì bạn có thể sử dụng mã như sau:
https://gist.github.com/nhatdongnguyen/f2d6a232d098a731931d
Chi tiết đoạn code trên là:
– Custom Body Class là nhatdong-home
– Thẻ H1 sẽ áp dụng trong trang có body class là nhatdong-home mà thôi
Dễ hiểu và quá chi là đơn giản bạn nhỉ 🙂
Chúc các bạn thành công và hẹn gặp lại ở bài viết sau với cách sử dụng custom body class cực nhanh trong Genesis child theme.
Leave a Reply