Plugin Mã Ngắn Ẩn Hiện Nội Dung

by daiphucminh

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 6

Nội dung đáp án cho câu 3.
➡️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 6

Nội dung đáp án cho câu 3.
➡️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.
➡️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...)
  • 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.
✨✨ PHẦN 3: Tổng Kết và Kết Luận
Khối cuối cùng này dùng Style 6 (Tím Material) để tạo sự khác biệt. Tất cả đều hoạt động mượt mà trong cùng nhóm.

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.
✨ PHẦN 3: Tổng Kết và Kết Luận

Khối cuối cùng này dùng Style 6 (Tím Material) để tạo sự khác biệt. Tất cả đều hoạt động mượt mà trong cùng nhóm.

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

✅ ✅ Đ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)

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:

📚 📚 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
</code> trong trình soạn thảo.

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
</code> trong trình soạn thảo.

 

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.

Related Posts

Leave a Comment

-
00:00
00:00
Update Required Flash plugin
-
00:00
00:00