Bộ Mã Ngắn Tùy Chỉnh: Giải Pháp Tổ Chức Nội Dung Chuyên Nghiệp
Nội dung nhóm accordion tự động đóng nội dung khác
Nội dung nhóm accordion 01
✅ Câu hỏi 1
Nội dung đáp án cho câu 1.
❓ Câu hỏi 2
Nội dung đáp án cho câu 2.
⚠️Câu hỏi 3
Nội dung đáp án cho câu 3.
📚 Câu hỏi 4
Nội dung đáp án cho câu 1.
✓Câu hỏi 5
Nội dung đáp án cho câu 2.
➡️Câu hỏi 7
Nội dung đáp án cho câu 1.
Nội dung nhóm accordion 02
✅ Câu hỏi 1
Nội dung đáp án cho câu 1.
❓ Câu hỏi 2
Nội dung đáp án cho câu 2.
⚠️Câu hỏi 3
Nội dung đáp án cho câu 3.
📚 Câu hỏi 4
Nội dung đáp án cho câu 1.
✓Câu hỏi 5
Nội dung đáp án cho câu 2.
➡️Câu hỏi 7
Nội dung đáp án cho câu 1.
Nội dung này nằm ngoài nhóm accordion và sẽ không bị ảnh hưởng
✅ Khối ẩn hiện thường (Không dùng group)
Khối này sẽ không đóng bất kỳ khối nào khác.
❓ Khối ẩn hiện thường (Không dùng group)
Khối này sẽ không đóng bất kỳ khối nào khác.
⚠️Khối ẩn hiện thường (Không dùng group)
Khối này sẽ không đóng bất kỳ khối nào khác.
✓Khối ẩn hiện thường (Không dùng group)
Khối này sẽ không đóng bất kỳ khối nào khác.
➡️Khối ẩn hiện thường (Không dùng group)
Khối này sẽ không đóng bất kỳ khối nào khác.
Tạo khối Ẩn/Hiện đẹp mắt và Nhóm Accordion thông minh chỉ với một Plugin.
I. Tính Năng Cốt Lõi: ✅ Nhấp để xem chi tiết
(Ẩn/Hiện & Accordion)
Mã ngắn ✅ Nhấp để xem chi tiết
không chỉ giúp bạn ẩn nội dung để tối ưu hóa khả năng đọc (chỉ hiện những gì người dùng cần), mà còn tích hợp tính năng Accordion mạnh mẽ: khi mở một khối, các khối khác trong cùng nhóm sẽ tự động đóng lại.
1. Cú Pháp Cơ Bản Nhất
Sử dụng Khối Mã (Code Block) để hiển thị cú pháp sau:
Nội dung chi tiết (Có thể chứa hình ảnh, video, mã ngắn khác...)
✅ Nhấp để xem chi tiết
Mã ngắn không chỉ giúp bạn ẩn nội dung để tối ưu hóa khả năng đọc (chỉ hiện những gì người dùng cần), mà còn tích hợp tính năng Accordion mạnh mẽ: khi mở một khối, các khối khác trong cùng nhóm sẽ tự động đóng lại.✅ Nhấp để xem chi tiết
1. Cú Pháp Cơ Bản Nhất
Sử dụng Khối Mã (Code Block) để hiển thị cú pháp sau:
style="X": Chọn một trong 7 kiểu dáng có sẵn (từ 1 đến 7) để thay đổi giao diện.group="Tên_Nhóm": Bắt buộc để kích hoạt tính năng Accordion (tự động đóng mở).open="true": (Tùy chọn) Khối này sẽ mở sẵn khi trang tải.
2. Thử Nghiệm Tính Năng Nhóm (Accordion Demo)
Hãy nhấp vào các tiêu đề dưới đây để thấy tính năng Accordion hoạt động. Dù các khối có style khác nhau, chúng vẫn thuộc cùng một nhóm:
Sử dụng khối Mã để dán ví dụ sau:
❓ ❓ PHẦN 1: Câu Hỏi Thường Gặp (Mở sẵn)
Đây là nội dung trả lời cho câu hỏi đầu tiên. Nó được sử dụng Style 2 (Xanh Block) và được mở sẵn.
⚠️⚠️ PHẦN 2: LƯU Ý Quan Trọng Cần Đọc
Đây là khối Cảnh báo (Style 3). Khi bạn mở khối này, khối Câu hỏi 1 sẽ tự động đóng lại, giúp người dùng tập trung.
Xem mẫu
❓ PHẦN 1: Câu Hỏi Thường Gặp (Mở sẵn)
Đây là nội dung trả lời cho câu hỏi đầu tiên. Nó được sử dụng Style 2 (Xanh Block) và được mở sẵn.
⚠️ PHẦN 2: LƯU Ý Quan Trọng Cần Đọc
Đây là khối Cảnh báo (Style 3). Khi bạn mở khối này, khối Câu hỏi 1 sẽ tự động đóng lại, giúp người dùng tập trung.
II. Mẫu Nhóm Bài Viết Thực Tế (Case Study)
Bạn có thể ứng dụng tính năng Accordion để xây dựng các cấu trúc nội dung phức tạp như sau:
Mẫu A: Nhóm Luyện Dịch (Dịch Thuật và Đáp Án)
Mục đích: Giữ nguyên đoạn văn gốc, ẩn đi phần dịch và đáp án chi tiết.
Mã mẫu:
✅ ✅ ĐOẠN 1: Văn Bản Gốc & Yêu Cầu Dịch
<p><strong>Tiếng Trung:</strong> 努力学习是实现梦想的第一步。 (Nǔlì xuéxí shì shíxiàn mèngxiǎng de dì yī bù.)</p>
<p><strong>Yêu cầu:</strong> Dịch sang tiếng Việt và phân tích ngữ pháp câu này.</p>
✓✓ ĐÁP ÁN: Bản Dịch Chính Thức
<p><strong>Bản Dịch:</strong> Nỗ lực học tập là bước đầu tiên để hiện thực hóa ước mơ.</p>
➡️➡️ CHI TIẾT: Phân Tích Ngữ Pháp
<ul style="padding-left: 20px;">
<li><code>努力学习</code>: Cụm động từ làm chủ ngữ.</li>
<li><code>是</code>: Động từ chính (là).</li>
</ul>
Xem mẫu Mục đích: Chia nhỏ một quy trình dài thành các bước, chỉ cho phép người dùng mở xem từng bước một. Mã mẫu:✅ ✅ ĐOẠN 1: Văn Bản Gốc & Yêu Cầu Dịch
<p><strong>Tiếng Trung:</strong> 努力学习是实现梦想的第一步。 (Nǔlì xuéxí shì shíxiàn mèngxiǎng de dì yī bù.)</p>
<p><strong>Yêu cầu:</strong> Dịch sang tiếng Việt và phân tích ngữ pháp câu này.</p>✓✓ ĐÁP ÁN: Bản Dịch Chính Thức
<p><strong>Bản Dịch:</strong> Nỗ lực học tập là bước đầu tiên để hiện thực hóa ước mơ.</p>➡️➡️ CHI TIẾT: Phân Tích Ngữ Pháp
<ul style=”padding-left: 20px;”>
<li><code>努力学习</code>: Cụm động từ làm chủ ngữ.</li>
<li><code>是</code>: Động từ chính (là).</li>
Mẫu B: Nhóm Hướng Dẫn Kỹ Thuật (Phân Từng Bước)
📚 📚 BƯỚC 1: Chuẩn bị Mã Nguồn và Môi Trường
📚 📚 BƯỚC 2: Kích Hoạt Plugin
📚 📚 BƯỚC 3: Dán Shortcode vào Bài Viết
✅ Nhấp để xem chi tiết
Xem mẫu📚 📚 BƯỚC 1: Chuẩn bị Mã Nguồn và Môi Trường
<strong>Nội dung:</strong> Đảm bảo bạn đã tải file plugin lên thư mục /wp-content/plugins/.📚 📚 BƯỚC 2: Kích Hoạt Plugin
<strong>Nội dung:</strong> Truy cập Admin -> Plugins, tìm tên “Bộ Mã Ngắn Tùy Chỉnh” và nhấn Kích hoạt.📚 📚 BƯỚC 3: Dán Shortcode vào Bài Viết
<strong>Nội dung:</strong> Sử dụng Shortcode <code>✅ Nhấp để xem chi tiết
III. Lời Kết
Plugin này mang lại sự linh hoạt và tính thẩm mỹ cao cho nội dung của bạn. Hãy khai thác tối đa thuộc tính group và style để tạo ra những bài viết chi tiết, dễ đọc và giữ chân người dùng hiệu quả nhất.
