Perxel TinyMCE Accordion

Perxel TinyMCE Accordion là plugin mã nguồn mở giúp tạo accordion trong Classic Editor của WordPress chỉ với vài cú click. Nút Accordion có mặt ở mọi nơi dùng Classic Editor: trang soạn bài viết, widget, và cả trường WYSIWYG của ACF.

Bối cảnh

Muốn thêm một khối nội dung thu gọn như "Xem thêm" hay phần câu hỏi thường gặp trong Classic Editor, người viết thường phải tự gõ HTML hoặc cài cả một page builder. TinyMCE có sẵn plugin accordion, nhưng plugin này chỉ chạy từ TinyMCE 6, còn Classic Editor của WordPress vẫn đang dùng TinyMCE 4.

Perxel TinyMCE Accordion lấp khoảng trống đó bằng một nút bấm trên thanh công cụ. Không có trang cài đặt, không lưu gì vào database.

Tạo accordion ngay trong trình soạn thảo

Bấm nút Accordion trên thanh công cụ, điền tiêu đề và nội dung rồi chèn. Phần nội dung là một Classic Editor thu nhỏ nên bạn vẫn in đậm, chèn link hay tạo danh sách như bình thường.

Chèn một accordion từ thanh công cụ.

Bạn có thể chọn thẻ cho tiêu đề (div, p hoặc h1 đến h6) nếu muốn tiêu đề là một heading trong bài, và tick Open by default nếu muốn accordion mở sẵn khi tải trang.

Plugin chèn một shortcode [pxta_accordion] vào bài. Ở tab Visual, bạn thấy accordion y như trên frontend và bấm biểu tượng bút chì để sửa. Ở tab Text, bạn thấy shortcode gốc.

Hiển thị trên frontend

Accordion được dựng theo chuẩn accessibility, dùng tốt với bàn phím và trình đọc màn hình. CSS và JavaScript của plugin rất nhẹ và chỉ tải trên những trang có accordion.

Accordion với giao diện mặc định.

Nếu theme đã có jQuery, nội dung sẽ trượt mượt khi đóng mở. Nếu không có jQuery, hoặc người xem đã tắt hiệu ứng chuyển động trên thiết bị, accordion đóng mở tức thì.

Dùng shortcode trực tiếp

Shortcode dùng được ở bất cứ đâu WordPress xử lý shortcode: template, Shortcode block trong Block Editor, hay trang dựng bằng shortcode.

[pxta_accordion title="Chi phí thế nào?" title_tag="h3" open="1"]Hoàn toàn miễn phí.[/pxta_accordion]

Tùy chỉnh giao diện

Giao diện mặc định gọn gàng: nền xám nhạt, bo góc, mũi tên bên phải. Muốn đổi, bạn có ba cách:

• Viết CSS trong theme cho .pxta-accordion và .pxta-accordion__content. Accordion đang mở có thêm class pxta-accordion--open.
• Tắt hẳn CSS mặc định bằng filter pxta_accordion_load_css.
• Thay toàn bộ HTML bằng filter pxta_accordion_html.

Cài đặt và yêu cầu hệ thống

Plugin có trên WordPress.org. Vào Plugins, chọn Add New, tìm "Perxel TinyMCE Accordion" và kích hoạt. Không cần cấu hình gì thêm, mở một bài viết là thấy nút Accordion.

• WordPress 6.5 trở lên, PHP 7.4 trở lên.
• Đang dùng Classic Editor, ví dụ qua plugin Classic Editor.
• Với ACF, trường WYSIWYG cần đặt Toolbar là Full, vì toolbar Basic không cho thêm nút.

Khi gỡ plugin, các shortcode trong bài vẫn còn nguyên, chỉ không hiển thị thành accordion nữa.

Mã nguồn công khai trên GitHub, miễn phí và không quảng cáo. Plugin được xây trên WP Plugin Toolkit và thường đi kèm các dự án custom plugin tại Perxel.

Footnotes

1. Perxel TinyMCE Accordion trên WordPress.org
2. Perxel TinyMCE Accordion trên GitHub
3. TinyMCE Accordion plugin
4. Classic Editor trên WordPress.org
5. Advanced Custom Fields