CSS, Thủ thuật Ngày 06/05/2022 8357 lượt xem

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

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 , tuy nhiên khi khác…

Lê Anh ĐôngFlatsome trên Google News

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

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 , tuy nhiên khi khác 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ụ ở đây mình đang làm giới thiệu phòng cho Khách sạn dạng 1 vài phòng đặc trưng mình tùy biến lại từ Blog , Nếu anh em quan tâm thì xem cách tùy biến ở bên dưới 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 tứ tùy biến ( ở đây có 1 mục tìn tức , 1 mục là dịch vụ ) có 2 giao diện khác nhau

 

cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css
Category – cho bài đăng thương  trong bài cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css

 

category - cho bài đăng Dịch VỤ trong bài cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css
category – cho bài đăng Dịch VỤ trong bài cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css

 

Xem 2 giao diệ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 , tất nhiên 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 để kiểm tra

xem qua bài Thêm điều kiện hiển thị Widget trong WordPress

Như dòng code thì ta có thể hiểu 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à Dán đoạn code phía dưới vào

 

Với đoạn code trên nó thực hiện 2 việc

  1.  Tạo ra 1 short có tên là [check]
  2. Nếu url có “dich-vu” sẽ chạy đoạn css

Rồi xong việc tạo điều kiện chạy , đến đây xem như xong tuy nhiên nó chưa chạy , Mình có thể hook vào foot bằng dòng code sau để điều kiện trên chạy

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 – ko 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 đoạn code này

Hoặc chèn vào Blog

Như nói ở trên ta có short [check]

chỉ viẹc đểm short này nhét vào vị trí cần hiện thị là xong

bạn vào Blog / tùy biến / html affter

chèn [check] như hình

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

Xem qua demo tớ làm
Custom điều kiện : https://papahousetrian.com/villa-2-phong.html
Dạng blog news : https://papahousetrian.com/vui-tet-thieu-nhi-tai-vinpearl-resort-nha-trang.html

Lưu vào và xem kết quả nhé

Chúc các bạn thành công !

Điểm 5/5 - ( Có 7 bình chọn)

Có Nhận xét cho "Cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css"

  1. Pingback: Tạo nút coppy link và share link trong wordpress - FLATSOME - FREE EVERY THING

  2. Pingback: Cách tùy biến giao diện Blog theo chuyên mục khác nhau bằng css - FLATSOME - FREE EVERY THING

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Các dịch vụ của FLATSOME.XYZ