Trong blog nếu không tùy biến thêm mặc đinh vào blog chỉ là 1 giao diện cho tất cả các hạng mục bên cạnh đó lại có khách hàng cần tùy biến giao diện Blog theo chuyên mục cho một vài chuyên mục đặc biệt

Ví dụ dưới đây An Nhiên đang làm giới thiệu phòng cho một Khách sạn theo kiểu 1 vài phòng đặc trưng mình tùy biến lại từ Blog , các bạn cùng theo dõi để hiểu cách làm nhé.

Cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css

Để dễ hình dung bạn xem qua các chuyên mục bên mình tùy biến nhé ( ở đây có 1 mục tin tức , 1 mục là dịch vụ ) có 2 giao diện khác nhau.

CÓ THỂ BẠN QUAN TÂM

Các bài viết về theme Flatsome Wordpess

2 giao diện trên hoàn toàn khác nhau đúng không, ở đây ở chuyên mục “Dịch Vụ” tớ bỏ luôn sidebar và thêm cái Liên hệ đặt phòng (cái này phải css lại đoạn hình đại diện).

Tùy biến giao diện Blog theo chuyên mục

Để check điều kiện hiển thị ta dùng dòng code này để kiểm tra:

Nếu như dòng code thì là thỏa màn điều kiện chuyên mục có url = dich-vu sẽ chạy điều kiện đúng.

Để áp dùng vào Function.php ( Vì sao phải là Function mà ko phải là trực tiếp file – Đơn giản là muốn đơn giản hóa việc chèn code vào file mà thao tác hoàn toàn qua 1 file sau này còn update hoặc fix )

Coppy code chèn vào file function.php của theme bạn đang dùng và paste đoạn code này vào nhé:

add_shortcode( ‘check’, ‘show_thong_tin’ );

function show_thong_tin() ?>

<?php if ( is_single() && in_category(‘dich-vu’) ) ?>

<style>

.entry-author, .post-sidebar, .danhmuc display:none;

.large-9

max-width: 100% !important;

flex-basis: 100% !important;

h1.entry-title

background-color: #f79542;

color: white;

padding: 10% 0;

text-align: -webkit-center;

margin-top: -20px;

margin-bottom: -15px;

.page-wrapper

padding-top: 30px;

padding-bottom: 30px;

background-color: #141414;

color: white;

</style>

<?php ?>

<?php

Chính dòng này add_action( ‘wp_footer’, ‘show_thong_tin’, 100 ) đã chèn code vào foot để chạy nhé.

Cái lợi của việc chèn này chính là không cần đụng bất kỳ tùy chỉnh nào thêm, tuy nhiên với tất cả các trang có url dịch vụ đều chạy theo đoạn code trên nhé các bạn.

Chèn vào Blog:

Như nói ở trên ta có short [check], bạn chỉ việc đểm short này nhét vào vị trí cần hiện thị là xong nhé.

—> Bạn vào Blog / tùy biến / html affter —> chèn [check] như hình nhé.

Trên đây là toàn bộ các bước hướng dẫn cách tùy biến giao diện Blog theo các chuyên mục khác nhau bằng CSS của GGADS.

Ngoài ra các bạn có thể tham khảo thêm 1 số hướng dẫn kỹ thuật về theme Flatsome WP

Chúc các bạn thành công nhé! Xin chân thành cảm ơn!