1. Tính năng Demo trong Init Press là gì?
Demo Mode cho phép bạn chèn mã HTML, CSS và JavaScript theo từng bài viết riêng lẻ. HTML sẽ hiển thị đúng vị trí mong muốn trong nội dung bài viết, trong khi CSS và JavaScript được tải tự động ở cấp độ trang.
Cách tiếp cận này giúp bạn tạo demo trực quan, dễ kiểm soát và không làm bẩn code theme.
2. Cách kích hoạt chế độ Demo
Để kích hoạt tính năng Demo, bạn thực hiện các bước sau:
- Truy cập trang quản trị WordPress.
- Vào Init Press → Settings.
- Tìm tùy chọn Post Demo Mode.
- Bật tùy chọn này và lưu thay đổi.
Sau khi kích hoạt, hệ thống sẽ tự động hiển thị khu vực nhập demo trong màn hình chỉnh sửa bài viết.
3. Giao diện Demo trong màn hình chỉnh sửa bài viết
Khi mở hoặc tạo mới một bài viết, bạn sẽ thấy một metabox Demo xuất hiện bên dưới trình soạn thảo nội dung. Metabox này bao gồm ba trường riêng biệt:
- HTML: dùng để nhập cấu trúc giao diện demo.
- CSS: dùng để định nghĩa style cho demo.
- JavaScript: dùng để xử lý tương tác hoặc logic phía client.
Ba trường này hoạt động độc lập và chỉ áp dụng cho bài viết hiện tại.
4. Cách hiển thị Demo trong bài viết
Để hiển thị phần HTML demo ra ngoài frontend, bạn chỉ cần chèn shortcode sau vào nội dung bài viết:
[demo]Shortcode này sẽ in ra toàn bộ HTML đã nhập trong metabox Demo đúng tại vị trí bạn đặt shortcode.
5. Cách CSS và JavaScript được xử lý
CSS và JavaScript không phụ thuộc vào shortcode. Khi bài viết có dữ liệu CSS hoặc JavaScript, theme sẽ tự động xử lý như sau:
- CSS được chèn trực tiếp vào thẻ head của trang.
- JavaScript được chèn trước thẻ đóng body.
Cách làm này đảm bảo demo hoạt động ổn định, không gặp lỗi thứ tự tải tài nguyên và không ảnh hưởng đến các bài viết khác.
6. Một số lưu ý quan trọng khi sử dụng Demo Mode
Demo Mode cho phép chèn mã JavaScript thuần, vì vậy bạn nên sử dụng tính năng này một cách có kiểm soát. Tính năng này phù hợp nhất cho môi trường phát triển, trình diễn demo hoặc website kỹ thuật.
Không nên sử dụng cho nội dung do người dùng công khai nhập liệu.
7. Khi nào nên sử dụng tính năng Demo?
Bạn nên sử dụng Demo Mode trong các trường hợp sau:
- Viết bài hướng dẫn lập trình, UI hoặc JavaScript.
- Trình bày ví dụ tương tác trực tiếp trong bài viết.
- Tạo playground thử nghiệm nhanh mà không cần plugin bên ngoài.
- Demo tính năng cho khách hàng hoặc team nội bộ.
Tổng kết
Tính năng Demo trong theme Init Press mang lại sự linh hoạt cao cho nội dung kỹ thuật, giúp bạn trình bày ví dụ trực quan và chuyên nghiệp ngay trong bài viết. Với cách triển khai gọn gàng, tách biệt HTML, CSS và JavaScript, Demo Mode là một công cụ mạnh mẽ cho những website định hướng nội dung chuyên sâu.
Bình luận