lựa chọn 1
Nếu [điều kiện 1, "màu nền. màu đỏ; . màu đỏ;", ""]
tùy chọn 2 [nếu bạn muốn tránh khoảng trắng trong lớp kiểu]
Nếu [điều kiện 1, "màu nền. màu đỏ; . màu đỏ;", ""] ]
Logic Hop cung cấp một số cách để triển khai logic có điều kiện để cá nhân hóa nội dung. CSS có điều kiện là một công cụ mạnh mẽ trong đó CSS được tạo động dựa trên hành động của từng người dùng
Logic Hop CSS có điều kiện được tạo trước khi tải trang và được lấy từ tên điều kiện bằng cách sử dụng sên WordPress
Ví dụ: nếu một điều kiện có tên Hôm nay là thứ sáu được đáp ứng, một lớp CSS sẽ được thêm vào thuộc tính lớp cơ thể
Và một biểu định kiểu CSS được tạo với các kiểu sau
.logichop-today-is-friday { display: block !important; }
.logichop-not-today-is-friday { display: none !important; }
Nếu Điều kiện không được đáp ứng, thuộc tính lớp cơ thể sẽ không chứa lớp CSS và biểu định kiểu CSS sẽ có các kiểu sau
.logichop-today-is-friday { display: none !important; }
.logichop-not-today-is-friday { display: block !important; }
Ghi chú. CSS có điều kiện có thể được sử dụng với các plugin bộ đệm. Các quy tắc CSS có điều kiện được tạo khi trang được tải và không được lưu vào bộ đệm
hướng dẫn
Kích hoạt CSS có điều kiện
- Bước 1
- Chọn một điều kiện hợp logic
- Bước 2
- Sao chép lớp CSS
- Bước 3
- Kiểm tra tùy chọn Kích hoạt CSS có điều kiện
- Bước 5
- Bấm Cập nhật để lưu điều kiện
Xin chúc mừng. Tình trạng của bạn bây giờ sẽ được đánh giá khi tải trang
Ghi chú. Tất cả các điều kiện kích hoạt CSS có điều kiện được đánh giá trước mỗi lần tải trang. Mặc dù Logic Hop cực kỳ nhanh, nhưng bạn chỉ nên bật CSS có điều kiện cho các điều kiện dựa vào chức năng này
Sử dụng Lớp cơ thể CSS
CSS Body Class được thêm vào thuộc tính body class khi điều kiện được đáp ứng. Theo mặc định, lớp được thêm vào khi trang được tải. Khi tính năng Theo dõi Javascript được bật, lớp sẽ được thêm qua jQuery sau khi tải trang. Điều này cho phép Lớp cơ thể CSS hoạt động với các plugin lưu vào bộ đệm trang
Tên lớp CSS được lấy từ tên điều kiện bằng cách sử dụng sên WordPress. Ví dụ: nếu điều kiện có tên Hôm nay là thứ Sáu được đáp ứng, sên sẽ được thêm vào trước lh- và được thêm vào thuộc tính lớp dưới dạng
When the condition is met, you can use CSS to style your page. To change the background of all
tags to red on Friday, you could use the following style:
.lh-today-is-friday h1 { background: red; }
.lh-today-is-friday h1 { background: red; }
Nhiều kiểu có thể được kết hợp cho các tùy chọn hiển thị phức tạp. Các lớp cơ thể CSS được thêm vào các lớp hiện có và không ngăn các lớp khác xuất hiện trong thẻ cơ thể
Sử dụng lớp CSS
Sử dụng lớp CSS được sao chép từ điều kiện của bạn, thêm nó vào thuộc tính lớp cho bất kỳ phần tử HTML nào
Happy Friday
Sử dụng CSS có điều kiện với Trình chỉnh sửa trang WordPress
Sử dụng CSS có điều kiện với Trình tạo trang chủ đề thanh lịch
Sử dụng lớp CSS NOT
Logic Không có điều kiện của Logic Hop cho phép bạn hiển thị nội dung khi điều kiện không được đáp ứng
CSS không có điều kiện hoạt động giống hệt như CSS có điều kiện, nhưng không được thêm vào lớp CSS
Ví dụ điều kiện Hôm nay là Thứ Sáu, nếu không được đáp ứng, sẽ xuất hiện dưới dạng lớp CSS sau
.logichop-not-today-is-friday { display: block !important; }
HTML sẽ được viết là
Sorry it's not Friday.
Sử dụng CSS không có điều kiện với Trình chỉnh sửa trang WordPress
Ví dụ CSS có điều kiện
Ghi chú. CSS không có điều kiện được tự động bật khi bạn bật CSS có điều kiện
Page Views CSS
Theo mặc định, Logic Hop theo dõi lượt xem trang của người dùng và xuất giá trị dưới dạng lớp CSS trong phần nội dung của mỗi trang, chẳng hạn như
Các lớp CSS này có thể được sử dụng với CSS tùy chỉnh của bạn để ẩn và hiển thị nội dung cho người dùng dựa trên số lần họ đã xem một trang cụ thể. Điều này là hoàn hảo cho các trang đích và nhắn tin cho khách truy cập lần đầu hoặc quay lại
Sử dụng CSS Lượt xem trang để hiển thị nội dung cho khách truy cập lần đầu
Mã HTML
Visible to first-time visitors
Mã CSS
.logichop-today-is-friday { display: block !important; }
.logichop-not-today-is-friday { display: none !important; }
0Sử dụng CSS Lượt xem trang để hiển thị nội dung cho khách truy cập lặp lại
Mã HTML
.logichop-today-is-friday { display: block !important; }
.logichop-not-today-is-friday { display: none !important; }
1Mã CSS
.logichop-today-is-friday { display: block !important; }
.logichop-not-today-is-friday { display: none !important; }
2Ghi chú. Nội dung CSS của Lượt xem trang sẽ không tạo ra kết quả đáng tin cậy nếu bộ nhớ đệm trang được bật. CSS Lượt xem trang sẽ không được hiển thị khi bật tính năng Theo dõi Javascript
Vô hiệu hóa CSS có điều kiện
CSS có điều kiện được bật theo mặc định. Khi CSS có điều kiện được tải, lõi WordPress được gọi và CSS được tạo
Nếu CSS có điều kiện không được sử dụng, chức năng này có thể bị vô hiệu hóa để ngăn tải bổ sung lõi WordPress và giúp tăng tốc độ một chút